音乐歌单Android,仿网易云音乐歌单界面 Header滑动效果
这是我的第一篇博客,做Android 开发2年多以来,曾经也有过写一些技术博客的想法,但因为有时候因为懒,有时候工作忙加班多而力不从心,所以迟迟没有开始写自己的博客。最近正好工作不忙,想写一些博客,记录一下项目中用到的知识点或者自己空余时间学习的一些学习笔记,一来是对自己平时工作的一个总结,二来做一个纪录,以后碰到类似的问题也可以翻一下笔记,避免踩相同的坑。好了,闲话到此,一下是今天的正文。
一直以来,我都是网易云音乐的重度用户,一方面是因为它的UI 风格简单漂亮,吸引了我,另一方面,它的曲库和推荐功能都不错,所以一直都在用。最近发现Android 版的歌单界面很不错,所以借着空余时间实现了一下类似的效果。先看一下它的界面:
Header滑到顶部之前:
image_s1.png
Header滑顶部之后:
image_s2.png
可以看到,进入该界面时,顶部背景是封面图的高斯模糊图,在列表向上滑动到Header出界面的时候,Toolbar的背景成了高斯模糊图,并且延伸到了状态栏。看起来是不是很爽(比纯色好看)。接下来分析一下怎样做这样一个效果。
分析
看到这个效果,我脑袋中第一瞬间想的是把Toolbar设置成高斯模糊背景图,然后做成沉浸模式延伸到状态栏。但仔细一想,不行,因为沉浸式状态栏一种是染色模式,状态栏可以设置成和Toolbar 一样的颜色,另一种是图片作为背景延伸到状态栏。很明显,如果把Toolbar背景设置成高斯模糊图,状态栏是不能显示的。所以考虑第二种方案,图片作为背景,状态栏透明。
解决方案
上面说了,我们用图片作为背景,然后设置状态栏透明,延伸到状态栏这种方式。具体方法是:
1, 做成沉浸模式,(这里不讲沉浸式状态栏,如果不了解的请看这片文章Android App 沉浸式状态栏解决方案 )开始没有滑动时,顶部Header背景图延伸到状态栏。
2,Toolbar 下面放一个View(暂时叫headerBgView) ,高度为:Toolbar的高度 + 状态栏的高度,因为设置状态栏透明后,整体布局要向上移动状态栏的高度。
3,监听RecyclerView 的滑动事件,根据header 的高度变化计算出对应的alpha值,最后设置headerBgView 的alpha值。
部分代码
布局文件:
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:id="@+id/header_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@mipmap/test"
android:scaleType="centerCrop"
/>
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:titleTextColor="@android:color/white"
android:title="@string/title"
app:navigationIcon="@mipmap/navigation_back_white"
/>
关键代码:
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
}
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
View headerView = null;
LinearLayoutManager manager = (LinearLayoutManager) recyclerView.getLayoutManager();
int firstVisibleItem = manager.findFirstVisibleItemPosition();
if(firstVisibleItem == 0){
headerView = recyclerView.getChildAt(firstVisibleItem);
}
if(headerView == null){
return;
}
float alpha = Math.abs(headerView.getTop()) * 1.0f / headerView.getHeight();
Log.i(TAG,"alpha:"+alpha + "top :"+headerView.getTop() + " height: "+headerView.getHeight());
Drawable drawable = mHeaderBg.getDrawable();
if(drawable!=null){
drawable.mutate().setAlpha((int) (alpha * 255));
mHeaderBg.setImageDrawable(drawable);
}
}
});
最终效果图
1,header未滑到顶部时效果:
image_s3.png
2 header 滑出顶部时效果:
image2.png
最后
这是我写的第一篇博客,可能有点乱,见谅。写博客主要是为了纪录自己平时项目中用到的东西或者自己的学习笔记,是对自己的一个总结,希望能在写博客的同时自我提升,如果写的东西也能帮助到其他需要的人,那是再好不过了。最后送上完整的代码,需要的可以去Github 看一下完整代码入口 )
音乐歌单Android,仿网易云音乐歌单界面 Header滑动效果相关推荐
- 音乐歌单Android,[CloudReader]Android - 仿网易云音乐歌单详情页
前段时间模仿网易云音乐UI使用DataBinding做了一个App:CloudReader,今天把其中的类似歌单详情页单独拿出来说一下,我觉得其中还是有些干货的,关联到的知识点还比较有价值,而且也有很 ...
- 仿网易云android界面,Android - 仿网易云音乐歌单详情页
前段时间模仿网易云音乐UI使用DataBinding做了一个App:CloudReader,今天把其中的类似歌单详情页单独拿出来说一下,我觉得其中还是有些干货的,关联到的知识点还比较有价值,而且也有很 ...
- Android仿网易云音乐播放页面 背景虚化碟片效果
1.效果图 仿网易云音乐播放页面,主要有4个关键点: 背景虚化.获取音乐的专辑封面,将此图片作为背景图,并进行模糊虚化处理 碟片合成.获取音乐的专辑封面,和黑色碟片图片进行合成 碟片旋转.音乐播放时, ...
- 音乐歌单Android,LitePager(仿网易云音乐-歌单广场效果)
LitePager,一个轻量级的ViewPager,仿新版网易云歌单广场 使用方式: 添加依赖: implementation 'com.wuyr:litepager:1.0.0' APIs: Met ...
- Android 仿网易云音乐App
因为工作实在是有点忙,所以还没完成成品,就先挂到GitHub上.日后慢慢更新啦. 项目地址 GitHub地址,希望大佬们点个star GitHub仿网易云音乐App 效果展示 注:因为视频太模糊,每日 ...
- android 网易云音乐上滑动画,Android 仿网易云音乐 音轨跳动效果
网易云音乐的Loading效果,大家应该也比较熟悉了,效果是一个红色音轨不断跳动的效果,一般用于Loading等待时填充使用.本篇来自定义这个效果. Android 仿网易云音乐 音轨跳动View.g ...
- android仿网易云音乐、即时通讯、bilibili、沙漏动画等源码
Android精选源码 android仿网易云音乐安卓版源码 android开源即时通讯,实时传讯IM源码 android类似淘宝的商品详情页源码 android面向.艺术家.设计师等创意类作品源码 ...
- 网易云音乐歌单生成外链播放器
(一)自己创建的歌单没有生成外链选项的解决方法 解决方法: 1.分享歌单 2.打开分享界面的歌单链接 3.打开歌单即可看到生成外链的点击链接 (二)网易云音乐歌单因为版权原因无法生成外链的解决方法 1 ...
- Python数据分析初探项目 基于Python数据可视化的网易云音乐歌单分析系统 大学编程作业(TUST 天津科技大学 2022年)
Python 数据分析初探项目 基于 Python 数据可视化的网易云音乐歌单分析系统 大学编程作业(TUST 天津科技大学 2022 年) Python 数据分析初探项目 基于 Python 数据可 ...
最新文章
- 9.可变参数创建不可变集合
- Shell练习-统计出每个IP的访问量有多少?
- 继BERT之后,这个新模型再一次在11项NLP基准上打破纪录
- Linux SPI总线和设备驱动架构之二:SPI通用接口层
- prometheus监控耗时MySQL_Grafana+Prometheus监控mysql性能
- 网络层:IP 协议(用于封装 IP)
- 圈钱跑路 发行自己的ERC20 Token
- linux8安装ftp服务,CentOS8.0 安装配置ftp服务器的实现方法
- python爬取2019年计算机就业_2019年最新Python爬取腾讯招聘网信息代码解析
- CSS→代码语法、优先级、选择器、权值、字体文本、颜色、长度值、块状内联元素、盒模型、布局模型→层模型绝对相对定位、div排列、水平居中
- HDU - 5950 Recursive sequence(矩阵快速幂)
- SDOI2015 序列统计
- Linux下安装mysql(yum、二进制包、源码包)
- 用cmd命令行在windows系统中进行分区操作
- Docker 清理数据卷 volumes
- python处理图片文件,python 间接处理webp图片文件
- 解决警告Presenting view controllers on detached view controllers is discouraged 以及引申
- 关于uIP移植以及部分特性解析和勘误
- Cocos2dx-- 聊天系统之富文本(RichText)与字体对齐
- 8080端口被占怎么解决
热门文章
- 秋季当养肺,水果蔬菜来帮忙
- 掌舵9年,艾伦研究所创始CEO 光荣退休!他曾预言中国AI将领跑世界
- android高德轨迹纠偏,轨迹纠偏-服务-教程-地图 JS API | 高德地图API
- 液化气瓶口的二维码“身份证”
- python代码测试健康指数计算器_python编写的bmi体重指数计算器、出租车费用计算器、个税计算器、猜数字游戏...
- js的常见的三种密码加密方式-MD5、Base64、sha1加密详解总结
- jShop开源电子商务系统
- 系统集成项目管理工程师高频考点(第九章)
- 字节跳动 2022年春招
- HTML5 语音搜索