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();