Table of Contents |
---|
만보기 UI 커스터마이징
PedometerConfig
PedometerConfig
를 통해서 아래 이미지의 내용(이미지, 컬러, 스트링)을 변경할 수 있습니다
No. 는 위 그림의 customize 가능한 영역의 숫자를 뜻합니다. unitId
, rewardUnitId
는 필수고 나머지는 optioinal 입니다.
No. | Parameter | Description | ||||||
---|---|---|---|---|---|---|---|---|
8 |
| Pedometer fragment 에서 사용하는 광고 Unit Id | ||||||
11 |
| Pedometer bottom sheet(리워드 정보 화면)에서 사용하는 광고 Unit Id | ||||||
<그림 3> |
| 적립 가능 할 때 Pedometer fragment 진입 시 사용하는 광고 Unit id | ||||||
1 |
| Pedometer fragment 툴바에 표시되는 title | ||||||
2 |
| Pedometer fragment 툴바의 튜토리얼 버튼을 눌렀을 때 이동할 url 주소 | ||||||
3 |
| Pedometer fragment 마일스톤 Progress Guide Color | ||||||
4 |
| Pedometer fragment 마일스톤 Progress Color | ||||||
5 |
milestoneRewardIconResId | Pedometer fragment 마일스톤 적립 가능할 때 보이는 Icon resource id | ||||||
6 |
| Pedometer fragment 마일스톤 적립 가능할 때 표시되는 Text Color | ||||||
7 |
| Pedometer fragment 마일스톤 적립 가능할 때 표시되는 Text Background Resource Id | ||||||
9 |
| Pedometer bottom sheet 마일스톤 적립 가능할 때 보이는 image resource id | ||||||
10 |
| Pedometer bottom sheet 적립 완료 string | ||||||
10 |
| Pedometer bottom sheet 적립 중 string | ||||||
12 |
| Pedometer Pop Icon Progress Color | ||||||
13 |
| Pedometer Pop Icon Progress Guide Color | ||||||
14 |
| Pedometer Pop Icon 에 표시 되는 걸음 수 Text Color | ||||||
15 |
popIconRewardIconResId | Pedometer Pop Icon 적립 가능할 때 보이는 Icon resource id | ||||||
16 |
| Pedometer Pop Icon Background Color |
Status | ||||
---|---|---|---|---|
|
만보기 메시지(풍선메시지) 커스터마이징
일정 조건을 만족하면 만보기 관련 메시지를 보여주는 기능입니다.
보이는 조건은 다음과 같습니다.
Milestone 의 목표 걸음 수의 일정 % 이상일 때:
목표 달성까지 %s 걸음 남았습니다, 힘내세요!
% 는
pedometerMessageViewVisibleThreshold
를 통해 설정 (ex 80f = 80%)
Milestone 목표 걸음 수 달성 시:
목표 달성! 지금 바로 %s 포인트 받아가세요!
그 외, 보여지는 조건이 아닐 때는 Pop에서 관리되는 메시지가 보여지게 됩니다
적용방법
PedometerConfig
에 pedometerMessageViewVisibleThreshold
, pedometerMessageViewClass
를 설정합니다.
pedometerMessageViewVisibleThreshold
: Milestone 의 targetStep 의 몇 % 일 때 pedometer preview 를 노출 할 것인지 설정합니다. 예를들어 Milestone의 target step 이 100 이고 pedometerMessageViewVisibleThreshold
를 80f 으로 설정하면 80 보 이상 일 때 노출됩니다.
pedometerMessageViewClass
: PopPedometerMessageView
를 상속하는 pedometerMessageViewClass 를 설정합니다. custom class 를 사용하여 만보기 메시지(풍선메시지)의 ui 를 변경할 수 있습니다.
기본 제공하는 View 를 사용할 경우
PedometerConfig
설정만으로 간단하게 동작합니다.
Code Block | ||
---|---|---|
| ||
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 를 그릴 때 필요한 만보기 정보들이 함께 넘어 옵니다.
currentStep
: 현재 steptargetMilestone
: 목표 MilestonerewardableMilestone
: 목표 달성한 Milestone
line 16:
rewardableMilestone != null
일 경우 목표 달성으로 인해 포인트를 쌓을 수 있는 상태를 뜻합니다.line 19:
targetMilestone != null && currentStep < targetMilestone.getStep()
일 경우 걷기 진행 중을 뜻합니다.line 28: 만보기 메시지(풍선메시지)에 노출 될 text 를 return 합니다.
line 33: 노출 될 시간을 return 합니다.
view 에서 사용할 수 있는 정보는 updateView
함수를 통해 넘어오는데 다음과 같습니다.
Code Block | ||
---|---|---|
| ||
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
에 설정합니다.
Code Block | ||
---|---|---|
| ||
return new PedometerConfig .Builder(getApplicationContext(), UNIT_ID_PEDOMETER, UNIT_ID_PEDOMETER_REWARD) .pedometerMessageViewClass(CustomPopPedometerMessageView.class) .pedometerMessageViewVisibleThreshold(80f) .build(); |
만보기 Feed Header 커스터마이징
컴포넌트 별 커스터마이징 방법
PedometerPopHeaderViewAdapter
를 확장하여 Pop Feed Header 영역을 customize 할 수 있습니다
Set CustomPedometerPopHeaderViewAdapter
and PopHeaderConfig
PopConfig
.feedHeaderViewAdapterClass
를 통해CustomPedometerPopHeaderViewAdapter.class
를 사용하도록 설정CustomPedometerPopHeaderViewAdapter
class 생성:PedometerPopHeaderViewAdapter
를 상속PopHeaderConfig
를 통해 customizing 설정
Code Block | ||
---|---|---|
| ||
final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP) ...(생략)... .feedHeaderViewAdapterClass(CustomPedometerPopHeaderViewAdapter.class) .build(); public class CustomPedometerPopHeaderViewAdapter extends PedometerPopHeaderViewAdapter { @Override public PedometerPopHeaderConfig buildPopHeaderConfig(Context context) { return new PedometerPopHeaderConfig.Builder(context) .stepCountDescription(...) .progressChartColor(...) .progressChartGuideColor(...) .inProgressDescription(...) .rewardableDescription(...) .progressIconResId(...) .descriptionIconResId(...) .boundaryImageResId(...) .build(); } } |
PedometerPopHeaderConfig
No. | Parameter | Description |
---|---|---|
1 |
| Progress Color |
2 |
| Progress Guide Color |
3 |
| 적립 가능할 때 보이는 Icon resource id |
4 |
| 적립 중을 표시하는 Icon resource id |
5 |
| 추가로 보여줄 Image resource id |
6 |
| 몇 걸음 걸었는지 표시하는 String |
7 |
| 적립 중일 때 표시하는 String |
8 |
| 적립 완료 때 표시하는 String |
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 를 업데이트 할 수 있습니다.
Code Block | ||
---|---|---|
| ||
public class MyPedometerPopHeaderViewAdapter extends PedometerPopHeaderViewAdapter { private ViewGroup layoutSteps; private TextView pedometerStepCountDescription; private TextView textStepCount; private TextView pedometerInProgressDescription; private TextView pedometerRewardableDescription; private BuzzCircleProgressView buzzCircleProgressView; private ImageView buzzCircleProgressViewIcon; private ImageView pedometerInProgressDescriptionIcon; private ImageView pedometerDashboardBoundary; private ViewGroup pedometerDescription; private ViewGroup pedometerInProgress; private ViewGroup pedometerRewardable; private ViewGroup layoutPedometerProgress; private Context context; @NotNull @Override public View onCreateView(@NotNull Context context, @NotNull ViewGroup parent) { return super.onCreateView(context, parent); } @NotNull @Override public View createView(@NotNull Context context, @NotNull ViewGroup parent) { this.context = context; View view = LayoutInflater.from(context).inflate( R.layout.view_custom_pedometer_pop_header, parent, false ); setPedometer(context, parent, view); return view; } private void setPedometer( Context context, ViewGroup parent, View view ) { layoutSteps = view.findViewById(R.id.layoutSteps); layoutSteps.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { navigateToPedometerHistory(); } }); pedometerStepCountDescription = view.findViewById(R.id.pedometerStepCountDescription); textStepCount = view.findViewById(R.id.textStepCount); textStepCount.setText(BuzzAdPopPedometer.getStepCount() + ""); buzzCircleProgressView = view.findViewById(R.id.buzzCircleProgressView); buzzCircleProgressView.setProgressSettings(0, getMaxProgress()); buzzCircleProgressView.setProgress(getProgress()); buzzCircleProgressViewIcon = view.findViewById(R.id.buzzCircleProgressViewIcon); pedometerInProgressDescriptionIcon = view.findViewById(R.id.pedometerInProgressDescriptionIcon); pedometerDescription = view.findViewById(R.id.pedometerDescription); pedometerDescription.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { navigateToPedometer(); } }); pedometerInProgress = view.findViewById(R.id.pedometerInProgress); pedometerRewardable = view.findViewById(R.id.pedometerRewardable); pedometerInProgressDescription = view.findViewById(R.id.pedometerInProgressDescription); pedometerRewardableDescription = view.findViewById(R.id.pedometerRewardableDescription); pedometerDashboardBoundary = view.findViewById(R.id.pedometerDashboardBoundary); layoutPedometerProgress = view.findViewById(R.id.layoutPedometerProgress); updatePedometerStat(); } void updatePedometerStat() { if (isRewardable()) { pedometerInProgress.setVisibility(View.GONE); pedometerRewardable.setVisibility(View.VISIBLE); } else { pedometerInProgress.setVisibility(View.VISIBLE); pedometerRewardable.setVisibility(View.GONE); } buzzCircleProgressView.setProgress(getProgress()); textStepCount.setText(getStep() + ""); initPedometerProgressView(getMilestones(), getStep()); } private void initPedometerProgressView( List<Milestone> milestones, Long step ) { Context ctx = context; if (milestones != null && ctx != null) { layoutPedometerProgress.removeAllViews(); for (Milestone milestone : milestones) { PedometerProgressView pedometerProgressView = new PedometerProgressView(ctx); pedometerProgressView.setMilestone(milestone); layoutPedometerProgress.addView(pedometerProgressView); LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) pedometerProgressView.getLayoutParams(); layoutParams.width = dpToPx(ctx, 80f); layoutParams.topMargin = dpToPx(ctx, 12f); pedometerProgressView.setCount(step.intValue()); pedometerProgressView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(ctx, "milestone clicked", Toast.LENGTH_SHORT).show(); } }); } } } private int dpToPx(Context context, float dpValue) { float scale = context.getResources().getDisplayMetrics().density; return (int) (dpValue * scale + 0.5f); } @Override public void onBindView(@NotNull View view, int reward) { super.onBindView(view, reward); } @Override public void onDestroyView() { super.onDestroyView(); } @Nullable @Override public PopPedometerHeaderEventListener getPopPedometerHeaderEventListener() { return new PopPedometerHeaderEventListener() { @Override public void onStepChanged(long step) { updatePedometerStat(); } @Override public void onMilestoneReached(@NotNull List<Milestone> milestones) { updatePedometerStat(); } @Override public void onMilestoneUpdated(@NotNull List<Milestone> milestones) { updatePedometerStat(); } }; } } |
MyPedometerPopHeaderViewAdapter
에서 만보기 정보를 얻어올 때 사용 가능한 함수와 리스너는 다음과 같습니다.
만보기 정보를 리턴하는 함수
navigateToPedometer()
: Pedometer Fragment 로 화면 전환합니다.navigateToPedometerHistory()
: PedometerHistory Fragment 로 화면 전환합니다.getMaxProgress()
: Pedometer Header 상단에 표시되는 progress 의 최대 값 (10000)getProgress()
: Pedometer Header 상단에 표시되는 progress 의 현재 값 ((걸음 수/마일스톤 목표 걸음 수) * maxProgress)isRewardable()
: 적립가능 한 마일스톤이 있으면 truegetStep()
: 현재 걸음 수getMilestones()
: 모든 마일스톤(List<Milestone>
)
만보기 정보를 전달하는 리스너
onStepChanged
: 걸음 수 가 변했을 때 호출onMilestoneReached
: 마일스톤 목표 달성 시 호출onMilestoneUpdated
: 마일스톤 정보가 변경 됐을 때 호출
Code Block | ||
---|---|---|
| ||
abstract fun getPopPedometerHeaderEventListener(): PopPedometerHeaderEventListener? interface PopPedometerHeaderEventListener { fun onStepChanged(step: Long) fun onMilestoneReached(milestones: List<Milestone>) fun onMilestoneUpdated(milestones: List<Milestone>) } |
BuzzAdBenefit
초기화 시, Pop 의 FeedConfig 에서 MyPedometerPopHeaderViewAdapter
사용하도록 설정
Code Block | ||
---|---|---|
| ||
final FeedConfig feedConfig = new FeedConfig.Builder(getApplicationContext(), UNIT_ID_POP) ... .feedHeaderViewAdapterClass(MyPedometerPopHeaderViewAdapter.class) .build(); popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP) ... .feedConfig(feedConfig) .build(); final BuzzAdBenefitConfig buzzAdBenefitConfig = new BuzzAdBenefitConfig.Builder(this) .add(popConfig) .build(); BuzzAdBenefit.init(this, buzzAdBenefitConfig); |