1. 效果圖

下面是我們將要實(shí)現(xiàn)的效果圖：

效果圖

2.具體實(shí)現(xiàn)

我們可以利用design和v7包中的控件來(lái)實(shí)現(xiàn)（涉及到的控件有CoordinatorLayout辈毯、AppBarLayout、Toolbar、NestedScrollView）浸颓。

• 第一步：創(chuàng)建一個(gè)Scrolling Activity
  下面是該activity的界面效果圖
  
  Scrolling Activity
• 第二步：編寫最終效果圖需要用到的xml
  在第一步的基礎(chǔ)上構(gòu)造出我們最終想要的效果圖。

（1） include_toolbar_open.xml
該布局是頭部展開時(shí)toolbar對(duì)應(yīng)的效果圖：

頭部展開時(shí)toolbar的效果圖

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@color/colorPrimary"
    >

    <RelativeLayout
        android:layout_margin="@dimen/dimen_10dp"
        android:layout_toLeftOf="@+id/iv_contact"
        android:background="@drawable/shape_search"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="@dimen/dimen_10dp"
        android:paddingRight="@dimen/dimen_10dp">

        <ImageView
            android:id="@+id/iv_search"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_centerVertical="true"
            android:src="@mipmap/ic_search"/>
        <EditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@id/iv_search"
            android:hint="搜索商品"
            android:background="@null"
            android:paddingLeft="@dimen/dimen_10dp"
            android:textColorHint="@android:color/white"
            android:textSize="14sp"/>
    </RelativeLayout>
    <ImageView
        android:id="@+id/iv_plus"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="@dimen/dimen_10dp"
        android:src="@mipmap/ic_add"/>
    <ImageView
        android:id="@+id/iv_contact"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_centerVertical="true"
        android:layout_marginRight="@dimen/dimen_10dp"
        android:layout_toLeftOf="@id/iv_plus"
        android:src="@mipmap/ic_contact"/>
    <View
        android:id="@+id/bg_toolbar_open"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

（2） include_toolbar_close.xml
該布局是頭部收縮時(shí)toolbar對(duì)應(yīng)的效果圖：

頭部收縮時(shí)toolbar的效果圖

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@color/colorPrimary">

    <ImageView
        android:id="@+id/iv_scan"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:src="@mipmap/ic_scan"/>
    <ImageView
        android:id="@+id/iv_pay"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:layout_toRightOf="@+id/iv_scan"
        android:src="@mipmap/ic_payment"/>
    <ImageView
        android:id="@+id/iv_charge"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:layout_toRightOf="@+id/iv_pay"
        android:src="@mipmap/ic_transfer"/>
    <ImageView
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:layout_toRightOf="@+id/iv_charge"
        android:src="@mipmap/ic_card"/>
    <ImageView
        android:id="@+id/iv_plus"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="20dp"
        android:layout_toRightOf="@+id/iv_scan"
        android:src="@mipmap/ic_add"/>
    <View
        android:id="@+id/bg_toolbar_close"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

（3） include_open.xml
該布局是頭部打開時(shí)折疊區(qū)對(duì)應(yīng)的效果圖：

頭部打開時(shí)折疊區(qū)對(duì)應(yīng)的效果圖

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@mipmap/ic_scan"/>
            <TextView
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="5dp"
                android:text="掃一掃"
                android:textColor="@color/white"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@mipmap/ic_payment"/>
            <TextView
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="5dp"
                android:text="付錢"
                android:textColor="@color/white"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@mipmap/ic_transfer"/>
            <TextView
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="5dp"
                android:text="收錢"
                android:textColor="@color/white"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@mipmap/ic_card"/>
            <TextView
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="5dp"
                android:text="卡包"
                android:textColor="@color/white"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>

    </LinearLayout>
    <View
        android:id="@+id/bg_content"
        android:layout_width="match_parent"
        android:layout_height="100dp"/>
</FrameLayout>

（3） content_zfbhome_telescopic.xml
內(nèi)容區(qū)

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".activity.ZFBHomeTelescopicActivity"
    tools:showIn="@layout/activity_zfbhome_telescopic">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/text_margin"
        android:text="@string/large_text" />

</android.support.v4.widget.NestedScrollView>

（3） activity_zfbhome_telescopic.xml
最終的在activity布局里的效果圖：

最終效果圖

<?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"
    android:fitsSystemWindows="true"
    tools:context=".activity.ZFBHomeTelescopicActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            >

            <include
                layout="@layout/include_open"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="50dp"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"/>
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                app:contentInsetLeft="0dp"
                app:contentInsetStart="0dp"
                app:layout_collapseMode="pin" >
                <include android:id="@+id/include_toolbar_open"
                    layout="@layout/include_toolbar_open"/>
                <include android:id="@+id/include_toolbar_close"
                    layout="@layout/include_toolbar_close"/>

            </android.support.v7.widget.Toolbar>

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

    <include layout="@layout/content_zfbhome_telescopic" />


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

注：布局中涉及到的一些屬性具體的作用就不做闡述了，可以自行查閱。

• 第三步：主Activity（ZFBHomeTelescopicActivity.java）
  我們需要對(duì)AppBarLayout設(shè)置偏移監(jiān)聽孝鹊，需要實(shí)現(xiàn)一些背景色縮放效果和收縮展開時(shí)toolbar對(duì)應(yīng)布局的顯示。

public class ZFBHomeTelescopicActivity extends AppCompatActivity implements AppBarLayout.OnOffsetChangedListener {


    @BindView(R.id.bg_content)
    View bgContent;                 //大布局背景遮罩層
    @BindView(R.id.iv_search)
    ImageView ivSearch;             //
    @BindView(R.id.iv_plus)
    ImageView ivPlus;
    @BindView(R.id.iv_contact)
    ImageView ivContact;
    @BindView(R.id.iv_scan)
    ImageView ivScan;
    @BindView(R.id.iv_pay)
    ImageView ivPay;
    @BindView(R.id.iv_charge)
    ImageView ivCharge;
    @BindView(R.id.bg_toolbar_close)
    View bgToolbarClose;                    //收縮狀態(tài)下toolbar的遮罩層
    @BindView(R.id.toolbar)
    Toolbar toolbar;
    @BindView(R.id.toolbar_layout)
    CollapsingToolbarLayout toolbarLayout;
    @BindView(R.id.app_bar)
    AppBarLayout appBar;
    @BindView(R.id.bg_toolbar_open)         //展開狀態(tài)下toolbar的遮罩層
    View bgToolbarOpen;
    private View toolbarOpen;               //展開狀態(tài)下toolbar顯示的內(nèi)容
    private View toolbarClose;              //收縮狀態(tài)下toolbar顯示的內(nèi)容

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_zfbhome_telescopic);
        ButterKnife.bind(this);
        toolbarOpen = findViewById(R.id.include_toolbar_open);
        toolbarClose = findViewById(R.id.include_toolbar_close);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        appBar.addOnOffsetChangedListener(this);
    }

    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        //垂直方向偏移
        int offset = Math.abs(verticalOffset);
        //最大偏移距離
        int scrollRange = appBarLayout.getTotalScrollRange();
        //當(dāng)滑動(dòng)沒超過一半時(shí)展蒂，展開狀態(tài)下toolbar顯示內(nèi)容又活，根據(jù)收縮位置，改變透明值
        if (offset <= scrollRange / 2){
            toolbarOpen.setVisibility(View.VISIBLE);
            toolbarClose.setVisibility(View.GONE);
            //根據(jù)偏移百分比锰悼，計(jì)算透明值
            float scale2 = (float) offset / (scrollRange / 2);
            int alpha2 = (int) (255 * scale2);
            bgToolbarOpen.setBackgroundColor(Color.argb(alpha2,25,131,209));

        }else {//當(dāng)滑動(dòng)超過一半柳骄，收縮狀態(tài)下toolbar顯示內(nèi)容，根據(jù)收縮位置箕般，改變透明值
            toolbarClose.setVisibility(View.VISIBLE);
            toolbarOpen.setVisibility(View.GONE);
            float scale3 = (float) (scrollRange - offset) / (scrollRange / 2);
            int alpha3 = (int) (255 * scale3);
            bgToolbarClose.setBackgroundColor(Color.argb(alpha3,25,131,209));
        }
        //根據(jù)偏移值百分比計(jì)算掃一掃布局的透明度值
        float scale = (float) offset / scrollRange;
        int alpha = (int) (255 * scale);
        bgContent.setBackgroundColor(Color.argb(alpha,25,131,209));
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        appBar.removeOnOffsetChangedListener(this);
    }
}

最后獻(xiàn)上完整demo：仿支付寶首頁(yè)頭部伸縮效果