다음 항목은 Pop 의 디자인 변경 항목과 기능의 추가/ 변경을 담고 있습니다. POP 디자인 가이드 문서를 통해 보다 정확한 변경 항목을 확인할 수 있습니다.

...

•  공통 적용 항목 연동이 완료 되었는지 (링크)
•  [Ext.point] Pop Type 연동이 완료 되었는지 (링크)
•  변경된 Config 를 적용하고, Pop 이 정상적으로 동작하는지 (링크)

번호는 이전 문서와 연결하여 진행합니다.

...

연동하기

4. 추가 설정, 기능을 적용하기

CTA Color 변경

여기에서는 CTA color 변경을 설명합니다. Color 변경 외에 CtaView를 Default로 제공되는 View가 아닌, 다른 모양의 View로 만들고 싶으신 경우 여기를 참조해 주세요.

...

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 와 벡터 이미지가 모두 가능합니다.

다음의 코드를 적용하여 사용할 수 있습니다.

...

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

...

1. CustomPopToolbarHolder class

   Code Block
   language java
   // 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; } }

2. CustomPopToolbarHolder에서 사용하는 layout.view_pop_custom_toolbar

   Code Block
   language xml
   <?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>

...