CodeZine(コードジン)

特集ページ一覧

Androidのマテリアルデザイン ~マテリアルデザインとツールバー~

Android Studio 2で始めるアプリ開発入門 第16回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/02/07 14:00
目次

ツールバー

 改造の第1弾として、アクションバーの代わりにツールバーを導入します。

 今までのアプリで使用してきたアクションバーは、「ツールバーサンプル」とアプリ名を表示しているように、アプリ名の表示やオプションメニューの表示ぐらいしか機能を持ち合わせていませんでした。アクションバー部分の表示をもっと柔軟にカスタマイズできるものに、Toolbarというものがあります。これを導入しましょう。

 activity_scroll_article.xmlのLinearLayoutとScrollViewの間に以下のタグを記述してください。

リスト3 activity_scroll_article.xmlへの追記
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    …>
 
   <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      android:background="@color/colorPrimary"
      android:elevation="10dp"/>

   <ScrollView
      …
   </ScrollView>
</LinearLayout>

 さらに、styles.xmlの<style>タグのparent属性を以下のように書き換えてください。

parent="Theme.AppCompat.Light.NoActionBar"

 ツールバーをアクションバーの代わりに使用するためには、まず標準のアクションバーを非表示にする必要があります。これはテーマで指定します。それが、styles.xmlの<style>タグのparent属性の指定です。ここを「NoActionBar」とすることで非表示となります。

 アクションバーを非表示にした代わりに、画面の最上部にToolbarタグを指定します。それがリスト3の書き換えです。ただし、Toolbar自体はAndroid標準のSDKではなくサポートライブラリに含まれているので、タグ指定も単に<Toolbar>ではなく、以下のようになっています。

<android.support.v7.widget.Toolbar>

 このタグの属性の記述についていくつか補足します。まず、layout_heightの記述ですが、ここで指定されている「?attr/」というのは、テーマに含まれる属性を指定する記述です。したがって、「?attr/actionBarSize」というのは、今回適用しているテーマの、アクションバーの高さを表しています。

 次に、android:backgroundですが、ここでは「@color/colorPrimary」を指定しています。マテリアルデザインは4色を基本としており、アクションバーは「colorPrimary」が基本の色になっています。したがって、アクションバーの代わりとなるツールバーもこの色を指定しているのです。

 最後にandroid:elevationですが、こちらもマテリアルデザインで影を付けることによって画面部品の3次元表現をしています。その陰の付け具合を指定しているのがこの属性です。

[Note]elevationの値

 このサンプルではandroid:elevationに10dpを指定しています。この値を任意の値に変更してアプリを起動し直してみると、影の付き具合も変わるはずです。

図5 5dpの場合
図5 5dpの場合
図6 20dpの場合
図6 20dpの場合

 なお、このサンプルでは、影の付き具合をわかりやすくするために、10dpという大きめの値を指定しています。elevationについて、どういう値が適切かは、こちらのページに詳細が書かれています。これによると、アクションバー(App Bar)は4dpとなっています。

 この状態でアプリを起動しても、下図のように青いバーが表示されるだけです。

図7 ツールバーのみを表示したアプリの画面
図7 ツールバーのみを表示したアプリの画面

 ツールバーはアクションバーと違い、柔軟な表現が可能な代わりに、表示内容を自分で設定する必要があります。これはActivityで行います。ScrollArticleActivityのonCreate()に以下のコードを追記してください。

リスト4 ScrollArticleActivityのonCreate()への追記
protected void onCreate(Bundle savedInstanceState) {
      ~省略~

   Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);  // (1)
   toolbar.setLogo(R.mipmap.ic_launcher);  // (2)
   toolbar.setTitle(R.string.toolbar_title);  // (3)
   toolbar.setTitleTextColor(Color.WHITE);  // (4)
   toolbar.setSubtitle(R.string.toolbar_subtitle);  // (5)
   toolbar.setSubtitleTextColor(Color.LTGRAY);  // (6)
   setSupportActionBar(toolbar);  // (7)
}

 ここでアプリを再起動してみてください。以下のような画面に変わっているはずです。

図8 ツールバーを使用したアプリの画面
図8 ツールバーを使用したアプリの画面

 図1のアクションバーとは違い、かなり柔軟に表示されていることが分かると思います。

 まず、(1)で画面部品としてのToolbarを取得しています。

 ロゴの表示を設定しているのが(2)で、setLogo()メソッドを使います。引数はロゴ用リソースのR値です。ここでは、もともと用意されているアプリのロゴを使用しています。任意の画像をdrawableなどの画像フォルダに格納し、それを指定してもかまいません。

 次にタイトルを設定しているのが(3)です。これは、setTitle()メソッドを使います。引数は表示文字列のR値です。

 同様に、サブタイトルを設定しているのが(5)で、setSubtitle()メソッドを使い、表示文字列のR値を引数として渡します。

 さらに、タイトルとサブタイトルの文字色を指定しているのが、(4)と(6)です。それぞれ、setTitleTextColor()メソッド、setSubtitleTextColor()メソッドを使います。これは、「#ffffff」のようにRGBのカラーコードを指定してもいいですが、わかりやすい色であれば、Colorクラスの定数として用意されています。ここではそれを利用しています。(4)で白色(WHITE)を、(6)で明るい灰色(LTGRAY)を指定しています。

 最後に、このように設定したToolbarをアクションバーの代わりとして使用するように設定しているのが(7)です。これは、ActivityクラスのsetSupportActionBar()メソッドを使用します(より正確には、AppCompatActivityクラスのメソッドです)。

 以上の実装で、アクションバーと同様に、ツールバー上でオプションメニューを扱えるようになります。

まとめ

 ツールバーを使用すると、アクションバーよりも柔軟な表現が可能になります。しかし、現状では当初の目的であるスクロールとツールバーが連動するところまで実装されていません。次回は、その実装から行っていきます。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Android Studio 2で始めるアプリ開発入門

もっと読む

著者プロフィール

  • WINGSプロジェクト 齊藤 新三(サイトウ シンゾウ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きた...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5