Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
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
colourRed
titleDeprecated
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
colourRed
titleDeprecated
popIconRewardIconResId

...

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

...

16

...

popIconBackgroundColor

...

Pedometer Pop Icon Background Color

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

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

  1. PedometerPopHeaderConfig를 이용하는 방법

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

...

  1. PedometerPopHeaderConfig를 이용하는 방법

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

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

...

     

...

 

...

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

...

languagejava

...

this.context = context;
        View view =  

...

LayoutInflater.from(context).inflate(
       

...

         

...

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

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

Code Block
languagejava
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(): 적립가능 한 마일스톤이 있으면 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)
        ...
   @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(): 적립가능 한 마일스톤이 있으면 true

  • getStep(): 현재 걸음 수

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

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

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

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

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

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