Brunch Android Shared element
매터리얼 디자인. 그리고 멀고도 먼 안드로이드 애니메이션 적용기.
Google 은 2014.7 월에 머티리얼 디자인을 내 놓아았습니다.
http://googledevkr.blogspot.kr/2014/07/this-is-material-design.html
머티리얼 디자인은 질감이 느껴지는 표면 (tactile surfaces) 과 대담하고 선명한 그래픽 디자인 (bold graphic design), 그리고 아름답고 직관적인 사용자 경험을 위한 자연스러운 애니메이션을 특징으로 합니다.
자. 그래서 어떻게 하라고?
Material Design
https://design.google.com/ 페이지를 열심히 읽어봤다.
아직 잘 모르겠다. 슬라이드 쉐어에서 몇 가지 글들을 읽어보고.
음... 예쁘다. 그래서 브런치에 뭘 적용할 수 있을까?
Android material Design
https://developer.android.com/intl/ko/design/material/index.html
일단 안드로이드 5.0 API 21에서 동작한다.
하위 버전에서 동작과 뷰가 다름을 인지하고 코드에서 분기 처리를 해야 한다.
생각 외로 레퍼런스가 없다.
각 앱들 웹들마다의 디자인 철학이 있고. 브런치 또한 나름의 디자인 가이드가 있다.
웹/iOS 가 매터리얼 디자인이 아닌데 생뚱맞게 안드로이드만 매터리얼 수는 없는 것이다.
그래서 할 수 있는 작은 부분만 적용해 보기로 한다.
브런치 안드로이드에 뷰 상태 변경 애니메이션을 적용해 보기로 하자.
shared element 적용.
문제 1. Theme 이 material이 아니다. Min SDK 16으로 적용되어있다.
문제 2. Activity + Fragment 구조로 대부분의 화면이 구성되어있다.
문제 3. Shared Element를 적용할 만큼의 화면 전환 요소가 없다.
꾸역 꾸역 찾아보니 프로필 화면 수정에 적용할 수 있을 거 같다.
테마 적용
theme.xmlres/ 폴더에 value 하위에 style.xml, theme.xml 이 있다.
21에 material을 적용하기 위해서 위와 같이 폴더와 파일을 만든다.
그리고 아래와 같이 custom theme를 하나 만든다.
transition 파일 생성
내용은 별거 없다.
이제 호출할 activity와 호출받을 activity 에 theme을 적용한다.
AndroidManifest.xml 파일에 아래와 같이 theme을 추가한다.
<activity android:name=". TargetActivity" android:theme="@style/AppThemeSharedNoActionBar">
</activity>
요소 연결
화면 간 공유할 Object 에 transition Name을 설정한다.
<ImageView
android:transitionName="@string/profile_element"
</ImageView>
Click event 가 발생할 때 지금까지의 start Activity와 다른 방식으로 Target Activity를 동작시킨다.
완성!
Shared Element를 정리하자면.
Activity -> Activity 간 화면 전환에 사용할 수 있다.
Fragment -> Fragment 간 다른 방법으로 사용할 수 있다.
Activity -> Actvity + Fragment 구조에서는 사용할 수 없다.
전환 후 키보드가 스크롤 뷰 형태로 올라오는 경우는 문제가 있다. 애니메이션이 이상해짐.
설정 값 중 하나라도 틀리면 동작하지 않는데. android는 그걸 오류라고 알려주지 않는다.
Shared Element 같은 경우는 추가적인 기능이기 때문에 동작을 해도 그만 안 해도 그만. 심지어 하위 버전은 동작을 하지 않기 때문에 적용할 때 어디서 오류가 나는지 찾기가 무척 힘들다.
Android Animation 은 아직 갈 길이 멀었다.
그래도 조금씩 나아지고 있으니. ^^
다음에는 무엇을 포스팅해볼까?
Object Animation?
외부 라이브러리?
취미로 만드는 안드로이드 앱?
