피드 UI

Getting Started

본 문서는 버즈스크린 UI를 Feed형으로 설정할 수 있는 방법을 소개합니다.

1) Card UI vs. Feed UI

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

액션	Card UI	Feed UI

액션	Card UI	Feed UI
Unlock	화면 하단 중앙의 원형 슬라이더를 오른쪽으로 드래그	화면 하단 좌측의 버튼을 오른쪽으로 드래그
Landing	화면 하단 중앙의 원형 슬라이더를 왼쪽으로 드래그	화면 하단 우측 버튼을 왼쪽으로 드래그 ('슬라이딩')
광고/컨텐츠 뷰	하나의 광고/컨텐츠가 Full screen 크기의 Card로 화면에 표시됨 상하단 swipe 액션에 따라 전/후의 Card가 표시됨 ('롤링')	첫화면에는 Full screen 크기의 Card 소재 노출 위쪽으로 스와이프 시 Feed로 진입
예시 영상

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를 추가

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를 상속받은 잠금화면 액티비티 클래스를 사용

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. 잠금화면 커스텀 디자인

커스터마이징을 하는 경우 직접 구현한 잠금화면 액티비티 클래스를 설정합니다. 자세한 사항은 UI 커스터마이징 문서를 참조하세요.

2. 전체화면 슬라이딩

락스크린 액티비티가 기존의 BaseLockerActivity가 아닌, BaseLockerSlidingActivity 를 상속 받도록 할 경우 특정 Slider 뷰에서 뿐만 아니라 화면 전체에서 unlock, landing 을 위한 터치 이벤트를 처리할 수 있습니다.

즉, 위 이미지에서 unlock, landing 터치 이벤트를 터치하는 영역이 A에서 B로 확장됩니다.

BaseLockerSlidingActivity를 구현한 샘플은 SDK 내 SimpleLockerSlidingActivity를 참고하세요.

1) 레이아웃

레이아웃에는 필수적으로 시계, 슬라이더가 포함되어 있어야 합니다.

시계 : 레이아웃에 뷰를 추가하고, 해당 뷰에 표시되는 값은 액티비티 내의 onTimeUpdated에서 처리합니다.
슬라이더 : 아래의 구성 요소들을 변경할 수 있습니다.
- <declare-styleable name="Slider_v2">  <attr name="sl_margin_bottom" format="dimension"/>  <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"/>  <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"/>  <attr name="sl_side_text_size" format="dimension"/>  <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`	슬라이더 중앙 뷰의 화면 하단으로부터의 거리

2) 액티비티 클래스

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

	항목	코드 & 호출 위치	세부내용	예시

	항목	코드 & 호출 위치	세부내용	예시
1	슬라이더 생성	`Slider`를 inflate 한 뒤 `onCreate()`에서 `setSlider(Slider slider)` 를 호출해 등록	커스터마이징 없이 기본 디자인의 슬라이더 (위 `SliderDefaultStyle` 코드 참조) 를 쓸 경우, `getSlider()` 호출을 통해 `Slider` 객체를 얻을 수 있음
2	슬라이더 Swipe 리스너 등록	`setOnSwipeListener(Slider.OnSwipeListener listener)`	오른쪽으로 밀었을때 잠금해제가 되고, 왼쪽으로 밀었을때 랜딩이 되도록 리스너를 등록
3	좌/우 포인트 업데이트	`BaseLockerSlidingActivity` 내의 함수인 `onCurrentCampaignUpdated` 를 오버라이딩 이 함수의 파라미터로 전달되는 campaign 정보를 이용, `Slider.setLeftText`와 `Slider.setRightText`를 통해 포인트 정보를 업데이트	첫화면에 노출되는 각각의 캠페인에 따라 화면에 표시되는 좌/우 포인트 변경이 필요 캠페인이 변할 때마다 호출되는`onCurrentCampaignUpdated` 함수를 오버라이딩