Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 2 Next »

Pop UI 변경

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

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

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

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가지 있습니다.

  1. PedometerPopHeaderConfig를 이용하는 방법

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

  1. PedometerPopHeaderConfig를 이용하는 방법

PedometerPopHeaderConfig을 설정하여 헤더 영역의 UI을 변경할 수 있습니다.
PedometerPopHeaderViewAdapter의 상속 클래스를 구현하여 PedometerPopHeaderConfig를 설정합니다. 상속 클래스는 PopConfig의 feedHeaderViewAdapterClass로 설정합니다. 

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

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

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

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 사용하도록 설정

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

만보기 상세페이지 전이 API

아래 API를 호출하여 걸음수 히스토리 페이지 혹은 목표달성 페이지로 이동할 수 있습니다.

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

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

Pop 목표 달성 지면 UI 변경

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

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

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

final PedometerConfig pedometerConfig new PedometerConfig.Builder(context, "YOUR_UNIT_ID_PEDOMETER", "YOUR_UNIT_ID_PEDOMETER_REWARD")
        .pedometerIntroUnitId(App.unitIdPedometerPopIntro)
        .tutorialUrl("https://www.buzzvil.com/ko/main")
        .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 변경

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))
        .bottomSheetInProgressString(context.getString(R.string.benefit_pop_pedometer_bottomsheet_in_progress))
        .build();

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

Pop 히스토리 UI 변경

<< 이미지 >>

final PedometerConfig pedometerConfig new PedometerConfig.Builder(context, "YOUR_UNIT_ID_PEDOMETER", "YOUR_UNIT_ID_PEDOMETER_REWARD")
        .build();

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

  • No labels