Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Androidのマテリアルデザイン ~スクロール連動~

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

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

 Androidアプリを開発するにはAndroid Studioを使います。そのAndroid Studioのメジャーアップデートであるバージョン2.0が正式公開されました。本連載では、最新のAndroid Studio 2系を使い、Androidアプリ開発の基本を解説していきます。前回は、マテリアルデザインとツールバーを扱いました。今回はその続きで、いよいよスクロール連動を解説します。

目次

対象読者

  • Androidアプリ開発未経験な方
  • Java言語は一通り習得済みである方

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

 まず、今回使用するサンプルアプリを作成していきましょう。

プロジェクト作成

 基本的に前回の続きなので、前回のプロジェクトを改造してもいいのですが、レイアウトxmlがかなり変更されます。したがって、別プロジェクトで作成することにします。

 以下がプロジェクト情報です。

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

 Activity名とレイアウトxml名は前回と同じものを使用しています。

 まず、strings.xmlとScrollArticleActivityは前回と同じものをそのままコピーしてください。コピーした直後だとレイアウトxmlにtoolbarがまだ存在しないので、ScrollArticleActivityはコンパイルエラーとなりますが、そのままにしておいてください。

 また、styles.xmlのparent属性も、前回同様に「NoActionBar」に変更しておいてください。

画面作成

 それでは、そのactivity_scroll_article.xmlを以下の内容に書き換えてください。少し長いですが、ところどころ前回のサンプルと同じ部分もあるため、適宜コピーしながら入力してください。

リスト1 activity_scroll_article.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout  // (1)
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"  // (2)
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout  // (3)
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="10dp">  // (4)

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"  // (5)
            android:background="@color/colorPrimary"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView  // (6)
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">  // (7)

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/tv_article"/>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

ビルド設定

 これで一通りコーディングが終了したので起動したいところですが、このままではエラーで起動しません。そこを修正しましょう。

 前回解説しましたが、ToolbarはAndroid標準のSDKではなく、サポートライブラリに含まれているので、

<android.support.v7.widget.Toolbar>

というタグ名になっています。リスト1では、<TextView>タグ以外はすべて、このようなサポートライブラリのタグとなっています。サポートライブラリにもいくつか種類があり、Toolbarはタグ名を見てもわかるように、「v7サポートライブラリ」に含まれています。同様に、(6)のNestedScrollViewは「v4サポートライブラリ」です。そして、(1)のCoordinatorLayoutと(3)のAppBarLayoutは「デザインサポートライブラリ」です。

 これらサポートライブラリを使用する場合は、Android Studioのビルド設定にライブラリの使用を記述する必要があります。

 プロジェクトツールウインドウのGradle Scriptsノードを開いてください。

図1 Gradle Scriptsノード
図1 Gradle Scriptsノード

 build.gradle(Module:app)というファイルがあるので、これを開いてください。build.gradleは同一名のファイルが2カ所にありますが、Module:appの方を開いてください。ファイルを開くと、下の方に、

dependencies {
    …
    compile 'com.android.support:appcompat-v7:23.4.0'
    testCompile 'junit:junit:4.12'
}

という記述があると思います。このcompileとtestCompileの間に1行挿入し、以下のようにしてください。

dependencies {
    …
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile 'com.android.support:design:23.4.0'
    testCompile 'junit:junit:4.12'
}

 なお、一番右端の「23.4.0」というのはライブラリのバージョン番号です。この原稿執筆時点では「23.4.0」ですが、バージョンアップに応じて変更されていくと思います。その場合は、追記する「design」のバージョン番号もあらかじめ記述されている「v7」ものと同一のものを記述してください。すると、画面上に黄色いバーが表示され、右端に「Sync Now」と表示されるので、こちらクリックしてください。再ビルドが始まります。

図2 Gradle同期の指示
図2 Gradle同期の指示

 ここでの、

compile '…'

という記述がビルドに必要な依存ライブラリの指定です。標準SDK以外はここに記述する必要があり、今回追記した1行がデザインサポートライブラリ用の設定になります。

[Note]v7依存

 上記依存ライブラリの記述は、標準SDK以外すべて必要です。そういった意味で、v7もv4も記述しておく必要があります。ところが、v7はあらかじめ記述されていました。

 ここで、ScrollArticleActivityのimport文を見てください。

import android.support.v7.app.AppCompatActivity;

という記述があると思います。実は今までアクティビティクラスの親クラスとして使用してきたAppCompatActivityそのものが既にv7サポートライブラリなのです。そのため、現状、Android Studioでプロジェクトを作成する場合、v7サポートライブラリの使用は必須と考えられており、そのための設定をあらかじめ行ってくれているのです。

 また、v7ライブラリ自体がv4ライブラリに依存しているため、v7を設定するだけでv4が使用できる仕組みになっています。

 ここまでで特にビルドエラーがなければ、アプリを起動してください。起動した直後は前回と同様、以下のような画面です。

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

 ところが、テキスト部分をスクロールすると、それに連動するようにアクションバー(ツールバー)が以下のように隠れます。

図4 アクションバーが隠れたアプリの画面
図4 アクションバーが隠れたアプリの画面

 このような画面の動きを、Javaのソースコードを書かずに画面部品だけで実現できます。


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

著者プロフィール

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

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

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

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

バックナンバー

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

もっと読む

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