ํ”ผ๋“œ 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"> <!--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

์Šฌ๋ผ์ด๋” ์ค‘์•™ ๋ทฐ์˜ ํ™”๋ฉด ํ•˜๋‹จ์œผ๋กœ๋ถ€ํ„ฐ์˜ ๊ฑฐ๋ฆฌ



ย 

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 ํ•จ์ˆ˜๋ฅผ ์˜ค๋ฒ„๋ผ์ด๋”ฉ

ย 

ย