Page Comparison

...

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

Code Block

language	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를 이용하여 작성합니다.

Code Block

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

...

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

Code Block

language	java

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 와 벡터이미지가 모두 가능합니다.
- 컬러 아이콘 사용 가능

사용법

Code Block

language	java

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

...

Code Block

language	java

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

DefaultPopToolbarHolder

...

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

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>

Custom Feedback (Snackbar, Toast)

...

Expand

title	예시 코드

Code Block

language	kotlin

class CustomPopFeedbackHandler : DefaultPopFeedbackHandler() {
    override fun notifyFeedLaunchReward(
        context: Context,
        view: View,
        canUseSnackbar: Boolean,
        reward: Int
    ) {
        val message = "Customized feed launch reward message"

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

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

PopFeedbackHandler Interface

...

Code Block

language	java

public class CustomPopHeaderViewAdapter extends DefaultPopHeaderViewAdapter {
    @Nullable
    @Override
    protected View getCustomPreviewMessageLayout(Context context, ViewGroup parent, CustomPreviewMessage customPreviewMessage) {
        final LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        if (inflater == null) {
            return null;
        }
        View viewCustomPreviewMessage = inflater.inflate(R.layout.view_custom_preview_message, parent, false);
        final TextView textCustomPreviewMessageTitle = viewCustomPreviewMessage.findViewById(R.id.textCustomPreviewMessageTitle);
        textCustomPreviewMessageTitle.setText(customPreviewMessage.getMessage());
        viewCustomPreviewMessage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startDeeplinkActivity(context, customPreviewMessage.getLandingUrl());
            }
        });
        return viewCustomPreviewMessage;
    }
}

final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        ...
        ..feedHeaderViewAdapterClass(CustomPopHeaderViewAdapter.class).(생략)...
        .feedHeaderViewAdapterClass(CustomPopHeaderViewAdapter..class)
        .build();

Expand

title	2.17 미만 버전

DefaultPopHeaderViewAdapter 를 상속받아 CustomPopHeaderViewAdapter 를 만들고
getCustomPreviewMessageLayout 를 오버라이드 합니다.
getCustomPreviewMessageLayout 의 파라미터인 CustomPreviewMessage 에 message, landingUrl, iconUrl 정보가 담겨있습니다.
line 9~17 3번에서 받아온 정보를 토대로 직접 layout 을 구성하고, clickEvent 처리할 수 있습니다.
line 24 FeedConfig.feedHeaderViewAdapterClass를 통해 1번에서 생성한 CustomPopHeaderViewAdapter 를 설정합니다.
line 29 PopConfig.feedConfig를 통해 5번에서 설정한 FeedConfig 를 설정합니다.

Code Block

language	java

public class CustomPopHeaderViewAdapter extends DefaultPopHeaderViewAdapter {
    @Nullable
    @Override
    protected View getCustomPreviewMessageLayout(Context context, ViewGroup parent, CustomPreviewMessage customPreviewMessage) {
        final LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        if (inflater == null) {
            return null;
        }
        View viewCustomPreviewMessage = inflater.inflate(R.layout.view_custom_preview_message, parent, false);
        final TextView textCustomPreviewMessageTitle = viewCustomPreviewMessage.findViewById(R.id.textCustomPreviewMessageTitle);
        textCustomPreviewMessageTitle.setText(customPreviewMessage.getMessage());
        viewCustomPreviewMessage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startDeeplinkActivity(context, customPreviewMessage.getLandingUrl());
            }
        });
        return viewCustomPreviewMessage;
    }
}

final FeedConfig popFeedConfig = new FeedConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        ...(생략)...
        .feedHeaderViewAdapterClass(CustomPopHeaderViewAdapter.class)
        ...
        .build();
final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        ...
        .feedConfig(popFeedConfig)
        ...(생략)...
        .build();

(Optional) PopFeedHeader에 CustomPreviewMessage 사용 여부 설정

...

Code Block

language	java

final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        ...
        .previewIntervalInMillis(1 * 60 * 60 * 1000) // 1 hour
        ...(생략)...
        .build();

PopAdMessageViewClass

...

Expand

title	예제 코드

Code Block

language	java

public class MyPopAdMessageView extends PopAdMessageView {

    private TextView textTitle, textDescription;

    public MyPopAdMessageView(@NonNull Context context) {
        super(context);
        LayoutInflater.from(context).inflate(R.layout.view_my_pop_ad_message, this);
        this.textTitle = findViewById(R.id.textTitle);
        this.textDescription = findViewById(R.id.textDescription);
    }

    @Override
    public void updateView(int reward, int remainSeconds) {
        textTitle.setText(reward + "포인트 적립 가능합니다.");
        textDescription.setText(remainSeconds + "초 후에 닫힙니다.");
    }

    @Override
    public int getDurationInSeconds() {
        return 5;
    }
}

사용법

Code Block

language	java

new PopConfig.Builder(getApplicationContext(), "POP_UNIT_ID")
    .popAdMessageViewClass(MyPopAdMessageView.class)

...

Expand

title	예제 코드

Code Block

language	java

import com.buzzvil.buzzad.benefit.presentation.article.NativeArticleView;

public class MyPopArticleMessageView extends PopArticleMessageView {

    private final NativeArticleView nativeArticleView;
    private TextView textTitle, textDescription;

    public MyPopArticleMessageView(@NonNull Context context) {
        super(context);
        LayoutInflater.from(context).inflate(R.layout.bz_view_article_message, this);
        this.nativeArticleView = findViewById(R.id.my_pop_message_native_article);
        this.textTitle = findViewById(R.id.textTitle);
        this.textDescription = findViewById(R.id.textDescription);
    }

    @Override
    public void updateView(@Nullable String title, int remainSeconds) {
        textTitle.setText(title);
        textDescription.setText(remainSeconds + "초 후에 닫힙니다.");
    }

    @NonNull
    @Override
    public NativeArticleView getNativeArticleView() {
        return nativeArticleView;
    }

    @Override
    public int getDurationInSeconds() {
        return 5;
    }
}

사용법

Code Block

language	java

new PopConfig.Builder(getApplicationContext(), "POP_UNIT_ID")
    .popArticleMessageViewClass(MyPopArticleMessageView.class)

...

Versions Compared

Old Version 9

New Version 10

Key

Custom Feedback (Snackbar, Toast)

PopAdMessageViewClass