Androidのツールバーチュートリアル – XMLレイアウトとKotlin

2年 ago
夏樹, 風
4 minutes

AndroidのToolbarウィジェットは、アプリ内でメニューを作成するために使用されます。XMLレイアウトとKotlinコードを使用してToolbarを作成する方法を学びます。さまざまなToolbarのプロパティを実装したAndroidアプリの例をご紹介します。

アンドロイドのツールバーとは何ですか？

一般的に、Androidのツールバーウィジェットは画面の上部に表示されます。アプリケーションのタイトル、ロゴ、ナビゲーションアイコン、およびメニューバーがツールバー内に表示されます。ツールバーは、古くなり非推奨となったActionBarに代わるマテリアルデザインです。

ツールバーのGradle依存関係

以下の依存関係を持つツールバーが利用可能です。

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

Androidのツールバーは、テーマまたはレイアウトから供給できます。

Androidアプリのデフォルトツールバー

android toolbar default style

テーマからのツールバー

デフォルトでは、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>

これによって、テキストや他のアイテムが一切ない透明なツールバーが表示されます。ツールバーを効果的に活用するために、さらにプロパティを追加する必要があります。

ツールバーの背景色の設定

背景色のために、Toolbarタグに以下のXML属性を追加する必要があります。

android:background="@color/colorPrimary"

2. テーマの設定

以下のコードを使用して、ツールバーテーマを設定することができます。

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

レイアウトにはデフォルトのテーマを使用しています。ダークは、テキストの色が明るい（通常は白）ことを示しています。styles.xmlファイルで独自のカスタムテーマも作成できます。

3. タイトル、サブタイトル、アイコンの設定

  • Title: app:title=”Androidly Toolbar”
  • Subtitle: app:subtitle=”Sub”
  • Logo: app:logo=”@android:drawable/ic_menu_call”
  • Navigation Icon: app:navigationIcon=”@drawable/ic_menu_black_24dp”

４．ツールバープレビュー

android toolbar xml inverted colors

ツールバーのプロパティをカスタマイズするためには、多くのXML属性があります。たとえば、titleTextColor、subtitleTextColor、subtitleTextAppearance、titleTextAppearanceなどです。

アンドロイドのツールバーテーマ

私たちは独自のカスタムスタイルを作成し、それらをツールバーのテーマとして割り当てることができます。これは、すべての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 custom toolbar theme

アンドロイドのカスタムツールバー

私たちは、ツールバーの中に独自のカスタムビューを定義することができます。以下のレイアウトは、ツールバー内のカスタムビューを定義しています。

<?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>
android custom toolbar

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() }
    }
}

XMLビューをツールバーのインスタンスに安全に型キャストするために、as演算子を使用します。setNavigationOnClickListenerは、メニューからナビゲーションアイコンがクリックされたときに、トーストメッセージをトリガーします。

次のリンクからAndroidlyToolbarプロジェクトをダウンロードすることができます。

コメントを残す 0

Your email address will not be published. Required fields are marked *