개요

기본적인 Feed 와 Pop 을 통한 Feed 를 다르게 구성하고 싶을 경우 커스터마이징 할 수 있습니다.

Pop 디자인 customize시 커스터마이징시 고려해야 할 사항은 Pop 디자인 가이드 문서에서 확인 가능합니다.

...

iconResourceId 팝 아이콘 drawable을 만들어 아이콘을 변경할 수 있습니다. 이때 상태에 따라 평상시 아이콘과 피드 팝 종료 아이콘을 지정해 주어야 합니다.

<!-- your_pop_icon.xml -->
<?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"/>
</selector>

...

rewardReadyIconResourceId 팝에서 적립 가능한 포인트가 있을 때 기본 아이콘이 아닌 다른 아이콘을 (예: 동전 아이콘) 유저에게 보여줄 수 있습니다. iconResourceId와 마찬가지로 selector를 이용하여 작성합니다.

<?xml version!-- you_pop_icon_reward_ready.xml -->
<?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 클래스를 사용합니다.

기본 클래스에서는 카메라, 사진첩, 브라우저로 이동하는 뷰가 제공됩니다. 유틸리티를 커스텀하기 위해서는 PopUtilityLayoutHandler 클래스를 상속받아 사용합니다. 오버라이드 해야 하는 함수는 다음과 같습니다. 

...

• onLayoutCreated(ViewGroup parent): Utility에 넣고 싶은 View를 작성한 후에 인자로 넘어온 Parent 뷰그룹에 붙여줍니다. 커스텀으로 작성된 뷰에 있는 아이콘에 클릭 리스너를 달아서 원하는 행동을 수행하도록 작업합니다.

final LinearLayout layout = (LinearLayout) inflater.inflate(R.layout.my_view_utility_layout, parent, false);
parent.addView(layout);

• 팝피드 하단아이콘 참고사항

  • 이미지 사이즈

    • 24*24 dp (mdpi 기준)

    • 96*96 px (xxxhdpi까지 지원, 픽셀기준 최대 4배)

  • 아이콘은 png 와 벡터이미지가 모두 가능합니다.

  • 컬러 아이콘 사용 가능

• 사용법

new PopConfig.Builder(getApplicationContext(), "POP_UNIT_ID")
    .popUtilityLayoutHandlerClass(MyPopUtilityLayoutHandler.class)

Pop Toolbar (AppBar) 커스터마이징

PopConfig 를 사용하여 Toolbar 영역을 커스터마이징 할 수 있습니다. PopConfig 에 PopConfig.feedToolbarHolderClass 를 설정하는데 여기에 DefaultPopToolbarHolder 를 상속받은 class 를 사용해서 Pop Toolbar 커스터마이징 가능합니다.

...

...

Application 클래스에서 popConfig를 빌드할 때 다음과 같이 아이콘의 리소스 아이디를 지정해줍니다.

PopConfig popConfig = new PopConfig.Builder(context, YOUR_POP_UNIT_ID)
        ...
        .iconResId(R.drawable.your_pop_icon)
        .rewardReadyIconResId(R.drawable.you_pop_icon_reward_ready)

Pop Feed 커스터마이징

유틸리티 영역 커스터마이징

피드 하단의 Utility영역을 커스텀할 때 PopUtilityLayoutHandler 클래스를 상속받아 사용합니다.

기본 클래스에서는 카메라, 사진첩, 브라우저로 이동하는 기능이 제공됩니다. 오버라이드 해야 하는 함수는 다음과 같습니다. 

...

• onLayoutCreated(ViewGroup parent): Utility에 넣고 싶은 View를 작성한 후에 인자로 넘어온 Parent 뷰그룹에 붙여줍니다.

final LinearLayout layout = (LinearLayout) inflater.inflate(R.layout.my_view_utility_layout, parent, false);
parent.addView(layout);

• 팝피드 하단아이콘 참고사항

  • 이미지 사이즈

    • 24*24 dp (mdpi 기준)

    • 96*96 px (xxxhdpi까지 지원, 픽셀기준 최대 4배)

  • 아이콘은 png 와 벡터이미지가 모두 가능합니다.

  • 컬러 아이콘 사용 가능

• 사용법

new PopConfig.Builder(getApplicationContext(), "YOUR_POP_UNIT_ID")
    .popUtilityLayoutHandlerClass(MyPopUtilityLayoutHandler.class)

Pop Toolbar (AppBar) 커스터마이징

PopConfig 를 사용하여 Toolbar 영역을 커스터마이징 할 수 있습니다. PopConfig 에 PopConfig.feedToolbarHolderClass 를 설정하는데 여기에 DefaultPopToolbarHolder 를 상속받은 class 를 사용해서 Pop Toolbar 커스터마이징 가능합니다.

final PopConfig popConfig = new PopConfig.Builder(this, unitIdPop)
      ...(생략)...
      .feedToolbarHolderClass(DefaultPopToolbarHolder.class) 
      .build();

DefaultPopToolbarHolder

DefaultPopToolbarHolder 를 바로 설정하면 간단하게 Pop Toolbar 가 설정됩니다feedToolbarHolderClass를 따로 설정하지 않는다면 DefaultPopToolbarHolder 를 사용하게 됩니다.

...

...

Option1. Toolbar 제목 및 아이콘 변경

DefaultPopToolbarHolder 를 상속하여 TemplatePopToolbarHolder 를 상속받는 클래스를 만들어 사용합니다. 그리고 기본 제공하는 PopToolbar 를 사용하여 미리 구성되어있는 PopToolbarTemplate 을 수정하여 customize 가능합니다. Toolbar 내의 Pop feed icon, title, toolbar background color 왼쪽 아이콘, 제목, 배경 색상 등을 변경할 수 있고 Toolbar 우측에 클릭 가능한 이미지 버튼을 추가할 수 있습니다.

...

• Toolbar icon 변경: toolbar.setIconResource

• Toolbar title 변경: toolbar.setTitle

• Toolbar background color 변경: toolbar.setBackgroundColor

• Toolbar 우측 문의하기 버튼 추가: addInquiryMenuItemView

• Toolbar 우측 custom 버튼 추가: toolbar.buildPopMenuItemView 를 통해 PopMenuImageView 를 생성하고 생성된 View 를 toolbar.addRightMenuButton 를 통해 toolbar에 추가합니다. (우측 버튼은 add 된 순서대로 좌측부터 우측으로 배열됩니다.)

  • showInquiry 함수: 문의하기 페이지를 엽니다. 문의하기 버튼 icon 을 customize 할 때 이 함수를 통해서 문의하기 페이지를 열 수 있습니다.

// DefaultPopToolbarHolder 상속
public class TemplatePopToolbarHolder extends DefaultPopToolbarHolder {
    @Override
    public View getView(Activity activity, @NonNull final String unitId) {
        toolbar = new PopToolbar(activity); // PopToolbar 에서 제공하는 기본 Template 사용
        toolbar.setTitle("TemplatePopToolbarHolder");
        toolbar.setIconResource(R.mipmap.ic_launcher);
        toolbar.setBackgroundColor(Color.LTGRAY);

        addInquiryMenuItemView(activity, unitId); // 문의하기 버튼은 이 함수를 통해 간단하게 추가 가능합니다.
        addRightMenuItemView1(activity, unitId); // custom 버튼 추가 
        addRightMenuItemView2(activity);
        return toolbar;
    }

    // custom 버튼 추가는 toolbar.buildPopMenuItemView 를 사용하여 View 를 생성하고
    // toolbar.addRightMenuButton 를 사용하여 toolbar 에 추가합니다.
    private void addRightMenuItemView1(@NonNull final Activity activity, @NonNull final String unitId) {
        PopMenuImageView menuItemView = toolbar.buildPopMenuItemView(activity, R.mipmap.ic_launcher);
        menuItemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showInquiry(activity, unitId));
            }
        });
        toolbar.addRightMenuButton(menuItemView);
    }

    private void addRightMenuItemView2(@NonNull final Activity activity) {
        PopMenuImageView menuItemView = toolbar.buildPopMenuItemView(activity, R.mipmap.ic_launcher);
        menuItemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showPotto(activity);
            }
        });
        toolbar.addRightMenuButton(menuItemView);
    }
} 

...

Option2. Toolbar 레이아웃 변경

DefaultPopToolbarHolder 를 상속받아서 사용합니다. TemplatePopToolbarHolder 와 유사하나 차이점은 PopToolbar 를 사용하지않고 layout 을 레이아웃을 직접 구성하여 Toolbar 영역을 전부 customize 커스터마이징 할 수 있습니다.

...

위 그림과 같은 toolbar holder를 toolbar를 만들기 위해 CustomPopToolbarHolder class 커스텀 class 를 구성하는 예제입니다.

// DefaultPopToolbarHolder 상속
public class CustomPopToolbarHolder extends DefaultPopToolbarHolder {
    @Override
    public View getView(Activity activity, @NonNull final String unitId) {
        // 직접 구성한 layout 을 사용합니다
        ViewGroup root =  (ViewGroup) activity.getLayoutInflater().inflate(R.layout.view_pop_custom_toolbar, null);

        View buttonInquiry = root.findViewById(R.id.buttonInquiry);
        buttonInquiry.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 문의하기 페이지 열기
                showInquiry(activity, unitId);
            }
        });
        return root;
    }
}

...

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

...

Snackbar및 Toast 내용 커스터마이징

팝 지면에서 보여주는 다양한 피드백을 customize 피드백(snackbar, toast)를 커스터마이징 할 수 있습니다. 위 이미지는 피드 오픈 베이스 리워드를 받았을 때 보여주는 Snackbar/Toast 를 customize 했을 때 보여주는 커스텀 피드백입니다.

...

어떤 경우가 있는지는 아래 표에서 확인할 수 있습니다.

다음의 적용이 필요합니다.

1. PopFeedbackHandler 인터페이스를 구현하는 커스텀 클래스를 생성합니다. 기본으로 제공되는 피드백의 일부를 사용하고 싶다면, DefaultPopFeedbackHandler를 확장하는 것을 권장합니다. (하단의 PopFeedbackHandler 인터페이스에 대한 부연 설명을 참고)DefaultPopFeedbackHandler를 상속 받는 클래스를 생성합니다.

2. PopConfig를 초기화할 때에, 이전 스텝에서 생성한 Custom PopFeedbackHandler 클래스를 넘겨줍니다.

class CustomPopFeedbackHandler extends DefaultPopFeedbackHandler {
    public void notifyNativeAdReward(
 val message = "Customized feed launch@NotNull reward message"

        if (canUseSnackbar) {
     Context context, 
     showSnackbar(context, view, message)@NotNull View view, 
     } elseboolean {canUseSnackbar, 
      int reward
   showToast(context, message) {
       } val message = "Customized }feed launch reward message"

...(생략)... }  final PopConfig popConfig = new PopConfig.Builder(this, unitIdPop if (canUseSnackbar) {
     ...(생략)...       .PopFeedbackHandlerClass(CustomPopFeedbackHandlerClass.class)showSnackbar(context, view, message)
        ...(생략)...
 } else {
    .build();

PopFeedbackHandler Interface

showToast(context

, message)
        }
    }

}

PopConfig popConfig = new PopConfig.Builder(this, YOUR_POP_UNIT_ID)
     

...(생략)...
      .PopFeedbackHandlerClass(CustomPopFeedbackHandlerClass.class)
     

.build();

Snackbar/Toast가 보여지는 경우

...