読者です 読者をやめる 読者になる 読者になる

うさがにっき

読書感想文とプログラムのこと書いてきます

Design Support LibraryのCoordinatorLayoutを使ってみる_1

概要

Design Support LibraryのCoordinatorLayoutを使ってみたまとめ その1

詳細

CoodinatorLayoutはFrameLayoutと同じように扱え、CoodinatorLayoutの子View同士に関係を持たせることができるコンポーネント
ある子Viewの動きに合わせてもう一つの子Viewを動かすことができる
何をできるのか直感的には理解しずらい感じがするのでいくつかコードを書いてみて使い方を理解していく

Anchor

Anchorを使うとCoodinatorLayoutの子孫View同士に関係を持たせることができる
大きく二つの特徴がある

  • 参照先のViewとの相対的なViewの配置
  • 参照先のViewが移動した場合の追従

ToolBarの境界線にFloating Action Buttonを配置してみる

<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"
    tools:context=".MainActivityFragment">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v7.widget.Toolbar
            android:id="@+id/tool_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize" />

        <Button
            android:id="@+id/show_snackbar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="show snackbar" />
    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_launcher"
        app:layout_anchor="@id/tool_bar"
        app:layout_anchorGravity="right|bottom" />
</android.support.design.widget.CoordinatorLayout>

f:id:tiro105:20150829110411p:plain

FloatingActionButtonにanchorとしてtoolbarを指定している
さらにanchorGravityとして位置を指定、指定できる値はlayout_gravityと同じ
それによりToolBarの下にFloatingActionButtonに配置している
また、Anchorとして指定したViewが移動すると、そのAnchorを参照しているViewも同様に移動する
この挙動は後述するBehaviorが決めている

Behavior

BehaviorではAnchorに対する振る舞いを決めることができる
基本的な振る舞いはCoodinatorLayout.Behaviorとして定義されており、それがBehaviorとして適応されているため、Anchorとして指定したViewが移動すると、そのAnchorを参照しているViewも同様に移動する
ただし、追従する形では画面の外に出ることはできない

また、独自のBehaviorを作成、指定することで他のViewの動きに合わせてさまざまなアニメーションを定義することができる
独自のBehaviorを作成、指定することは後日まとめる

SnackBar + FloatingActionButton

FrameLayoutでFloatingActionButtonとSnackBarを同時に利用すると両者が重なってしまう
CoordinatorLayoutを用いればこの問題を簡単に解決できる

SnackBarとFloatingActionButtonにCoodinatorLayoutを適応するにはCoodinatorLayoutの子ViewとしてFloatingActionButtonを配置し、Snackbarの親Viewとして同じCoodinatorLayoutを指定する

<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"
    tools:context=".MainActivityFragment">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v7.widget.Toolbar
            android:id="@+id/tool_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize" />

        <Button
            android:id="@+id/show_snackbar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:text="show snackbar" />
    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_launcher"
        android:layout_gravity="bottom|right"
         />
</android.support.design.widget.CoordinatorLayout>

f:id:tiro105:20150829113611p:plain
f:id:tiro105:20150829113657p:plain

感想

FloatingActionBar, CoordinatorLayoutなどのxml属性を定義しようとした時、オートコンプリートが効かない時がある
新しいレイアウトなのでまだIDE側が対応してない感じ