今回のサンプル
マテリアルデザインを一通り解説したので、今回のサンプルについての説明に入ります。
サンプル概観
これまで解説した通り、Androidではマテリアルテーマを使用することで、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を以下の内容に書き換えてください。
<?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も以下の内容に書き換えてください。
<?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>
この状態で、一度アプリを起動してみてください。以下のような画面になっているはずです。
ScrollView
今回、長文の文字列を表示しているのがTextView部分です。このTextViewですが、画面に収まる長さではありません｡そのため、スクロールさせる必要がありますが、TextViewそのものにスクロール機能はなく、画面からはみだしたままでスクロールされません。このスクロールを可能にしているのが、ScrollViewです。今回は、<ScrollView>タグ内には<TextView>タグしかありませんが、複数のタグの組み合わせてもかまいませんし、内部にLinearLayoutなどレイアウト部品を入れてもかまいません。このように、画面部品が画面サイズからはみでる場合、それらを<ScrollView>タグで囲むことで、スクロール可能になります。
ところで、この画面ではルートタグとしてLinearLayoutを記述していますが、上記画面構成のみならLinearLayoutは不要で、ルートタグとして、
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
と、記述しても同じように表示されます。
ここから少しずつ改造しながら図2の画面に近づけていきます。そのためにLinearLayoutを記述していると思っていてください。
