一站式CoordinatorLayout+ToolBar聯(lián)動(dòng)使用

什么叫一站式

那還用問，就是一學(xué)就會(huì)唄。啦啦啦啦啦啦啦啦啦啦啦啦啦！
主要是我看別人的介紹的東西看得頭大，一大堆重要細(xì)節(jié)都沒有，漏了一點(diǎn)細(xì)節(jié)的話很多效果都沒有?？偟脕碚f一站式就是吹牛皮。
文章比較長耐心看完就會(huì)用

ToolBar+DrawerLayout使用
Android 自定義側(cè)滑菜單效果(ViewDragHelper)

一、擼代碼前要了解的東西

Google在2015的IO大會(huì)，給我們帶來了更加詳細(xì)的Material Design設(shè)計(jì)規(guī)范，同時(shí)，也給我們帶來了全新的Android Design Support Library，在這個(gè)support庫里面，Google給我們提供了更加規(guī)范的MD設(shè)計(jì)風(fēng)格的控件。最重要的是，Android Design Support Library的兼容性更廣，直接可以向下兼容到Android 2.2。（敲黑板，這是重點(diǎn)拿筆記下來）

上面提到了Design Support Library，要使用這個(gè)庫當(dāng)然是要引入到項(xiàng)目中咯，在Gradle中引入：

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

CoordinatorLayout等一些控件就是Material Design設(shè)計(jì)風(fēng)格的控件，具體有哪些控件可以搜一下。望文生義這個(gè)控件就是協(xié)調(diào)控件：

  1. 擴(kuò)展或者縮小Toolbar或者頭部，讓主內(nèi)容區(qū)域有更多的空間。
  2. 控制哪個(gè)view應(yīng)該擴(kuò)展還是收縮，以及其顯示大小比例，包括視差滾動(dòng)效果動(dòng)畫。

看一下效果圖唄（顏色不協(xié)調(diào)是為了更好的區(qū)分不同區(qū)域）：
控制哪個(gè)view應(yīng)該擴(kuò)展還是收縮，以及其顯示大小比例，包括視差滾動(dòng)效果動(dòng)畫。

CoorCollapsingToolbar.gif

擴(kuò)展或者縮小Toolbar或者頭部，讓主內(nèi)容區(qū)域有更多的空間。

CoorToolBar.gif

CoorFloatingActionButton.gif

這三種效果主要都是根據(jù)xml來決定，當(dāng)然還可以通過自定義Behavior來完成這個(gè)或者完成更復(fù)雜的效果，這些都不管，現(xiàn)在只用xml來完成。
如果效果還盡人意請往下看看唄。

二、CoordinatorLayout與CollapsingToolbar控制View的伸展與收縮

大致的效果在上圖1所示。一下分解各個(gè)實(shí)現(xiàn)的步驟。

  1. 首先咱們要使用ToolBar一般都是要先隱藏原來的ActionBar，隱藏ActionBar有幾種方法，這里我們就只在Manifest.xml里面進(jìn)行配置。創(chuàng)建一個(gè)activity命名CoorCollapsingToolbarAct然后在xml中進(jìn)行注冊并設(shè)置Theme：
<activity android:name=".CoorToolViewPagerAct"
                  android:theme="@style/coordinatorTheme"/>

coordinatorTheme是在res\values\styles.xml中的自定義樣式，父樣式parent就是去掉ActionBar的樣式如下：

<!--colorPrimaryDark設(shè)置透明色的原因是為了通過后面對(duì)狀態(tài)欄的顏色改變起效果(可以試著改變一下看效果)-->
    <style name="coordinatorTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:colorPrimary">@color/colorPrimary</item>
        <item name="android:colorPrimaryDark">@android:color/transparent</item>
    </style>
  1. 要實(shí)現(xiàn)這些效果需結(jié)合AppBarLayout來共同完成：
  • AppBarLayout必須作為CoordinatorLayout的直接子View，否則它的大部分功能將不會(huì)生效，如layout_scrollFlags等。
  • AppBarLayout它可以讓你定制當(dāng)某個(gè)可滾動(dòng)View的滾動(dòng)手勢發(fā)生變化時(shí)，其內(nèi)部的子View實(shí)現(xiàn)何種動(dòng)作。
  • 內(nèi)部的子View通過在布局中加app:layout_scrollFlags設(shè)置執(zhí)行的動(dòng)作，具體往下看。
  1. 知道什么是CollapsingToolBarLayout
  • CollapsingToolbarLayout你可以像魔術(shù)一樣讓 Toolbar折疊起來
  • 用 CollapsingToolbarLayout 包裹 Toolbar，但仍然在 AppBarLayout 中
  • 從 Toolbar 不設(shè)置layout_scrollFlags
  • 為 CollapsingToolbarLayout 聲明layout_scrollFlags，并且將layout_scrollFlags 設(shè)置成scroll|exitUntilCollapsed|snap
  • 改變 AppBarLayout 擴(kuò)張狀態(tài)時(shí)的布局高度大小。在這個(gè)例子中，我用 250dp

app:layout_scrollFlags屬性值
scroll: 所有想滾動(dòng)出屏幕的view都需要設(shè)置這個(gè)flag， 沒有設(shè)置這個(gè)flag的view將被固定在屏幕頂部。
snap: 在滾動(dòng)結(jié)束后，如果view只是部分可見，它將滑動(dòng)到最近的邊界。
exitUntilCollapsed: 滾動(dòng)退出屏幕，最后折疊在頂端。
還有enterAlways，enterAlwaysCollapsed等屬性可以逐一試試看。

  1. xml編寫
    使用CoordinatorLayout往往是將他直接作為根布局來操作。創(chuàng)建activity_coor_collapsing.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    >

    <!--app:elevation="0dp"  TabLayout與AppBarLayout結(jié)合使用TabLayout下面會(huì)出現(xiàn)陰影 設(shè)置此屬性可去除-->
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true"
        android:elevation="0dp">

        <!--
        1、statusBarScrim 折疊時(shí)狀態(tài)欄的顏色（設(shè)置為透明色時(shí)，狀態(tài)欄會(huì)展示contentScrim背景色的效果）
         contentScrim：折疊之后的背景色（不包括狀態(tài)欄）
        2、注意：暫時(shí)發(fā)現(xiàn) 5.x與4.x的系統(tǒng)不設(shè)置折疊樣式時(shí)，折疊時(shí)會(huì)將title默認(rèn)隱藏，具體效果可以試試，不知道是不是機(jī)型問題，有待考察
        collapsedTitleTextAppearance 折疊字體樣式 expandedTitleMarginStart 展開字體樣式-->
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main_collapsing"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:fitsSystemWindows="true"
            app:collapsedTitleTextAppearance="@style/collapsedTitleTextAppearance_white"
            app:contentScrim="@color/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleTextAppearance="@style/collapsedTitleTextAppearance_green"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:statusBarScrim="#fff000">

            <!--layout_collapseMode (折疊模式) - 有兩個(gè)值:
                pin -  設(shè)置為這個(gè)模式時(shí)，當(dāng)CollapsingToolbarLayout完全收縮后，Toolbar還可以保留在屏幕上。
                 parallax - 設(shè)置為這個(gè)模式時(shí)，在內(nèi)容滾動(dòng)時(shí)，CollapsingToolbarLayout中的View（比如ImageView)也可以同時(shí)滾動(dòng)，實(shí)現(xiàn)視差滾動(dòng)效果，通常和layout_collapseParallaxMultiplier(設(shè)置視差因子)搭配使用。
                layout_collapseParallaxMultiplier(視差因子) - 設(shè)置視差滾動(dòng)因子，值為：0-1。-->
            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/jjy_bg"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="1"
                />

            <!--app:popupTheme，這個(gè)屬性就是用來自定義我們彈出的菜單的樣式，在之前的Actionbar的溢出菜單，
            我們是不能自定義他的樣式的，只能根據(jù)你的theme來選擇黑白兩種，不能自己定義，現(xiàn)在我們可以定義彈出菜單的樣式。
            暫時(shí)使用系統(tǒng)定義好的樣式-->
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@color/colorPrimary"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabSelectedTextColor="#000"
            app:tabTextColor="#fff"/>
    </android.support.design.widget.AppBarLayout>

    <!--layout_behavior=”@string/appbar_scrolling_view_behavior”標(biāo)志位(該Behavior系統(tǒng)以及幫我們實(shí)現(xiàn))，
    那么當(dāng)帶有這個(gè)標(biāo)志位的控件滑動(dòng)的時(shí)候會(huì)觸發(fā)帶有scroll_flags標(biāo)志位的另一個(gè)控件進(jìn)行滑動(dòng)，
    此時(shí)imageview的layout_collapseMode是parallax，所以它會(huì)以有視差的方式來相對(duì)滑動(dòng)，而toolbar設(shè)置了pin的標(biāo)記位，
    所以在收縮后會(huì)固定在屏幕頂部。
    可在VIewPager中放置Recyclerview,ScrollView等滑動(dòng)的布局（ListView與GridView不行）可進(jìn)行聯(lián)動(dòng)-->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </android.support.v4.view.ViewPager>

    <!--沒有漸變效果一直顯示不隱藏  原因時(shí)上面使用了TabLayout  感覺是不能在AppBarLayout添加TabLayout來一起使用-->
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/activity_horizontal_margin"
        android:clickable="true"
        android:src="@android:drawable/ic_menu_add"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>

分析+解密[吹牛皮]（敲黑板，文件中的注釋是重點(diǎn)記下來要考）

  • CollapsingToolbarLayout中的statusBarScrim：折疊時(shí)狀態(tài)欄的顏色。前面在Activity的Theme中將狀態(tài)欄設(shè)置為透明色，所以當(dāng)折疊ToolBar時(shí)會(huì)顯示我們在這里設(shè)置的色值。如果在Theme中不設(shè)置為透明這里將不起作用。
  • 根布局CoordinatorLayout與AppBarLayout都要設(shè)置android:fitsSystemWindows="true"，如對(duì)此屬性不懂可參考fitsystemwindows簡單使用
  • layout_behavior=”@string/appbar_scrolling_view_behavior”標(biāo)志位(該Behavior系統(tǒng)以及幫我們實(shí)現(xiàn))，那么當(dāng)帶有這個(gè)標(biāo)志位的控件滑動(dòng)的時(shí)候會(huì)觸發(fā)帶有scroll_flags標(biāo)志位的另一個(gè)控件進(jìn)行滑動(dòng)，此時(shí)imageview的layout_collapseMode是parallax，所以它會(huì)以有視差的方式來相對(duì)滑動(dòng)，而toolbar設(shè)置了pin的標(biāo)記位，所以在收縮后會(huì)固定在屏幕頂部。可在VIewPager中放置Recyclerview,ScrollView等滑動(dòng)的布局（ListView與GridView不行）可進(jìn)行聯(lián)動(dòng).

比較奇葩的發(fā)現(xiàn)

暫時(shí)發(fā)現(xiàn)，如果你想實(shí)現(xiàn)title（圖一的LOGO）的的效果，需設(shè)置CollapsingToolbarLayout的title值，然而5.x與4.x的系統(tǒng)不設(shè)置折疊樣式collapsedTitleTextAppearance時(shí)，折疊時(shí)會(huì)將title默認(rèn)隱藏，具體效果可以試試，不知道是不是機(jī)型問題，有待考察，6.x的系統(tǒng)不設(shè)置折疊時(shí)也會(huì)展示出來。

三、擼代碼（圖一效果）

因?yàn)橛蒙狭?code>ViewPager，所以順帶也用上了TabLayout，不了解可以看看TabLayout高端用法，所以也結(jié)合了Fragment實(shí)現(xiàn)。

  1. 大致創(chuàng)建一個(gè)簡單的Fragment的基類BaseFragment：
/**
 * Created by Leogh on 2017/8/28.
 */

public abstract class BaseFragment extends Fragment {

   //這個(gè)title不用管 弄著玩的
    public TextView tv_title;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = getLayoutView(inflater, container);
        tv_title = (TextView) view.findViewById(R.id.tv_title);
        init();
        return view;
    }

    public abstract View getLayoutView(LayoutInflater inflater, ViewGroup container);

    public abstract void init();
}

在創(chuàng)建三個(gè)Fragment，分別為Fragment1,Fragment2,Fragment3簡單粗暴嘛，這里只貼一個(gè)Fragment1的代碼,其它兩個(gè)類似改一下就OK。

/**
 * Created by Leogh on 2017/8/28.
 */

public class Fragment1 extends BaseFragment {

    private View view;
    private RecyclerView rv_page1;
    private List<String> mDatas = new ArrayList<String>();

    @Override
    public View getLayoutView(LayoutInflater inflater, ViewGroup container) {
        view = inflater.inflate(R.layout.fragment_page1, container, false);
        return view;
    }

    @Override
    public void init() {
        initData();
        tv_title.setText("one");
        rv_page1 = (RecyclerView) view.findViewById(R.id.rv_page1);
        rv_page1.setLayoutManager(new LinearLayoutManager(getActivity()));
        rv_page1.setAdapter(new CoorAdapter(getActivity(), mDatas));
    }

    private void initData() {
        for (int i = 0; i < 20; i++) {
            mDatas.add("老臘肉" + i);
        }
    }
}

差點(diǎn)漏了Recyclerview的Adapter了CoorAdapter：

/**
 * Created by Leogh on 2017/8/29.
 */

public class CoorAdapter extends RecyclerView.Adapter<CoorAdapter.MyViewHolder> {

    private Context mContext;
    private List<String> mDatas;

    public CoorAdapter(Context mContext, List<String> mDatas) {
        this.mContext = mContext;
        this.mDatas = mDatas;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.main_list_item, parent, false);
        return new MyViewHolder(v);
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        holder.textView.setText(mDatas.get(position));
    }

    @Override
    public int getItemCount() {
        return mDatas.size();
    }

    class MyViewHolder extends RecyclerView.ViewHolder {
        TextView textView;

        public MyViewHolder(View itemView) {
            super(itemView);
            textView = (TextView) itemView.findViewById(R.id.textview);
        }
    }

}

Fragment1的布局文件fragment_page1.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="one"
        android:textSize="20sp"
        android:layout_centerInParent="true"/>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_page1"
        android:background="#efffff"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:overScrollMode="never"/>
</RelativeLayout>

最后主Activity上場CoorCollapsingToolbarAct:

/**
 * Created by Leogh on 2017/8/28.
 * 圖片漸變效果與CollapsingToolBarLayout（折疊ToolBar）
 * <p>
 * 要實(shí)現(xiàn)此效果 需要使用 CoorinatorLayout (協(xié)調(diào)布局)  AppBarLayout(導(dǎo)航布局) + 一個(gè)可以滑動(dòng)的布局
 * (注意 不支持 listView和GirdView)
 */

public class CoorCollapsingToolbarAct extends AppCompatActivity {

    private Toolbar mToolBar;
    private ViewPager mViewPager;
    private TabLayout mTabLayout;
    private CollapsingToolbarLayout main_collapsing;
    private List<Fragment> mFragments;
    private String[] mTitles = new String[]{"你", "我", "他"};

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_coordinator);

        mToolBar = (Toolbar) findViewById(R.id.toolbar);
        mToolBar.setLogo(android.R.drawable.ic_menu_add);
        main_collapsing = (CollapsingToolbarLayout) findViewById(R.id.main_collapsing);
        //手動(dòng)設(shè)置title
        // 注意：目前測試用的是5.1系統(tǒng) 發(fā)現(xiàn)不在xml中設(shè)置折疊字體樣式，折疊時(shí)title也會(huì)直接隱藏，同時(shí)也試了4.4系統(tǒng)也是一樣，6.0系統(tǒng)不會(huì)
        //我也沒有專門去測試，也不能直接得出結(jié)論說5.x與4.x的系統(tǒng)一定要設(shè)置 具體情況具體分析哈 多試試
        main_collapsing.setTitle("LOGO");
        setSupportActionBar(mToolBar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(false);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mTabLayout = (TabLayout) findViewById(R.id.tabs);
        setupViewPager();
    }

    private void setupViewPager() {
        mFragments = new ArrayList<Fragment>();
        mFragments.add(new Fragment1());
        mFragments.add(new Fragment2());
        mFragments.add(new Fragment3());
        FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mFragments.get(position);
            }

            @Override
            public int getCount() {
                return mFragments.size();
            }

            @Override
            public CharSequence getPageTitle(int position) {
                return mTitles[position];
            }
        };
        mViewPager.setAdapter(adapter);
        //ViewPager與TabLayout聯(lián)動(dòng)
        mTabLayout.setupWithViewPager(mViewPager);
    }

    /**
     * 如果有Menu,創(chuàng)建完后,系統(tǒng)會(huì)自動(dòng)添加到ToolBar上
     * 此方法用于初始化菜單，其中menu參數(shù)就是即將要顯示的Menu實(shí)例。 返回true則顯示該menu,false 則不顯示;
     * (只會(huì)在第一次初始化菜單時(shí)調(diào)用)
     *
     * @param menu
     * @return
     */
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main_menu, menu);
        return true;
    }
}

到此就可以看到圖一的效果了，有很多屬性可能沒有分析，但是多試試才知道有什么效果。

四、擼代碼（圖2效果）

這里就只上xml文件了，代碼都差不多 只是改了一下xml文件，將CollapsingToolBarLayout去掉直接換成了ToolBar來實(shí)現(xiàn)效果:

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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        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="@color/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|snap"/>

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:background="@color/colorPrimary"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_input_add" />
</android.support.design.widget.CoordinatorLayout>

這樣，滑動(dòng)列表的時(shí)候就可以直接展示與折疊ToolBar了，不需要拉扯到列表頂部才能對(duì)ToolBar進(jìn)行聯(lián)動(dòng)，如果非要以圖一的形式來實(shí)現(xiàn)就需要自定義Behavior了（暫時(shí)沒有發(fā)現(xiàn)其他方法）。

五、擼代碼(圖3效果)

注意：圖三效果就是那個(gè)圖標(biāo)（FloatingActionButton）有漸變最后消失的一個(gè)過程的效果，圖一中我們也對(duì)FloatingActionButton做了同樣的處理，可是并沒有達(dá)到預(yù)期的效果：

  • 暫時(shí)得出來的結(jié)論就是， 原因是圖一中使用了TabLayout，去掉TabLayout就有漸變效果， 感覺是不能在AppBarLayout添加TabLayout來一起使用。所以這里只要把TabLayout去掉就可以了。
    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"
                                                 android:id="@+id/main_content"
                                                 android:layout_width="match_parent"
                                                 android:layout_height="match_parent"
                                                 android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true"
        android:elevation="0dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main_collapsing"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:collapsedTitleTextAppearance="@style/collapsedTitleTextAppearance_white"
            app:contentScrim="@color/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleTextAppearance="@style/collapsedTitleTextAppearance_green"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:statusBarScrim="#fff000">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/jjy_bg"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="1"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

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

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <!--有漸變效果 layout_anchor指定參照物為AppBarLayout-->
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:clickable="true"
        android:src="@mipmap/ic_launcher"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"/>

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

這個(gè)Activity的話就直接加載布局就行：

/**
 * Created by Leogh on 2017/8/29.
 * FloatingActionButton漸變效果
 */

public class CoorFloatingActionButtonAct extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.testfloatbutton);
    }
}

可能有些細(xì)節(jié)漏了，但注釋寫的很詳細(xì)，多留意注釋。

最后提供一下官方Demo：點(diǎn)我點(diǎn)我點(diǎn)我

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容