Дизайн материалов — это набор правил, созданных Google, которые определяют, как разрабатывать приложения для Android. Их можно применять не только для приложений Android, но и для веб-дизайна. В процессе разработки приложения Android предоставляет несколько библиотек, которые помогают разработчикам реализовывать основные правила поведения для материала. Наиболее важные библиотеки:
- com.android.support:appcompat-v7:23.1.0
- com.android.support:design:23.1.0
В конце концов, эти две библиотеки импортируются по умолчанию, когда разработчик запускает новый проект с помощью Android Studio.
Один важный аспект приложения представлен цветовой схемой. Правила оформления материала описывают, как выбирать цвета.
Предположим, мы создали простой проект Android и позволим нам выполнить шаги по реализации приложения Android, следуя правилам дизайна материалов.
Материал Дизайн: Цвета
Первым шагом является выбор цветовой схемы для нашего приложения. Для этого есть отличный веб-сайт, который можно использовать для создания цветовой схемы в соответствии с правилами оформления материалов.
После выбора цветов мы можем скачать colors.xml:
<resources>
<color name="primary">#3F51B5</color>
<color name="primary_dark">#303F9F</color>
<color name="primary_light">#C5CAE9</color>
<color name="accent">#03A9F4</color>
<color name="primary_text">#212121</color>
<color name="secondary_text">#727272</color>
<color name="icons">#FFFFFF</color>
<color name="divider">#B6B6B6</color>
</resources>
Вы можете выбрать схему, которая вам нравится. Первый результат показан на рисунке ниже:
Теперь пришло время создать нашу тему, которая использует цвета, которые мы выбрали ранее. Приложение должно поддерживать наибольшее количество смартфонов — не только тех, которые используют Lollipop или более поздние версии.
По этой причине необходимо создать две темы: одну для устройств, работающих под управлением Android 5 или более поздней версии, и те, которые работают в версии до леденца.
Итак, давайте создадим две директории под значениями:
стиль
стиль-v21
Первый используется всеми смартфонами с версиями, предшествующими Lollipop, а второй — смартфонами с ОС, начиная с Lollipop.
В первом каталоге style.xml мы делаем:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. -->
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryDark">@color/primary_dark</item>
<item name="colorAccent">@color/accent</item>
</style>
<style name="MyAppTheme" parent="@style/AppTheme" />
</resources>
Во втором каталоге мы просто добавляем:
<resources>
<style name="MyAppTheme" parent="AppTheme">
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
<item name="android:windowSharedElementExitTransition">@android:transition/move</item>
</style>
</resources>
Наконец, в Manifest.xml измените файл следующим образом:
<application
android:theme="@style/MyAppTheme" >
...
</application>
Панель инструментов Android
Одним из наиболее важных компонентов при разработке приложения для Android является панель инструментов . Панель инструментов играет роль, которую раньше играла панель действий Android. Панель инструментов может использоваться для хранения:
- Кнопка навигации
- Приложение плитки и субтитров
- Меню действий
- Логотип бренда
В соответствии с дизайном материала панель инструментов имеет основной цвет, который мы выбрали ранее. Добавьте его в приложение для Android:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:id="@+id/layout">
<include layout="@layout/toolbar" />
</RelativeLayout>
Где расположение панели инструментов:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/primary"
local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
Обратите внимание, что в строке 5 мы устанавливаем высоту панели инструментов по умолчанию, используя? Attr / actionBarSize, а в строке 6 фон панели инструментов.
В упражнении необходимо установить панель инструментов:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setToolBar();
}
...
private void setToolBar() {
Toolbar tb = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(tb);
ActionBar ab = getSupportActionBar();
ab.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);
ab.setDisplayHomeAsUpEnabled(true);
}
Запустив пример, мы получим:
Добавить меню действий на панель инструментов
После того, как панель инструментов настроена правильно, можно добавить меню действий или пункты меню, которые появляются на панели инструментов. Для этого в res / menu добавьте файл с именем main_menu.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="@+id/menu_settings"
android:title="Settings"
android:icon="@android:drawable/ic_menu_preferences"
app:showAsAction="always"
android:orderInCategory="100"/>
<item android:id="@+id/menu_help"
android:title="Help"
android:icon="@android:drawable/ic_menu_help"
app:showAsAction="ifRoom"
android:orderInCategory="110" />
<item android:id="@+id/menu_compass"
android:title="Compass"
android:icon="@android:drawable/ic_menu_compass"
app:showAsAction="never"
android:orderInCategory="105"/>
</menu>
Сейчас в деятельности есть:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main_menu, menu);
return true;
}
При запуске примера приложение выглядит так:
Когда пользователь выбирает один из этих элементов, приложение должно обнаружить его и предпринять правильные действия, для этого необходимо переопределить метод:
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int itemId = item.getItemId();
String btnName = null;
switch(itemId) {
case R.id.menu_settings:
btnName = "Settings";
break;
case R.id.menu_compass:
btnName = "Compass";
break;
case R.id.menu_help:
btnName = "Help";
break;
}
Snackbar.make(layout, "Button " + btnName, Snackbar.LENGTH_SHORT).show();
return true;
}
В этом случае мы просто показываем информационное сообщение, используя Snackbar.
Android навигационный ящик
Панель навигации — это один из наиболее важных шаблонов пользовательского интерфейса, представленных Google при разработке приложений для Android. Панель навигации — это боковое меню, которое помогает организовать навигацию внутри приложения. Это универсальный способ доступа к различным страницам и информации внутри приложения. Вы можете обратиться к официальной странице Google, чтобы узнать больше. Реализация очень проста. Пользовательский вид, представляющий блок навигации, должен быть первым элементом макета:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/toolbar" />
<!-- Let's add fragment -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/frame"/>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/nav_items" />
</android.support.v4.widget.DrawerLayout>
В этом случае панель инструментов находится внутри LinearLayout, но способ, которым приложение обрабатывает ее, такой же, как показано ранее. В этом случае есть FrameLayout для хранения содержимого страницы, показанного через фрагменты. NavigationView — это «настоящее» меню нашего приложения. Пункты меню написаны в nav_items.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item android:id="@+id/fab"
android:title="Floating Action Button"
android:icon="@drawable/ic_action_fab" />
<item android:id="@+id/star"
android:title="Star"
android:icon="@drawable/ic_action_star" />
<item android:id="@+id/uploadr"
android:title="Star"
android:icon="@drawable/ic_action_upload" />
</group>
</menu>
Чтобы справиться, когда пользователь нажимает на элемент, очень просто, просто напишите:
private void setNavigationDrawer() {
dLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
NavigationView navView = (NavigationView) findViewById(R.id.navigation);
navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
Fragment frag = null;
int itemId = menuItem.getItemId();
if (itemId == R.id.fab) {
frag = new Fragment1();
}
else if (itemId == R.id.star) {
frag = new Fragment2();
}
if (frag != null) {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
transaction.replace(R.id.frame, frag);
transaction.commit();
dLayout.closeDrawers();
return true;
}
return false;
}
});
}
Мы просто добавляем слушателя, чтобы знать, когда пользователь нажимает на один из пунктов меню, а затем устанавливаем правильный фрагмент. Последний шаг — это открытие ящика, когда пользователь нажимает на иконку дома, чтобы сделать это:
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int itemId = item.getItemId();
String btnName = null;
switch(itemId) {
...
// Android home
case android.R.id.home: {
dLayout.openDrawer(GravityCompat.START);
return true;
}
}
.....
}
Запустив пример приложения, мы имеем:
В конце этого поста вы знаете, как использовать панель навигации Android и панель инструментов в соответствии с рекомендациями по дизайну материалов.