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

最新推荐文章于 2021-05-26 03:41:47 发布

原创最新推荐文章于 2021-05-26 03:41:47 发布 · 2.3k 阅读

CC 4.0 BY-SA版权

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

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

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));

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

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