Android Custom view

Android�� Custom�� ViewStaggered View, Facebook Custom View

오픈소스를 활용한

오늘 할 이야기는..?

2 Yongbin, Cha

Android�� Custom�� View

다양한 Android Custom View 사례

Custom View Open Source 소개

Custom View - (2) Pinterest View

Custom View - (1) Facebook View

2015 Daegu SWCC Seminar

Android Custom ListView

3 Yongbin, Cha

그냥.. Android Custom ListView라고 했을때..

이런 뷰만 알고 있었다면..?



4 Yongbin, Cha2015 Daegu SWCC Seminar

5 Yongbin, Cha

“이미지를 카드 형식으로 보여주는 View”





7 Yongbin, Cha

“직접 컨텐츠 사진을 제작하여 Custom 하게 보여주는 View”





9 Yongbin, Cha

“사진의 사이즈들을 적당하게 조절하여 잘라 보여주는 View”





11 Yongbin, Cha

“사진의 비율에 맞게 리스트를 구성하는 View”



12 Yongbin, Cha


https://github.com/etsy/AndroidStaggeredGrid


13 Yongbin, Cha

https://github.com/etsy/AndroidStaggeredGrid


“ support v7에서 StaggeredGridLayoutManager 제공으로 라이브러리 지원이 중지 ”


14 Yongbin, Cha

https://github.com/lucasr/twoway-view/

List Gird

Spannable GirdStaggered




15 Yongbin, Cha


List Gird

Spannable GirdStaggered


“ Recylerview를 이용한 다양한 레이아웃 관리”



16 Yongbin, Cha


Facebook Custom View

- 리스트 하나에 많은 사진

- 적절한 사진 비율도 유지



Linear Layout

Profile PicText View

Link Text

Image Attachment

Profile Name

Timestamp

Status Message

Linear Layout

사진 수에 따라

어떻게 보여줄까?

사진 수가 하나일 경우

사진 수가 두 개일 경우

사진 수가 세 개 이상일 경우

3











Text View



Text View



Text View



Text View



Text View

Open Source 라이브러리를 이용해 여러 사진에 대한 대응을 하자



Text View




items 를 배치할 영역을 설정

어떤 Layout Manager 를 사용할 건지 결정


어떻게 작동하는 걸까?




Data Model

Adapter

RecyclerView

SpannableGridLayoutManager

GridLayoutManager

StaggeredGridLayoutManager

ListLayoutManager





사진이 하나일 경우



사진이 두 개일 경우



사진이 세 개 이상일 경우

352015 Daegu SWCC Seminar Yongbin, Cha

Staggered View 대표적인 예

- 사진 비율을 유지

- 리스트 하나에 사진 하나



Android Support v7 RecyclerView

StaggeredGridLayoutManager

StaggeredGridLayoutManager?

http://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager.html

http://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager.html



RecyclerView Layout



LinearLayoutManager GridLayoutManager StaggeredLayoutManager


StaggeredGridLayoutManager 를 이용한

Pinterest View



Step 1 Adding the require Gradle dependencies

< build.gradle >



Step 2 Adding Layout XML for Grid item

< grid_item.xml >

Image View

Text View



Step 3 Adding Layout XML for Main Activity

< activity_main.xml >



Step 4

< PinterestAdapter.java >

Add layout for EACH item in our list.



Step 5 Create our RecyclerView’s adapter

< PinterestAdapter.java >



Step 6 Attaching the Adapter

< MainActivity.java >



Step 7 Staggered Grid Spacing Fix

< SpacesItemDecoration.java >



Step 8 Add any value you wish for SpacesItemDecoration.That value determines the amount of spacing.

< MainActivity.java >



Step 9 Final Results




Step 9 Final Results

DEMO

50 Yongbin, Cha

https://github.com/ChaYongbin/customview

코드 전체를 보고 알고 싶다면..?



https://github.com/ChaYongbin/customview


Android Custom View - END

다양한 Android Custom View 사례 소개

Custom ListView Open Source 소개

Facebook Custom View 만들어 보기

StaggeredGrid View (Pinterest View) 만들어 보기

지금까지

에 대해서 알아보았습니다.


감사합니다~

Android Custom View - END

Android Custom view

Mobile