본 포스팅은 DroidKaigi 2017 ~ 逆引きマテリアルデザイン 을 기본으로 번역하여 작성했습니다
제 일본어 실력으로 인하여 오역이나 오타가 발생할 수 있습니다.
실제 슬라이드의 일본어 부분을 번역했다는 점 양해바랍니다.
역순 머티리얼 디자인
DroidKaigi 2017
2017/03/09
Araki Yuichi
Araki Yuichi
Developer Programs Engineer @Google
머티리얼 디자인
“디지털 경험을 만들기 위한 이론과 리소스와 도구를 맞춘 통합 시스템”
https://material.io/guidelines/
https://material.io/guidelines/material-design/whats-new.html
수시로 업데이트되고 있다
최근 업데이트
머티리얼 디자인 가이드라인 일본어판
https://material.io/jp/guidelines/
머티리얼 디자인을 형태로 한다
있는 것을 활용한다
→ 머티리얼 디자인 서포트 라이브러리
머티리얼 디자인 서포트 라이브러리
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:fabSize="normal"
app:srcCompat="@drawable/ic_action" />
FloatingActionButton fab = ...;
fab.show();
...
fab.hide();
라이브러리를 사용에 있어서 유의점
이미지와 문자를 포함한 항목 위에 터치 피드백
<FrameLayout
android:id="@+id/item"
android:layout_width="256dp"
android:layout_height="256dp"
android:foreground=
"?attr/selectableItemBackground">
<!-- ImageView など -->
</FrameLayout>
ForegroundLinearLayout으로 검색
0.1초라도 빠르게 사용자가 관심 있는 콘텐츠를 보여주는 것이 대원칙
다만 시간이 걸리는 경우 브랜드 이미지를 표시
https://plus.google.com/+AndroidDevelopers/posts/Z1Wwainpjhd
<style name="Theme.MyApp.Launcher">
<item name="android:windowBackground">
@drawable/launch_screen</item>
</style>
@Override
protected void onCreate(Bundle savedInstanceState) {
setTheme(R.style.Theme_MyApp); // 보통 배경으로 되돌린다
super.onCreate(savedInstanceState);
...
사용자 정의
XML에서 @style/foobar 과 ?attr/foobar는 각각 무슨 뜻?
스타일과 테마는 어떻게 다른가?
FAB의 색상은 어디서 오는가?
스타일이나 테마 지정에 이용하는 키
res/values/attrs.xml
<declare-styleable name="FloatingActionButton">
<attr name="backgroundTint"/>
<attr name="fabSize">
<enum name="auto" value="-1"/>
<enum name="normal" value="0"/>
<enum name="mini" value="1"/>
</attr>
...
</declare-styleable>
타입은 integer, float, string, boolean, enum, flag, dimension, color, reference, fraction
속성과 그 값의 매핑
res/values/styles.xml
<style name="Widget.MyApp.FloatingActionButton"
parent="Widget.Design.FloatingActionButton">
<item name="backgroundTint">@color/add</item>
<item name="fabSize">normal</item>
</style>
명시적인 상속 · 암시적인 상속
레이아웃 XML
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
style="@style/Widget.MyApp.FloatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_android"/>
속성과 그 값의 매핑 (= 스타일과 동일)
res/values/themes.xml (styles.xml)
<style name="Theme.MyApp"
parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
AndroidManifest.xml
<activity
android:name=".MainActivity"
android:theme="@style/Theme.MyApp">
...
레이아웃 XML
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorAccent"/>
android.support.design.widget.TextInputLayout
에러 텍스트 색상을 사용자 정의 한다
TextInputLayout 레퍼런스에서 errorTextAppearance 를 찾는다
레이아웃 XML
<android.support.design.widget.TextInputLayout
android:id="@+id/input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorTextAppearance="@style/TextAppearance.MyApp.Error">
...
TextAppearance 을 스타일로 작성
res/values/styles.mxl
<style name="TextAppearance.MyApp.Error"
parent="TextAppearance.Design.Error">
<item name="android:textColor">@color/my_error</item>
</style>
frameworks/support/design/res/values/styles.xml
<style name="Widget.Design.TextInputLayout" parent="android:Widget">
<item name="hintTextAppearance">@style/TextAppearance.Design.Hint</item>
<item name="errorTextAppearance">@style/TextAppearance.Design.Error</item>
<item name="counterTextAppearance">@style/TextAppearance.Design.Counter</item>
<item name="counterOverflowTextAppearance">@style/TextAppearance.Design.Counter.Overflow</item>
<item name="passwordToggleDrawable">@drawable/design_password_eye</item>
<item name="passwordToggleTint">@color/design_tint_password_toggle</item>
<item name="passwordToggleContentDescription">@string/password_toggle_content_description</item>
</style>
frameworks/support/design/res/values/styles.xml
<style name="TextAppearance.Design.Error"
parent="TextAppearance.AppCompat.Caption">
<item name="android:textColor">@color/design_error</item>
</style>
frameworks/support/design/res/color/design_error.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false"
android:color="?android:attr/textColorTertiary"/>
<item android:color="?attr/textColorError"/>
</selector>
자신의 앱 테마로 textColorError 를 지정하면 된다
<style name="Theme.MyApp"
parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="textColorError">#090</item>
</style>
View 들을 강조시켜 이동시킨다
여러 요소가 같은 공간 (elevation) 에 존재하면 안 된다
| Elevation (dp) | Component |
|---|---|
| 24 | Dialog / Picker |
| 16 | Nav drawer / Modal bottom sheet |
| … | … |
| 8 | FAB / Snackbar |
| … | … |
Snackbar가 나올 때 FAB 가 비킨다
FAB 을 CoordinatorLayout 에 넣으면 자동으로 된다
Snackbar
.make(view, "Hello!",
Snackbar.LENGTH_SHORT)
.show();
FAB 처럼 아래에서 나오는 Snackbar를 비키고 싶다
CoordinatorLayout 바로 아래에
<com.example.yourapp.CustomView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_dodgeInsetEdges="bottom"/>
Snackbar처럼 FAB 등을 비키도록 하고 싶다
CoordinatorLayout 바로 아래에
<com.example.yourapp.CustomView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
app:layout_insetEdge="bottom"/>
<a.s.d.w.FloatingActionButton
android:id="@+id/pause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/bottom_sheet"
app:srcCompat="@drawable/ic_pause"/>
@id/bottom_sheet가 움직임에 따라 뒤따른다
상태 변화를 움직인다
이미지 확대 축소 애니메이션
어떻게 구현하는가?
유저가 애니메이션 중에 전환을 반복하는 경우에 어떻게 대응하는가?
API 레벨 19 KitKat에서 도입
Animator에 따른 고수준 애니메이션 API
※ Activity 간의 Transition만이 Transition은 아니다
ChangeBounds changeBounds = new ChangeBounds();
...
TransitionManager.beginDelayedTransition(root, changeBounds);
FrameLayout.LayoutParams lp =
(FrameLayout.LayoutParams) v.getLayoutParams();
lp.width = lp.height = FrameLayout.LayoutParams.WRAP_CONTENT;
v.setLayoutParams(lp);
| Transition | 애니메이션 대상 |
|---|---|
| ChangeBounds | 크기와 위치 |
| ChangeTransform | scale, rotation 등 |
| ChangeScroll | 스크롤 위치 |
| ChangeImageTransform | ImageView의 scaleType |
| Fade | visibiliy |
| Slide | visibiliy |
| Explode | visibiliy |
| TransitionSet | 조합 |
PathMotion
호에 따라 움직인다
TransitionPropagation
복수 애니메이션의 startDelay를 별도로 조정한다
Android 플랫폼
지원 라이브러리
b.android.com
버그 리포트, 기능 요청은 이쪽에서
※ 스크린 샷 (동영상) 중요
comments powered by Disqus
Subscribe to this blog via RSS.