Material Design （四），AppBarLayout的使用

前言

AppBarLayout，顧名知意，就是用來給AppBar布局的容器，是LinearLayout的子類。而AppBar就包含我們通常所知道的ActionBar，Toolbar。

AppBarLayout要點：

功能：讓子View（AppBar）可以選擇他們自己的滾動行為。
注意：需要依賴CoordinatorLayout作為父容器，同時也要求一個具有可以獨立滾動的兄弟節點（或兄弟節點的子view可以滾動）才能發揮其功能。

CoordinatorLayout簡介：

該控件是Design包下的一個控件，是組織它衆多子view之間互相協作的一個ViewGroup。CoordinatorLayout 的神奇之處就在于 Behavior 對象。CoordinatorLayout使用 Behavior 對象進行通信，使得其子view之間知道了彼此的存在，一個子view的變化可以通知到另一個子view。CoordinatorLayout 所做的事情就是當成一個通信的橋梁，連接配接不同的view。

使用該控件需要依賴相關的庫：

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'
}

實踐出真章，動手才是硬道理

1. Toolbar + AppBarLayout的簡單例子

前面已經說了，AppBarLayout需要CoordinatorLayout作為父容器并且還需要一個可以獨立滾動的兄弟節點（CoordinatorLayout 的子view(或間接子view)）才能發揮其功能，不多說，看下面的布局：

activity_main.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"
    tools:context="com.example.lt.appbarlayoutdemo.MainActivity">

    <!-- AppBarLayout，作為CoordinatorLayout的子類 -->
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:fitsSystemWindows="true"
        android:layout_height="wrap_content"
        >

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </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">
        <!-- Your scrolling content -->
        <TextView
            android:layout_width="match_parent"
            android:layout_margin="20dp"
            android:text="日本疑似被綁架記者現身網絡中國新聞網 18:55"
            android:layout_height="wrap_content"/>
    </android.support.v4.widget.NestedScrollView>


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

注意：

兄弟節點的 app:layout_behavior="@string/appbar_scrolling_view_behavior" 屬性很重要；
AppBarLayout子view的 app:layout_scrollFlags 屬性很重要，其值有三個：
1. scroll: 所有想滾動出螢幕的view都需要設定這個flag- 沒有設定這個flag的view将被固定在螢幕頂部。
2. enterAlways: 這個flag讓任意向下的滾動都會導緻該view變為可見，啟用”快速傳回”模式。
3. enterAlwaysCollapsed: 當你的視圖已經設定minHeight屬性又使用此标志時，你的視圖隻會在最小高度處進入，隻有當滾動視圖到達頂部時才擴大到完整高度。
4. exitUntilCollapsed: 在滾動過程中，隻有當視圖折疊到最小高度的時候，它才退出螢幕。
注意AppBarLayout的兄弟節點（或兄弟節點的子view）一定要是可以滾動的View/ViewGroup，如：NestedScrollView，RecycleView；
那些使用Scroll flag的視圖必須在其他沒有使用Scroll flag的視圖之前聲明。這樣才能確定所有的視圖從頂部撤離，剩下的元素固定在前面（譯者注：剩下的元素壓在其他元素的上面）。

Activity代碼測試：

package com.example.lt.appbarlayoutdemo;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {

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

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

關于Toolbar的使用可以參考：android 5.X Toolbar+DrawerLayout實作抽屜菜單，這裡就不多做說明了。

2. 再 + TabLayout實作經典組合

activity_main.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"
    tools:context="com.example.lt.appbarlayoutdemo.MainActivity">

    <!-- AppBarLayout，作為CoordinatorLayout的子類 -->
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:fitsSystemWindows="true"
        android:layout_height="wrap_content"
        >

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways"
            app:tabIndicatorColor="@android:color/transparent"
            app:tabMode="scrollable">
        </android.support.design.widget.TabLayout>

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

    <!-- Your scrolling content -->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
    </android.support.v4.view.ViewPager>


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

初始化TabLayout

String[] titles = {"最新","贛州","社會","訂閱","娛樂","NBA","搞笑","科技","創業"};
ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
List<Fragment> fragments = new ArrayList<Fragment>();
for (int i = ; i < titles.length; i++) {
    Fragment fragment = new MyFragment();
    Bundle bundle = new Bundle();
    bundle.putString("text",titles[i]);
    fragment.setArguments(bundle);
    fragments.add(fragment);
}
viewPager.setAdapter(new TabFragmentAdapter(fragments, titles, getSupportFragmentManager(), this));
// 初始化
TabLayout tablayout = (TabLayout) findViewById(R.id.tablayout);
// 将ViewPager和TabLayout綁定
tablayout.setupWithViewPager(viewPager);
// 設定tab文本的沒有選中（第一個參數）和選中（第二個參數）的顔色
tablayout.setTabTextColors(Color.GRAY, Color.WHITE);

MyFragment.java

package com.example.lt.appbarlayoutdemo;


import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.NestedScrollView;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by lt on 2016/3/19.
 */
public class MyFragment extends Fragment {
    private String mText;

    @Override
    public void onCreate(@Nullable Bundle bundle) {
        super.onCreate(bundle);
        if(getArguments()!=null){
            mText = getArguments().getString("text");
        }
    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        NestedScrollView scrollableView = new NestedScrollView(getActivity());
        TextView textView = new TextView(getActivity());
        textView.setTextColor(Color.RED);
        textView.setGravity(Gravity.CENTER);
        textView.setText(mText);
        scrollableView.addView(textView);
        return scrollableView;
    }
}

需要注意的是，我們無論如何都要給AppBarLayout添加一個可以滾動的的兄弟節點（或兄弟節點的子節點），這裡就嵌套了NestedScrollView 。

TabFragmentAdapter.java

package com.example.lt.appbarlayoutdemo;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**
 * Created by lt on 2016/3/19.
 */
public class TabFragmentAdapter extends FragmentPagerAdapter{
    private final String[] titles;
    private Context context;
    private List<Fragment> fragments;

    public TabFragmentAdapter(List<Fragment> fragments,String[] titles, FragmentManager fm, Context context) {
        super(fm);
        this.context = context;
        this.fragments = fragments;
        this.titles = titles;
    }


    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return titles.length;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}

關于TabLayout的使用不懂的可以參考：TabLayout輕松實作仿今日頭條頂部tab導航效果

Toolbar和TabLayout布局屬性layout_scrollFlags值組合：

（1）Toolbar=scroll|enterAlways

（2）TabLayout=scroll|enterAlways

效果：

Material Design （四），AppBarLayout的使用
（1）Toolbar=scroll|enterAlways

（2）TabLayout不設該屬性

效果：

Material Design （四），AppBarLayout的使用
（1）Toolbar=不設該屬性

（2）TabLayout不設該屬性

效果：

Material Design （四），AppBarLayout的使用
即不會滑出螢幕
（1）Toolbar不設該屬性

（2）TabLayout=scroll|enterAlways

效果：

Material Design （四），AppBarLayout的使用
即不會滑出螢幕

總結：關于這些控件的使用，我認為不必一次性全部學透，隻要我們會個大概的使用就行了，其他更加細節的東西（比如Toolbar修改樣式等等）可以等用到的時候再去研究。因為，有些控件要一次學透比較費時間，還說不定以後用不到。比如：學習ActionBar的時候沒必要先去知道怎麼修改ActionBar的背景顔色，等我們使用ActionBar有這方面的需要的時候再去研究，查找解決方法。

需要源碼的請點選下面的連結：

demo下載下傳

Material Design （四），AppBarLayout的使用

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯