blob: be1fca2500d6c1206d7f2b4f4c3ea5bc95d4eb77 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
page.title=시작하기
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>이 과정에서 다루는 내용</h2>
<ol>
<li><a href="#ApplyTheme">머티리얼 테마 적용</a></li>
<li><a href="#Layouts">레이아웃 디자인</a></li>
<li><a href="#Depth">뷰에서 엘리베이션 지정</a></li>
<li><a href="#ListsCards">목록 및 카드 생성</a></li>
<li><a href="#Animations">애니메이션 사용자지정</a></li>
</ol>
<h2>필독 항목</h2>
<ul>
<li><a href="http://www.google.com/design/spec">머티리얼 디자인 사양</a></li>
<li><a href="{@docRoot}design/material/index.html">Android의 머티리얼 디자인</a></li>
</ul>
</div>
</div>
<p>머티리얼 디자인으로 앱을 생성하려면:</p>
<ol>
<li style="margin-bottom:10px">
<a href="http://www.google.com/design/spec">머티리얼 디자인 사양</a>을 검토합니다.</li>
<li style="margin-bottom:10px">
앱에 머티리얼 <strong>테마</strong>를 적용합니다.</li>
<li style="margin-bottom:10px">
머티리얼 디자인 지침에 따라 <strong>레이아웃</strong>을 생성합니다.</li>
<li style="margin-bottom:10px">
그림자를 드리우기 위한 뷰의 <strong>엘리베이션</strong>을 지정합니다.</li>
<li style="margin-bottom:10px">
목록 및 카드에는 시스템 <strong>위젯</strong>을 사용합니다.</li>
<li style="margin-bottom:10px">
앱에서 <strong>애니메이션</strong>을 사용자지정합니다.</li>
</ol>
<h3>이전 버전과의 호환성 유지</h3>
<p>Android 5.0 이전 버전과의 호환성을 유지하면서 다양한 머티리얼 디자인 기능을 앱에 추가할 수 있습니다.
자세한 내용은
<a href="{@docRoot}training/material/compatibility.html">호환성 유지</a>를 참조하세요.</p>
<h3>머티리얼 디자인으로 앱 업데이트</h3>
<p>머티리얼 디자인을 통합하기 위해 기존 앱을 업데이트하려면 머티리얼 디자인 지침에 따라 레이아웃을 업데이트하세요.
또한 깊이, 터치 피드백, 애니메이션도 통합하세요.
</p>
<h3>머티리얼 디자인으로 새 앱 생성</h3>
<p>머티리얼 디자인 기능으로 새 앱을 생성하는 경우, <a href="http://www.google.com/design/spec">머티리얼 디자인 지침</a>은 효율적인 디자인 프레임워크를 제공합니다.
앱 디자인 및 개발 시 이 지침을 따르고 Android 프레임워크의 새로운 기능을 사용하세요.
</p>
<h2 id="ApplyTheme">머티리얼 테마 적용</h2>
<p>머티리얼 테마를 앱에 적용하려면
<code>android:Theme.Material</code>에서 상속하는 스타일을 지정합니다.</p>
<pre>
<!-- res/values/styles.xml -->
<resources>
<!-- your theme inherits from the material theme -->
<style name="AppTheme" parent="android:Theme.Material">
<!-- theme customizations -->
</style>
</resources>
</pre>
<p>머티리얼 테마는 터치 피드백 및 액티비티 전환을 위한 색상표 및 기본 애니메이션을 설정할 수 있는 업데이트된 시스템 위젯을 제공합니다.
자세한 내용은
<a href="{@docRoot}training/material/theme.html">머티리얼 테마 사용</a>을 참조하세요.</p>
<h2 id="Layouts">레이아웃 디자인</h2>
<p>머티리얼 테마를 적용하고 사용자지정하는 것과 더불어, 레이아웃이 <a href="http://www.google.com/design/spec">머티리얼 디자인 지침</a>을 따라야 합니다.
레이아웃 디자인 시 다음 사항에 특히 주의하세요.
</p>
<ul>
<li>기준선 그리드</li>
<li>키라인</li>
<li>간격</li>
<li>터치 대상 크기</li>
<li>레이아웃 구조</li>
</ul>
<h2 id="Depth">뷰에서 엘리베이션 지정</h2>
<p>뷰는 그림자를 드리울 수 있으며 뷰의 엘리베이션 값은 그림자 크기 및 그리는 순서를 결정합니다.
뷰의 엘리베이션을 설정하려면 레이아웃에서
<code>android:elevation</code> 특성을 사용하세요.</p>
<pre>
<TextView
android:id="@+id/my_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/next"
android:background="@color/white"
android:elevation="5dp" />
</pre>
<p>새 <code>translationZ</code> 속성을 사용하여 뷰 엘리베이션의 일시적 변경을 반영하는 애니메이션을 생성할 수 있습니다.
엘리베이션 변경은
<a href="{@docRoot}training/material/animations.html#ViewState">터치
제스처에 반응</a>할 때 유용하게 쓰일 수 있습니다.</p>
<p>자세한 내용은 <a href="{@docRoot}training/material/shadows-clipping.html">그림자 정의 및 뷰 클리핑</a>을 참조하세요.
</p>
<h2 id="ListsCards">목록 및 카드 생성</h2>
<p>{@link android.support.v7.widget.RecyclerView}는 {@link
android.widget.ListView}의 플러그 기능이 개선된 버전으로, 다양한 레이아웃 유형을 지원하고 향상된 성능을 제공합니다.
{@link android.support.v7.widget.CardView}를 사용하면 모든 앱에서 일관된 모습으로 카드 안의 정보를 표시할 수 있습니다.
다음 코드 예는 {@link android.support.v7.widget.CardView}를 레이아웃에
포함시키는 방법을 보여줍니다.</p>
<pre>
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="200dp"
android:layout_height="200dp"
card_view:cardCornerRadius="3dp">
...
</android.support.v7.widget.CardView>
</pre>
<p>자세한 내용은 <a href="{@docRoot}training/material/lists-cards.html">목록 및 카드 생성</a>을 참조하세요.
</p>
<h2 id="Animations">애니메이션 사용자지정</h2>
<p>Android 5.0(API 레벨 21)에는 앱에서 사용자지정 애니메이션 생성을 위한 새 API가 포함되어 있습니다. 예를 들어, 액티비티 전환을 활성화하고 액티비티 내부에서 나가기 전환을 정의할 수 있습니다.
</p>
<pre>
public class MyActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// enable transitions
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
setContentView(R.layout.activity_my);
}
public void onSomeButtonClicked(View view) {
getWindow().setExitTransition(new Explode());
Intent intent = new Intent(this, MyOtherActivity.class);
startActivity(intent,
ActivityOptions
.makeSceneTransitionAnimation(this).toBundle());
}
}
</pre>
<p>이 액티비티에서 다른 액티비티를 시작하면 나가기 전환이 활성화됩니다.</p>
<p>새 애니메이션 API에 대한 자세한 내용은 <a href="{@docRoot}training/material/animations.html">사용자지정 애니메이션 정의</a>를 참조하세요.</p>
|