피드 UI
Getting Started
본 문서는 버즈스크린 UI를 Feed형으로 설정할 수 있는 방법을 소개합니다.
1) Card UI vs. Feed UI
버즈스크린 UI 타입은 크게 두 가지로 나뉩니다.
액션 | Card UI | Feed UI |
|---|---|---|
Unlock | 화면 하단 중앙의 원형 슬라이더를 오른쪽으로 드래그 | 화면 하단 좌측의 버튼을 오른쪽으로 드래그 |
Landing | 화면 하단 중앙의 원형 슬라이더를 왼쪽으로 드래그 | 화면 하단 우측 버튼을 왼쪽으로 드래그 ('슬라이딩') |
광고/컨텐츠 뷰 |
|
|
예시 영상 | 
| 
|
2) Requirements
항목 | 세부내용 |
|---|---|
Android Support library | 25 이상 |
Basic Usage
build.gradle 의 경우, BuzzScreen SDK 4.27.x 부터는 수동으로 추가할 필요가 없습니다.
항목 | 코드 & 호출 위치 | 세부내용 | 예시 | |
|---|---|---|---|---|
| 1 |
|
|
| dependencies {
implementation 'com.buzzvil.buzzscreen.ext:feed-sdk:2.0.1.0'
} |
| 2 | Feed 설정 켜기 |
|
| 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. 잠금화면 커스텀 디자인
커스터마이징을 하는 경우 직접 구현한 잠금화면 액티비티 클래스를 설정합니다. 자세한 사항은 https://buzzvil.atlassian.net/wiki/spaces/BDG/pages/386236524 문서를 참조하세요.
2. 전체화면 슬라이딩
락스크린 액티비티가 기존의 BaseLockerActivity가 아닌, BaseLockerSlidingActivity 를 상속 받도록 할 경우 특정 Slider 뷰에서 뿐만 아니라 화면 전체에서 unlock, landing 을 위한 터치 이벤트를 처리할 수 있습니다.
즉, 위 이미지에서 unlock, landing 터치 이벤트를 터치하는 영역이 A에서 B로 확장됩니다.
BaseLockerSlidingActivity를 구현한 샘플은 SDK 내 SimpleLockerSlidingActivity를 참고하세요.
1) 레이아웃
레이아웃에는 필수적으로 시계, 슬라이더가 포함되어 있어야 합니다.
시계 : 레이아웃에 뷰를 추가하고, 해당 뷰에 표시되는 값은 액티비티 내의
onTimeUpdated에서 처리합니다.슬라이더 : 아래의 구성 요소들을 변경할 수 있습니다.
<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>
슬라이더 속성 | 설명 |
|---|---|
| 슬라이더 양쪽 뷰의 화면 하단으로부터의 거리 |
| 슬라이더 왼쪽 가운데 아이콘 |
| 슬라이더 왼쪽 가장자리 아이콘 |
| 슬라이더 왼쪽 배경 |
| 슬라이더 왼쪽 텍스트 색상 |
|
|
| 슬라이더 양쪽 텍스트의 크기 |
| 슬라이더 중앙 텍스트 좌측에 위치한 아이콘 |
| 슬라이더 중앙 텍스트의 크기 |
| 슬라이더 중앙 뷰의 화면 하단으로부터의 거리 |
2) 액티비티 클래스
전체 화면 슬라이딩 기능을 잠금화면에 연동하기 위해서는 다음과 같은 작업이 필요합니다.
항목 | 코드 & 호출 위치 | 세부내용 | 예시 | |
|---|---|---|---|---|
| 1 | 슬라이더 생성 |
| 커스터마이징 없이 기본 디자인의 슬라이더 (위 |
|
| 2 | 슬라이더 Swipe 리스너 등록 |
| 오른쪽으로 밀었을때 잠금해제가 되고, 왼쪽으로 밀었을때 랜딩이 되도록 리스너를 등록 | |
| 3 | 좌/우 포인트 업데이트 |
|
|
|