【Android Studio】Toolbarを使って柔軟なアプリバーを作る - うきっとラボ～中卒から始めるプログラミング～

アプリバーってなんじゃ
- ActionBar
- Toolbar
Toolbar実装方法
ツールバーを動的にカスタマイズする
まとめ

アプリバーってなんじゃ

アプリを開いた時の上に表示されるバーの、ステータスバーじゃない方(？)。

下の画像の「下側の薄い緑の部分」がそうです↓

f:id:ukiuki0518:20191203153258j:plain — 上側の濃い緑：ステータスバー、下側の薄い緑：アプリバー

一般的に「アクションバー」と言われることが多い気がしますが、この記事では後述のActionBarとごっちゃになりそうなので「アプリバー」として説明することにします。
このアプリバーを表示させるために、AndroidStudioでは２通りの方法があります

ActionBar

デフォルトでアプリバーとして実装されています。

styles.xmlファイルにて、ActionBarの詳しい設定が可能です。
自動作成されたコードを見てみましょう。

f:id:ukiuki0518:20191203155006p:plain — res/values/styles.xml

簡単に内容を解説します。

styleタグのname属性に"AppTheme"を指定することで、アプリのテーマとして認識されている。
parent属性にAndroidSDKで用意されているテーマの一つ(Light.DarkActionBar)を親として指定、必要な部分だけを書き換えている。
子要素として「アクションバーの色」「ステータスバーの色」「アクセントカラー」を設定している。

ActionBarはデフォルトで実装されているので楽なのは楽ですが、
アプリバーに色々な動きをつけたりできないということ、
また、様々な Android リリースを通じて徐々に機能が追加されているため、使用する Android システムのバージョンやデバイスによって動作が異なる可能性があること
これらの問題があるようです。

Toolbarは、ActionBarの代わりにアプリバーとして表示することができる機能です。
アプリバーをスクロールに追従させて広げたり、アクティビティによって表示＆非表示を切り替えたり、カスタマイズ性の高い実装が可能になります。
またToolbar のサポートライブラリを使用できるすべてのデバイスでこれらの機能を使用できるというメリットもあります。

ただし、Toolbarの実装にはいくつかの手順を踏まなければいけません。
今回はこれを紹介していきます！

Toolbar実装方法

実装には大きく分けて３つのことを行います。

①アクションバーを非表示にする

ToolbarをActionBarの代わりにするので、ActionBarの方を非表示にしないといけません。

これをしないと、こうなります↓

f:id:ukiuki0518:20191203164948j:plain — ActionBarとToolbarが二重になる

ーーやり方ーー
styles.xml、AppThemeスタイルの”parent”属性を変更する

変更前↓

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- 省略 -->
</style>

f:id:ukiuki0518:20191203171110j:plain — 変更前：ActionBarが表示されている

変更後↓

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 省略 -->
</style>

f:id:ukiuki0518:20191203171143j:plain — 変更後：ActionBarが非表示になった

parentに”～.NoActionBar”を指定することで、ActionBarが非表示になります
※ほかにも「Theme.AppCompat.NoActionBar」と「Theme.AppCompat.DayNight.NoActionBar」がありますが、どれもActionBarは非表示になります。

②レイアウトファイルにToolbarを追加

次に、レイアウトにToolbarを追加します。

ここに追加するということは、
ビューのようにサイズや動きなどを動的に付けられるということですね。
ActionBarはレイアウトファイルには記述できないので、ここがToolbarの長所です。

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    android:elevation="4dp"
    app:logo="@mipmap/ic_launcher"
    app:title="ツールバーやで"
    app:titleTextColor="#ffffff"
    app:subtitle="サブタイトルやで"
    app:subtitleTextColor="ffffff"/>

[IDの指定]
アクティビティクラスから呼び出せるように、ＩＤの指定をします。

[高さ(height)の指定]
”?attr/actionBarSize”として、
非表示になっているアクションバーの高さに合わせています
(たぶんそういうことだと思います)

[影(elevation)の設定]
影の大きさを決めます
ActionBarではデフォルトで「4dp」となっているようです。
今回はこれに合わせて設定しました

[表示内容の設定]
「app:～」でロゴ、タイトル、サブタイトルの指定をしています。

f:id:ukiuki0518:20191203175338j:plain — 追加できた

これでツールバーの表示はできました、

しかし、このままではToolbarは「レイアウトの一部」としてしか認識されていません。
今回はアプリバーとして使用するので、そのようにアクティビティクラスに追記していきます。

③アプリバーとして設定

これは簡単です。
アクティビティクラスのonCreate()に一行追加します。

class MainActivity : AppCompatActivity() {

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

        //↓これを追加
        setSupportActionBar(toolbar)
    }

}

見た目は変わりませんが、
これでプログラムに「Toolbarはアプリバーとして使うよ」
ということが認識されました

ツールバーを動的にカスタマイズする

では、ツールバーを使うことの最大のメリットである、動的カスタマイズをやってみましょう！

アクティビティクラスのonCreate()内で、初期値を変更していきます。
これらの設定や変更を行ったら「setSupportActionBar()」で変更を反映させます。

class MainActivity : AppCompatActivity() {

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

        //ロゴを削除する
        toolbar.logo = null
        
        //タイトル文字列と文字色を変更する
        toolbar.title = "こけこっこ"
        toolbar.setTitleTextColor(Color.BLACK)

        //サブタイトル文字列を文字色を変更
        toolbar.subtitle = "はとぽっぽ"
        toolbar.setSubtitleTextColor(Color.RED)

        //変更を反映
        setSupportActionBar(toolbar)
    }

}