...
버즈스크린 UI 타입은 크게 두 가지로 나뉩니다.
액션 | Card UI | Feed UI |
---|
Unlock | 화면 하단 중앙의 원형 슬라이더를 오른쪽으로 드래그 | 화면 하단 좌측의 버튼을 오른쪽으로 드래그 |
---|
Landing | 화면 하단 중앙의 원형 슬라이더를 왼쪽으로 드래그 | 화면 하단 우측 버튼을 왼쪽으로 드래그 ('슬라이딩') |
---|
광고/컨텐츠 뷰 | | |
---|
예시 영상 | 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 |
---|
| dependencies {
implementation 'com.buzzvil.buzzscreen.ext:feed-sdk:2.0.1.0'
} |
|
2 | Feed 설정 켜기 | BuzzScreen.getInstance().setUseFeed(true)
| | Code Block |
---|
| 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 |
---|
|
<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 |
---|
title | cf. Slider Default Style (Used in SimpleLockerSlidingActivity) |
---|
|
Code Block |
---|
| <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 | 슬라이더 생성 | | 커스터마이징 없이 기본 디자인의 슬라이더 (위 SliderDefaultStyle 코드 참조) 를 쓸 경우, getSlider() 호출을 통해 Slider 객체를 얻을 수 있음 | |
2 | 슬라이더 Swipe 리스너 등록 | setOnSwipeListener(Slider.OnSwipeListener listener)
| 오른쪽으로 밀었을때 잠금해제가 되고, 왼쪽으로 밀었을때 랜딩이 되도록 리스너를 등록 | Code Block |
---|
| slider.setOnSwipeListener(new Slider.OnSwipeListener() {
@Override
public void onLeft() {
landing();
}
@Override
public void onRight() {
unlock();
}
}); |
|
3 | 좌/우 포인트 업데이트 | | | |