...

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

...

CustomPreviewMessage 는 6시간 간격으로 서버에 설정된 CustomPreviewConfig 를 받아와서 frequency capping 후 PreviewMessage 를 보여주는 기능입니다. 따라서 서버에 CustomPreviewConfig 설정하는 작업이 선행되어야합니다. (frequency capping 에 의해 CustomPreviewMessage 가 보여져야 할 경우 AdPreview 와 ArticlePreview 보다 우선적으로 보여집니다.)

CustomPreviewMessage 는 두가지 영역에 표시됩니다.

• Pop 의 CustomPreviewMessage 영역 (그림1)

  • 설정된 기간, 시간 내에 dipu, tipu, dcpu, tcpu 에 따라 frequency capping 됩니다.

  • frequency capping 에 의해 CustomPreviewMessage 가 보여져야 할 경우 AdPreview 와 ArticlePreview 보다 우선적으로 보여집니다.

• PopFeedHeader 의 CustomPreviewMessage 영역 (그림2)

  • frequency capping 되지 않고 설정된 기간, 시간내 라면 보여집니다.

  • PopConfig 를 통해 customize 가능합니다

  • header 를 설정하지 않으면 CustomPreviewMessage 를 안보이게 설정 가능합니다

그림1. Pop 에 CustomPreviewMessage 가 표시된 모습

...

그림2. PopFeedHeader 에 CustomPreviewMessage 가 표시된 모습

...

1. PopFeedHeader Customize (그림 2)

...

DefaultPopHeaderViewAdapter 를 상속받아 CustomPopHeaderViewAdapter 를 만들고

...

getCustomPreviewMessageLayout 를 오버라이드 합니다.

...

getCustomPreviewMessageLayout 의 파라미터인 CustomPreviewMessage 에 message, landingUrl, iconUrl 정보가 담겨있습니다.

...

line 9~17 3번에서 받아온 정보를 토대로 직접 layout 을 구성하고, clickEvent 처리할 수 있습니다.

...

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 Feed] Pop Toolbar (AppBar) Customize

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

publicfinal classPopConfig CustomPopHeaderViewAdapterpopConfig extends= DefaultPopHeaderViewAdapter {
new PopConfig.Builder(this, unitIdPop)
   @Nullable   ...
 @Override     protected View getCustomPreviewMessageLayout(Context context, ViewGroup parent, CustomPreviewMessage customPreviewMessage) {
        final LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  .feedUnitId(feedUnitId)
      // 아래에서 소개하는 TemplatePopToolbarHolder, CustomPopToolbarHolder 등을 
      // 용도에 맞게 사용합니다
     if (inflater == null.feedToolbarHolderClass(DefaultPopToolbarHolder.class) {
            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) {
   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 할 때 이 함수를 통해서 문의하기 페이지를 열 수 있습니다.

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

}
}

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

} }  final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        ..addInquiryMenuItemView(activity, unitId); // 문의하기 버튼은 이 함수를 통해 간단하게 추가 가능합니다.
        .feedHeaderViewAdapterClass(CustomPopHeaderViewAdapter.class)
   addRightMenuItemView1(activity, unitId); // custom 버튼 추가 
        ...addRightMenuItemView2(activity);
        .build();

CustomizePopToolbarHolder

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

...

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

// DefaultPopToolbarHolder 상속
public class CustomPopToolbarHolder extends DefaultPopToolbarHolder {
    @Override
    public View 

getView(

Activity activity, @NonNull final String unitId) {
  

      // 직접 

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

• PopFeedHeader 에 CustomPreviewMessage 보이지 않도록 설정

PopConfig 설정시 PopConfig.feedHeaderViewAdapterClass 를 설정 하지 않으면 PopFeedHeader 의 CustomPreviewMessage 를 보이지 않게 설정할 수 있습니다.

• PopFeedHeader 에 DefaultPreviewMessage 보이도록 설정

PopConfig 설정시 PopConfig.feedHeaderViewAdapterClass(DefaultPopHeaderViewAdapter.class) 를 설정 하면 기본 제공하는 DefaultPreviewMessage 를 사용할 수 있습니다. (그림 2 참조)

3. (Optional) Preview Interval 설정

PopConfig.previewIntervalInMillis를 통해서 Preview interval 을 설정합니다. AdPreview, ContentPreview/CustomPreviewMessage 동일하게 interval 이 설정됩니다.

final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        ...구성한 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) {
         .previewIntervalInMillis(1 * 60 * 60 * 1000) // 1문의하기 hour페이지 열기
       ...         .build();

[Preview Message] PopAdMessageViewClass

...

광고가 있는 경우 PopAdMessageViewClass를 이용하여 말풍선(preview)을 보여줍니다. 기본 클래스에서는 현재 적립가능한 포인트와 몇초후에 닫히는지 보여줍니다. 해당 클래스는 PopAdMessageView를 상속받아서 작성해야 합니다. 다음 함수들을 오버라이드 할 수 있습니다.

• updateView: 매초마다 말풍선을 업데이트 하는데 업데이트 해야 할때마다 호출됩니다. 남은 시간(초)과 적립가능한 reward 값이 인자로 넘어옵니다.

• getDurationInSeconds 몇초동안 유지될 지 return해 줘야 합니다. 5초를 권장합니다.

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"
  

사용법

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

[Preview Message] PopArticleMessageViewClass

광고가 없는 경우 PopArticleMessageViewClass 를 이용하여 말풍선(preview)을 보여줍니다. 기본 클래스에서는 로드된 첫번째 기사의 제목과 몇초후에 닫히는지를 보여줍니다. 해당 클래스는 PopArticleMessageView를 상속받아서 작성해야 합니다. 다음 함수들을 오버라이드 할 수 있습니다.

...

updateView: 매초마다 말풍선을 업데이트 하는데 업데이트 해야 할때마다 호출됩니다. 남은 시간(초)과 기사의 제목이 인자로 넘어옵니다.

...

getDurationInSeconds: 몇초동안 유지될 지 return해 줘야 합니다. 5초를 권장합니다.

getNativeArticleView: NativeArticleView 클래스의 인스턴스를 반환합니다. NativeArticleView는 LinearLayout을 상속받아 Impression과 Click을 처리합니다. PopArticleMessageViewClass의 뷰를 다음과 같이 설정합니다.

...

...

 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>

[Pop Feed] Custom Feedback (Snackbar, Toast)

...

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

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

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

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

class CustomPopFeedbackHandler : DefaultPopFeedbackHandler() {
    override fun notifyFeedLaunchReward(
        

...

context: Context,
        view: View,
   

...

     canUseSnackbar: Boolean,
      

...

  reward: Int
    ) {
   

...

...

    val 

...

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

public class MyPopArticleMessageView extends PopArticleMessageView {message = "Customized feed launch reward message"

       private finalif NativeArticleView nativeArticleView;(canUseSnackbar) {
    private TextView textTitle, textDescription;      public MyPopArticleMessageView(@NonNull Context context) {showSnackbar(context, view, message)
        } else {
   super(context);         LayoutInflater.fromshowToast(context).inflate(R.layout.bz_view_article_message, thismessage);
        this.nativeArticleView}
= findViewById(R.id.my_pop_message_native_article);   }

    this.textTitle = findViewById(R.id.textTitle);
}

final PopConfig popConfig = new  this.textDescription = findViewById(R.id.textDescription);PopConfig.Builder(this, unitIdPop)
    }  ...
   @Override     public void updateView(@Nullable String title, int remainSeconds) {
 .PopFeedbackHandlerClass(CustomPopFeedbackHandlerClass.class)
      ...
      textTitle.setTextbuild(title);

PopFeedbackHandler Interface

interface PopFeedbackHandler {
    fun 

notifyFeedLaunchReward(context: Context, view: View, canUseSnackbar: Boolean, reward: Int)

    fun notifyNativeAdReward(context: Context, view: View, canUseSnackbar: Boolean, reward: Int)

   

fun 

notifyPottoDrawOneMore(

context: 

Context, view: View, canUseSnackbar: Boolean)

   

사용법

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

[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 Feed] Pop Toolbar (AppBar) Customize

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

final PopConfig popConfig = new PopConfig.Builder(this, unitIdPop)
      ...
      .feedUnitId(feedUnitId)
      // 아래에서 소개하는 TemplatePopToolbarHolder, CustomPopToolbarHolder 등을 
      // 용도에 맞게 사용합니다
      .feedToolbarHolderClass(DefaultPopToolbarHolder.class) 
      ...
      .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, @NonNull final String unitIdfun notifyPottoStatus(context: Context, view: View, canUseSnackbar: Boolean)
}

[Preview Message] CustomPreviewMessage

CustomPreviewMessage 는 6시간 간격으로 서버에 설정된 CustomPreviewConfig 를 받아와서 frequency capping 후 PreviewMessage 를 보여주는 기능입니다. 따라서 서버에 CustomPreviewConfig 설정하는 작업이 선행되어야합니다. (frequency capping 에 의해 CustomPreviewMessage 가 보여져야 할 경우 AdPreview 와 ArticlePreview 보다 우선적으로 보여집니다.)

CustomPreviewMessage 는 두가지 영역에 표시됩니다.

• Pop 의 CustomPreviewMessage 영역 (그림1)

  • 설정된 기간, 시간 내에 dipu, tipu, dcpu, tcpu 에 따라 frequency capping 됩니다.

  • frequency capping 에 의해 CustomPreviewMessage 가 보여져야 할 경우 AdPreview 와 ArticlePreview 보다 우선적으로 보여집니다.

• PopFeedHeader 의 CustomPreviewMessage 영역 (그림2)

  • frequency capping 되지 않고 설정된 기간, 시간내 라면 보여집니다.

  • PopConfig 를 통해 customize 가능합니다

  • header 를 설정하지 않으면 CustomPreviewMessage 를 안보이게 설정 가능합니다

그림1. Pop 에 CustomPreviewMessage 가 표시된 모습

...

그림2. PopFeedHeader 에 CustomPreviewMessage 가 표시된 모습

...

1. PopFeedHeader Customize (그림 2)

1. DefaultPopHeaderViewAdapter 를 상속받아 CustomPopHeaderViewAdapter 를 만들고

2. getCustomPreviewMessageLayout 를 오버라이드 합니다.

3. getCustomPreviewMessageLayout 의 파라미터인 CustomPreviewMessage 에 message, landingUrl, iconUrl 정보가 담겨있습니다.

4. line 9~17 3번에서 받아온 정보를 토대로 직접 layout 을 구성하고, clickEvent 처리할 수 있습니다.

5. PopConfig.feedHeaderViewAdapterClass를 통해 CustomPopHeaderViewAdapter 를 설정합니다.

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

final PopConfig popConfig = new addInquiryMenuItemView(activity, unitId); // 문의하기 버튼은 이 함수를 통해 간단하게 추가 가능합니다PopConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        ...
        addRightMenuItemView1(activity, unitId); // custom 버튼 추가.feedHeaderViewAdapterClass(CustomPopHeaderViewAdapter.class)
        ...
    addRightMenuItemView2(activity);         return toolbar;
    }

    // custom 버튼 추가는 toolbar.buildPopMenuItemView 를 사용하여 View 를 생성하고
    // toolbar.addRightMenuButton 를 사용하여 toolbar 에 추가합니다.
    private void addRightMenuItemView1(@NonNull final Activity activity, @NonNull final String unitId).build();

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

CustomizePopToolbarHolder

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

...

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

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)

        ...
    

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

.build();

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

• PopFeedHeader 에 CustomPreviewMessage 보이지 않도록 설정

PopConfig 설정시 PopConfig.feedHeaderViewAdapterClass 를 설정 하지 않으면 PopFeedHeader 의 CustomPreviewMessage 를 보이지 않게 설정할 수 있습니다.

• PopFeedHeader 에 DefaultPreviewMessage 보이도록 설정

PopConfig 설정시 PopConfig.feedHeaderViewAdapterClass(DefaultPopHeaderViewAdapter.class) 를 설정 하면 기본 제공하는 DefaultPreviewMessage 를 사용할 수 있습니다. (그림 2 참조)

1. (Optional) Preview Interval 설정

PopConfig.previewIntervalInMillis를 통해서 Preview interval 을 설정합니다. AdPreview, ContentPreview/CustomPreviewMessage 동일하게 interval 이 설정됩니다.

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

[Preview Message] PopAdMessageViewClass

...

광고가 있는 경우 PopAdMessageViewClass를 이용하여 말풍선(preview)을 보여줍니다. 기본 클래스에서는 현재 적립가능한 포인트와 몇초후에 닫히는지 보여줍니다. 해당 클래스는 PopAdMessageView를 상속받아서 작성해야 합니다. 다음 함수들을 오버라이드 할 수 있습니다.

• updateView: 매초마다 말풍선을 업데이트 하는데 업데이트 해야 할때마다 호출됩니다. 남은 시간(초)과 적립가능한 reward 값이 인자로 넘어옵니다.

• getDurationInSeconds 몇초동안 유지될 지 return해 줘야 합니다. 5초를 권장합니다.

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

사용법

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

[Preview Message] PopArticleMessageViewClass

광고가 없는 경우 PopArticleMessageViewClass 를 이용하여 말풍선(preview)을 보여줍니다. 기본 클래스에서는 로드된 첫번째 기사의 제목과 몇초후에 닫히는지를 보여줍니다. 해당 클래스는 PopArticleMessageView를 상속받아서 작성해야 합니다. 다음 함수들을 오버라이드 할 수 있습니다.

• updateView: 매초마다 말풍선을 업데이트 하는데 업데이트 해야 할때마다 호출됩니다. 남은 시간(초)과 기사의 제목이 인자로 넘어옵니다.

• getDurationInSeconds: 몇초동안 유지될 지 return해 줘야 합니다. 5초를 권장합니다.

• getNativeArticleView: NativeArticleView 클래스의 인스턴스를 반환합니다. NativeArticleView는 LinearLayout을 상속받아 Impression과 Click을 처리합니다. PopArticleMessageViewClass의 뷰를 다음과 같이 설정합니다.
  

  Code Block
  language xml
  <?xml version="1.0" encoding="utf-8"?> <com.buzzvil.buzzad.benefit.presentation.article.NativeArticleView xmlns:android

...

• ="http://schemas.android.com/apk/res/android"

...

• xmlns:

...

• app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/

...

• my_pop_message_native_article" android:layout_width="wrap_content"

...

...

• android:layout_height="wrap_content"

...

• android:

...

• clipToPadding="

...

• false"> <LinearLayout android:layout_

...

• width="

...

• wrap_content" android:layout_height="wrap_content" android:

...

• orientation="

...

• vertical"> <TextView android:

...

• maxWidth="

...

• 210dp"

...

[Pop Feed] Custom Feedback (Snackbar, Toast)

...

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

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

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

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

...

...

...

• android:maxLines="2" android:text="Article preview title here."/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="disappearing..." /> </LinearLayout> </com.buzzvil.buzzad.benefit.presentation.article.NativeArticleView>

   

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) {
        val message = "Customized feed launch reward message"super(context);
            if (canUseSnackbar) {LayoutInflater.from(context).inflate(R.layout.bz_view_article_message, this);
        this.nativeArticleView =   showSnackbar(context, view, message)findViewById(R.id.my_pop_message_native_article);
        } else {this.textTitle = findViewById(R.id.textTitle);
        this.textDescription = findViewById(R.id.textDescription);
  showToast(context, message) }

    @Override
 }   public void }updateView(@Nullable String title, int remainSeconds) {
... }  final PopConfig popConfig = new PopConfigtextTitle.Builder(this, unitIdPop)setText(title);
      ...  textDescription.setText(remainSeconds + "초 후에  .PopFeedbackHandlerClass(CustomPopFeedbackHandlerClass.class)닫힙니다.");
    }

  ...  @NonNull
    .build();

PopFeedbackHandler Interface

@Override
    public NativeArticleView 

getNativeArticleView() {
        return nativeArticleView;
    }

    @Override
    public 

int 

getDurationInSeconds() {
        return 5;

...

methods

...

Description

...

notifyFeedLaunchReward

...

피드 오픈 베이스 리워드 피드백을 보여줍니다.

...

notifyNativeAdReward

...

광고 적립 피드백을 보여줍니다.

...

notifyPottoDrawOneMore

...

Potto 한번 더 뽑기 피드백을 보여줍니다.

...

notifyPottoStatus

...

Potto 뽑기가 가능한 상태일 때를 알려주는 피드백을 보여줍니다. 해당 피드백은 한 번 만 노출됩니다.

...

Parameters

...

Description

...

context: Context

...

snackbar나 toast를 사용할 때 인수로 넘겨주는 context입니다.

...

view: View

...

snackbar를 사용할 때 인수로 넘겨주는 view입니다.

...

canUseSnackbar: Boolean

...

snackbar를 사용할 수 있는 상태인지를 알려주는 flag입니다.

...

reward: Int

...

 }
}

사용법

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