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">Применение темы Material Design</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">Спецификация Material Design</a></li>
<li><a href="{@docRoot}design/material/index.html">Material Design в Android</a></li>
</ul>
</div>
</div>
<p>Порядок создания приложения с элементами Material Design</p>
<ol>
<li style="margin-bottom:10px">
Ознакомьтесь со <a href="http://www.google.com/design/spec">спецификацией Material Design</a>.</li>
<li style="margin-bottom:10px">
Примените <strong>тему Material Design</strong> к своему приложению.</li>
<li style="margin-bottom:10px">
Создайте <strong>макеты</strong> в соответствии с рекомендациями Material Design.</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>В приложении можно реализовать множество функций Material Design и одновременно сохранить его совместимость с версиями Android, предшествующими версии 5.0.
Дополнительные сведения представлены на странице
<a href="{@docRoot}training/material/compatibility.html">Обеспечение совместимости</a>.</p>
<h3>Обновление приложения с добавлением элементов Material Design</h3>
<p>Чтобы дополнить существующее приложение функциями и элементами Material Design, обновите макеты в соответствии с рекомендациями Material Design.
Также не забудьте добавить в приложение функции глубины, реакции на касание и анимации.
</p>
<h3>Создание новых приложений с элементами Material Design</h3>
<p>При создании приложений с "материальными" функциями следуйте <a href="http://www.google.com/design/spec">рекомендациям Material Design</a>, которые позволят вам получить целостное представление о новых принципах дизайна.
При проектировании и разработке своего приложения следуйте инструкциям и используйте новые функциональные возможности платформы Android.
</p>
<h2 id="ApplyTheme">Применение темы Material Design</h2>
<p>Чтобы применить тему Material Design в своем приложении, укажите стиль, который наследует от
<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>В теме Material Design содержатся обновленные системные виджеты, для которых можно настраивать цветовую палитру, а также стандартные анимации для реакции на касания и переходы.
Дополнительные сведения представлены в разделе
<a href="{@docRoot}training/material/theme.html">Использование темы Material Design</a>.</p>
<h2 id="Layouts">Разработка макетов</h2>
<p>Помимо применения и настройки темы Material Design, необходимо соответствие
<a href="http://www.google.com/design/spec">рекомендациям Material Design</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>
|