/
Customize (PedometerPop)

Customize (PedometerPop)

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

PedometerConfig

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

 

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

No.

Parameter

Description

No.

Parameter

Description

 8

unitId

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

 11

rewardUnitId

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

 <그림 3>

pedometerIntroUnitId

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

1

toolbarTitle

Pedometer fragment 툴바에 표시되는 title

2

tutorialUrl

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

3

milestoneProgressGuideColor

Pedometer fragment 마일스톤 Progress Guide Color

4

milestoneProgressColor

Pedometer fragment 마일스톤 Progress Color

5

Deprecated milestoneRewardIconResId

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

6

rewardAvailableTextColor

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

7

rewardAvailableBackgroundResId

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

9

bottomSheetImageResId

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

10

bottomSheetSuccessString

Pedometer bottom sheet 적립 완료 string

10

bottomSheetInProgressString

Pedometer bottom sheet 적립 중 string

12

popIconProgressColor

Pedometer Pop Icon Progress Color

13

popIconProgressGuideColor

Pedometer Pop Icon Progress Guide Color

14

popIconTextColor

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

15

Deprecated popIconRewardIconResId

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

16

popIconBackgroundColor

Pedometer Pop Icon Background Color

Deprecated: 'BuzzAd Benefit 2 Android SDK 연동 가이드 - More details - BuzzAd Benefit Products에 테마를 적용'를 이용하는 것을 권장합니다.

 

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

 

PedometerPopHeaderViewAdapter

PedometerPopHeaderViewAdapter 를 확장하여 Pop Feed Header 영역을 customize 할 수 있습니다

 

Set CustomPedometerPopHeaderViewAdapter and PopHeaderConfig

Benefit SDK 2.17 이상

  1. PopConfig.feedHeaderViewAdapterClass 를 통해 CustomPedometerPopHeaderViewAdapter.class 를 사용하도록 설정

  2. CustomPedometerPopHeaderViewAdapter class 생성: PedometerPopHeaderViewAdapter 를 상속

  3. PopHeaderConfig 를 통해 customizing 설정

 

Benefit SDK 2.17 미만

  1. FeedConfig.feedHeaderViewAdapterClass 를 통해 CustomPedometerPopHeaderViewAdapter.class 를 사용하도록 설정

  2. CustomPedometerPopHeaderViewAdapter class 생성: PedometerPopHeaderViewAdapter 를 상속

  3. PopHeaderConfig 를 통해 customizing 설정

 

PedometerPopHeaderConfig

No.

Parameter

Description

No.

Parameter

Description

1

progressChartColor

Progress Color

2

progressChartGuideColor

Progress Guide Color

3

progressIconResId

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

4

descriptionIconResId

적립 중을 표시하는 Icon resource id

5

dashboardBoundaryImageResId

추가로 보여줄 Image resource id

6

stepCountDescription

몇 걸음 걸었는지 표시하는 String

7

inProgressDescription

적립 중일 때 표시하는 String

8

rewardableDescription

적립 완료 때 표시하는 String

 

Use custom view for PedometerPop Feed Header

PedometerPopHeaderViewAdapter 를 활용하여 PedometerPop Feed Header 영역에 custom view 를 사용할 수 있습니다.

 

적용방법

PedometerPopHeaderViewAdapter 를 상속받은 MyPedometerPopHeaderViewAdapter 를 생성. 아래 코드는 PedometerPopFeedHeader 에 custom view 를 사용하는 예시 코드입니다.

  • line 28: 사용할 view 를 설정합니다.

  • line 33: setPedometer 함수에서 각 뷰를 초기화하고 동작을 설정합니다.

    • line 46: navigateToPedometerHistory 를 호출하여 pedometerHistory fragment 로 화면 전환 합니다.

    • line 63: navigateToPedometer 를 호출하여 pedometer fragment 로 화면 전환 합니다.

  • line 132: getPopPedometerHeaderEventListener 를 구현하여 걸음 수가 변했을 때, 마일스톤 목표를 달성했을 때, 마일스톤 정보가 변했을 때 이벤트를 받아서 view 를 업데이트 할 수 있습니다.

MyPedometerPopHeaderViewAdapter 에서 Pedometer 정보를 얻어올 때 사용 가능한 함수와 리스너는 다음과 같습니다.

Pedometer 정보를 리턴하는 함수

  • navigateToPedometer(): Pedometer Fragment 로 화면 전환합니다.

  • navigateToPedometerHistory(): PedometerHistory Fragment 로 화면 전환합니다.

  • getMaxProgress(): Pedometer Header 상단에 표시되는 progress 의 최대 값 (10000)

  • getProgress(): Pedometer Header 상단에 표시되는 progress 의 현재 값 ((걸음 수/마일스톤 목표 걸음 수) * maxProgress)

  • isRewardable(): 적립가능 한 마일스톤이 있으면 true

  • getStep(): 현재 걸음 수

  • getMilestones(): 모든 마일스톤(List<Milestone>)

Pedometer 정보를 전달하는 리스너

  • onStepChanged: 걸음 수 가 변했을 때 호출

  • onMilestoneReached: 마일스톤 목표 달성 시 호출

  • onMilestoneUpdated: 마일스톤 정보가 변경 됐을 때 호출

  

BuzzAdBenefit 초기화 시, Pop 의 FeedConfig 에서 MyPedometerPopHeaderViewAdapter 사용하도록 설정

Related content

Customize (PedometerLite)
Customize (PedometerLite)
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
Pop 타입 (2.0): PedometerPop
Pop 타입 (2.0): PedometerPop
More like this