最近开发有一个需求 仿照支付宝首页顶部滑动的特效,由于之前没写过,既然这次有这个需求,那我们就来好好的研究一下
实现这个的需求 我们就需要了解一个新的布局
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));
这里面写的是相当于两个方法 我们在网上搜的大部分都是 我注释掉的代码 这些注释掉的代码其实没又什么问题 只不过当我们改变背景色的时候 这个方法就不适用了 或许有的人说找到对应颜色的三原色不就好了 的确 这是一个方法
但是我们可以设置一个通用的方法 不需要查找相应的三原色 这时候就是如我代码所写 当时第一次使用 好多都没注意些这些 了解的人还好了解三原色 不知道的人就会很迷茫 按照我现在的写法就不会有这些困惑了