自定义CoordinatorLayout的Behavior(2):实现淘宝和QQ ToolBar透明渐变效果

最新推荐文章于 2021-09-09 10:30:57 发布
最新推荐文章于 2021-09-09 10:30:57 发布
阅读量8.1k 收藏 15
点赞数 3
分类专栏： Android 文章标签： 淘宝网 toolbar 透明渐变 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tiankong1206/article/details/50696887
版权
本文介绍了如何通过自定义CoordinatorLayout的Behavior实现类似淘宝和QQ ToolBar的透明渐变效果。文章详细讲解了布局设计、自定义Behavior的实现以及Behavior的配置过程，并展示了简易实现后的效果。
摘要由CSDN通过智能技术生成

更好的阅读体验请查看简书

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

自定义CoordinatorLayout的Behavior(2):实现淘宝和QQ ToolBar透明渐变效果

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

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

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

淘宝效果

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

QQ效果

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

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

但是仔细体验会发现它们还是有一点点不同，qq的好友动态是要滑到快要出现文字时才会瞬间

最低0.47元/天 解锁文章
NoBlueSky
关注
专栏目录
Android UI设计之<十>自定义ListView，实现QQ空间阻尼下拉刷新和渐变菜单栏效果
快乐de灰太狼的专栏
06-06 1万+
好久没有写有关UI的博客了，刚刚翻了一下之前的博客，最近一篇有关UI的博客是在2014年写的：Android UI设计之<七>自定义Dialog，实现各种风格效果的对话框。近来项目有个需求，要做个和QQ空间类似的菜单栏透明度渐变和下拉刷新带有阻尼回弹的效果。于是花点时间动手试了试，基本上达到了QQ空间的效果
CoordinatorLayout+Behavior实现复杂联动效果
02-23
CoordinatorLayout 是 Google 在 Design Support 包中提供的一个十分强大的布局视图，它允许开发者通过制定 Behavior 从而实现各种复杂的 UI 效果。工程导入可以直接运行。。。
实现淘宝和QQ ToolBar透明渐变效果
weixin_34301307的博客
06-09 165
哎，好久都没写博客了，最近有点懒惰了，今天端午节，在学校也是无聊的蛋疼啊，正好今天玩玩一些在其他app中常见的一些功能。 来看看效果图吧！ 这个是人家的图，我懒得自己弄一个，就copy他的了，顺便帮你宣传一下你的简书，不算为过吧^-^. sou，传送门 之前是在简书上面看了一篇实现的这种功能，他是重写CoordinatorL...
toolbar的颜色渐变
楚人无梦的专栏
03-21 1008
沉浸式状态栏可以使状态栏与界面背景色同化，优化用户体验。 讲到toolbar，toolbar由于自定义子控件的存在。在渐变颜色的同时要注意子控件的颜色变化。在这里讲一下view.setAlpha(int a)和view.getbackground.setAlpha(int b)的区别： 1）view.setAlpha(int a)； 设置透明度,变化范围是0.0f到1
Toolbar使用Demo，透明状态栏及透明度渐变
03-20
Toolbar使用Demo，透明状态栏及透明度渐变，博客链接http://blog.csdn.net/u011697203/article/details/64126087
CoordinatorLayout 滑动置顶及背景渐变
09-26
滑动置顶，title颜色渐变，最近项目有这么个要求，百度了好多，感觉不符合公司项目的需求，所以就开始了搬运的模式，还好最后弄出来了这个效果，不过感觉少了沉浸式状态栏，哪位大神要是有沉浸式状态栏的可以发我哈，QQ 528804904
Android中仿QQ空间滑动界面标题栏颜色渐变
08-12
4. **自定义标题栏**：在Android中，标题栏（ActionBar或Toolbar）通常是静态的，但为了实现颜色渐变效果，开发者需要创建自定义标题栏，并覆盖其背景颜色。可以使用`android:background`属性或者在代码中设置`...
Android炫酷的Toolbar+Bottom+Fab悬浮按钮显示、隐藏、渐变的各种实现姿势
热门推荐
小嵩的博客
01-12 1万+
前言　　由于手机屏幕大小的限制，各种控件需要根据需求进行显示，隐藏，移动等，以增加视觉效果，用户体验。就拿目前市场上常见的APP如知乎、QQ、淘宝、美团等来说，在他们的APP里面随处可见一些比较优美的处理方案。本文主要将一些常见的需要对控件进行显示、隐藏、渐变的场景进行整理了一番。如：点击屏幕Toolbar,bottom的显示隐藏；滑动Scrollview/Webview/Recyclerview显
android开发常用组件和第三方库（二）
watertekhqx的博客
05-09 7169
都是在github上开源的项目，覆盖面非常之广，有它在手android开发无忧
CoordinatorLayout AppBarLayout 标题渐变 悬浮
09-16
android demoCoordinatorLayout AppBarLayout 标题渐变 悬浮android demoCoordinatorLayout AppBarLayout 标题渐变 悬浮
android自定义打造 collapsingtoolbarlayout渐变伸缩
02-01
自定义scrollview打造滑动头部渐变，伸缩，固定位置，类似collapsingtoolbarlayout的效果，eclipse工具
安卓利用ToolBar控件实现仿QQ顶部渐变色效果
01-03
安卓利用Toolbar控件实现仿QQ顶部渐变色效果 前言 前几天用了一周的时间做了一个手机蓝牙同下位机硬件通讯的安卓小软件，但是因为是安卓小白，加上这个小项目是由我个人进行开发，而本人又是不怎么擅长界面美化，但是又不想自己所开发的软件因吃相太丑而太掉面子，所以今天为了能够让软件吃相好看一点就学习并实现了仿QQ顶部渐变色的效果。在这里想做个记录，当然如果能够帮助到有该需求的朋友那就再好不过了。 先上图看下效果吧 ② 接下来我们要写上面放入的渐变色资源文件（@drawable/background_main”）。在drawable文件夹下创建一个资源文件然后写入下列代码。 ③ 然
安卓淘宝商品高仿界面类CollapsingToolbarLayout
09-30
如需查看更多 请查询我的文章 有介绍.
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+banner
06-29
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+banner
TOOLBAR 渐变效果
weixin_30426957的博客
07-21 154
procedure TForm1.ToolBar1CustomDraw(Sender: TToolBar; const ARect: TRect; var DefaultDraw: Boolean); var i,j : Integer; Dct : TRect; begin j := ToolBar1.Height; for i:=0 to (ToolBar1.Widt...
Android 实现ToolBar滑动渐变
要让世界看得见
08-18 483
title.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/top_bg" android:layout_width="match_parent
android渐变Toolbar的实现
minwenping的博客
05-31 1607
toolbar渐变效果很常见，实现方法也多，先看效果图 采用最简单的实现方式。直接看code第一部分：布局文件<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.a
android_基础_toolbar背景颜色渐变
写bug的蚊子的博客
09-09 594
在res/drawable里定义一个toolbar_bg.xml <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:angle="0" android:startColor="#f89e07" android:centerColor="#ee5511"
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值