自定义CoordinatorLayout的Behavior(2)

作者: 小武站台 | 来源:发表于2016-02-19 11:34 被阅读4930次

    自定义CoordinatorLayout的Behavior实现知乎和简书快速返回效果

    每天用淘宝和QQ 会发现淘宝的商品详情页和qq的好友动态页都不约而同的用了工具栏透明渐变效果,淘宝是为了不挡住商品图片,qq设置为了不挡住header image背景,效果感觉还挺好看,老有人问怎么做的。

    那我们来分析一下他们的效果

    淘宝效果:图片向上滑动的时候,toolbar慢慢的由透明变成完全不透明,向下滑动则相反

    淘宝效果

    QQ效果:(请自行查看手机,模拟器打死都安装不了,录不了gif) qq的效果类似不过有点不同 下面会分析

    QQ效果

    看完他们的效果我们可以发现:

    • 页面进来 toolbar开始都是透明的
    • 向上滑动 toolbar的透明度由透明变成透明,再向下滑动时,又由不透明变成透明

    但是仔细体验会发现它们还是有一点点不同,qq的好友动态是要滑到快要出现文字时才会瞬间变成不透明,看下面的图大概能理解了(数字代表alpha 0为完全透明 0-255表示0-100的透明度 255表示完全不透明)

    效果区分

    可以看到QQ的渐变区间小的多 也就是一瞬间就变了透明度

    好了 简单看了别人家的效果 下面我们要自己来简单实现一下了

    1.布局

    淘宝和QQ的布局总体看都是一样的 toolbar +可滑动内容区(header+列表)

    <?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.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
    
                <ImageView
                    android:id="@+id/header"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/header_height" //图片高度为250dp
                    android:scaleType="centerCrop"
                    android:src="@mipmap/header"/>
    
                <TextView
                    style="@style/TextAppearance.AppCompat.Display2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="你的状态\n朋友1的状态\n朋友2的状态\n朋友3的状态\n朋友4的状态\n朋友5的状态\n朋友6的状态\n朋友7的状态\n朋友8的状态\n朋友9的状态\n朋友10的状态\n朋友11的状态\n朋友12的状态\n朋友13的状态\n朋友14的状态\n朋友15的状态\n朋友16的状态"/>
            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
    
    
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_behavior"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_behavior="liuwp.com.attendance.activity.ToolbarAlphaBehavior"
            />
    
    
    </android.support.design.widget.CoordinatorLayout>
    

    上面可滑动部分为了简单起见用了NestedScrollView,当然你可以可以换成RecyleView,里面包含了一个固定高度的图片和文字列表 很简单的布局。

    2.实现自定义的ToolbarAlphaBehavior

    原理就是根据滑动的偏移值来设置对应的toolbar透明度(看上面的渐变区间分析图一目了然) 实现也就几行代码(就喜欢几行代码的感觉)

    public class ToolbarAlphaBehavior extends CoordinatorLayout.Behavior<Toolbar> {
        private static final String TAG = "ToolbarAlphaBehavior";
        private int offset = 0;
        private int startOffset = 0;
        private int endOffset = 0;
        private Context context;
    
        public ToolbarAlphaBehavior(Context context, AttributeSet attrs) {
            super(context, attrs);
            this.context = context;
        }
    
        @Override
        public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, Toolbar child, View directTargetChild, View target, int nestedScrollAxes) {
            return true;
        }
    
    
        @Override
        public void onNestedScroll(CoordinatorLayout coordinatorLayout, Toolbar toolbar, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
            startOffset = 0;
            endOffset = context.getResources().getDimensionPixelOffset(R.dimen.header_height) - toolbar.getHeight();
            offset += dyConsumed;
            if (offset <= startOffset) {  //alpha为0
                toolbar.getBackground().setAlpha(0);
            } else if (offset > startOffset && offset < endOffset) { //alpha为0到255
                float precent = (float) (offset - startOffset) / endOffset;
                int alpha = Math.round(precent * 255);
                toolbar.getBackground().setAlpha(alpha);
            } else if (offset >= endOffset) {  //alpha为255
                toolbar.getBackground().setAlpha(255);
            }
        }
    
    }
    

    没错就这么几行代码,主要代码都在onNestedScroll方法里面

    3.配置Behavior

    给Toolbar配置Behavior

     <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_behavior"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_behavior="liuwp.com.attendance.activity.ToolbarAlphaBehavior" //添加配置
            />
    

    因为一开始页面进来toolbar就是透明的 别忘了初始化透明度

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_behavior);
            Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_behavior);
            toolbar.getBackground().setAlpha(0);//toolbar透明度初始化为0
        }
    

    然后就ok了

    4.结束

    最后看下我们的效果

    toolbar渐变效果

    恩 还不错 是不是觉得分分钟就搞定了 当然这里只是简易实现 给大家一个思路,用在实际产品开发中 亲 可能要考虑更多东西哦。

    相关文章

      网友评论

      • 4cb384be0430:这个有问题呀, 往下滑动太多的时候 再返回来就不行了
      • gg小李:楼主,能不能不是ToolBar在渐变,而是页面里面的某个控件随着页面在移动,颜色也在变
      • new一个:各位,toolbar.setBackgroundColor(Color.argb(alpha, RED, GREEN, BLUE));代替toolbar.getBackground().setAlpha(alpha)可以解决前一个activity的toolbar变色的问题,但是滑下再滑上结果toolbar的alpha不为0的bug还是解决不了,推荐使用NestedScrollView.setOnScrollChangeListener,缺点是耦合相对更重。解决问题的朋友请点个赞,另外也鄙视一下作者看到评论区那么多问题也不出来说几句的行为
        小武站台:统一回复一下:非常抱歉哦 由于作者现在主要工作是后端 有打算开始写服务端架构文章了 对android已经没有关注了(怀念android热火朝天的日子) 所以还是要靠你们互相帮助了 :joy:
      • 梦想点亮生命:楼主 有下载地址么?谢谢了
      • 6c64cae1cae0:为什么其他界面的ToolBar透明度也变了?
        wo叫天然呆:是啊,我也发现这个问题,不知道为什么,请问你解决了吗
      • a0f49a52d755:还有一个问题就是 微博页面上滑动的时候手机状态栏也会 也会和toolbar呈现一样的效果 这有解决方案么
      • 87be2f41f7f9:BUG就是,onNestedScroll这个方法里面的dyConsumed参数,并不会记录惯性滑动时的滑动的距离,所以就会有楼上说的,快速滑动时不变色这个东西--有解决方案吗??
      • 1446be8a39a0:作者只是提供了简单的思路,具体还要大家仔细分析
      • lxacoder:而且有bug,快速滑动的时候并不能实现变色
      • lxacoder:这个,表示有点卡
      • 冰冰的冻结:作者来个demo吧,想看看你demo怎么写的
      • 08b5fc157df9:应该给个DEMO这样COPY的不对
      • EthanNJ:还是不行, 上面的ToolbarAlphaBehavior 显示灰色未调用。
      • 640303ab3a50:还是有点不行,有点bug,拖动到下面有时候回去到顶部的时候,toolbar的透明度还是255,遮挡了布局
      • 晓峰残月:状态栏怎么透明啊
      • 21ea7f76b578:拷过去后ToolbarAlphaBehavior这个类都是灰色的,没有调用
      • 21ea7f76b578:你好,请问文ToolbarAlphaBehavior这个类除了toolBar的layout_behavior用到还有哪里调用了,我实现不了
        小武站台:@21ea7f76b578 没有了 你直接把上面的布局拷贝到你的项目里面试试
      • kyleada:博主请教个问题啊,标题栏上的返回这些图标怎么控制变色的?我知道只有灰色的话,可以和标题栏反着进行透明度的变化,但是里面的线图怎么能实现这样的变化呢?
        小武站台:@kyleada 理解了 如果你只是简单白色变成灰色 很简单 很多方法可以做到 下面的方法是Tint进行着色
        Drawable whiteIcon = DrawableCompat.wrap(whiteDrawable);
        DrawableCompat.setTint(whiteIcon, grayColor);
        但是如果你要类似alpha这种不停的不同程度进行渐变 可能需要ColorFilter进行argb各个元素进行操作
        kyleada:@小武站台 Thank you~ 这个我明白。你看,图标是由‘灰背景白色线图’变成‘透明背景灰色线图’,这个应该是由background + src实现的吧,background通过alpha变化即可,但是怎么把src由白色变灰色呢?要用Tint吗,我觉得我想复杂了
        小武站台:@kyleada 你好像为难的是系统的返回图标么 它的id是R.id.back 可以直接findById获取 变色的话只要有background都可以进行变色操作的

      本文标题:自定义CoordinatorLayout的Behavior(2)

      本文链接:https://www.haomeiwen.com/subject/bhfvkttx.html