개요

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

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>

팝 아이콘 권장 사이즈

56x56 dp (mdpi 기준)
224x224 px (xxxhdpi까지 지원, 픽셀기준 최대 4배)

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

<!-- 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>

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

feedToolbarHolderClass를 따로 설정하지 않는다면 DefaultPopToolbarHolder 를 사용하게 됩니다.

Option1. Toolbar 제목 및 아이콘 변경

DefaultPopToolbarHolder 를 상속받는 클래스를 만들어 사용합니다. 그리고 기본 제공하는 PopToolbar 를 사용하여 미리 구성되어있는 PopToolbarTemplate 을 수정하여 customize 가능합니다. Toolbar 내의 왼쪽 아이콘, 제목, 배경 색상 등을 변경할 수 있고 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 를 상속받아서 사용합니다. 레이아웃을 직접 구성하여 Toolbar 영역을 전부 커스터마이징 할 수 있습니다.

위 그림과 같은 toolbar를 만들기 위해 커스텀 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;
    }
}

CustomPopToolbarHolder에서 사용하는 layout.view_pop_custom_toolbar은 다음과 같습니다.

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

Snackbar및 Toast 내용 커스터마이징

팝 지면에서 보여주는 다양한 피드백(snackbar, toast)를 커스터마이징 할 수 있습니다. 어떤 경우가 있는지는 아래 표에서 확인할 수 있습니다.

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

DefaultPopFeedbackHandler를 상속 받는 클래스를 생성합니다.
PopConfig를 초기화할 때에, 이전 스텝에서 생성한 Custom PopFeedbackHandler 클래스를 넘겨줍니다.

예시 코드

class CustomPopFeedbackHandler extends DefaultPopFeedbackHandler {
    public void notifyNativeAdReward(
      @NotNull Context context, 
      @NotNull View view, 
      boolean canUseSnackbar, 
      int reward
    ) {
        val message = "Customized feed launch reward message"

        if (canUseSnackbar) {
            showSnackbar(context, view, message)
        } else {
            showToast(context, message)
        }
    }
}

PopConfig popConfig = new PopConfig.Builder(this, YOUR_POP_UNIT_ID)
      ...(생략)...
      .PopFeedbackHandlerClass(CustomPopFeedbackHandlerClass.class)
      .build();

Snackbar/Toast가 보여지는 경우

methods	Description
`notifyNativeAdReward`	광고 적립 피드백을 보여줍니다. 디폴트 메세지: `광고 적립 포인트 n포인트 적립되었습니다.`

Parameters	Description
`context: Context`	snackbar나 toast를 사용할 때 인자로 넘겨주는 context입니다.
`view: View`	snackbar를 사용할 때 인자로 넘겨주는 view입니다.
`canUseSnackbar: Boolean`	snackbar를 사용할 수 있는 상태인지를 알려주는 flag입니다.
`reward: Int`	적립된 리워드 포인트 양을 나타내는 인자입니다. 해당 인수를 사용해서 커스텀 메시지를 formatting 하면 유저에게 좀 더 구체적인 피드백을 제공할 수 있습니다.

6.2.3. 커스터마이징

개요