Table of Contents |
---|
...
Pop UI
...
변경
PedometerConfig
...
Pop(만보기형) UI 는 아이콘 및 색상을 변경할 수 있습니다
...
No. 는 위 그림의 커스터마이징 가능한 영역의 숫자를 뜻합니다. unitId
, rewardUnitId
는 필수이고 그 외는 선택사항입니다.
...
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
...
Status | ||||
---|---|---|---|---|
|
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
...
Status | ||||
---|---|---|---|---|
|
popIconRewardIconResId
...
Pedometer Pop Icon 적립 가능할 때 보이는 Icon resource id
...
16
...
popIconBackgroundColor
...
Pedometer Pop Icon Background Color
Status | ||||
---|---|---|---|---|
|
만보기 Feed Header 커스터마이징
컴포넌트 별 커스터마이징 방법
PedometerPopHeaderViewAdapter
를 확장하여 Pop Feed Header 영역을 customize 할 수 있습니다
...
PedometerPopHeaderConfig
...
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
CustomPedometerPopHeaderViewAdapter 및 PopConfig
설정하기
...
.
리워드 아이콘은 (ver 2.25.x) 9. 커스터마이징을 참고하여 변경할 수 있습니다.
색상은
PedometerConfig
를 설정하여 변경할 수 있습니다.PedometerConfig
는 PopConfig에 설정합니다.
Code Block |
---|
final PedometerConfig pedometerConfig new PedometerConfig.Builder(context, "YOUR_UNIT_ID_PEDOMETER", "YOUR_UNIT_ID_PEDOMETER_REWARD")
.popIconProgressColor(ContextCompat.getColor(context, android.R.color.holo_red_dark))
.popIconProgressGuideColor(ContextCompat.getColor(context, android.R.color.holo_green_dark))
.popIconTextColor(ContextCompat.getColor(context, android.R.color.black))
.popIconBackgroundColor(ContextCompat.getColor(context, android.R.color.white))
.build();
final PopConfig popConfig = new PopConfig.Builder(context, unitIdPop)
.pedometerConfig(pedometerConfig)
.build(); |
헤더 커스터마이징
헤더 영역을 커스터마이징하는 방법은 2가지 있습니다.
PedometerPopHeaderConfig를 이용하는 방법
새로 구현한 View를 사용하는 방법
...
PedometerPopHeaderConfig를 이용하는 방법
PedometerPopHeaderConfig
을 설정하여 헤더 영역의 UI을 변경할 수 있습니다.
PedometerPopHeaderViewAdapter의 상속 클래스를 구현하여 PedometerPopHeaderConfig
를 설정합니다. 상속 클래스는 PopConfig의 feedHeaderViewAdapterClass로 설정합니다.
Code Block | ||
---|---|---|
| ||
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();
}
}
final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), "YOUR_POP_UNIT_ID")
.feedHeaderViewAdapterClass(CustomPedometerPopHeaderViewAdapter.class)
.build(); |
새로 구현한 View를 사용하는 방법
PedometerPopHeaderViewAdapter의 상속 클래스를 구현하여 새로 구현한 View(view_custom_pedometer_pop_header
)를 설정합니다. 다음은 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) { |
...
|
...
|
...
PopConfig
.feedHeaderViewAdapterClass
를 통해 CustomPedometerPopHeaderViewAdapter.class
를 사용하도록 설정
...
language | java |
---|
...
this.context = context; View view = |
...
LayoutInflater.from(context).inflate( |
...
|
...
Feed Header 뷰를 커스터마이징 뷰로 교체 하는 방법
PedometerPopHeaderViewAdapter
를 활용하여 PedometerPop Feed Header 영역에 custom view 를 사용할 수 있습니다.
아래 코드는 PedometerPopFeedHeader 에 custom view 를 사용하는 예시 코드입니다.
Code Block | ||
---|---|---|
| ||
public class MyPedometerPopHeaderViewAdapter extends PedometerPopHeaderViewAdapter {R.layout.view_custom_pedometer_pop_header, private ViewGroup layoutSteps; parent, private TextView pedometerStepCountDescription; private TextView textStepCount; privatefalse TextView pedometerInProgressDescription; private TextView pedometerRewardableDescription); private BuzzCircleProgressView buzzCircleProgressView;setPedometer(context, parent, view); private ImageViewreturn buzzCircleProgressViewIconview; private ImageView} pedometerInProgressDescriptionIcon; private ImageViewvoid pedometerDashboardBoundary;setPedometer( private ViewGroup pedometerDescription; private ViewGroupContext pedometerInProgress;context, private ViewGroup pedometerRewardable; private ViewGroup parent, layoutPedometerProgress; private Context context; View @NotNullview @Override) { public View onCreateView(@NotNull Context context, @NotNulllayoutSteps ViewGroup parent) {= view.findViewById(R.id.layoutSteps); return super.onCreateView(context, parent);layoutSteps.setOnClickListener(new View.OnClickListener() { } @NotNull @Override @Override public View createView(@NotNull Context context,public @NotNullvoid ViewGrouponClick(View parentv) { this.context = context; navigateToPedometerHistory(); View view = LayoutInflater.from(context).inflate( } }); R.layout.view_custom_pedometer_pop_header, pedometerStepCountDescription = parent, view.findViewById(R.id.pedometerStepCountDescription); textStepCount = view.findViewById(R.id.textStepCount); false textStepCount.setText(BuzzAdPopPedometer.getStepCount() + ""); setPedometer(context, parent, viewbuzzCircleProgressView = view.findViewById(R.id.buzzCircleProgressView); return viewbuzzCircleProgressView.setProgressSettings(0, getMaxProgress()); } private void setPedometer(buzzCircleProgressView.setProgress(getProgress()); buzzCircleProgressViewIcon Context context,= view.findViewById(R.id.buzzCircleProgressViewIcon); pedometerInProgressDescriptionIcon = ViewGroup parent, View view ) {.findViewById(R.id.pedometerInProgressDescriptionIcon); pedometerDescription layoutSteps = view.findViewById(R.id.layoutStepspedometerDescription); layoutStepspedometerDescription.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { navigateToPedometer(); navigateToPedometerHistory( } }); pedometerInProgress = view.findViewById(R.id.pedometerInProgress); } pedometerRewardable }= view.findViewById(R.id.pedometerRewardable); pedometerStepCountDescriptionpedometerInProgressDescription = view.findViewById(R.id.pedometerStepCountDescriptionpedometerInProgressDescription); textStepCountpedometerRewardableDescription = view.findViewById(R.id.textStepCount); textStepCountview.setTextfindViewById(BuzzAdPopPedometer.getStepCount() + ""R.id.pedometerRewardableDescription); buzzCircleProgressViewpedometerDashboardBoundary = view.findViewById(R.id.buzzCircleProgressViewpedometerDashboardBoundary); layoutPedometerProgress = buzzCircleProgressViewview.setProgressSettings(0, getMaxProgress())findViewById(R.id.layoutPedometerProgress); buzzCircleProgressView.setProgress(getProgressupdatePedometerStat()); } buzzCircleProgressViewIcon =void view.findViewById(R.id.buzzCircleProgressViewIcon); updatePedometerStat() { pedometerInProgressDescriptionIcon = if (isRewardable()) { viewpedometerInProgress.findViewByIdsetVisibility(RView.id.pedometerInProgressDescriptionIconGONE); pedometerDescription = viewpedometerRewardable.findViewByIdsetVisibility(RView.id.pedometerDescriptionVISIBLE); pedometerDescription.setOnClickListener(new View.OnClickListener()} else { @OverridepedometerInProgress.setVisibility(View.VISIBLE); pedometerRewardable.setVisibility(View.GONE); public void onClick(View v)} { buzzCircleProgressView.setProgress(getProgress()); navigateToPedometertextStepCount.setText(getStep(); + ""); initPedometerProgressView(getMilestones(), getStep()); } } }); private void initPedometerProgressView( pedometerInProgress = view.findViewById(R.id.pedometerInProgress); List<Milestone> milestones, pedometerRewardable = view.findViewById(R.id.pedometerRewardable); Long pedometerInProgressDescriptionstep = ) { Context ctx view.findViewById(R.id.pedometerInProgressDescription);= context; if pedometerRewardableDescription(milestones != null && ctx != null) { view.findViewById(R.id.pedometerRewardableDescription);layoutPedometerProgress.removeAllViews(); pedometerDashboardBoundary =for view.findViewById(R.id.pedometerDashboardBoundary);(Milestone milestone : milestones) { layoutPedometerProgress = view.findViewById(R.id.layoutPedometerProgress); PedometerProgressView pedometerProgressView = new updatePedometerStatPedometerProgressView(ctx); } void updatePedometerStatpedometerProgressView.setMilestone(milestone); { if (isRewardable()) { layoutPedometerProgress.addView(pedometerProgressView); pedometerInProgress.setVisibility(View.GONE); LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) pedometerRewardablepedometerProgressView.setVisibilitygetLayoutParams(View.VISIBLE); } else { layoutParams.width = pedometerInProgress.setVisibility(View.VISIBLE);dpToPx(ctx, 80f); pedometerRewardable.setVisibility(View.GONElayoutParams.topMargin = dpToPx(ctx, 12f); } buzzCircleProgressViewpedometerProgressView.setProgresssetCount(getProgressstep.intValue()); textStepCountpedometerProgressView.setText(getStepsetOnClickListener(new View.OnClickListener() { + ""); initPedometerProgressView(getMilestones(), getStep()); } @Override private void initPedometerProgressView( List<Milestone> milestones, public void onClick(View v) { Long step ) { Context Toast.makeText(ctx = context;, "milestone clicked", Toast.LENGTH_SHORT).show(); if (milestones != null && ctx != null) {} layoutPedometerProgress.removeAllViews(); }); for (Milestone milestone : milestones)} { } } PedometerProgressView pedometerProgressView =private newint PedometerProgressViewdpToPx(ctx);Context context, float dpValue) { float scale pedometerProgressView.setMilestone(milestone)= context.getResources().getDisplayMetrics().density; return (int) (dpValue * scale + layoutPedometerProgress.addView(pedometerProgressView0.5f); } @Override public LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) pedometerProgressView.getLayoutParams(); void onBindView(@NotNull View view, int reward) { layoutParams.width = dpToPx(ctx, 80fsuper.onBindView(view, reward); } @Override public layoutParams.topMargin = dpToPx(ctx, 12f); void onDestroyView() { super.onDestroyView(); pedometerProgressView.setCount(step.intValue());} @Nullable @Override public pedometerProgressView.setOnClickListener(new View.OnClickListenerPopPedometerHeaderEventListener getPopPedometerHeaderEventListener() { return new PopPedometerHeaderEventListener() { @Override @Override public void onClickonStepChanged(Viewlong vstep) { updatePedometerStat(); Toast.makeText(ctx, "milestone clicked", Toast.LENGTH_SHORT).show(); } }@Override public void onMilestoneReached(@NotNull List<Milestone> }milestones); { } }updatePedometerStat(); } private int dpToPx(Context} context, float dpValue) { float scale@Override = context.getResources().getDisplayMetrics().density; return (int) (dpValuepublic *void scaleonMilestoneUpdated(@NotNull +List<Milestone> 0.5fmilestones); { } @Override public void onBindViewupdatePedometerStat(@NotNull); View view, int reward) { } super.onBindView(view, reward); } }; @Override public void onDestroyView() { super.onDestroyView(); } @Nullable @Override public PopPedometerHeaderEventListener getPopPedometerHeaderEventListener() { return new PopPedometerHeaderEventListener() {} } |
만보기 정보를 조회하는 API
getMaxProgress()
: Pedometer Header 상단에 표시되는 progress 의 최대 값 (10000)getProgress()
: Pedometer Header 상단에 표시되는 progress 의 현재 값 ((걸음 수/마일스톤 목표 걸음 수) * maxProgress)isRewardable()
: 적립가능 한 마일스톤이 있으면 truegetStep()
: 현재 걸음 수getMilestones()
: 모든 마일스톤(List<Milestone>
)
만보기 정보를 전달하는 리스너
onStepChanged
: 걸음 수 가 변했을 때 호출onMilestoneReached
: 마일스톤 목표 달성 시 호출onMilestoneUpdated
: 마일스톤 정보가 변경 됐을 때 호출
BuzzAdBenefit
초기화 시, Pop 의 FeedConfig 에서 MyPedometerPopHeaderViewAdapter
사용하도록 설정
Code Block | ||
---|---|---|
| ||
final FeedConfig feedConfig = new FeedConfig.Builder(getApplicationContext(), UNIT_ID_POP) ... @Override public void onStepChanged(long step) { .feedHeaderViewAdapterClass(MyPedometerPopHeaderViewAdapter.class) .build(); popConfig = new updatePedometerStat();PopConfig.Builder(getApplicationContext(), UNIT_ID_POP) ... } .feedConfig(feedConfig) @Override.build(); final BuzzAdBenefitConfig buzzAdBenefitConfig = new BuzzAdBenefitConfig.Builder(this) public void onMilestoneReached(@NotNull List<Milestone> milestones) {.setPopConfig(popConfig) .build(); updatePedometerStat(); } @Override public void onMilestoneUpdated(@NotNull List<Milestone> milestones) { BuzzAdBenefit.init(this, buzzAdBenefitConfig); |
만보기 상세페이지 전이 API
...
아래 API를 호출하여 걸음수 히스토리 페이지 혹은 목표달성 페이지로 이동할 수 있습니다.
navigateToPedometer()
: Pedometer Fragment 로 화면 전환합니다.navigateToPedometerHistory()
: PedometerHistory Fragment 로 화면 전환합니다.
Pop 목표 달성 지면 UI 변경
...
Pop(만보기형) UI 는 아이콘 및 색상 및 문구을 변경할 수 있습니다.
리워드 아이콘은 (ver 2.25.x) 9. 커스터마이징을 참고하여 변경할 수 있습니다.
색상 및 문구는
PedometerConfig
를 설정하여 변경할 수 있습니다.PedometerConfig
는 PopConfig에 설정합니다.
Code Block |
---|
final PedometerConfig pedometerConfig new PedometerConfig.Builder(context, "YOUR_UNIT_ID_PEDOMETER", "YOUR_UNIT_ID_PEDOMETER_REWARD") .pedometerIntroUnitId(App.unitIdPedometerPopIntro) updatePedometerStat(); .tutorialUrl("https://www.buzzvil.com/ko/main") } .milestoneProgressGuideColor(ContextCompat.getColor(context, android.R.color.holo_green_dark)) }; } } |
MyPedometerPopHeaderViewAdapter
에서 만보기 정보를 얻어올 때 사용 가능한 함수와 리스너는 다음과 같습니다.
만보기 페이지 네비게이션 API
...
navigateToPedometer()
: Pedometer Fragment 로 화면 전환합니다.navigateToPedometerHistory()
: PedometerHistory Fragment 로 화면 전환합니다.
만보기 정보를 조회하는 API
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.milestoneProgressColor(ContextCompat.getColor(context, android.R.color.holo_red_dark)) .rewardAvailableTextColor(ContextCompat.getColor(context, R.color.bzv_black_100)) .rewardAvailableBackgroundResId(R.drawable.benefit_pop_ic_red_notification_badge) .build(); final PopConfig popConfig = new PopConfig.Builder(context, unitIdPop) .pedometerConfig(pedometerConfig) .build(); |
Pop 목표 달성 UI 변경
...
Code Block |
---|
final PedometerConfig pedometerConfig new PedometerConfig.Builder(context, "YOUR_UNIT_ID_PEDOMETER", "YOUR_UNIT_ID_PEDOMETER_REWARD") .bottomSheetImageResId(R.drawable.sample_benefit_img_buzzvil_logo) .bottomSheetSuccessString(context.getString(R.string.benefit_pop_pedometer_bottomsheet_success)) .feedHeaderViewAdapterClass(MyPedometerPopHeaderViewAdapter.classbottomSheetInProgressString(context.getString(R.string.benefit_pop_pedometer_bottomsheet_in_progress)) .build(); final PopConfig popConfig = new PopConfig.Builder(getApplicationContext()context, UNIT_ID_POP)unitIdPop) ...pedometerConfig(pedometerConfig) .build(); |
Pop 히스토리 UI 변경
<< 이미지 >>
Code Block |
---|
final PedometerConfig pedometerConfig new PedometerConfig.feedConfig(feedConfigBuilder(context, "YOUR_UNIT_ID_PEDOMETER", "YOUR_UNIT_ID_PEDOMETER_REWARD") .build(); final BuzzAdBenefitConfigPopConfig buzzAdBenefitConfigpopConfig = new BuzzAdBenefitConfigPopConfig.Builder(thiscontext, unitIdPop) .setPopConfigpedometerConfig(popConfigpedometerConfig) .build(); BuzzAdBenefit.init(this, buzzAdBenefitConfig); |