ํผ๋ 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. ์ ๊ธํ๋ฉด ์ปค์คํ ๋์์ธ
์ปค์คํฐ๋ง์ด์ง์ ํ๋ ๊ฒฝ์ฐ ์ง์ ๊ตฌํํ ์ ๊ธํ๋ฉด ์กํฐ๋นํฐ ํด๋์ค๋ฅผ ์ค์ ํฉ๋๋ค. ์์ธํ ์ฌํญ์ UI ์ปค์คํฐ๋ง์ด์ง ๋ฌธ์๋ฅผ ์ฐธ์กฐํ์ธ์.
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 | ์ข/์ฐ ํฌ์ธํธ ์ ๋ฐ์ดํธ |
|
| ย |
ย