[Design support Library] CoordinatorLayoutについて

こんにちは、KID.Aです。

 

今回はCoordinatorLayoutの説明と実装をします。

CoordinatorLayoutはDesign support Libraryに含まれるレイアウトです。
Design support Libraryはデザインのサポートライブラリーで、v22.2より
マテリアルデザインをサポートするコンポーネントがいくつか追加されています。

 

既に色々なサイトでDesign support Libraryの紹介がありますが、簡単にCoordinatorLayoutを説明をしようと思います。

 

CoordinatorLayoutは2つの役割があります。
・最上位のアプリケーションの装飾レイアウト
・1つ以上の子ビューの相互動作を定義するためのコンテナー

 

CoordinatorLayout.Behaviorが定義されていると、CoordinatorLayoutの子ビューに多くの動作を提供することができます。
例えば、スクロールを行うと一緒にツールバーを表示、非表示にしたり、ツールバーのテキストの拡縮などを行うことが簡単にできたりします。

 

APIの説明は以下になります
– CoordinatorLayout
http://developer.android.com/intl/ja/reference/android/support/design/widget/CoordinatorLayout.html

– CoordinatorLayout.Behavior
http://developer.android.com/intl/ja/reference/android/support/design/widget/CoordinatorLayout.Behavior.html

CoordinatorLayout.BehaviorのサブクラスはAppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior, FloatingActionButton.Behaviorなどがあります。

 

実装

 

今回はAppBarLayoutを使用して実装していきます。
AppBarLayoutはAppBarLayout.ScrollingViewBehaviorを使用することで様々なスクロールアクションができるようになっています。

 

・実装は以下の通りです。

 

1. gradleファイルを修正します。
build.gradle

dependencies {
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.android.support:design:23.1.1'
}

 

2. Activityを作成します。
ScrollActivity.java

package jp.co.androidanimationtest;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

public class ScrollActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_scroll);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }

}

 

3.Activityのレイアウトを作成します。
activity_scroll.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="jp.co.androidanimationtest.ScrollActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay"/>

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <FrameLayout
                android:background="#00ff00"
                android:layout_width="match_parent"
                android:layout_height="500dp" />
            <FrameLayout
                android:background="#ff0000"
                android:layout_width="match_parent"
                android:layout_height="500dp" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

 

CollapsingToolbarLayoutのlayout_scrollFlagsで設定しているscrollは下のコンポーネントに合わせて一緒にスクロールします。
exitUntilCollapsedはスクロールするとToolbarが縮小してlayout_height分、画面に残ります。

 

動作確認

・動作は以下の通りです。

 

アプリを起動します。
SnapCrab_NoName_2016-1-25_16-45-20_No-00

 

下にスクロールするとタイトルが小さくなります。
SnapCrab_NoName_2016-1-25_16-44-37_No-00

 

最後までスクロールすると最小のタイトルになります。
SnapCrab_NoName_2016-1-25_16-44-50_No-00

 

以上です。

 

 

KID.A

KID.A の紹介

楽して生きることと一発逆転を夢見ている、ちゃきちゃきのAndroiderです。 いろいろアプリを出しているのですが、いつもリリース後にターゲットユーザ数を2桁見誤っていたことに気付くので、残念でなりません。下方修正で、ヒットがでません。おしいです。 明日から本気出します。 よろしくお願いします。
カテゴリー: Android タグ: , , パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です