UI实例-->仿支付宝首页头部伸缩效果

1. 效果图

下面是我们将要实现的效果图：


效果图

2.具体实现

我们可以利用design和v7包中的控件来实现（涉及到的控件有CoordinatorLayout、AppBarLayout、Toolbar、NestedScrollView）。

  • 第一步：创建一个Scrolling Activity
    下面是该activity的界面效果图
    Scrolling Activity
  • 第二步：编写最终效果图需要用到的xml
    在第一步的基础上构造出我们最终想要的效果图。

（1） include_toolbar_open.xml
该布局是头部展开时toolbar对应的效果图：

头部展开时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
该布局是头部收缩时toolbar对应的效果图：

头部收缩时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
该布局是头部打开时折叠区对应的效果图：

头部打开时折叠区对应的效果图

<?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
内容区

<?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）
    我们需要对AppBarLayout设置偏移监听，需要实现一些背景色缩放效果和收缩展开时toolbar对应布局的显示。
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;                    //收缩状态下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)         //展开状态下toolbar的遮罩层
    View bgToolbarOpen;
    private View toolbarOpen;               //展开状态下toolbar显示的内容
    private View toolbarClose;              //收缩状态下toolbar显示的内容

    @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();
        //当滑动没超过一半时，展开状态下toolbar显示内容，根据收缩位置，改变透明值
        if (offset <= scrollRange / 2){
            toolbarOpen.setVisibility(View.VISIBLE);
            toolbarClose.setVisibility(View.GONE);
            //根据偏移百分比，计算透明值
            float scale2 = (float) offset / (scrollRange / 2);
            int alpha2 = (int) (255 * scale2);
            bgToolbarOpen.setBackgroundColor(Color.argb(alpha2,25,131,209));

        }else {//当滑动超过一半，收缩状态下toolbar显示内容，根据收缩位置，改变透明值
            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));
        }
        //根据偏移值百分比计算扫一扫布局的透明度值
        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);
    }
}

最后献上完整demo：仿支付宝首页头部伸缩效果

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,989评论 25赞 708
  • CoordinatorLayout
    CoordinatorLayout与滚动的处理 CoordinatorLayout实现了多种Material De...
    cxm11阅读 6,614评论 1赞 15
  • 送别
    雨落长亭心彷徨 东风忽起百花调 一别数年难...
    是道成归啊阅读 276评论 0赞 2
  • 鹧鸪天·欢度新春
    寒梅辞去旧树梢， 溪边杨柳舞风骚。 梁间莺燕衔春意， 陇上娇花分外妖。 呼玉友，荐溪毛。 殷勤邻里苦相邀， 风光旖...
    名曰喜阅读 488评论 1赞 5
  • 《我是一颗会流泪的树》
    我是一颗会流泪的树 在这国度，从未被人发现 也不再期待谁会为我停驻 我是该欢喜还是痛哭 你走近又走出 寒阳卧水沙洲...
    巴山夜雨寒阅读 408评论 3赞 0