Top Banner
메테리얼 디자인 미리 맛보기 v1.0
66

안드로이드 메테리얼 디자인 transition, cardview 맛보기

Jul 21, 2015

Download

Technology

flashscope
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

메테리얼 디자인 미리 맛보기

v1.0

Page 2: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

http://blog.naver.com/upleat/220146734178

??

Page 3: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

요즘의 트랜드는 Flat Design

Page 4: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

Android 4.4(kitkat) ~ IOS 7 ~

Page 5: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

http://designmodo.com/flat-design-principles/

Principles of Flat DesignNo Added Effects

Page 6: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

http://designmodo.com/flat-design-principles/

Principles of Flat DesignSimple Elements

Page 7: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

http://designmodo.com/flat-design-principles/

Principles of Flat DesignFocus on Typography

Page 8: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

http://designmodo.com/flat-design-principles/

Principles of Flat DesignFocus on Color

Page 9: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

http://designmodo.com/flat-design-principles/

Principles of Flat DesignMinimalist Approach

Page 10: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

http://designmodo.com/flat-design-principles/

Principles of Flat Design“Almost” Flat Design

Page 11: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

https://cuzkus.wordpress.com/2014/06/12/플렛-디자인은-왜-대세가-되었을까/

정보 전달에 불필요한 디자인적 요소들의 제거 !

정보 전달에 최적화

Page 12: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

Material = Flat + 두께, 높이 + (Motion)

https://cuzkus.wordpress.com/2015/01/03/안드로이드-롤리팝과-material-design/

물질의 질감이나 광원 효과, 그림자 효과 등을 통해 깊이감을 더함

Page 13: 안드로이드 메테리얼 디자인 transition, cardview 맛보기
Page 14: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

http://www.youtube.com/watch?v=XOcCOBe8PTc

Page 15: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

http://www.youtube.com/watch?v=Q8TXgCzxEnw

Page 16: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

http://www.google.com/design/spec/material-design

Page 17: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

http://www.slideshare.net/watchncompass/3-material-design

Page 18: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

메테리얼용 색상 추천 http://www.materialpalette.com/

http://www.google.com/design/spec/style/color.html

Page 19: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

5.0 개발 환경 갖추기

Page 20: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

넥서스5이외에도 5.0이 제공되기 시작함!

Page 21: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

5.0 디바이스가 없으면… 제니모션을 사용합시다.

www.genymotion.com

Page 22: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

https://www.virtualbox.org/wiki/Downloads

버츄얼박스가 없으면 버츄얼박스도 설치…

Page 23: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

패키지 설치…

Page 24: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

제니모션도 복사…

Page 25: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

첫 실행시 가상 디바이스를 만들어 줘야 합니다.

Page 26: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

로그인 필요… 회원가입은 홈페이지에서

Page 27: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

5.0 가상 디바이스를 생성합니다.

Page 28: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

start를 누르면…

Page 29: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

5.0 가상환경에서 개발이 가능합니다!

Page 30: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

라이브러리 추가하기

이 자료는 이클립스 기준으로 작성되었습니다.

Page 31: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

최신 서포트 라이브러리 업데이트 필요! (기존 작업 프로젝트를 위해 백업하실분은 백업…)

Page 32: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

SDK-extras-android-support에 있는 appcompat, cardview, recyclerview 불러오기

Page 33: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

최신 빌드 타겟과 IsLibrary체크 확인

Page 34: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

적용할 프로젝트도 최신 빌드타겟 + 서포트, 카드뷰, 리사이클러뷰어 라이브러리 추가

Page 35: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

AppCompat Style 사용하기

Page 36: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

예제 맛보기

이 예제는 아래의 코드를 기반으로 만들어 졌습니다. https://github.com/rdrobinson3/WelcomeToL

Page 37: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

만들어 볼 예제

Page 38: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

간단한 Transition Animation 추가

Page 39: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

Transition Animation https://youtu.be/4x-4tuZqSxQ

Page 40: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

기본 코드 다운 받기 http://bit.ly/14Pofr1

Page 41: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

새로 추가된 CardView위젯

Page 42: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

res - layout - card_row.xml

Page 43: 안드로이드 메테리얼 디자인 transition, cardview 맛보기
Page 44: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

res - layout - activity_main.xml

ListView대신 RecyclerView

Page 45: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

RecyclerView

ListView보다 유연하고 성능이 향상된 위젯 구조가 ListView에 비해 다양하게 확장 할 수 있도록 되었지만

그만큼 손이 많이 가는 부분이 있음…

주요 클래스 Adapter – 기존의 ListView에서 사용하는 Adapter와 같은 개념으로 데이터와 아이템에 대한 View생성 ViewHolder – 재활용 View에 대한 모든 서브 뷰를 보유 LayoutManager – 아이템의 항목을 배치 ItemDecoration – 아이템 항목에서 서브뷰에 대한 처리 ItemAnimation – 아이템 항목이 추가, 제거되거나 정렬될때 애니메이션 처리

http://www.kmshack.kr/android-recyclerview

Page 46: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

List에서는 ClickListener를 달면 간단할 것을 GestureDetector를 사용하여 이벤트 판별

Page 47: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

간단한 Transition Animation 만들기

이 예제는 아래의 코드를 기반으로 작성되었습니다. https://github.com/googlesamples/android-ActivitySceneTransitionBasic

Page 48: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

액티비티간의 전환시에 뷰가 변화하는 애니메이션이 발생

MainActivity DetailActivity

Page 49: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

액티비티간의 전환시에 뷰가 변화하는 애니메이션이 발생

Page 50: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

양쪽 액티비티의 뷰에 사용될 공통 이름을 정합니다. (문자는 아무 문자여도 괜찮습니다.)

Page 51: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

변화가 끝나는 액티비티를 먼저 보겠습니다.

MainActivity DetailActivity

Page 52: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

setTransitionName()을 사용하여 아까 정한 이름을 지정합니다. 이 함수는 롤리팝이상에서 추가되었으므로 분기 처리를 하였습니다.

Page 53: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

MainActivity DetailActivity

변화가 시작되는 액티비티를 보겠습니다.

Page 54: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

싱글탭이 발생 이벤트를 처리하는 곳에 ActivityOprions의 makeSceneTransitionAnimation을 만들어 변화가 시작될 뷰ID와 아까 정한 이름을 지정합니다.

Page 55: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

간단? 하게 애니메이션이 적용되었습니다.https://youtu.be/4x-4tuZqSxQ

Page 56: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

덤. Parallex Scroll 라이브러리 적용하기

Page 57: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

요즘 자주 보는 레이아웃

Page 58: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

https://github.com/google/iosched구글IO 2014

Page 59: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

https://github.com/flavienlaurent/NotBoringActionBarNotBoringActionBar

Page 60: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

https://github.com/nirhart/ParallaxScrollParallax Scrolls

Page 61: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

예전부터 꾸준히 인기를 모으고 있지만… 시간이 남으면 적용해 보겠습니다…( 간단! )

Page 62: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

https://github.com/nirhart/ParallaxScroll라이브러리 다운로드…

Page 63: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

라이브러리 프로젝트 임포트 후 프로젝트에 적용…

Page 64: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

겉을 ParallaxScrollView로 감싸면…

Page 65: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

https://youtu.be/astG_dn-hbo

Page 66: 안드로이드 메테리얼 디자인 transition, cardview 맛보기

수고하셨습니다^^