Index

CTA Color 변경

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

	기본 Color
	변경 된 Color

project 의 colors.xml 파일에 아래의 color resource 값을 추가 하면 CTA color 가 변경됩니다. (Benefit 의 모든 CTA Color 가 변경됩니다.)

• benefit_native_bg_cta_button_normal CTA 가 노출 됐을 때

• benefit_native_bg_cta_button_pressed CTA 가 눌렸을 때

• benefit_native_bg_cta_button_disabled CTA 가 비활성화 상태 일 때

<resources>
    ...
    <color name="benefit_native_bg_cta_button_normal">#1290FF</color>
    <color name="benefit_native_bg_cta_button_pressed">#0072E1</color>
    <color name="benefit_native_bg_cta_button_disabled">#DDDEDF</color>
</resources>

CustomPreviewMessage

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

서버에서 클라이언트로 전달되는 CustomPreviewMessageConfig 는 다음과 같은 정보를 가지고 있습니다.

{
  "id": 5,
  "unit_id": 1234567890,
  "message": "오늘도 아케이드 게임하고 최대 90P 팡팡!",
  "landing_url": "deeplink://landing?activity=arcade",
  "start_date": "2020-03-01T00:00:00Z",
  "end_date": "2020-03-31T23:59:59Z",
  "start_hour_minute": "21:00",
  "end_hour_minute": "23:00",
  "dipu": 2,
  "tipu": 60,
  "dcpu": 1,
  "tcpu": 30,
  "icon": "http://imagelocation/arcade_icon.png"
}

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

• Pop 의 CustomPreviewMessage 영역 (그림1)

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

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

• PopFeedHeader 의 CustomPreviewMessage 영역 (그림2)

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

  • FeedConfig 를 customize 가능합니다

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

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

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

Step 1. (Optional) PopFeedHeader Customize

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

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

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

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

5. line 24 FeedConfig.feedHeaderViewAdapterClass를 통해 1번에서 생성한 CustomPopHeaderViewAdapter 를 설정합니다.

6. line 29 PopConfig.feedConfig를 통해 5번에서 설정한 FeedConfig 를 설정합니다.

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

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

Step 2. (Optional) FeedConfig 사용 설정

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

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

- PopFeedHeader 에 DefaultPreviewMessage 보이도록 설정

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

Step 3. (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();

PopConfig Advanced

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("UNIT_ID")
    .popAdMessageViewClass(MyPopAdMessageView.class)

PopArticleMessageViewClass

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

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

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

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

  <?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"
              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) {
        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;
    }
}

사용법

new PopConfig.Builder("UNIT_ID")
    .popArticleMessageViewClass(MyPopArticleMessageView.class)

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("UNIT_ID")
    .popUtilityLayoutHandlerClass(MyPopUtilityLayoutHandler.class)