| Table of Contents |
|---|
개요
기본적인 Feed 와 Pop 을 통한 Feed 를 다르게 구성하고 싶을 경우 커스터마이징 할 수 있습니다.
Index
| Table of Contents |
|---|
Pop 디자인 customize 시 고려해야 할 사항은 Pop 디자인 가이드 문서에서 확인 가능합니다.
...
Pop
...
아이콘 변경
iconResourceId 팝 아이콘 drawable을 만들어 아이콘을 변경할 수 있습니다. 이때 상태에 따라 평상시 아이콘과 피드 종료 아이콘을 지정해 주어야 합니다.
...
| Code Block |
|---|
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
// 종료 아이콘
<item android:drawable="@drawable/icon_pop_selected" android:state_selected="true" />
// 적립 가능 포인트가 있을 때 팝 아이콘
<item android:drawable="@drawable/icon_pop_reward_ready"/>
</selector> |
...
Pop Feed
...
커스터마이징
PopUtilityLayoutHandlerClass
피드 하단의 Utility화면을 커스텀할 때 PopUtilityLayoutHandler 클래스를 사용합니다.
...
| Code Block |
|---|
new PopConfig.Builder(getApplicationContext(), "POP_UNIT_ID")
.popUtilityLayoutHandlerClass(MyPopUtilityLayoutHandler.class) |
...
Pop
...
Toolbar (AppBar)
...
커스터마이징
PopConfig 를 사용하여 Toolbar 영역을 Customize 커스터마이징 할 수 있습니다. PopConfig 에 PopConfig.feedToolbarHolderClass 를 설정하는데 여기에 DefaultPopToolbarHolder 를 상속받은 class 를 사용해서 Pop Toolbar customize 커스터마이징 가능합니다.
| Code Block | ||
|---|---|---|
| ||
final PopConfig popConfig = new PopConfig.Builder(this, unitIdPop)
...
.feedUnitId(feedUnitId)
// 아래에서 소개하는 TemplatePopToolbarHolder, CustomPopToolbarHolder 등을
// 용도에 맞게 사용합니다
.feedToolbarHolderClass(DefaultPopToolbarHolder.class)
...
.build(); |
...
| Code Block |
|---|
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal"
android:background="@color/bzv_white_100">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingLeft="16dp">
<ImageView
android:id="@+id/imageIcon"
android:layout_width="154dp"
android:layout_height="24dp"
android:src="@drawable/bz_img_buzzvil_logo" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<ImageView
android:id="@+id/buttonInquiry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="16dp"
android:src="@drawable/bzv_ic_circle_question"
android:tint="@color/bzv_gray_light" />
</LinearLayout>
</LinearLayout> |
...
Custom Feedback (Snackbar, Toast)
...
팝 지면에서 보여주는 다양한 피드백을 customize 할 수 있습니다. 위 이미지는 피드 오픈 베이스 리워드를 받았을 때 보여주는 Snackbar/Toast 를 customize 했을 때 보여주는 커스텀 피드백입니다.
...
Parameters | Description |
|---|---|
| snackbar나 toast를 사용할 때 인자로 넘겨주는 context입니다. |
| snackbar를 사용할 때 인자로 넘겨주는 view입니다. |
| snackbar를 사용할 수 있는 상태인지를 알려주는 flag입니다. |
| 적립된 리워드 포인트 양을 나타내는 인자입니다. 해당 인수를 사용해서 커스텀 메시지를 formatting 하면 유저에게 좀 더 구체적인 피드백을 제공할 수 있습니다. |
...
Preview Message
...
커스터마이징
CustomPreviewMessage
CustomPreviewMessage 는 6시간 간격으로 서버에 설정된 CustomPreviewConfig 를 받아와서 frequency capping 후 PreviewMessage 를 보여주는 기능입니다. 따라서 서버에 CustomPreviewConfig 설정하는 작업이 선행되어야합니다. (frequency capping 에 의해 CustomPreviewMessage 가 보여져야 할 경우 AdPreview 와 ArticlePreview 보다 우선적으로 보여집니다.)
...
| Code Block | ||
|---|---|---|
| ||
final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP)
...
.previewIntervalInMillis(1 * 60 * 60 * 1000) // 1 hour
...
.build(); |
...
PopAdMessageViewClass
...
광고가 있는 경우 PopAdMessageViewClass를 이용하여 말풍선(preview)을 보여줍니다. 기본 클래스에서는 현재 적립가능한 포인트와 몇초후에 닫히는지 보여줍니다. 해당 클래스는 PopAdMessageView를 상속받아서 작성해야 합니다. 다음 함수들을 오버라이드 할 수 있습니다.
...
| Code Block | ||
|---|---|---|
| ||
new PopConfig.Builder(getApplicationContext(), "POP_UNIT_ID")
.popAdMessageViewClass(MyPopAdMessageView.class) |
...
...
PopArticleMessageViewClass
광고가 없는 경우 PopArticleMessageViewClass 를 이용하여 말풍선(preview)을 보여줍니다. 기본 클래스에서는 로드된 첫번째 기사의 제목과 몇초후에 닫히는지를 보여줍니다. 해당 클래스는 PopArticleMessageView를 상속받아서 작성해야 합니다. 다음 함수들을 오버라이드 할 수 있습니다.
...