Versions Compared

Version Old Version 3 New Version Current
Changes made by

George Kim (Unlicensed)

George Kim (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

목차

Table of Contents

Pop UI 변경

...

minLevel1
maxLevel7
exclude목차

개요

본 가이드에서는 BuzzAd Android SDK에서 제공하는 UI의 구성을 지키며 디자인을 변경하기 위한 방법을 안내합니다. 추가적인 디자인 변경을 원하시는 경우에는 고급 설정에서 UI를 자체 구현하는 방법으로 진행할 수 있습니다.

만보기 아이콘 UI 디자인 변경

...

만보기 UI의 아이콘 및 색상을 변경할 수 있습니다.

  • 리워드 아이콘은 (ver 2.25.x) 9. 커스터마이징을 참고하여 BuzzvilRewardIcon은 테마를 적용하여 변경할 수 있습니다.

  • 색상은 PedometerConfig를 설정하여 변경할 수 있습니다. PedometerConfig는 PopConfig에 설정합니다

다음은 만보기 UI의 색상을 변경하는 예시입니다.

Code Block
languagejava
final PedometerConfig pedometerConfig = new PedometerConfig.Builder(context, "YOUR_PEDOMETER_UNIT_ID_PEDOMETER", "YOUR_PEDOMETER_REWARD_UNIT_ID_PEDOMETER_REWARD")
        .popIconProgressColor(ContextCompat.getColor(context, android.R.color.holoyour_red_darkcolor))
        .popIconProgressGuideColor(ContextCompat.getColor(context, android.R.color.holoyour_green_darkcolor))
        .popIconTextColor(ContextCompat.getColor(context, android.R.color.blackyour_color))
        .popIconBackgroundColor(ContextCompat.getColor(context, android.R.color.white)whiteyour_color)
        .build();

final PopConfig popConfig = new PopConfig.Builder(context, unitIdPop"YOUR_POP_UNIT_ID")  
        .pedometerConfig(pedometerConfig)
        .build();

헤더 커스터마이징

헤더 영역을 커스터마이징하는 방법은 2가지 있습니다.

  1. PedometerPopHeaderConfig를 이용하는 방법

  2. 새로 구현한 View를 사용하는 방법

...

  1. PedometerPopHeaderConfig를 이용하는 방법

...

메인 페이지의 헤더 UI 디자인 변경

...

만보기 메인페이지의 헤더 영역의 디자인을 변경할 수 있습니다. BuzzAd Android SDK에서 제공하는 기본 UI의 색상 및 아이콘을 PedometerPopHeaderConfig을 통해 변경합니다. 변경 가능한 부분은 위의 이미지를 통해 확인할 수 있습니다. PedometerPopHeaderConfig로는 변경할 수 없는 부부은 헤더 UI를 자체 구현하여 변경하실 수 있습니다.

다음은 PedometerPopHeaderConfig를 통한 UI 수정 예시입니다.

Code Block
languagejava
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();
    }
}
Code Block
languagejava
final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), "YOUR_POP_UNIT_ID")
        .feedHeaderViewAdapterClass(CustomPedometerPopHeaderViewAdapter.class)
        .build();

  1. 새로 구현한 View를 사용하는 방법

PedometerPopHeaderViewAdapter의 상속 클래스를 구현하여 새로 구현한 View(view_custom_pedometer_pop_header)를 설정합니다. 다음은 View를 새로 구현하여 사용하는 예시입니다.

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

만보기 정보를 조회하는 API

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

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

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

  • getStep(): 현재 걸음 수

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

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

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

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

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

  

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

Code Block
languagejava
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);

Pop 목표 달성 지면 UI 변경

...

Pop(만보기형) UI 는 아이콘 및 색상 및 문구을 변경할 수 있습니다.

...

리워드 아이콘은 (ver 2.25.x) 9. 커스터마이징을 참고하여 변경할 수 있습니다.

...

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

...

Pop 목표 달성 UI 변경

...

만보기 적립완료 UI 디자인 변경
...
목표 달성 후 사용자가 적립 완료 시 보여지는 UI 디자인을 변경할 수 있습니다. BuzzAd Android SDK에서 제공하는 기본 UI의 색상 및 아이콘을 PedometerConfig을 통해 변경합니다. 변경 가능한 부분은 위의 이미지를 통해 확인할 수 있습니다. 
다음은 PedometerConfig를 설정하여 색상 및 문구를 수정하는 예시입니다.
 Code Block
final PedometerConfig pedometerConfig = new PedometerConfig.Builder(context, "YOUR_PEDOMETER_UNIT_ID_PEDOMETER", "YOUR_PEDOMETER_REWARD_UNIT_ID_PEDOMETER_REWARD")
        .bottomSheetImageResId(R.drawable.sample_benefit_img_buzzvil_logo)
        .bottomSheetSuccessString(context.getString(R.string.benefit_pop_pedometer_bottomsheet_success))
        .bottomSheetInProgressString(context.getString(R.string.benefit_pop_pedometer_bottomsheet_in_progress))
        .build();

final PopConfig popConfig = new PopConfig.Builder(context, unitIdPop)  
        .pedometerConfig(pedometerConfig)
        .build();
...
히스토리 UI 
...
디자인 변경
...
히스토리페이지의 그래프 색상을 변경할 수 있습니다. 변경 가능한 부분은 위의 이미지를 통해 확인할 수 있습니다. 
다음은 PedometerConfig를 설정하여 색상 및 문구를 수정하는 예시입니다.
 Code Block
final PedometerConfig pedometerConfig = new PedometerConfig.Builder(context, "YOUR_PEDOMETER_UNIT_ID_PEDOMETER", "YOUR_PEDOMETER_REWARD_UNIT_ID_PEDOMETER_REWARD"")
        .stepHistoryPrimaryColor(ContextCompat.getColor(context, android.R.color.holo_red_light))
        .build();

final PopConfig popConfig = new PopConfig.Builder(context, unitIdPop)  
        .pedometerConfig(pedometerConfig)
        .build();
...