...
PedometerConfig 를 통해서 아래 이미지의 내용(이미지, 컬러, 스트링텍스트)을 변경할 수 있습니다
...
No. 는 위 그림의 customize 커스터마이징 가능한 영역의 숫자를 뜻합니다. unitId, rewardUnitId 는 필수고 나머지는 optioinal 입니다필수이고 그 외는 선택사항입니다.
No. | Parameter | Description | ||||||
|---|---|---|---|---|---|---|---|---|
8 |
| Pedometer fragment 에서 사용하는 광고 Unit Id | ||||||
11 |
| Pedometer bottom sheet(리워드 정보 화면)에서 사용하는 광고 Unit Id | ||||||
<그림 3> |
| 적립 가능 할 때 Pedometer fragment 진입 시 사용하는 광고 Unit id | ||||||
1 |
| Pedometer fragment 툴바에 표시되는 title | ||||||
2 |
| Pedometer fragment 툴바의 튜토리얼 버튼을 눌렀을 때 이동할 url 주소 | ||||||
3 |
| Pedometer fragment 마일스톤 Progress Guide Color | ||||||
4 |
| Pedometer fragment 마일스톤 Progress Color | ||||||
5 |
milestoneRewardIconResId | Pedometer fragment 마일스톤 적립 가능할 때 보이는 Icon resource id | ||||||
6 |
| Pedometer fragment 마일스톤 적립 가능할 때 표시되는 Text Color | ||||||
7 |
| Pedometer fragment 마일스톤 적립 가능할 때 표시되는 Text Background Resource Id | ||||||
9 |
| Pedometer bottom sheet 마일스톤 적립 가능할 때 보이는 image resource id | ||||||
10 |
| Pedometer bottom sheet 적립 완료 string | ||||||
10 |
| Pedometer bottom sheet 적립 중 string | ||||||
12 |
| Pedometer Pop Icon Progress Color | ||||||
13 |
| Pedometer Pop Icon Progress Guide Color | ||||||
14 |
| Pedometer Pop Icon 에 표시 되는 걸음 수 Text Color | ||||||
15 |
popIconRewardIconResId | Pedometer Pop Icon 적립 가능할 때 보이는 Icon resource id | ||||||
16 |
| Pedometer Pop Icon Background Color |
| Status | ||||
|---|---|---|---|---|
|
만보기
...
일정 조건을 만족하면 만보기 관련 메시지를 보여주는 기능입니다.
보이는 조건은 다음과 같습니다.
...
Milestone 의 목표 걸음 수의 일정 % 이상일 때:
목표 달성까지 %s 걸음 남았습니다, 힘내세요!% 는
pedometerMessageViewVisibleThreshold를 통해 설정 (ex 80f = 80%)
...
Milestone 목표 걸음 수 달성 시:
목표 달성! 지금 바로 %s 포인트 받아가세요!
그 외, 보여지는 조건이 아닐 때는 Pop에서 관리되는 메시지가 보여지게 됩니다
적용방법
PedometerConfig 에 pedometerMessageViewVisibleThreshold, pedometerMessageViewClass 를 설정합니다.
pedometerMessageViewVisibleThreshold: Milestone 의 targetStep 의 몇 % 일 때 pedometer preview 를 노출 할 것인지 설정합니다. 예를들어 Milestone의 target step 이 100 이고 pedometerMessageViewVisibleThreshold 를 80f 으로 설정하면 80 보 이상 일 때 노출됩니다.
pedometerMessageViewClass: PopPedometerMessageView 를 상속하는 pedometerMessageViewClass 를 설정합니다. custom class 를 사용하여 만보기 메시지(풍선메시지)의 ui 를 변경할 수 있습니다.
기본 제공하는 View 를 사용할 경우
PedometerConfig 설정만으로 간단하게 동작합니다.
...
| language | java |
|---|
...
Feed Header 커스터마이징
컴포넌트 별 커스터마이징 방법
PedometerPopHeaderViewAdapter 를 확장하여 Pop Feed Header 영역을 customize 할 수 있습니다
...
PedometerPopHeaderConfig
No. | Parameter | Description |
|---|---|---|
1 |
| Progress Color |
2 |
| Progress Guide Color |
3 |
| 적립 가능할 때 보이는 Icon resource id |
4 |
| 적립 중을 표시하는 Icon resource id |
5 |
| 추가로 보여줄 Image resource id |
6 |
| 몇 걸음 걸었는지 표시하는 String |
7 |
| 적립 중일 때 표시하는 String |
8 |
| 적립 완료 때 표시하는 String |
CustomPedometerPopHeaderViewAdapter 및 PopConfig 설정하기
PedometerPopHeaderViewAdapter를 상속하는CustomPedometerPopHeaderViewAdapterclass 생성Code Block language java public class CustomPedometerPopHeaderViewAdapter extends PedometerPopHeaderViewAdapter { @Override public PedometerPopHeaderConfig buildPopHeaderConfig(Context context) { return new PedometerPopHeaderConfig.
...
Builder(
...
context) .
...
stepCountDescription(
...
...) .
...
progressChartColor(
...
UI 를 변경할 경우
CustomPopPedometerMessageView 를 직접 만들어서 사용합니다.
line 9: 직접 구현한 layout 을 사용할 수 있습니다.
line 15: preview 가 그려질 때 updateView 가 호출 되며 UI 를 그릴 때 필요한 만보기 정보들이 함께 넘어 옵니다.
currentStep: 현재 steptargetMilestone: 목표 MilestonerewardableMilestone: 목표 달성한 Milestone
line 16:
rewardableMilestone != null일 경우 목표 달성으로 인해 포인트를 쌓을 수 있는 상태를 뜻합니다.line 19:
targetMilestone != null && currentStep < targetMilestone.getStep()일 경우 걷기 진행 중을 뜻합니다.line 28: 만보기 메시지(풍선메시지)에 노출 될 text 를 return 합니다.
line 33: 노출 될 시간을 return 합니다.
view 에서 사용할 수 있는 정보는 updateView 함수를 통해 넘어오는데 다음과 같습니다.
...
| language | java |
|---|
...
...) .progressChartGuideColor(...) .inProgressDescription(...) .rewardableDescription(...)
...
...
.progressIconResId(...)
...
.descriptionIconResId(...)
...
...
...
...
.
...
boundaryImageResId(
...
.
...
.
...
.)
...
...
...
.build(); }
...
위에서 생성한 Class 를 PedometerConfig 에 설정합니다.
| Code Block | ||
|---|---|---|
| ||
return new PedometerConfig
.Builder(getApplicationContext(), UNIT_ID_PEDOMETER, UNIT_ID_PEDOMETER_REWARD)
.pedometerMessageViewClass(CustomPopPedometerMessageView.class)
.pedometerMessageViewVisibleThreshold(80f)
.build(); |
만보기 Feed Header 커스터마이징
컴포넌트 별 커스터마이징 방법
PedometerPopHeaderViewAdapter 를 확장하여 Pop Feed Header 영역을 customize 할 수 있습니다
...
Set CustomPedometerPopHeaderViewAdapter and PopHeaderConfig
PopConfig.feedHeaderViewAdapterClass를 통해CustomPedometerPopHeaderViewAdapter.class를 사용하도록 설정CustomPedometerPopHeaderViewAdapterclass 생성:PedometerPopHeaderViewAdapter를 상속PopHeaderConfig를 통해 customizing 설정
| Code Block | ||
|---|---|---|
| ||
final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP)
...(생략)...
.feedHeaderViewAdapterClass(CustomPedometerPopHeaderViewAdapter.class)
.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
...
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
Feed Header 뷰를 커스터마이징 뷰로 교체 하는 방법
PedometerPopHeaderViewAdapter 를 활용하여 PedometerPop Feed Header 영역에 custom view 를 사용할 수 있습니다.
적용방법
PedometerPopHeaderViewAdapter 를 상속받은 MyPedometerPopHeaderViewAdapter 를 생성. 아래 코드는 PedometerPopFeedHeader 에 custom view 를 사용하는 예시 코드입니다.
...
line 28: 사용할 view 를 설정합니다.
...
line 33: setPedometer 함수에서 각 뷰를 초기화하고 동작을 설정합니다.
line 46:
navigateToPedometerHistory를 호출하여 pedometerHistory fragment 로 화면 전환 합니다.line 63:
navigateToPedometer를 호출하여 pedometer fragment 로 화면 전환 합니다.
...
}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 | ||
|---|---|---|
| ||
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(): 적립가능 한 마일스톤이 있으면 truegetStep(): 현재 걸음 수getMilestones(): 모든 마일스톤(List<Milestone>)
...
| Code Block | ||
|---|---|---|
| ||
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)
.addsetPopConfig(popConfig)
.build();
BuzzAdBenefit.init(this, buzzAdBenefitConfig); |
...