[Android] RecyclerView畫面滑動時，隱藏ToolBar [使用CoordinatorLayout]

有些APP在使用時，當你往下滑動，ToolBar就會隨之隱藏，往上滑時又會出現，這樣的好處是使用者在瀏覽時可以有更大的可視空間。

實做畫面如下圖↓

要呈現這樣的效果，依靠的是Design Support Library中的「CoordinatorLayout」，CoordinatorLayout簡易來說就是當一個View變動的時候，其餘的View也會有特定的移動。

我們拿上一次的專案來進行這次的實做，原先三個Fragment都只有一個輸入框，無法上下滑動，需要來修改一下使其可以進滑動的動作，這裡我使用大多數APP使用來呈現資料的RecyclerView，並搭配CardView來呈現較為特殊的效果。

在Gradle中加入以下:

	dependencies {
	...
	compile 'com.android.support:cardview-v7:25.0.1'
	compile 'com.android.support:recyclerview-v7:25.0.1'
	}

view raw build.gradle hosted with ❤ by GitHub

創建一個recycler_textview.xml，透過Cardview使Textview有不一樣的效果，用來當作RecyclerView放資料的容器，可以自行設計樣式

	<?xml version="1.0" encoding="utf-8"?>
	<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:card_view="http://schemas.android.com/apk/res-auto"
	android:layout_width="match_parent"
	android:layout_height="50dp"
	android:layout_gravity="center"
	android:layout_margin="8dp"
	card_view:cardCornerRadius="4dp"
	card_view:cardBackgroundColor="@color/colorAccent">
	<TextView android:text="TextView"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:id="@+id/recyclerTextView"
	android:padding="8dp"
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:textColor="@color/white"
	android:layout_gravity="center" />
	</android.support.v7.widget.CardView>

view raw recycler_textview.xml hosted with ❤ by GitHub

fragmentlist_one.xml也進行修改，使用RecyclerView元件，並將Fragment的Backgroud改為白色

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="horizontal" android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="@color/white">
	<android.support.v7.widget.RecyclerView
	android:id="@+id/recyclerView"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:clipToPadding="false" />
	</LinearLayout>

view raw fragmentlist_one.xml hosted with ❤ by GitHub

要使用RecyclerView，需要一個Adapter，建立一個RecyclerViewAdapter.java

	package com.example.solinari.coordinatorlayoutsample;
	import android.support.v7.widget.RecyclerView;
	import android.view.LayoutInflater;
	import android.view.View;
	import android.view.ViewGroup;
	import android.widget.TextView;
	/**
	* Created by Solinari on 2017/1/21.
	*/
	public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
	private String[] Dataset;
	public static class ViewHolder extends RecyclerView.ViewHolder {
	public TextView mTextView;
	public ViewHolder(View v) {
	super(v);
	mTextView =(TextView) v.findViewById(R.id.recyclerTextView);
	}
	}
	public RecyclerViewAdapter(String[] myDataset) {
	Dataset = myDataset;
	}
	@Override
	public RecyclerViewAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
	int viewType) {
	View v = LayoutInflater.from(parent.getContext())
	.inflate(R.layout.recycler_textview, parent, false);
	ViewHolder vh = new ViewHolder(v);
	return vh;
	}
	@Override
	public void onBindViewHolder(ViewHolder holder, int position) {
	holder.mTextView.setText(Dataset[position]);
	}
	@Override
	public int getItemCount() {
	return Dataset.length;
	}
	}

view raw RecyclerViewAdapter.java hosted with ❤ by GitHub

修改FragmentList_One.java，使其RecyclerView擁有資料

	package com.example.solinari.coordinatorlayoutsample;
	import android.os.Bundle;
	import android.support.v4.app.Fragment;
	import android.support.v7.widget.LinearLayoutManager;
	import android.support.v7.widget.RecyclerView;
	import android.view.LayoutInflater;
	import android.view.View;
	import android.view.ViewGroup;
	/**
	* Created by Solinari on 2016/12/31.
	*/
	public class FragmentList_One extends Fragment{
	private RecyclerView recyclerView;
	private RecyclerView.Adapter recyclerAdapter;
	private String[] Dataset;
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
	Bundle savedInstanceState) {
	View view = inflater.inflate(R.layout.fragmentlist_one, container, false);
	recyclerView = (RecyclerView) view.findViewById(R.id.recyclerView);
	setRecyclerView();
	return view;
	}
	public void setRecyclerView(){
	recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
	setData();
	recyclerAdapter = new RecyclerViewAdapter(Dataset);
	recyclerView.setAdapter(recyclerAdapter);
	}
	public void setData(){
	Dataset = new String[21];
	for (int i = 0 ; i < 21;i++){
	Dataset[i] = Integer.toString(i);
	}
	}
	}

view raw FragmentList_One.java hosted with ❤ by GitHub

將原先activity_main.xml的LinearLayout轉換成CoordinatorLayout

	<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:orientation="vertical">
	<include layout="@layout/toolbar"
	android:layout_width="match_parent"
	android:layout_height="wrap_content" />
	<android.support.design.widget.TabLayout
	android:id="@+id/TabLayout"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:background="@color/PrimaryBackground"
	app:tabMode="fixed"
	app:tabIndicatorHeight="4dp"
	app:tabIndicatorColor="@color/black"
	app:tabGravity="fill" />
	<android.support.v4.view.ViewPager
	android:id="@+id/myViewPager"
	android:layout_width="match_parent"
	android:layout_height="match_parent" />
	</android.support.design.widget.CoordinatorLayout>

view raw CoordinatorLayout.xml hosted with ❤ by GitHub

如果你直接就這樣執行的話，會發現ToolBar以及TabLayout消失了，我們還需要使用AppBarLayout(一個垂直的LinearLayout，實現了不少關於app bar material design的概念)將ToolBar與TabLayout包覆起來，使其成為AppBarLayout的Children。

並在ToolBar中使用「app:layout_scrollFlags="scroll | enterAlways | snap"」，scrollFlags有「ENTER_ALWAYS」、「ENTER_ALWAYS_COLLAPSED」、「EXIT_UNTIL_COLLAPSED」、「SNAP」等，詳細介紹可至官方文件查看。

	<android.support.design.widget.AppBarLayout
	android:id="@+id/appBarLayout"
	android:layout_width="match_parent"
	android:layout_height="wrap_content">
	<include layout="@layout/toolbar"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	app:layout_scrollFlags="scroll|enterAlways|snap" />
	<android.support.design.widget.TabLayout
	android:id="@+id/TabLayout"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:background="@color/PrimaryBackground"
	app:tabMode="fixed"
	app:tabIndicatorHeight="4dp"
	app:tabIndicatorColor="@color/black"
	app:tabGravity="fill" />
	</android.support.design.widget.AppBarLayout>

view raw AppBarLayout.xml hosted with ❤ by GitHub

以為這樣就完成了嗎?  執行的話你會發現ViewPager有上面有一部分被擋住了，如下圖

原因是因為我們沒有對CoordinatorLayout中的Child view-ViewPager設置Behaviors，於ViewPager中設置「app:layout_behavior="@string/appbar_scrolling_view_behavior"」，activity_main.xml就完整了，趕快執行起來看看成果吧!

	<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:orientation="vertical">
	<android.support.design.widget.AppBarLayout
	android:id="@+id/appBarLayout"
	android:layout_width="match_parent"
	android:layout_height="wrap_content">
	<include layout="@layout/toolbar"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	app:layout_scrollFlags="scroll|enterAlways|snap" />
	<android.support.design.widget.TabLayout
	android:id="@+id/TabLayout"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:background="@color/PrimaryBackground"
	app:tabMode="fixed"
	app:tabIndicatorHeight="4dp"
	app:tabIndicatorColor="@color/black"
	app:tabGravity="fill" />
	</android.support.design.widget.AppBarLayout>
	<android.support.v4.view.ViewPager
	android:id="@+id/myViewPager"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
	</android.support.design.widget.CoordinatorLayout>

view raw activity_main.xml hosted with ❤ by GitHub

參考文獻：How to hide/show Toolbar when list is scrolling (part 3)

　　　　　官方文件-CoordinatorLayout

完整專案：Solinari GitHub