| Table of Contents |
|---|
만보기 UI 커스터마이징
PedometerConfig
PedometerConfig 를 통해서 아래 이미지의 내용(이미지, 컬러, 텍스트)을 변경할 수 있습니다
...
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 설정하기
PedometerPopHeaderViewAdapter를 상속하는 CustomPedometerPopHeaderViewAdapter class 생성
...
| language | java |
|---|
...
목차
| Table of Contents | ||||||
|---|---|---|---|---|---|---|
|
개요
본 가이드에서는 BuzzAd Android SDK에서 제공하는 UI의 구성을 지키며 디자인을 변경하기 위한 방법을 안내합니다. 추가적인 디자인 변경을 원하시는 경우에는 고급 설정에서 UI를 자체 구현하는 방법으로 진행할 수 있습니다.
만보기 아이콘 UI 디자인 변경
...
만보기 UI의 아이콘 및 색상을 변경할 수 있습니다.
BuzzvilRewardIcon은 테마를 적용하여 변경할 수 있습니다.
색상은
PedometerConfig를 설정하여 변경할 수 있습니다.
다음은 만보기 UI의 색상을 변경하는 예시입니다.
| Code Block | ||
|---|---|---|
| ||
final PedometerConfig pedometerConfig = new PedometerConfig.Builder(context, "YOUR_PEDOMETER_UNIT_ID", "YOUR_PEDOMETER_REWARD_UNIT_ID") . |
...
popIconProgressColor( |
...
ContextCompat.getColor(context, android.R.color.your_color)) |
...
. |
...
popIconProgressGuideColor( |
...
ContextCompat.getColor(context, android.R.color.your_color)) |
...
.popIconTextColor(ContextCompat.getColor(context, android.R.color.your_color)) . |
...
popIconBackgroundColor( |
...
ContextCompat.getColor(context, android.R.color.whiteyour_color) |
...
.build(); |
...
|
...
|
...
PopConfig.feedHeaderViewAdapterClass 를 통해 CustomPedometerPopHeaderViewAdapter.class 를 사용하도록 설정
...
| language | java |
|---|
final PopConfig popConfig = new PopConfig.Builder( |
...
context, "YOUR_POP_UNIT_ID |
...
") . |
...
pedometerConfig( |
...
pedometerConfig) .build(); |
...
Feed Header 뷰를 커스터마이징 뷰로 교체 하는 방법
...
메인 페이지의 헤더 UI 디자인 변경
...
만보기 메인페이지의 헤더 영역의 디자인을 변경할 수 있습니다. BuzzAd Android SDK에서 제공하는 기본 UI의 색상 및 아이콘을 PedometerPopHeaderConfig을 통해 변경합니다. 변경 가능한 부분은 위의 이미지를 통해 확인할 수 있습니다. PedometerPopHeaderConfig로는 변경할 수 없는 부부은 헤더 UI를 자체 구현하여 변경하실 수 있습니다.
다음은 PedometerPopHeaderConfig를 통한 UI 수정 예시입니다.
| Code Block | ||
|---|---|---|
| ||
public class MyPedometerPopHeaderViewAdapterCustomPedometerPopHeaderViewAdapter 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 ViewPedometerPopHeaderConfig onCreateViewbuildPopHeaderConfig(@NotNull Context context, @NotNull ViewGroup parent) { return new super.onCreateView(context, parent); } @NotNull @Override public View createView(@NotNull Context context, @NotNull ViewGroup parent) { this.context = context;PedometerPopHeaderConfig.Builder(context) View view = LayoutInflater.fromstepCountDescription(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() {.progressChartColor(...) @Override public void onClick(View v) { navigateToPedometerHistory(); } }); pedometerStepCountDescription = view.findViewById(R.id.pedometerStepCountDescription); .progressChartGuideColor(...) textStepCount = view.findViewById(R.id.textStepCount); textStepCount.setTextinProgressDescription(BuzzAdPopPedometer.getStepCount() + ""); buzzCircleProgressView = view.findViewById(R.id.buzzCircleProgressView); buzzCircleProgressView.setProgressSettings(0, getMaxProgress()); buzzCircleProgressView.setProgress(getProgress()); buzzCircleProgressViewIcon = view.findViewById(R.id.buzzCircleProgressViewIcon); pedometerInProgressDescriptionIcon =.rewardableDescription(...) view.findViewById(R.id.pedometerInProgressDescriptionIcon); pedometerDescription = view.findViewById(R.id.pedometerDescription);progressIconResId(...) 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 =.descriptionIconResId(...) view.findViewByIdboundaryImageResId(R..id.pedometerInProgressDescription); pedometerRewardableDescription = view.findViewById(R.id.pedometerRewardableDescription.build(); } } |
| Code Block | ||
|---|---|---|
| ||
final PopConfig pedometerDashboardBoundarypopConfig = view.findViewById(R.id.pedometerDashboardBoundary); layoutPedometerProgress = view.findViewById(R.id.layoutPedometerProgress); updatePedometerStat(); } void updatePedometerStat() { if (isRewardable()) { new PopConfig.Builder(getApplicationContext(), "YOUR_POP_UNIT_ID") pedometerInProgress.setVisibilityfeedHeaderViewAdapterClass(ViewCustomPedometerPopHeaderViewAdapter.GONEclass); pedometerRewardable.setVisibilitybuild(View.VISIBLE); } else { pedometerInProgress.setVisibility(View.VISIBLE); pedometerRewardable.setVisibility(View.GONE); } buzzCircleProgressView.setProgress(getProgress()); textStepCount.setText(getStep() + "");); |
적립 UI 디자인 변경
...
적립페이지 UI 디자인을 변경할 수 있습니다. BuzzAd Android SDK에서 제공하는 기본 UI의 색상 및 아이콘을 PedometerConfig을 통해 변경합니다. 변경 가능한 부분은 위의 이미지를 통해 확인할 수 있습니다.
BuzzvilRewardIcon은 테마 적용을 참고하여 변경할 수 있습니다.
다음은
PedometerConfig를 설정하여 색상 및 문구를 수정하는 예시입니다.Code Block final PedometerConfig pedometerConfig = new PedometerConfig.Builder(context, "YOUR_PEDOMETER_UNIT_ID", "YOUR_PEDOMETER_REWARD_UNIT_ID")
...
.milestoneProgressGuideColor(ContextCompat.getColor(context, android.R.color.holo_green_dark))
...
...
.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();
만보기 적립완료 UI 디자인 변경
...
목표 달성 후 사용자가 적립 완료 시 보여지는 UI 디자인을 변경할 수 있습니다. BuzzAd Android SDK에서 제공하는 기본 UI의 색상 및 아이콘을 PedometerConfig을 통해 변경합니다. 변경 가능한 부분은 위의 이미지를 통해 확인할 수 있습니다.
다음은 PedometerConfig를 설정하여 색상 및 문구를 수정하는 예시입니다.
| Code Block |
|---|
final PedometerConfig pedometerConfig = new PedometerConfig.Builder(context, "YOUR_PEDOMETER_UNIT_ID", "YOUR_PEDOMETER_REWARD_UNIT_ID") } }); } } } private int dpToPx(Context context, float dpValue) { .bottomSheetImageResId(R.drawable.sample_benefit_img_buzzvil_logo) float scale = context.getResourcesbottomSheetSuccessString()context.getDisplayMetricsgetString().density; return (int) (dpValue * scale + 0.5f); } @Override public void onBindView(@NotNull View view, int reward) {R.string.benefit_pop_pedometer_bottomsheet_success)) super.onBindViewbuild(view, reward); final PopConfig popConfig }= @Override public void onDestroyView() { super.onDestroyView(); } @Nullable @Override public PopPedometerHeaderEventListener getPopPedometerHeaderEventListener() {new PopConfig.Builder(context, unitIdPop) return new PopPedometerHeaderEventListener.pedometerConfig(pedometerConfig) { @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 에서 만보기 정보를 얻어올 때 사용 가능한 함수와 리스너는 다음과 같습니다.
만보기 페이지 네비게이션 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.build(); |
히스토리 UI 디자인 변경
...
히스토리페이지의 그래프 색상을 변경할 수 있습니다. 변경 가능한 부분은 위의 이미지를 통해 확인할 수 있습니다.
다음은 PedometerConfig를 설정하여 색상 및 문구를 수정하는 예시입니다.
| Code Block |
|---|
final PedometerConfig pedometerConfig = new PedometerConfig.Builder(context, "YOUR_PEDOMETER_UNIT_ID", "YOUR_PEDOMETER_REWARD_UNIT_ID") ... .feedHeaderViewAdapterClass(MyPedometerPopHeaderViewAdapter.class) .build(); popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP) ... .feedConfig(feedConfigstepHistoryPrimaryColor(ContextCompat.getColor(context, android.R.color.holo_red_light)) .build(); final BuzzAdBenefitConfigPopConfig buzzAdBenefitConfigpopConfig = new BuzzAdBenefitConfigPopConfig.Builder(thiscontext, unitIdPop) .setPopConfigpedometerConfig(popConfigpedometerConfig) .build(); BuzzAdBenefit.init(this, buzzAdBenefitConfig); |