InterestingTitleBar源码

轻博客应用Tumblr中，在看他人的主页时候，可以看到顶部title bar的一个很酷炫的体验，当在最顶端，整个title bar的背景是透明的，而上面的字体和图标是白色的，随着逐渐滑下来，背景逐渐不透明变白，而图标及字体则渐渐灰起来。如下图

整个滑动的效果很好。

那么这个效果是怎么实现的呢。秘密自然都在listview的onScroll上。根据firstVisibleItem来判断是否需要对事件进行对应处理，如果滑到了下面，cover不可见了，自然没有必要再去处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
if (firstVisibleItem <= 1) {
View v = view.getChildAt(0);
// 可见区域顶部的top，原始0，滚动到下面后为负数
int top = (v == null) ? 0 : v.getTop();
if (mCompleteFadePosition <= 0) {
mFadeDuration = CoverSettings.getCoverVisibleHeight() / 2;
mCompleteFadePosition = (mHeaderView.findViewById(R.id.user_info_header_panel).getBottom()
+ CoverSettings.getCoverPadding() - ViewUtils.dpToPx(getResources().getDimension(R.dimen.title_bar_main_content_height)));
}
// 当前页面顶端和结束Fade区域的距离
int delta = top + mCompleteFadePosition;
mTitleBarAlpha = interpolate(delta);
setTitleBarTranslate(mTitleBarAlpha);
}
}

interpolate函数根据当前滑动到的位置，来计算需要对应处理的alpha值，setTitleBarTranslate来做具体的ui修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/**
* Specify an alpha value for the title bar. 0 means fully transparent, and
* 255 means fully opaque.
*/
public void setTitleBarTranslate(int alpha) {
if (mTitleBarView == null || mTitleBarView.getBackground() == null) {
return;
}
mTitleBarView.getBackground().setAlpha(alpha);
if (mBarTitleText == null) {
return;
}
if (alpha != 0) {
setTitleBarShadowLayer(0);
} else {
setTitleBarShadowLayer(1f);
}
if (alpha >= MAX_ALPHA) {
setTitleBarColor(ORIGIN_COLOR);
} else {
setTitleBarColor(ColorUtil.interpolateColor(Color.WHITE, mOriginBarTitleColor.getDefaultColor(), alpha, MAX_ALPHA));
}
}

setTitleBarShadowLayer是给字体加上阴影，防止在最顶部透明时，纯白背景下白色字会看不清。

setTitleBarColor则是大头，对图标以及字体进行颜色修改。

1
2
3
4
5
6
7
8
9
10
private void setTitleBarColor(int color) {
if (color == ORIGIN_COLOR) {
mBarTitleText.setTextColor(mOriginBarTitleColor);
} else {
mBarTitleText.setTextColor(color);
}
setViewColor(mBarRightFriendView, color);
setViewColor(mBarLeftSettingButton, color);
}
}

分别写textview和button的setViewColor方法，这里颜色的变化是通过万能的ColorFilter来实现的，模式则使用了PorterDuff.Mode.SRC_ATOP。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
private void setViewColor(Button button, int color) {
if (color == ORIGIN_COLOR) {
button.setTextColor(mOriginBarTitleColor);
button.getBackground().clearColorFilter();
} else {
button.setTextColor(color);
button.getBackground().setColorFilter(color, PorterDuff.Mode.SRC_ATOP);
}
}
private void setViewColor(TextView textView, int color) {
if (color == ORIGIN_COLOR) {
textView.setTextColor(mOriginBarTitleColor);
} else {
textView.setTextColor(color);
}
}

险些忘了interpolateColor，会根据位置在原色值和目标最终色值之间根据位置来做映射（任意颜色的图标都能渐变）。

1
2
3
4
5
6
7
public static int interpolateColor(int colorFrom, int colorTo, int posFrom, int posTo) {
float delta = posTo - posFrom;
int red = (int)((Color.red(colorFrom) - Color.red(colorTo)) * delta / posTo + Color.red(colorTo));
int green = (int)((Color.green(colorFrom) - Color.green(colorTo)) * delta / posTo + Color.green(colorTo));
int blue = (int)((Color.blue(colorFrom) - Color.blue(colorTo)) * delta / posTo) + Color.blue(colorTo);
return Color.argb(255, red, green, blue);
}

转自:http://blog.zhaiyifan.cn/2015/01/18/tumblr-like-titlebar-anim/

实现Tumblr的标题栏跟滑动渐变颜色（在2个色值之间）的动画相关推荐

  1. android标题栏渐变动画,Android 顶部标题栏随滑动时的渐变隐藏和渐变显示效果

    各位早上好,话不多说,先上效果图: 注意顶部:首页textview的变化(显示和隐藏)! 首先分析下:ui状态,其是由recyclerview添加头部组成+recyclerview 头部添加和recy ...

  2. [VB.net]绘制具有渐变颜色和防锯齿字体的标题

    1.新建一个项目 2.添加一个用户控件"PaneCaption.vb" 3.[操作]调整控件大小为150×30 4.打开代码编辑器: Imports System.Drawing. ...

  3. ai怎么渐变颜色_AI中怎么调渐变颜色

    AI中怎么调渐变颜色?下面是一篇关于AI中调渐变颜色的教程,希望对新手朋友有所帮助吧! 首先,我们来看看效果图: 步骤如下: 1.打开一个带有渐变背景的素材.现在我们希望在不改变背景色调关系的情况下, ...

  4. 个人中心滚动标题渐变颜色

    /****页面**/ public class ShowWebImageActivity extends Activity implements ObservableScrollView.Scroll ...

  5. android 仿QQ好友动态 title滑动渐变

    最近QQ更新了qq空间消息列表.天天动听也使用了那效果.而且越来越多的android应用都在使用,咱们不能落后啊! 得紧跟时代的步伐,不然就out了. 看起来不错分享下咯! 首先贴一下效果图,因为gi ...

  6. ai怎么渐变颜色_Illustrator如何调渐变颜色 调渐变颜色方法分享

    给各位Illustrator软件的使用者们来详细的解析分享一下调渐变颜色的方法. 教程分享: 首先,我们来看看效果图: 步骤如下: 1.打开一个带有渐变背景的素材.现在我们希望在不改变背景色调关系的情 ...

  7. 【原】Github系列之三：开源iOS下 渐变颜色的进度条WGradientProgress

    概述 今天我们来实现一个iOS平台上的进度条(progress bar or progress view).这种进度条比APPLE自带的更加漂亮,更加有"B格".它拥有渐变的颜色, ...

  8. 【SeeMusic】音符方块颜色设置 ( 单一颜色设置 | 多彩音符设置 | 定时变色设置 | 渐变颜色 | 分轨道提示 )

    SeeMusic 系列文章目录 [SeeMusic]下载安装并注册 SeeMusic 软件 [SeeMusic]购买付费版本 ( 进入购买页面 | 购买流程 ) [SeeMusic]创建 SeeMus ...

  9. .QT-制作最强电压电阻表盘,可以自定义阴影效果,渐变颜色,图标,文字标签等-附带demo程序

    .QT-制作最强电压电阻表盘,可以自定义阴影效果,渐变颜色,图标,文字标签等-附带demo程序 qt自定义控件-圆形通用指示表盘

最新文章

  1. 丘成桐拉来又一菲尔茨奖得主全职加盟清华！年轻数学家40岁获奖，或带领军班、英才班本科生...
  2. C++大师Lippman：我对中国程序员的忠告
  3. 第三篇：Mysql存储引擎
  4. Python基础数据之列表
  5. minwindow java_Java经典算法：最小窗口子字符串
  6. 《Java并发编程的艺术》笔记
  7. java变量类型概念_java变量类型
  8. 测试计划、用例、测试报告、缺陷报告总结
  9. URL编码与中文相互转换
  10. 拷贝漫画检索下载爬虫
  11. eNSP配置Martini方式VPLS
  12. mysql 触发器 模板_MySQL 触发器例子（两张表同步增加和删除)
  13. 机器学习、计算机视觉面经整理（持续完善整理中……）
  14. Python数据分析 2.Matplotlib绘图—常用统计图
  15. 常见的分布式数据库有哪些
  16. 35、线程的让步与阻塞
  17. VulnHub-BLUEMOON: 2021靶机
  18. PMP考试内容有哪些？如何学？
  19. 城堡里的一朵酷烈之花
  20. 增长黑客读书笔记（八）变现：提高每位用户带来的收益

热门文章

  1. Phonics 自然拼读法 c/k,e,h,r,m,d Teacher:Lamb
  2. 聚类算法OPTICS的理解及实现
  3. 中国人保为山东三同新材料承保产品责任险，为消费者保驾护航
  4. 最新织音QQ助手全新秒赞系统V1.0源码 基于TP5开发
  5. css改变纯色图片颜色的几种方式
  6. 生于80年代需读的80本书
  7. 动态设计：不要被风格警察逮捕
  8. 什么是Kernel、Shell、Bash 很幽默的解释
  9. influxdb官网文档翻译
  10. 高级搜索-百度和必应