Учебник по панели инструментов Android — XML-макет и Kotlin

Виджет панели инструментов Android используется для создания меню в приложениях. Мы узнаем, как создать панель инструментов, используя макет XML и код Kotlin. Мы реализуем различные свойства панели инструментов в примере приложения для Android.

Что такое панель инструментов Android?

Виджет панели инструментов Android обычно находится в верхней части экрана. Название приложения, логотип, значок навигации и строка меню отображаются внутри панели инструментов. Панель инструментов является заменой старого и устаревшего ActionBar в материальном дизайне.

Зависимости панели инструментов Gradle

Панель инструментов доступна со следующей зависимостью.

implementation 'com.android.support:appcompat-v7:27.1.0'

Панель инструментов Android может поставляться либо из тем, либо из макета.

Панель инструментов приложений Android по умолчанию

Панель инструментов из тем

Тема DarkActionBar по умолчанию добавляет панель инструментов вверху приложения. Мы можем изменить родительскую тему на изображении выше с Theme.AppCompat.Light.DarkActionBar на Theme.AppCompat.Light.NoActionBar, чтобы удалить панель инструментов, которая отображается как часть темы деятельности. Давайте изменим тему и добавим панель инструментов в файл activity_main.xml.

XML-макет панели инструментов

Мы добавили панель инструментов в наш файл макета activity_main.xml, используя следующий код.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    

</LinearLayout>

Это отобразит прозрачную панель инструментов без текста или каких-либо других элементов. Мы должны добавить больше свойств, чтобы эффективно использовать панель инструментов.

1. Настройка цвета фона панели инструментов

Мы должны добавить следующий XML-атрибут в наш тег панели инструментов для цвета фона.

android:background="@color/colorPrimary"

2. Установка темы

Мы можем установить тему панели инструментов, используя следующий код.

android:theme="@style/ThemeOverlay.AppCompat.Dark"

Мы используем тему по умолчанию для макета. Темный означает, что цвета текста будут светлыми (обычно белыми). Мы также можем создавать собственные темы в файле styles.xml.

3. Настройка заголовка, подзаголовка, значков

Название: app:title=Панель инструментов Android
Подзаголовок: app:subtitle=Sub
Логотип: app:logo=@android:drawable/ic_menu_call
Значок навигации: app:navigationIcon=@drawable/ic_menu_black_24dp

4. Предварительный просмотр панели инструментов

Существует множество XML-атрибутов для настройки свойств панели инструментов. Например: titleTextColor, subtitleTextColor, subtitleTextAppearance, titleTextAppearance и т. д.

Темы панели инструментов Android

Мы можем создавать собственные стили и назначать их в качестве темы на панели инструментов. Это будет намного проще, чем добавлять все эти свойства XML.

<resources>
    
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="toolbarStyle">@style/ToolBarStyle</item>
    </style>

    <style name="ToolBarStyle" parent="Widget.AppCompat.Toolbar">
        <item name="android:background">#EA8D8D</item>
        <item name="titleTextAppearance">@style/TitleTextAppearance</item>
        <item name="subtitleTextAppearance">@style/SubTitleTextAppearance</item>
    </style>

    <style name="TitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">#38ADAE</item>
    </style>

    <style name="SubTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">#00B7FF</item>
    </style>

</resources>

Давайте используем пользовательскую тему в файле activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:subtitle="Sub"
        app:title="AndroidlyToolbar" />


</LinearLayout>

Пользовательская панель инструментов Android

Мы можем определить наши собственные представления внутри панели инструментов. Следующий макет определяет настраиваемые представления на панели инструментов.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:subtitle="Sub"
        app:title="AndroidlyToolbar">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">


            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:text="Text" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@drawable/ic_menu_black_24dp" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_centerVertical="true"
                android:text="BUTTON" />

        </RelativeLayout>


    </android.support.v7.widget.Toolbar>


</LinearLayout>

Создание панели инструментов с использованием кода Kotlin

Мы можем создавать панели инструментов программно, используя код Kotlin. Каждое из свойств XML панели инструментов имеет свои эквивалентные методы Kotlin. Следующий класс MainActivity.kt определен ниже.

package net.androidly.androidlytoolbar

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v4.content.ContextCompat
import android.support.v7.widget.Toolbar
import android.widget.Toast


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val toolbar = findViewById(R.id.toolbar) as Toolbar?
        setSupportActionBar(toolbar)
        toolbar?.title = "Androidly"
        toolbar?.subtitle = "Sub"
        toolbar?.navigationIcon = ContextCompat.getDrawable(this,R.drawable.ic_menu_black_24dp)
        toolbar?.setNavigationOnClickListener { Toast.makeText(applicationContext,"Navigation icon was clicked",Toast.LENGTH_SHORT).show() }
    }
}

Используя оператор as, мы безопасно приводим XML-представление к экземпляру панели инструментов. setNavigationOnClickListener запускает всплывающее сообщение при щелчке значка навигации в меню.

Вы можете загрузить проект панели инструментов по следующей ссылке: AndroidlyToolbar