/
Customize (PedometerLite)

Customize (PedometerLite)

PedometerLite의 Customize 가이드 문서입니다.

PedometerConfig

PedometerConfig 를 통해서 아래 이미지의 내용(이미지, 컬러, 스트링)을 변경할 수 있습니다

No. 는 위 그림의 customize 가능한 영역의 숫자를 뜻합니다. unitId, rewardUnitId 는 필수고 나머지는 optioinal 입니다.

No.

Parameter

Description

No.

Parameter

Description

 14

unitId

Pedometer fragment 에서 사용하는 광고 Unit Id

 17

rewardUnitId

Pedometer bottom sheet(리워드 정보 화면)에서 사용하는 광고 Unit Id

 <그림 3>

pedometerIntroUnitId

적립 가능 할 때 Pedometer fragment 진입 시 사용하는 광고 Unit id

1

toolbarTitle

Pedometer fragment 툴바에 표시되는 title

2

tutorialUrl

Pedometer fragment 툴바의 튜토리얼 버튼을 눌렀을 때 이동할 url 주소

3

introImageResId

Pedometer fragment 만보기 소개 이미지

4

introTitle

Pedometer fragment 만보기 소개 Title

5

introDescription

Pedometer fragment 만보기 소개 Description

6

switchThumbActiveColor

Pedometer fragment 만보기 Toggle Thumb 활성화 컬러

7

switchThumbInactiveColor

Pedometer fragment 만보기 Toggle Thumb 비활성화 컬러

8

switchTrackInactiveColor

Pedometer fragment 만보기 Toggle Track 비활성화 컬러

9

milestoneProgressGuideColor

Pedometer fragment 마일스톤 Progress Guide Color

10

milestoneProgressColor

Pedometer fragment 마일스톤 Progress Color

11

milestoneRewardIconResId

Pedometer fragment 마일스톤 적립 가능할 때 보이는 Icon resource id

12

rewardAvailableTextColor

Pedometer fragment 마일스톤 적립 가능할 때 표시되는 Text Color

13

rewardAvailableBackgroundResId

Pedometer fragment 마일스톤 적립 가능할 때 표시되는 Text Background Resource Id

15

bottomSheetImageResId

Pedometer bottom sheet 마일스톤 적립 가능할 때 보이는 image resource id

16

bottomSheetSuccessString

Pedometer bottom sheet 적립 완료 string

16

bottomSheetInProgressString

Pedometer bottom sheet 적립 중 string

18

popIconProgressColor

Pedometer Pop Icon Progress Color

19

popIconProgressGuideColor

Pedometer Pop Icon Progress Guide Color

20

popIconTextColor

Pedometer Pop Icon 에 표시 되는 걸음 수 Text Color

21

popIconRewardIconResId

Pedometer Pop Icon 적립 가능할 때 보이는 Icon resource id

22

popIconBackgroundColor

Pedometer Pop Icon Background Color

 

Pedometer Preview Message

Pedometer Preview Message 는 Pop 에서 사용하는 Preview 와 동일한 기능이며, 일정 조건을 만족하면 Pedometer 관련 Preview 를 보여주는 기능입니다.

Pedometer preview 가 보이는 조건은 다음과 같습니다.

  • Milestone 의 목표 걸음 수의 일정 % 이상일 때: 목표 달성까지 %s 걸음 남았습니다, 힘내세요!

    • % 는 pedometerMessageViewVisibleThreshold 를 통해 설정 (ex 80f = 80%)

  • Milestone 목표 걸음 수 달성 시: 목표 달성! 지금 바로 %s 포인트 받아가세요!

그 외, Pedometer preview 가 보여지는 조건이 아닐 때는 Pop 에서 사용하는 Contents, Ad preview 가 보여지게 됩니다

 

적용방법

PedometerConfigpedometerMessageViewVisibleThreshold, pedometerMessageViewClass 를 설정합니다.

pedometerMessageViewVisibleThreshold: Milestone 의 targetStep 의 몇 % 일 때 pedometer preview 를 노출 할 것인지 설정합니다. 예를들어 Milestone의 target step 이 100 이고 pedometerMessageViewVisibleThreshold 를 80f 으로 설정하면 80 보 이상 일 때 노출됩니다.

pedometerMessageViewClass: PopPedometerMessageView 를 상속하는 pedometerMessageViewClass 를 설정합니다. custom class 를 사용하여 pedometer preview message 의 ui 를 변경할 수 있습니다.

 

기본 제공하는 View 를 사용할 경우

PedometerConfig 설정만으로 간단하게 동작합니다.

PedometerConfig .Builder(getApplicationContext(), UNIT_ID_PEDOMETER, UNIT_ID_PEDOMETER_REWARD) ... .pedometerMessageViewClass(DefaultPopPedometerMessageView.class) // 생략 가능 .pedometerMessageViewVisibleThreshold(80f) .build();

 

UI 를 변경할 경우

CustomPopPedometerMessageView 를 직접 만들어서 사용합니다.

  • line 9: 직접 구현한 layout 을 사용할 수 있습니다.

  • line 15: preview 가 그려질 때 updateView 가 호출 되며 UI 를 그릴 때 필요한 pedometer 정보들이 함께 넘어 옵니다.

    • currentStep: 현재 step

    • targetMilestone: 목표 Milestone

    • rewardableMilestone: 목표 달성한 Milestone

  • line 16: rewardableMilestone != null 일 경우 목표 달성으로 인해 포인트를 쌓을 수 있는 상태를 뜻합니다.

  • line 19: targetMilestone != null && currentStep < targetMilestone.getStep() 일 경우 걷기 진행 중을 뜻합니다.

  • line 28: pedometer preview 에 노출 될 text 를 return 합니다.

  • line 33: preview 가 노출 될 시간을 return 합니다.

view 에서 사용할 수 있는 정보는 updateView 함수를 통해 넘어오는데 다음과 같습니다.

public class CustomPopPedometerMessageView extends PopPedometerMessageView { private TextView textTitle; private TextView textDescription; private Context context; public CustomPopPedometerMessageView(@NotNull Context context) { super(context); this.context = context; LayoutInflater.from(context).inflate(R.layout.bz_view_pedometer_preview_message, this); textTitle = findViewById(R.id.textTitle); textDescription = findViewById(R.id.textDescription); } @Override public void updateView(long currentStep, @Nullable Milestone targetMilestone, @Nullable Milestone rewardableMilestone, int remainSeconds) { if (rewardableMilestone != null) { int reward = rewardableMilestone.getPoint(); textTitle.setText("rewardable " + reward); } else if (targetMilestone != null && currentStep < targetMilestone.getStep()) { textTitle.setText(currentStep + " / " + targetMilestone.getStep()); } textDescription.setText(context.getString(R.string.bz_pop_message_view_description, remainSeconds)); } @NonNull @Override public String getMessage() { return textTitle.getText().toString(); } @Override public int getDurationInSeconds() { return 20; } }

위에서 생성한 Class 를 PedometerConfig 에 설정합니다.

return new PedometerConfig .Builder(getApplicationContext(), UNIT_ID_PEDOMETER, UNIT_ID_PEDOMETER_REWARD) .pedometerMessageViewClass(CustomPopPedometerMessageView.class) .pedometerMessageViewVisibleThreshold(80f) .build();

 

Related content

Customize (PedometerPop)
Customize (PedometerPop)
More like this
6.3.2. 커스터마이징
6.3.2. 커스터마이징
More like this
Getting Started (PedometerLite)
Getting Started (PedometerLite)
More like this
Getting Started (PedometerPop)
Getting Started (PedometerPop)
More like this
Pop 타입 (2.0): PedometerLite
Pop 타입 (2.0): PedometerLite
More like this