CodeZine(コードジン)

特集ページ一覧

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

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

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

今回のサンプル

 マテリアルデザインを一通り解説したので、今回のサンプルについての説明に入ります。

サンプル概観

 これまで解説した通り、Androidではマテリアルテーマを使用することで、3次元化と配色に関して、既に設定が済んでいることになります。ここからは、「画面部品に動きをつける」ということを扱っていきます。最終的には下図のような画面を作成します。

図2 今回のサンプルの最終形となる画面(標準)
図2 今回のサンプルの最終形となる画面(標準)

 長文の文字列が表示されていて、これがスクロールできるようになっており、スクロールしていくと、下図のように上部のバーが縮小します。

図3 今回のサンプルの最終形となる画面(縮小)
図3 今回のサンプルの最終形となる画面(縮小)

 ここまでする処理の実装は次回行いますが、その前段階として、まずはツールバーを習得しておきましょう。

サンプルプロジェクト作成

 では、今回使用するサンプルアプリを作成していきましょう。以下がプロジェクト情報です。

  • Application name:ToolbarSample
  • Company Domain:android.wings.websarva.com
  • Package name:com.websarva.wings.android.toolbarsample
  • Project location:C:\…任意のワークフォルダ…\ToolbarSample
  • Phone and Tablet Minimum SDK:API 15
  • Add an activity:Empty Activity
  • Activity Name:ScrollArticleActivity
  • Layout Name:activity_scroll_article

 strings.xmlを以下の内容に書き換えてください。

リスト1 strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
   <string name="app_name">ツールバーサンプル</string>
   <string name="tv_article">Androidアプリでのメディア再生\n\n…</string>
   <string name="toolbar_title">Material!</string>
   <string name="toolbar_subtitle">ツールバーを使用</string>
</resources>

 1点注意があります。今回はスクロールを扱うため、長文の文字列が必要です。それが、name属性tv_articleのタグです。この内容には、長文であればどのような文字列を入れても構いません。そのため、リスト1では冒頭だけを記述し、以降を「…」と省略しています。ただし、改行には注意してください。改行は「\n」を記述し、実際に改行はしないようにしてください。また、文字列中に「"」(ダブルクオーテーション)や「'」(シングルクォーテーション)を用いる場合は、「\"」や「\'」のようにエスケープしてください。なお、ダウンロードサンプルでは、前回分の記事原稿の一部を記述しています。

 次に、activity_scroll_article.xmlも以下の内容に書き換えてください。

リスト2 activity_scroll_article.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <ScrollView
      android:layout_width="match_parent"
      android:layout_height="match_parent">

      <TextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="@string/tv_article"/>
   </ScrollView>
</LinearLayout>

 この状態で、一度アプリを起動してみてください。以下のような画面になっているはずです。

図4 起動したアプリの画面
図4 起動したアプリの画面

ScrollView

 今回、長文の文字列を表示しているのがTextView部分です。このTextViewですが、画面に収まる長さではありません。そのため、スクロールさせる必要がありますが、TextViewそのものにスクロール機能はなく、画面からはみだしたままでスクロールされません。このスクロールを可能にしているのが、ScrollViewです。今回は、<ScrollView>タグ内には<TextView>タグしかありませんが、複数のタグの組み合わせてもかまいませんし、内部にLinearLayoutなどレイアウト部品を入れてもかまいません。このように、画面部品が画面サイズからはみでる場合、それらを<ScrollView>タグで囲むことで、スクロール可能になります。

 ところで、この画面ではルートタグとしてLinearLayoutを記述していますが、上記画面構成のみならLinearLayoutは不要で、ルートタグとして、

<ScrollView
     xmlns:android="http://schemas.android.com/apk/res/android"

と、記述しても同じように表示されます。

 ここから少しずつ改造しながら図2の画面に近づけていきます。そのためにLinearLayoutを記述していると思っていてください。


  • 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