Статьи

Начало работы с дизайном материалов на Android: панель инструментов и панель навигации

Дизайн материалов — это набор правил, созданных 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>

Вы можете выбрать схему, которая вам нравится. Первый результат показан на рисунке ниже: 

android_material_design_toolbar

Теперь пришло время создать нашу тему, которая использует цвета, которые мы выбрали ранее. Приложение должно поддерживать наибольшее количество смартфонов — не только тех, которые используют 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&lt/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);
}

Запустив пример, мы получим:

android_material_design_toolbar

Добавить меню действий на панель инструментов

После того, как панель инструментов настроена правильно, можно добавить меню действий или пункты меню, которые появляются на панели инструментов. Для этого в 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;
}

При запуске примера приложение выглядит так: 

android_material_design_toolbar_options

Когда пользователь выбирает один из этих элементов, приложение должно обнаружить его и предпринять правильные действия, для этого необходимо переопределить метод: 

@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_material_design_navigation_drawer

В конце этого поста вы знаете, как использовать  панель навигации Android и панель инструментов в соответствии с рекомендациями по дизайну материалов.