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的界面效果圖

第二步：編寫最終效果圖需要用到的xml
在第一步的基礎(chǔ)上構(gòu)造出我們最終想要的效果圖。

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

<?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)的效果圖：

<?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)的效果圖：

<?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)聽(tīng)，需要實(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)沒(méi)超過(guò)一半時(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)超過(guò)一半，收縮狀態(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);    }}

源碼地址：

https://github.com/gaojuanjuan/MaterialDesign_V7

到這里就結(jié)束啦

點(diǎn)擊這里留言交流哦

Android仿支付寶首頁(yè)頭部伸縮效果

1. 效果圖

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