安卓Design包之CoordinatorLayout配合AppBarLayout,ToolBar,TabLaout的使用

轉載: 

CoordinatorLayout配合AppBarLayout,Toolbar和TabLayout的使用

控件的簡單介紹:

AppBarLayout:它是繼承LinerLayout實現的一個ViewGroup容器組件，是為了Material Design而設計的App Bar，支持手勢滑動操作。

默認的AppBarLayout是垂直方向的，它的作用是把AppBarLayout包裹的內容都作為AppBar。 
使用方式非常簡單,直接在布局文件中包裹想要作為頂部欄的控件,例如Toolbar和TabLayout.

CoordinatorLayout:CoorfinatorLayout是一個增強型的FrameLayout,,它的作用就是用來協調其所包裹的子view的手勢操作的. 

當然在使用之前,我們需要在gradle中引入Design支持包,24.2.0也可以

compile 'com.android.support:design:23.2.0'

也可以在File-project Stucture 點擊對應的項目搜索design依賴
代碼實現:手指向上滾動屏幕時,reCycleView 滾動,toolbar向上滑出屏幕
　　　　手指向下滑動時,Toolbar顯示回屏幕上
xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="fanggao.qf.coordinatorlayout_appbarlayout_toolbar_tablayoutbar.MainActivity">

   <android.support.design.widget.AppBarLayout
       android:id="@+id/appbarlayout"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       >
    <!--
設置的layout_scrollFlags有如下幾種選項：
scroll: 所有想滾動出屏幕的view都需要設置這個flag-沒有設置這個flag的view將被固定在屏幕頂部。
enterAlways: 這個flag讓任意向下的滾動都會導致該view變為可見,啟用快速“返回模式”。
enterAlwaysCollapsed: 當你的視圖已經設置minHeight屬性又使用此標志時，
                      你的視圖只能以最小高度進入，只有當滾動視圖到達頂部時才擴大到完整高度。
exitUntilCollapsed: 滾動退出屏幕，最后折疊在頂端。-->
    <!--標題欄-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width = "match_parent"
        android:layout_height = "?attr/actionBarSize"
        app:layout_scrollFlags = "scroll|enterAlways"
        android:background="#0000ff"
        >
    <!--自定義view-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="標題"
        android:textSize="30sp"
        android:gravity="center"
        android:layout_gravity="center"
        />
    </android.support.v7.widget.Toolbar>
<!--選項卡-->
    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width = "match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@android:color/holo_orange_dark"
        android:scrollbarSize="10dp"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="#000000"
        app:tabTextColor="#ffffff" />
   </android.support.design.widget.AppBarLayout>
    <!--包含可滑動的布局內容(RecyclerView,NestedScrollView,不支持ListView，ScrollView)
      必須要設置app:layout_behavior="@string/appbar_scrolling_view_behavior"
      屬性來告知CoordinatorLayout該組件是帶有滑動行為的組件,
      然后CoordinatorLayout在接受到滑動時會通知AppBarLayout中可滑動的Toolbar可以滑出屏幕-->
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

為了達到手勢上下滾動,Toolbar顯示不顯示的動畫效果,我們需要在ToolBar中設置如下屬性

app:layout_scrollFlags = "scroll|enterAlways"

表示該bar是可滑動的
同時,為了使得Toolbar可以滑動,還需要一個條件就是CoordinatorLayout布局下包裹一個可以滑動的布局，比如: RecyclerView，NestedScrollView(ListView，ScrollView不支持)具有滑動效果的組件。 
並且還需要給這些組件設置如下屬性來告訴CoordinatorLayout，該組件是帶有滑動行為的組件，然后CoordinatorLayout在接受到滑動時會通知AppBarLayout 中可滑動的Toolbar可以滑出屏幕了。

 app:layout_behavior="@string/appbar_scrolling_view_behavior"

注意:這里我們使用了Toolbar代替ActionBar,因此需要在清單文件中設置theme為noActionBar,否則會報找不到actionBar異常

recycleview_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#000000"
    android:padding="2dp">
    <TextView
        android:id="@+id/tv_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30dp"
        android:textColor="#ffffff"
        android:text="文字"
        android:gravity="center"
        android:padding="20dp"
        android:background="@android:color/darker_gray"/>
</LinearLay>

主程序代碼:

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private RecyclerView recyclerView;
    private TabLayout tablayout;
    private List<String> dataList =  new ArrayList<String>(); ;
    private RecycleViewAdapter recycleViewAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData(1);
        initView();

    }

    private void initData(int page) {

        for (int i = 0; i < 50; i++) {
            dataList.add("第"+page+"頁第"+(i+1)+"條數據");
        }
    }
    private void initView() {
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        //toolabar替換actionBar,需在清單文件中設置style = noActionBar
        setSupportActionBar(toolbar);
        tablayout = (TabLayout) findViewById(R.id.tabLayout);
        //設置TabLayout
        for (int i = 0; i < 30; i++) {
            tablayout.addTab(tablayout.newTab().setText("TAB"+i));
        }
        //設置tablayout的切換監聽
       tablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
           //當頁卡選擇的時候調用
           @Override
           public void onTabSelected(TabLayout.Tab tab) {
               dataList.removeAll(dataList);
            //切換的時候更新RecyclerView
               initData(tab.getPosition()+1);
               recycleViewAdapter.notifyDataSetChanged();
           }
           @Override
           public void onTabUnselected(TabLayout.Tab tab) {
           }
           @Override
           public void onTabReselected(TabLayout.Tab tab) {
           }
       });
        recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        //設置布局
        recyclerView.setLayoutManager(new LinearLayoutManager(this,LinearLayoutManager.VERTICAL,false));
        //設置動畫
        recyclerView.setItemAnimator(new DefaultItemAnimator());
        //設置適配器
        recycleViewAdapter = new RecycleViewAdapter(this, dataList);
        recyclerView.setAdapter(recycleViewAdapter);
    }
}

RecycleViewAdapter:

public class RecycleViewAdapter extends RecyclerView.Adapter<RecycleViewAdapter.MyViewHolder> {
    private Context context;
    private List<String> dataList;
    public RecycleViewAdapter(Context context, List<String> dataList) {
        this.context = context;
        this.dataList = dataList;
    }
    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.layout_recyclerview_item, parent, false);
        return new MyViewHolder(view);
    }
    @Override
    public int getItemCount() {
        return dataList.size();
    }
    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        holder.tv_text.setText(dataList.get(position));
    }
    public class MyViewHolder extends RecyclerView.ViewHolder {
        private TextView tv_text;
        public MyViewHolder(View itemView) {
            super(itemView);
            tv_text=(TextView) itemView.findViewById(R.id.tv_text);
        }
    }
}

效果如下:

默認:

 向上滑動效果:

 

點擊Tab: