PedometerPop의 Customize 가이드 문서입니다.

...

PedometerConfig

PedometerConfig 를 통해서 아래 이미지의 내용(이미지, 컬러, 스트링)을 변경할 수 있습니다

...

PedometerPopHeaderViewAdapter

PedometerPopHeaderViewAdapter 를 확장하여 Pop Feed Header 영역을 customize 할 수 있습니다

...

Set CustomPedometerPopHeaderViewAdapter and PopHeaderConfig

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

2. CustomPedometerPopHeaderViewAdapter class 생성: PedometerPopHeaderViewAdapter 를 상속

3. PopHeaderConfig 를 통해 customizing 설정

...

...

Pedometer Preview Message

Pedometer Preview Message 는 Pop 에서 사용하는 Preview 와 동일한 기능이며, 일정 조건을 만족하면 Pedometer 관련 Preview 를 보여주는 기능입니다.

Pedometer preview 가 보이는 조건은 다음과 같습니다.

...

• Milestone 의 목표 걸음 수의 일정 % 이상일 때: 목표 달성까지 %s 걸음 남았습니다, 힘내세요!

  • % 는 pedometerMessageViewVisibleThreshold 를 통해 설정 (ex 80f = 80%)

...

• Milestone 목표 걸음 수 달성 시: 목표 달성! 지금 바로 %s 포인트 받아가세요!

그 외, Pedometer preview 가 보여지는 조건이 아닐 때는 Pop 에서 사용하는 Contents, Ad preview 가 보여지게 됩니다

적용방법

PedometerConfig 에 pedometerMessageViewVisibleThreshold, pedometerMessageViewClass 를 설정합니다.

pedometerMessageViewVisibleThreshold: Milestone 의 targetStep 의 몇 % 일 때 pedometer preview 를 노출 할 것인지 설정합니다. 예를들어 Milestone의 target step 이 100 이고 pedometerMessageViewVisibleThreshold 를 80f 으로 설정하면 80 보 이상 일 때 노출됩니다.

pedometerMessageViewClass: PopPedometerMessageView 를 상속하는 pedometerMessageViewClass 를 설정합니다. custom class 를 사용하여 pedometer preview message 의 ui 를 변경할 수 있습니다.

기본 제공하는 View 를 사용할 경우

PedometerConfig 설정만으로 간단하게 동작합니다.

PedometerConfig
        .buildBuilder(getApplicationContext();

public class CustomPedometerPopHeaderViewAdapter extends PedometerPopHeaderViewAdapter {, UNIT_ID_PEDOMETER, UNIT_ID_PEDOMETER_REWARD)
        ...
@Override      public PedometerPopHeaderConfig buildPopHeaderConfig(Context context.pedometerMessageViewClass(DefaultPopPedometerMessageView.class) {// 생략 가능
      return new PedometerPopHeaderConfig.BuilderpedometerMessageViewVisibleThreshold(context80f)
                .stepCountDescription()
                .progressChartColor()
                .progressChartGuideColor()
                .inProgressDescription()
                .rewardableDescription()
                .progressIconResId()
                .descriptionIconResId()
                .boundaryImageResId()
                .build();
    }
}

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

Pedometer Preview Message

Pedometer Preview Message 는 Pop 에서 사용하는 Preview 와 동일한 기능이며, 일정 조건을 만족하면 Pedometer 관련 Preview 를 보여주는 기능입니다.

Pedometer preview 가 보이는 조건은 다음과 같습니다.

...

• Milestone 의 목표 걸음 수의 일정 % 이상일 때: 목표 달성까지 %s 걸음 남았습니다, 힘내세요!

  • % 는 pedometerMessageViewVisibleThreshold 를 통해 설정 (ex 80f = 80%)

...

• Milestone 목표 걸음 수 달성 시: 목표 달성! 지금 바로 %s 포인트 받아가세요!

그 외, Pedometer preview 가 보여지는 조건이 아닐 때는 Pop 에서 사용하는 Contents, Ad preview 가 보여지게 됩니다

적용방법

PedometerConfig 에 pedometerMessageViewVisibleThreshold, pedometerMessageViewClass 를 설정합니다.

pedometerMessageViewVisibleThreshold: Milestone 의 targetStep 의 몇 % 일 때 pedometer preview 를 노출 할 것인지 설정합니다. 예를들어 Milestone의 target step 이 100 이고 pedometerMessageViewVisibleThreshold 를 80f 으로 설정하면 80 보 이상 일 때 노출됩니다.

pedometerMessageViewClass: PopPedometerMessageView 를 상속하는 pedometerMessageViewClass 를 설정합니다. custom class 를 사용하여 pedometer preview message 의 ui 를 변경할 수 있습니다.

기본 제공하는 View 를 사용할 경우

PedometerConfig 설정만으로 간단하게 동작합니다.

PedometerConfig
        .Builder(getApplicationContext(), UNIT_ID_PEDOMETER, UNIT_ID_PEDOMETER_REWARD)
        ...
        .pedometerMessageViewClass(DefaultPopPedometerMessageView.class) // 생략 가능.build();

UI 를 변경할 경우

CustomPopPedometerMessageView 를 직접 만들어서 사용합니다.

• line 9: 직접 구현한 layout 을 사용할 수 있습니다.

• line 15: preview 가 그려질 때 updateView 가 호출 되며 UI 를 그릴 때 필요한 pedometer 정보들이 함께 넘어 옵니다.

  • currentStep: 현재 step

  • targetMilestone: 목표 Milestone

  • rewardableMilestone: 목표 달성한 Milestone

• line 16: rewardableMilestone != null 일 경우 목표 달성으로 인해 포인트를 쌓을 수 있는 상태를 뜻합니다.

• line 19: targetMilestone != null && currentStep < targetMilestone.getStep() 일 경우 걷기 진행 중을 뜻합니다.

• line 28: pedometer preview 에 노출 될 text 를 return 합니다.

• line 33: preview 가 노출 될 시간을 return 합니다.

view 에서 사용할 수 있는 정보는 updateView 함수를 통해 넘어오는데 다음과 같습니다.

public class CustomPopPedometerMessageView extends PopPedometerMessageView {
    private TextView textTitle;
    private TextView textDescription;
    private Context context;

    public CustomPopPedometerMessageView(@NotNull Context context) {
        super(context);
        this.context = context;
        LayoutInflater.from(context).inflate(R.layout.bz_view_pedometer_preview_message, this);
        textTitle = findViewById(R.id.textTitle);
        textDescription = findViewById(R.id.textDescription);
    }

    @Override
    public void updateView(long currentStep, @Nullable Milestone targetMilestone, @Nullable Milestone rewardableMilestone, int remainSeconds) {
        if (rewardableMilestone != null) {
            int reward = rewardableMilestone.getPoint();
            textTitle.setText("rewardable " + reward);
        } else if (targetMilestone != null && currentStep < targetMilestone.getStep()) {
            textTitle.setText(currentStep + " / " + targetMilestone.getStep());
        }
        textDescription.setText(context.pedometerMessageViewVisibleThreshold(80f)getString(R.string.bz_pop_message_view_description, remainSeconds));
    }

  .build();

UI 를 변경할 경우

CustomPopPedometerMessageView 를 직접 만들어서 사용합니다.

• line 9: 직접 구현한 layout 을 사용할 수 있습니다.

• line 15: preview 가 그려질 때 updateView 가 호출 되며 UI 를 그릴 때 필요한 pedometer 정보들이 함께 넘어 옵니다.

  • currentStep: 현재 step

  • targetMilestone: 목표 Milestone

  • rewardableMilestone: 목표 달성한 Milestone

• line 16: rewardableMilestone != null 일 경우 목표 달성으로 인해 포인트를 쌓을 수 있는 상태를 뜻합니다.

• line 19: targetMilestone != null && currentStep < targetMilestone.getStep() 일 경우 걷기 진행 중을 뜻합니다.

• line 28: pedometer preview 에 노출 될 text 를 return 합니다.

• line 33: preview 가 노출 될 시간을 return 합니다.

view 에서 사용할 수 있는 정보는 updateView 함수를 통해 넘어오는데 다음과 같습니다.

public class CustomPopPedometerMessageView extends PopPedometerMessageView {
    private TextView textTitle;
    private TextView textDescription;
    private Context context;

    public CustomPopPedometerMessageView(@NotNull Context context) {  @NonNull
    @Override
    public String getMessage() {
        return textTitle.getText().toString();
    }

    @Override
    public int getDurationInSeconds() {
        return 20;
    }
}

위에서 생성한 Class 를 PedometerConfig 에 설정합니다.

return new PedometerConfig
        .Builder(getApplicationContext(), UNIT_ID_PEDOMETER, UNIT_ID_PEDOMETER_REWARD)
        .pedometerMessageViewClass(CustomPopPedometerMessageView.class)
        .pedometerMessageViewVisibleThreshold(80f)
        super.build(context);
        this.context = context;
        LayoutInflater.from(context).inflate(R.layout.bz_view_pedometer_preview_message, this);
 );

PedometerPopHeaderViewAdapter

PedometerPopHeaderViewAdapter 를 확장하여 Pop Feed Header 영역을 customize 할 수 있습니다

...

Set CustomPedometerPopHeaderViewAdapter and PopHeaderConfig

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

2. CustomPedometerPopHeaderViewAdapter class 생성: PedometerPopHeaderViewAdapter 를 상속

3. PopHeaderConfig 를 통해 customizing 설정

final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        ...
        .feedHeaderViewAdapterClass(CustomPedometerPopHeaderViewAdapter.class)
      textTitle = findViewById(R..id.textTitle);
        textDescription = findViewById(R.id.textDescription.build();

public class CustomPedometerPopHeaderViewAdapter extends }PedometerPopHeaderViewAdapter {
    @Override
    public voidPedometerPopHeaderConfig updateView(long currentStep, @Nullable Milestone targetMilestone, @Nullable Milestone rewardableMilestone, int remainSeconds) {buildPopHeaderConfig(Context context) {
        return new PedometerPopHeaderConfig.Builder(context)
             if (rewardableMilestone != null.stepCountDescription()
{             int reward = rewardableMilestone.getPointprogressChartColor();
                textTitle.setTextprogressChartGuideColor("rewardable)
" + reward);         } else if (targetMilestone != null && currentStep < targetMilestone.getStepinProgressDescription())
{             textTitle.setText(currentStep + " / " + targetMilestone.getSteprewardableDescription());
        }         textDescription.setText(context.getString(R.string.bz_pop_message_view_description, remainSeconds));.progressIconResId()
    }      @NonNull     @Override .descriptionIconResId()
   public String getMessage() {         return textTitle.getTextboundaryImageResId().toString();
    }      @Override     public int getDurationInSeconds() {
        return 20.build();
    }
}

위에서 생성한 Class 를 PedometerConfig 에 설정합니다.

return new PedometerConfig
        

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

2. CustomPedometerPopHeaderViewAdapter class 생성: PedometerPopHeaderViewAdapter 를 상속

3. PopHeaderConfig 를 통해 customizing 설정

final FeedConfig feedConfig = new FeedConfig.Builder(getApplicationContext(), UNIT_ID_PEDOMETER, UNIT_ID_PEDOMETER_REWARD)POP)
        ...
        .pedometerMessageViewClassfeedHeaderViewAdapterClass(CustomPopPedometerMessageViewCustomPedometerPopHeaderViewAdapter.class)
        .pedometerMessageViewVisibleThreshold(80f)..
        .build();

...

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

PedometerPopHeaderConfig

Use custom view for PedometerPop Feed Header

...