안드로이드 메테리얼 디자인 transition, cardview 맛보기
TRANSCRIPT
메테리얼 디자인 미리 맛보기
v1.0
http://blog.naver.com/upleat/220146734178
??
요즘의 트랜드는 Flat Design
Android 4.4(kitkat) ~ IOS 7 ~
http://designmodo.com/flat-design-principles/
Principles of Flat DesignNo Added Effects
http://designmodo.com/flat-design-principles/
Principles of Flat DesignSimple Elements
http://designmodo.com/flat-design-principles/
Principles of Flat DesignFocus on Typography
http://designmodo.com/flat-design-principles/
Principles of Flat DesignFocus on Color
http://designmodo.com/flat-design-principles/
Principles of Flat DesignMinimalist Approach
http://designmodo.com/flat-design-principles/
Principles of Flat Design“Almost” Flat Design
https://cuzkus.wordpress.com/2014/06/12/플렛-디자인은-왜-대세가-되었을까/
정보 전달에 불필요한 디자인적 요소들의 제거 !
정보 전달에 최적화
Material = Flat + 두께, 높이 + (Motion)
https://cuzkus.wordpress.com/2015/01/03/안드로이드-롤리팝과-material-design/
물질의 질감이나 광원 효과, 그림자 효과 등을 통해 깊이감을 더함
http://www.slideshare.net/watchncompass/3-material-design
메테리얼용 색상 추천 http://www.materialpalette.com/
http://www.google.com/design/spec/style/color.html
5.0 개발 환경 갖추기
넥서스5이외에도 5.0이 제공되기 시작함!
https://www.virtualbox.org/wiki/Downloads
버츄얼박스가 없으면 버츄얼박스도 설치…
패키지 설치…
제니모션도 복사…
첫 실행시 가상 디바이스를 만들어 줘야 합니다.
로그인 필요… 회원가입은 홈페이지에서
5.0 가상 디바이스를 생성합니다.
start를 누르면…
5.0 가상환경에서 개발이 가능합니다!
라이브러리 추가하기
이 자료는 이클립스 기준으로 작성되었습니다.
최신 서포트 라이브러리 업데이트 필요! (기존 작업 프로젝트를 위해 백업하실분은 백업…)
SDK-extras-android-support에 있는 appcompat, cardview, recyclerview 불러오기
최신 빌드 타겟과 IsLibrary체크 확인
적용할 프로젝트도 최신 빌드타겟 + 서포트, 카드뷰, 리사이클러뷰어 라이브러리 추가
AppCompat Style 사용하기
예제 맛보기
이 예제는 아래의 코드를 기반으로 만들어 졌습니다. https://github.com/rdrobinson3/WelcomeToL
만들어 볼 예제
간단한 Transition Animation 추가
Transition Animation https://youtu.be/4x-4tuZqSxQ
새로 추가된 CardView위젯
res - layout - card_row.xml
res - layout - activity_main.xml
ListView대신 RecyclerView
RecyclerView
ListView보다 유연하고 성능이 향상된 위젯 구조가 ListView에 비해 다양하게 확장 할 수 있도록 되었지만
그만큼 손이 많이 가는 부분이 있음…
주요 클래스 Adapter – 기존의 ListView에서 사용하는 Adapter와 같은 개념으로 데이터와 아이템에 대한 View생성 ViewHolder – 재활용 View에 대한 모든 서브 뷰를 보유 LayoutManager – 아이템의 항목을 배치 ItemDecoration – 아이템 항목에서 서브뷰에 대한 처리 ItemAnimation – 아이템 항목이 추가, 제거되거나 정렬될때 애니메이션 처리
http://www.kmshack.kr/android-recyclerview
List에서는 ClickListener를 달면 간단할 것을 GestureDetector를 사용하여 이벤트 판별
간단한 Transition Animation 만들기
이 예제는 아래의 코드를 기반으로 작성되었습니다. https://github.com/googlesamples/android-ActivitySceneTransitionBasic
액티비티간의 전환시에 뷰가 변화하는 애니메이션이 발생
MainActivity DetailActivity
액티비티간의 전환시에 뷰가 변화하는 애니메이션이 발생
양쪽 액티비티의 뷰에 사용될 공통 이름을 정합니다. (문자는 아무 문자여도 괜찮습니다.)
변화가 끝나는 액티비티를 먼저 보겠습니다.
MainActivity DetailActivity
setTransitionName()을 사용하여 아까 정한 이름을 지정합니다. 이 함수는 롤리팝이상에서 추가되었으므로 분기 처리를 하였습니다.
MainActivity DetailActivity
변화가 시작되는 액티비티를 보겠습니다.
싱글탭이 발생 이벤트를 처리하는 곳에 ActivityOprions의 makeSceneTransitionAnimation을 만들어 변화가 시작될 뷰ID와 아까 정한 이름을 지정합니다.
간단? 하게 애니메이션이 적용되었습니다.https://youtu.be/4x-4tuZqSxQ
덤. Parallex Scroll 라이브러리 적용하기
요즘 자주 보는 레이아웃
https://github.com/flavienlaurent/NotBoringActionBarNotBoringActionBar
예전부터 꾸준히 인기를 모으고 있지만… 시간이 남으면 적용해 보겠습니다…( 간단! )
라이브러리 프로젝트 임포트 후 프로젝트에 적용…
겉을 ParallaxScrollView로 감싸면…
수고하셨습니다^^