Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

버즈스크린 UI 타입은 크게 두 가지로 나뉩니다.

액션

Card UI

Feed UI

Unlock

화면 하단 중앙의 원형 슬라이더를 오른쪽으로 드래그

화면 하단 좌측의 버튼을 오른쪽으로 드래그

Landing

화면 하단 중앙의 원형 슬라이더를 왼쪽으로 드래그

화면 하단 우측 버튼을 왼쪽으로 드래그 ('슬라이딩')

광고/컨텐츠 뷰

  • 하나의 광고/컨텐츠가 Full screen 크기의 Card로 화면에 표시됨

  • 상하단 swipe 액션에 따라 전/후의 Card가 표시됨 ('롤링')

  • 첫화면에는 Full screen 크기의 Card 소재 노출

  • 위쪽으로 스와이프 시 Feed로 진입

예시 영상

Card_UI.mp4

Feed_UI.mp4

2) Requirements

항목

세부내용

Android Support library

25 이상

Basic Usage

build.gradle 의 경우, BuzzScreen SDK 4.27.x 부터는 수동으로 추가할 필요가 없습니다.

항목

코드 & 호출 위치

세부내용

예시

1

build.gradle 설정

implementation 'com.buzzvil.buzzscreen.ext:feed-sdk:2.0.1.0'

build.gradle 의 dependencies 에 Feed SDK를 추가

Code Block
languagegroovy
dependencies {
    implementation 'com.buzzvil.buzzscreen.ext:feed-sdk:2.0.1.0'
}
2

Feed 설정 켜기

BuzzScreen.getInstance().setUseFeed(true)

  • BuzzScreen.init() 호출 이후

  • 커스터마이징을 하지 않는 경우: SDK 내에서 제공하는 SimpleLockerSlidingActivity.class를 설정

  • 커스터마이징을 하는 경우: BaseLockerActivity가 아닌 BaseLockserSlidingActivity를 상속받은 잠금화면 액티비티 클래스를 사용

Code Block
languagejava
public class App extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        ...
        // app_key : SDK 사용을 위한 앱키로, 어드민에서 확인 가능
        // SimpleLockerSlidingActivity.class : Feed와 함께 사용되는 잠금화면 액티비티 클래스
        // R.drawable.image_on_fail : 네트워크 에러 혹은 일시적으로 잠금화면에 보여줄 캠페인이 없을 경우 보여주게 되는 이미지.
        BuzzScreen.init("app_key", this, SimpleLockerSlidingActivity.class, R.drawable.image_on_fail);
        BuzzScreen.getInstance().setUseFeed(true);
    }
}

Advanced Usage

1. 잠금화면 커스텀 디자인

...

  • 시계 : 레이아웃에 뷰를 추가하고, 해당 뷰에 표시되는 값은 액티비티 내의 onTimeUpdated에서 처리합니다.

  • 슬라이더 : 아래의 구성 요소들을 변경할 수 있습니다.

    • Code Block
      languagexml
      <declare-styleable name="Slider_v2">
          <!--General-->
          <attr name="sl_margin_bottom" format="dimension"/>
          <!--Left-->
          <attr name="sl_left_icon" format="reference"/>
          <attr name="sl_left_sub_icon" format="reference"/>
          <attr name="sl_left_background" format="reference"/>
          <attr name="sl_left_text_color" format="color|reference"/>
      
          <!--Right-->
          <attr name="sl_right_icon" format="reference"/>
          <attr name="sl_right_sub_icon" format="reference"/>
          <attr name="sl_right_background" format="reference"/>
          <attr name="sl_right_text_color" format="color|reference"/>
          <!--Both Side-->
          <attr name="sl_side_text_size" format="dimension"/>
      
          <!--Center-->
          <attr name="sl_center_icon" format="reference"/>
          <attr name="sl_center_text_size" format="dimension"/>
          <attr name="sl_center_view_margin_bottom" format="dimension"/>
      </declare-styleable>

...

...

슬라이더 속성

설명

slider:sl_margin_bottom

슬라이더 양쪽 뷰의 화면 하단으로부터의 거리

slider:sl_left_icon

슬라이더 왼쪽 가운데 아이콘

slider:sl_left_sub_icon

슬라이더 왼쪽 가장자리 아이콘

slider:sl_left_background

슬라이더 왼쪽 배경

slider:sl_left_text_color

슬라이더 왼쪽 텍스트 색상

slider:sl_right_*

sl_left_* 과 왼쪽/오른쪽만 바뀌고 동일

slider:sl_side_text_size

슬라이더 양쪽 텍스트의 크기

slider:sl_center_icon

슬라이더 중앙 텍스트 좌측에 위치한 아이콘

slider:sl_center_text_size

슬라이더 중앙 텍스트의 크기

slider:sl_center_view_margin_bottom

슬라이더 중앙 뷰의 화면 하단으로부터의 거리


Expand
titlecf. Slider Default Style (Used in SimpleLockerSlidingActivity)
Code Block
languagexml
<style name="SliderDefaultStyle">
    <!--General-->
    <item name="sl_margin_bottom">12dp</item>

    <!--Left-->
    <item name="sl_left_icon">@drawable/ic_unlock</item>
    <item name="sl_left_sub_icon">@drawable/ic_arrow_right</item>
    <item name="sl_left_background">@drawable/bg_unlock</item>
    <item name="sl_left_text_color">@android:color/black</item>

    <!--Right-->
    <item name="sl_right_icon">@drawable/ic_landing</item>
    <item name="sl_right_sub_icon">@drawable/ic_arrow_left</item>
    <item name="sl_right_background">@drawable/bg_landing</item>
    <item name="sl_right_text_color">@android:color/black</item>

    <!--Both Side-->
    <item name="sl_side_text_size">14dp</item>

    <!--Center-->
    <item name="sl_center_icon">@drawable/ic_arrow_left_white</item>
    <item name="sl_center_text_size">16sp</item>
    <item name="sl_center_view_margin_bottom">28dp</item>
</style>

...

전체 화면 슬라이딩 기능을 잠금화면에 연동하기 위해서는 다음과 같은 작업이 필요합니다.

항목

코드 & 호출 위치

세부내용

예시

1

슬라이더 생성

  • Slider를 inflate 한 뒤

  • onCreate()에서 setSlider(Slider slider) 를 호출해 등록

커스터마이징 없이 기본 디자인의 슬라이더 (위 SliderDefaultStyle 코드 참조) 를 쓸 경우, getSlider() 호출을 통해 Slider 객체를 얻을 수 있음

2

슬라이더 Swipe 리스너 등록

setOnSwipeListener(Slider.OnSwipeListener listener)

오른쪽으로 밀었을때 잠금해제가 되고, 왼쪽으로 밀었을때 랜딩이 되도록 리스너를 등록

Code Block
languagejava
slider.setOnSwipeListener(new Slider.OnSwipeListener() {
    @Override
    public void onLeft() {
        landing();
    }

    @Override
    public void onRight() {
        unlock();
    }
});
3

좌/우 포인트 업데이트

  • BaseLockerSlidingActivity 내의 함수인 onCurrentCampaignUpdated 를 오버라이딩

    • 이 함수의 파라미터로 전달되는 campaign 정보를 이용, Slider.setLeftTextSlider.setRightText를 통해 포인트 정보를 업데이트

  • 첫화면에 노출되는 각각의 캠페인에 따라 화면에 표시되는 좌/우 포인트 변경이 필요

  • 캠페인이 변할 때마다 호출되는onCurrentCampaignUpdated 함수를 오버라이딩