Index

POP 디자인 customize 관련 자세한 사항은 POP 디자인 가이드 문서에서 확인 가능합니다.

CTA Color 변경

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

...

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

Pop Toolbar (AppBar) Customize

PopConfig, FeedConfig 를 사용하여 Toolbar 영역을 Customize 할 수 있습니다. PopConfig 에 FeedConfig 를 설정할 때 FeedConfig.feedToolbarHolderClass 를 설정하는데 여기에 DefaultPopToolbarHolder 를 상속받은 class 를 사용해서 Pop Toolbar customize 가능합니다.

final FeedConfig popFeedConfig = new FeedConfig.Builder(this, unitIdPop)
      ...
      // 아래에서 소개하는 TemplatePopToolbarHolder, CustomPopToolbarHolder 등을 
      // 용도에 맞게 사용합니다
      .feedToolbarHolderClass(DefaultPopToolbarHolder.class) 
      ...
      .build();

final PopConfig popConfig = new PopConfig.Builder(this, unitIdPop)
      ...
      .feedConfig(popFeedConfig)
      ...
      .build();

DefaultPopToolbarHolder

DefaultPopToolbarHolder 를 바로 설정하면 간단하게 Pop Toolbar 가 설정됩니다.

...

TemplatePopToolbarHolder

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) {
        toolbar = new PopToolbar(activity); // PopToolbar 에서 제공하는 기본 Template 사용
        toolbar.setTitle("TemplatePopToolbarHolder");
        toolbar.setIconResource(R.mipmap.ic_launcher);
        toolbar.setBackgroundColor(Color.LTGRAY);

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

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

CustomizePopToolbarHolder

DefaultPopToolbarHolder 를 상속받아서 사용하는 점은 TemplatePopToolbarHolder 와 동일합니다. 차이점은 PopToolbar 를 사용하지않고 layout 을 직접 구성하여 Toolbar 영역을 전부 customize 할 수 있습니다.

...

1. CustomPopToolbarHolder class
   
   

   Code Block

   // DefaultPopToolbarHolder 상속 public class CustomPopToolbarHolder extends DefaultPopToolbarHolder { @Override public View getView(Activity activity) { // 직접 구성한 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); } }); return root; } }

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

   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>