よくある画面要素の組み合わせ ActionBar + RecyclerView + FAB.
ActionBar 部分をスクロール時に上にスライドさせて消したいですよね!
まずは CoordinatorLayout で囲みます.
レイアウトはこんなかんじの構成ですね.
<CoordinatorLayout>
<AppBarLayout>
<Toolbar />
</AppBarLayout>
<RecyclerView />
<FloatingActionButton />
</CoordinatorLayout>
ここでは, 連携する挙動の始まりとなる「きっかけ」を RecyclerView のスクロールとしましたが, 以下の View や Layout は, デフォルトで同様に「きっかけ」にすることができます.
HorizontalGridView
NestedScrollView
RecyclerView
SwipeRefreshLayout
VerticalGridView
NestedScrollingChild | Android Developers
よく画面をみてみると, RecyclerView の最上段をみることができないようになってますね!
それは, CoordinatorLayout は FrameLayout だからです.
CoordinatorLayout is a super-powered FrameLayout.
CoordinatorLayout | Android Developers
でも, とりあえず無視します.
次に, アクションバー部分が「きっかけ」に反応して「ふるまう」するようにします.
AppBarLayout または Toolbar に, 属性「app:layout_behavior」をつけて, 「ふるまう」時の挙動を追加したくなります.
でも, 必要なかったりします.
ふるまいを記述する Behavior は, デフォルトですで に AppBarLayout にアノテーションを利用してセットされているからです.
@CoordinatorLayout.DefaultBehavior(AppBarLayout.Behavior.class)
public class AppBarLayout extends LinearLayout {
Cross Reference: AppBarLayout.java
なので, ふるまい方の種類だけをその子である Toolbar 記述します.
<CoordinatorLayout>
<AppBarLayout>
<Toolbar
app:layout_scrollFlags="scroll|enterAlways" />
</AppBarLayout>
<RecyclerView />
<FLoatingActionButton />
</CoordinatorLayout>
ここで, 動かしてみます.
アクションバーが消えていくようになりましたね!
最後に, RecyclerView 自体も「ふるまわ」せます.
AppBarLayout のふるまい方と同じふるまい方をするように同じ Behavior をセットします.
<CoordinatorLayout>
<AppBarLayout>
<Toolbar
app:layout_scrollFlags="scroll|enterAlways" />
</AppBarLayout>
<RecyclerView
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<FLoatingActionButton />
</CoordinatorLayout>
ここでいきなり現れた文字列 @string/appbar_scrolling_view_behavior は, デフォルトでセットされている
android.support.design.widget.AppBarLayout$ScrollingViewBehavior
のことです.
AppBarLayout にデフォルトで設定されているものと同じですね.
ここで, また動かしてみます.
AppBarLayout の Behavior と同じものを RecyvlerView にもセットしたので, 同じように動きます.
スクロール時にAppBarと同じように開閉スライドすることになるので, RecyclerView との重なり合いがなくなり RecyclerView の最上段も表示されるようになりましたね!
実際の簡略化していないレイアウトを貼っておきます.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="@string/app_name"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
android:layout_gravity="right|bottom"
android:src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
以上のように, レイアウトファイルだけを編集するだけで, インタラクティブな挙動を画面の要素たちに行わせることができるので, 便利な気もしますね!!
→ 少しややこしいので「まとめ」ようとしてつづく (作成中)
