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

colour	Red
title	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

Status

colour	Red
title	Deprecated

popIconRewardIconResId

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

16

popIconBackgroundColor

Pedometer Pop Icon Background Color

Status

colour	Red
title	Deprecated

: 테마 적용을 권장합니다.

만보기 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 생성

Code Block

language	java

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

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

Code Block

language	java

final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        ...생략...
        .feedHeaderViewAdapterClass(CustomPedometerPopHeaderViewAdapter.class)
        .build();

Feed Header 뷰를 커스터마이징 뷰로 교체 하는 방법

PedometerPopHeaderViewAdapter 를 활용하여 PedometerPop Feed Header 영역에 custom view 를 사용할 수 있습니다.
아래 코드는 PedometerPopFeedHeader 에 custom view 를 사용하는 예시 코드입니다.

Code Block

language	java

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 에서 만보기 정보를 얻어올 때 사용 가능한 함수와 리스너는 다음과 같습니다.

만보기 페이지 네비게이션 API

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

만보기 정보를 조회하는 API

getMaxProgress(): Pedometer Header 상단에 표시되는 progress 의 최대 값 (10000)
getProgress(): Pedometer Header 상단에 표시되는 progress 의 현재 값 ((걸음 수/마일스톤 목표 걸음 수) * maxProgress)
isRewardable(): 적립가능 한 마일스톤이 있으면 true
getStep(): 현재 걸음 수
getMilestones(): 모든 마일스톤(List<Milestone>)

만보기 정보를 전달하는 리스너

onStepChanged: 걸음 수 가 변했을 때 호출
onMilestoneReached: 마일스톤 목표 달성 시 호출
onMilestoneUpdated: 마일스톤 정보가 변경 됐을 때 호출

Code Block

language	java

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

language	java

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)
        .setPopConfig(popConfig)
        .build();
BuzzAdBenefit.init(this, buzzAdBenefitConfig);

Version	Old Version 13	New Version 14
Changes made by	George Kim	hyo yee (Unlicensed)
Saved on	May 06, 2021	May 06, 2021

Versions Compared

Key

만보기 UI 커스터마이징

PedometerConfig

만보기 Feed Header 커스터마이징

컴포넌트 별 커스터마이징 방법

Feed Header 뷰를 커스터마이징 뷰로 교체 하는 방법

Content Comparison

Versions Compared

Key

만보기 UI 커스터마이징

PedometerConfig

만보기 Feed Header 커스터마이징

컴포넌트 별 커스터마이징 방법

Feed Header 뷰를 커스터마이징 뷰로 교체 하는 방법