仿支付宝首页顶部滑动效果

最近开发有一个需求 仿照支付宝首页顶部滑动的特效，由于之前没写过，既然这次有这个需求，那我们就来好好的研究一下

实现这个的需求 我们就需要了解一个新的布局  

android.support.design.widget.CoordinatorLayout

这个布局在design包里面 这时候我们就需要去添加依赖 

下面我们来看看里面的简单布局 

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <View
        android:id="@+id/status_bar"
        android:layout_width="match_parent"
        android:layout_height="@{height,default=@dimen/status_height}"
        android:background="@color/light_orange" />

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_topbar"
        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:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <include
                android:id="@+id/home_fragment_open_top"
                layout="@layout/home_fragment_open_top"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="48dp"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="48dp"
                app:contentInsetLeft="0dp"
                app:contentInsetStart="0dp"
                app:layout_collapseMode="pin">

                <include
                    android:id="@+id/include_toolbar_open"
                    layout="@layout/home_fragment_top" />

                <include
                    android:id="@+id/include_toolbar_close"
                    layout="@layout/home_toolbar_close" />

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

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

里面包含三个布局   

首先正常不折叠的布局   

里面的三个布局

 layout/home_fragment_open_top布局如下

<?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="wrap_content"
    android:background="@color/light_orange">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/chongzhi" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="5dp"
                android:text="充值中心"
                android:textColor="@color/black_color_333333"  />

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/yule" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="5dp"
                android:text="休闲娱乐"
                android:textColor="@color/black_color_333333" />

        </LinearLayout>


        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/gouwu" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="5dp"
                android:text="购物商城"
                android:textColor="@color/black_color_333333" />
        </LinearLayout>


        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/vip_home" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="5dp"
                android:text="会员特权"
                android:textColor="@color/black_color_333333"  />

        </LinearLayout>

    </LinearLayout>

    <View
        android:id="@+id/bg_content"
        android:layout_width="match_parent"
        android:background="@color/light_orange"
        android:layout_height="100dp" />

</FrameLayout>

layout/home_fragment_top  布局

<?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="@dimen/toolbar_height"
    android:background="@color/light_orange"
    android:orientation="horizontal">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:ellipsize="end"
            android:gravity="center"
            android:maxLines="1"
            android:maxWidth="200dp"
            android:paddingLeft="@dimen/toolbar_item_padding"
            android:paddingRight="@dimen/toolbar_item_padding"

            android:text="@string/app_name"
            android:textColor="@color/black_color_333333"
            android:textSize="@dimen/toolbar_title_text_size" />

        <ImageView
            android:id="@+id/toolbar_img_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:onClick="@{onClick}"
            android:paddingLeft="@dimen/toolbar_item_padding"
            android:paddingRight="@dimen/toolbar_item_padding"
            android:src="@drawable/icon_message"
            android:textColor="@color/black_color_333333" />
    </RelativeLayout>

    <View
        android:id="@+id/bg_toolbar_open"
        android:layout_width="match_parent"
        android:background="@color/light_orange"
        android:layout_height="match_parent" />

layout/home_toolbar_close  布局如下

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@color/light_orange">

    <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:background="@drawable/chongzhi"
        android:src="@drawable/chongzhi_top" />

    <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="@drawable/yule_top" />

    <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="@drawable/gouwu_top" />

    <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="@drawable/vip_top" />

    <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:src="@drawable/icon_message" />

    <View
        android:id="@+id/bg_toolbar_close"
        android:layout_width="match_parent"
        android:background="@color/light_orange"
        android:layout_height="match_parent" />

</RelativeLayout>

其实正常的三个布局在网上都能搜到   

java代码  首先实现接口  

 AppBarLayout.OnOffsetChangedListener

       //垂直方向偏移量
        int color = getResources().getColor(R.color.light_orange);
        int offset = Math.abs(verticalOffset);
        //最大偏移距离
        int scrollRange = appBarLayout.getTotalScrollRange();
        if (offset <= scrollRange / 2) {//当滑动没超过一半，展开状态下toolbar显示内容，根据收缩位置，改变透明值
            mBinding.includeToolbarOpen.setVisibility(View.VISIBLE);
            mBinding.includeToolbarClose.setVisibility(View.GONE);
            //根据偏移百分比 计算透明值
            float scale2 = (float) offset / (scrollRange / 2);
            int alpha2 = (int) (255 * scale2);

//            Drawable drawable = mBinding.includeToolbarOpen.findViewById(R.id.bg_toolbar_open).getBackground();
//            drawable.setAlpha(alpha2);
            mBinding.includeToolbarOpen.findViewById(R.id.bg_toolbar_open).setBackgroundColor(color);
            mBinding.includeToolbarOpen.findViewById(R.id.bg_toolbar_open).getBackground().setAlpha(alpha2);

//                    .setBackgroundColor(Color.argb(alpha2, 255, 183, 19));
        } else {//当滑动超过一半，收缩状态下toolbar显示内容，根据收缩位置，改变透明值
            mBinding.includeToolbarClose.setVisibility(View.VISIBLE);
            mBinding.includeToolbarOpen.setVisibility(View.GONE);
            float scale3 = (float) (scrollRange - offset) / (scrollRange / 2);
            int alpha3 = (int) (255 * scale3);
//            Drawable drawable = mBinding.includeToolbarClose.findViewById(R.id.bg_toolbar_close).getBackground();
//            drawable.setAlpha(alpha3);
//            mBinding.includeToolbarClose.findViewById(R.id.bg_toolbar_close).setBackground(drawable);
            mBinding.includeToolbarClose.findViewById(R.id.bg_toolbar_close).setBackgroundColor(color);
            mBinding.includeToolbarClose.findViewById(R.id.bg_toolbar_close).getBackground().setAlpha(alpha3);
//            mBinding.includeToolbarClose.findViewById(R.id.bg_toolbar_close).setBackgroundColor(Color.argb(alpha3,255, 183, 19));
        }
        //根据偏移百分比计算扫一扫布局的透明度值
        float scale = (float) offset / scrollRange;
        int alpha = (int) (255 * scale);
        mBinding.homeFragmentOpenTop.findViewById(R.id.bg_content).setBackgroundColor(color);
        mBinding.homeFragmentOpenTop.findViewById(R.id.bg_content).getBackground().setAlpha(alpha);
//        Drawable drawable = mBinding.homeFragmentOpenTop.findViewById(R.id.bg_content).getBackground();
//        drawable.setAlpha(alpha);
//        mBinding.homeFragmentOpenTop.findViewById(R.id.bg_content).setBackground(drawable);
//        mBinding.homeFragmentOpenTop.findViewById(R.id.bg_content).setBackgroundColor(Color.argb(alpha,255, 183, 19));

这里面写的是相当于两个方法   我们在网上搜的大部分都是 我注释掉的代码   这些注释掉的代码其实没又什么问题    只不过当我们改变背景色的时候 这个方法就不适用了    或许有的人说找到对应颜色的三原色不就好了  的确 这是一个方法

但是我们可以设置一个通用的方法 不需要查找相应的三原色    这时候就是如我代码所写  当时第一次使用  好多都没注意些这些 了解的人还好了解三原色 不知道的人就会很迷茫     按照我现在的写法就不会有这些困惑了