2024年安卓最全Android 每周一个小轮子之 学习仿网易云广场歌单的效果(2)，字节跳动面试链接

于 2024-05-15 08:32:33 发布
阅读量940 收藏 23
点赞数 26
分类专栏： 程序员 文章标签： android 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84556480/article/details/138889375
版权

最后

只要是程序员，不管是Java还是Android，如果不去阅读源码，只看API文档，那就只是停留于皮毛，这对我们知识体系的建立和完备以及实战技术的提升都是不利的。

真正最能锻炼能力的便是直接去阅读源码，不仅限于阅读各大系统源码，还包括各种优秀的开源库。

腾讯、字节跳动、阿里、百度等BAT大厂 2019-2021面试真题解析

资料太多，全部展示会影响篇幅，暂时就先列举这些部分截图

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

3、关于LayoutParams

LayoutParams是用来协助Viewgoup的，它可以给子View定义一些属性。而且也可以支持margin。

我们要给子View定义 ：

  • 从哪里来（from）

  • 到哪里去（to）

  • 透明度（alpha）

  • 缩放值（scale）

所以我们要这样子重写：

/**

  • 这里要自己写一个ViewGroup的LayoutParams来记录 scale、alpha、from、to

*/

class RikkaLayoutParams extends MarginLayoutParams {

float scale = 0f;

float alpha = 0f;

int from;

int to;

…(getter and setter)

public RikkaLayoutParams(Context c, AttributeSet attrs) {

super(c, attrs);

}

public RikkaLayoutParams(int width, int height) {

super(width, height);

}

public RikkaLayoutParams(LayoutParams source) {

super(source);

}

}

/**

  • 要支持margin，所以要重写generate方法

*/

@Override

public LayoutParams generateLayoutParams(AttributeSet attrs) {

return new RikkaLayoutParams(mContext, attrs);

}

@Override

protected LayoutParams generateLayoutParams(LayoutParams p) {

return new RikkaLayoutParams§;

}

@Override

protected LayoutParams generateDefaultLayoutParams() {

return new RikkaLayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

}

4、关于测量

ViewGroup的宽度要么是写死的值，要么是三个子View之和

高度要么是写死的值，要么是三个View里面，最大的那一个：

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

//先测量子View

measureChildren(widthMeasureSpec, heightMeasureSpec);

//因为这个时候已经测量完子View了，所以通过子View来计算整个View的宽高

int width = measureWidth(widthMeasureSpec);

int height = measureHeight(heightMeasureSpec);

//根据获取的宽高拿去用

setMeasuredDimension(width, height);

}

//整个View的宽度是三个子View的和

private int measureWidth(int widthMeasureSpec) {

int totalWidth = 0;

int widthSize = MeasureSpec.getSize(widthMeasureSpec);

int widthMode = MeasureSpec.getMode(widthMeasureSpec);

if (widthMode == MeasureSpec.EXACTLY) {

totalWidth = widthSize;

} else {

for (int i = 0; i < getChildCount(); i++) {

RikkaLayoutParams lp = (RikkaLayoutParams) getChildAt(i).getLayoutParams();

totalWidth += getChildAt(i).getMeasuredWidth() + lp.leftMargin + lp.rightMargin;

}

}

return totalWidth;

}

//整个View的高 取三个View的最大值

private int measureHeight(int heightMeasureSpec) {

int maxHeight = 0;

int heightSize = MeasureSpec.getSize(heightMeasureSpec);

int heightMode = MeasureSpec.getMode(heightMeasureSpec);

if (heightMode == MeasureSpec.EXACTLY) {

//如果是具体值就取具体值

maxHeight = heightSize;

} else {

for (int i = 0; i < getChildCount(); i++) {

View child = getChildAt(i);

RikkaLayoutParams lp = (RikkaLayoutParams) child.getLayoutParams();

maxHeight = Math.max(maxHeight, child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin);

}

}

return maxHeight;

}

5、关于布局

测量完后就需要布局了。

我们要根据三条辅助线来确定。最左边的View的辅助线，应该以左边为准，右边的以右边为准，中间的以中间为准。

由于在滑动时，View的位置也是要变的，也要不断的走onLayout方法，所以辅助线也是跟着变动的，它是跟着滑动百分比来计算的。

/**

  • 根据基准线去布局子View

  • 基准线有四条，子View分别在这四条线上

*/

@Override

protected void onLayout(boolean changed, int l, int t, int r, int b) {

for (int i = 0; i < getChildCount(); i++) {

int baseLineX = calBaseLine(i);

int baseLineY = getHeight() / 2;

//滑动的过程也是layout的过程，所以在layout的时候也要更改其透明度和缩放度

View child = getChildAt(i);

RikkaLayoutParams lp = (RikkaLayoutParams) child.getLayoutParams();

child.setScaleX(lp.getScale());

child.setScaleY(lp.getScale());

child.setAlpha(lp.getAlpha());

int left = baseLineX - child.getMeasuredWidth() / 2;

int top = baseLineY - child.getMeasuredHeight() / 2;

int right = left + child.getMeasuredWidth();

int bottom = top + child.getMeasuredHeight();

child.layout(left + lp.leftMargin + getPaddingLeft(),

top + lp.topMargin + getPaddingTop(),

right + lp.rightMargin + getPaddingRight(),

bottom + lp.bottomMargin + getPaddingBottom());

}

}

/**

  • 根据offsetPercent来计算基线位置,子View是根据基线来布局的

*/

private int calBaseLine(int index) {

float baseline = 0;

//最左边的baseline

float baselineLeft = getWidth() / 4;

//最中间的baseline

float baselineCenter = getWidth() / 2;

//最右边的baseline

float baselineRight = getWidth() - baselineLeft;

RikkaLayoutParams lp = (RikkaLayoutParams) getChildAt(index).getLayoutParams();

//根据lp的from 和 to来确定基线位置

switch (lp.getFrom()) {

case 0:

if (lp.getTo() == 1) {

baseline = baselineLeft + (baselineRight - baselineLeft) * -offsetPercent;

} else if (lp.getTo() == 2) {

baseline = baselineLeft + (baselineCenter - baselineLeft) * offsetPercent;

} else {

baseline = baselineLeft;

}

break;

case 1:

if (lp.getTo() == 0) {

baseline = baselineRight - (baselineRight - baselineLeft) * offsetPercent;

} else if (lp.getTo() == 2) {

baseline = baselineRight + (baselineRight - baselineCenter) * offsetPercent;

} else {

baseline = baselineRight;

}

break;

case 2:

if (lp.getTo() == 1) {

baseline = baselineCenter + (baselineRight - baselineCenter) * offsetPercent;

} else if (lp.getTo() == 0) {

baseline = baselineCenter + (baselineCenter - baselineLeft) * offsetPercent;

} else {

baseline = baselineCenter;

}

break;

}

return (int) baseline;

}

6、关于滑动、子View的移动

我们需要在onInterceptTouchEvent里判断一下我们是否需要使用到onTouchEvent，所以我们需要时时刻刻的去获取点击的位置，并记录偏移量，来判断是否是滑动状态，如果是的话，我们需要处理子View的移动了。

/**

  • 如果是滑动，则调用onTouchEvent，如果只是单击，可以切换View

*/

@Override

public boolean onInterceptTouchEvent(MotionEvent ev) {

isDraged = false;

int x = (int) ev.getX();

int y = (int) ev.getY();

switch (ev.getActionMasked()) {

case MotionEvent.ACTION_DOWN:

mDownX = x;

mDownY = y;

mLastX = x;

mLastY = y;

break;

case MotionEvent.ACTION_MOVE:

//如果滑动超出规定的距离，则可以滑动View

int offsetX = (int) (x - mLastX);

int offsetY = (int) (y - mLastY);

if (Math.abs(offsetX) > MIN_SLOP_DISTANCE && Math.abs(offsetY) > MIN_SLOP_DISTANCE) {

mLastX = x;

mLastY = y;

isDraged = true;

}

case MotionEvent.ACTION_UP:

isDraged = false;

break;

}

return isDraged;

}

/**

  • onTouchEvent就是确定是要滑动了，根据滑动距离，做子View的位移动画

*/

@Override

public boolean onTouchEvent(MotionEvent event) {

int x = (int) event.getX();

int y = (int) event.getY();

switch (event.getActionMasked()) {

case MotionEvent.ACTION_DOWN:

case MotionEvent.ACTION_MOVE:

//通过总位移量除以View长来得到百分比

int offsetX = (int) (x - mLastX);

totalOffsetX += offsetX;

moveItem();

break;

case MotionEvent.ACTION_UP:

isDraged = false;

break;

}

mLastX = x;

mLastY = y;

//能走到onTouchEvent就肯定是返回true的

return true;

}

而子View就是根据 总位移量totalOffsetX来计算百分比的：

/**

  • 通过百分比的正负值来确定每个View要去到哪里、设置透明度和缩放、交换View的层级

*/

private void moveItem() {

offsetPercent = totalOffsetX / getWidth();

setViewFromAndTo();

changeViewLevel();

changeAlphaAndScale();

requestLayout();

}

/**

  • 根据百分比的正负值，来设置View的from和to

  • 如果是负则说明手指正在往左边滑动，则 0->1,1->2,2->0，反之亦然

*/

private void setViewFromAndTo() {

//如果滑动距离超出了屏幕的宽度，则超出的部分要更新

if (Math.abs(offsetPercent) >= 1) {

//在每次完整的滑完一次后，需要重置isReordered，不然当一次滑动很长距离时，会产生问题

isReordered = false;

for (int i = 0; i < getChildCount(); i++) {

RikkaLayoutParams lp = (RikkaLayoutParams) getChildAt(i).getLayoutParams();

lp.setFrom(lp.getTo());

}

totalOffsetX %= getWidth();

offsetPercent %= 1f;

} else {

//否则就要判断from和to

for (int i = 0; i < getChildCount(); i++) {

RikkaLayoutParams lp = (RikkaLayoutParams) getChildAt(i).getLayoutParams();

switch (lp.getFrom()) {

case 0:

lp.setTo(offsetPercent > 0 ? 2 : 1);

break;

case 1:

lp.setTo(offsetPercent > 0 ? 0 : 2);

break;

case 2:

lp.setTo(offsetPercent > 0 ? 1 : 0);

break;

}

}

}

}

/**

  • 当滑动进度超出了0.5则需要交换层级，2是最上层，0和1在下层，交换的时候交换1,2就行了

  • isReordered判断有没有交换过层级，每次onInterceptTouchEvent的时候都要重置

  • 因为可能会交换了还要交换回来

*/

private void changeViewLevel() {

Log.d(TAG, "offsetPercent : " + offsetPercent);

if (Math.abs(offsetPercent) >= 0.5f) {

if (!isReordered) {

exchangeOrder(1, 2);

isReordered = true;

}

} else {

if (isReordered) {

//如果没有超出0.5f，但是又交换过层级，说明滑到一半后又往回滑了，需要交换回来

exchangeOrder(1, 2);

isReordered = false;

}

}

}

/**

  • 改变正在移动的View的Scale和透明度

*/

private void changeAlphaAndScale() {

for (int i = 0; i < getChildCount(); i++) {

RikkaLayoutParams lp = (RikkaLayoutParams) getChildAt(i).getLayoutParams();

switch (lp.getFrom()) {

case 0:

if (lp.getTo() == 2) {

lp.setAlpha(MIN_ALPHA + (1f - MIN_ALPHA) * offsetPercent);

lp.setScale(MIN_SCALE + (1f - MIN_SCALE) * offsetPercent);

} else if (lp.getTo() == 1) {

//将View和低层的View交换

exchangeOrder(indexOfChild(getChildAt(i)), 0);

}

最后

如果你看到了这里，觉得文章写得不错就给个赞呗？如果你觉得那里值得改进的，请给我留言。一定会认真查询，修正不足。谢谢。

欢迎大家一起交流讨论啊~

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

kaLayoutParams lp = (RikkaLayoutParams) getChildAt(i).getLayoutParams();

switch (lp.getFrom()) {

case 0:

if (lp.getTo() == 2) {

lp.setAlpha(MIN_ALPHA + (1f - MIN_ALPHA) * offsetPercent);

lp.setScale(MIN_SCALE + (1f - MIN_SCALE) * offsetPercent);

} else if (lp.getTo() == 1) {

//将View和低层的View交换

exchangeOrder(indexOfChild(getChildAt(i)), 0);

}

最后

如果你看到了这里，觉得文章写得不错就给个赞呗？如果你觉得那里值得改进的，请给我留言。一定会认真查询，修正不足。谢谢。

[外链图片转存中…(img-qstjCal9-1715733130604)]

欢迎大家一起交流讨论啊~

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

2401_84556480
关注
专栏目录
LitePager:LitePager，一个轻量级的ViewPager，仿新版网易云歌单广场
04-22
LitePager，一个轻量级的ViewPager，仿新版网易云歌单广场 博客详情： 使用方式: 添加依赖： implementation 'com.wuyr:litepager:1.3.1' APIs: Method Description addViews(int... layouts) 批量添加子View addViews(View... views) 批量添加子View setSelection(View target) 选中指定子View setSelection(int index) 根据索引选中子View setOrientation(int orientation) 设置滑动方向(默认: ORIENTATION_HORIZONTAL):ORIENTATION_HORIZONTAL(水平)ORIENTATION_VERTICAL(垂直) setFlingDuration(lo
Android 每周一个小轮子之 学习仿网易云广场歌单的效果
m0_64604893的博客
12-24 447
LayoutParams是用来协助Viewgoup的，它可以给子View定义一些属性。而且也可以支持margin。 我们要给子View定义 ： 从哪里来（from） 到哪里去（to） 透明度（alpha） 缩放值（scale） 所以我们要这样子重写： /** 这里要自己写一个ViewGroup的LayoutParams来记录 scale、alpha、from、to */ class RikkaLayoutParams extends MarginLayoutParams { flo.
仿网易云音乐日推界面（监听AppBarLayout滑动+动态高斯模糊
m0_66264881的博客
01-19 871
需要学习什么 只要学习两个就够了 关于CoordinatorLayout和AppBarLayout的使用 我之前写过一篇Blog就是讲这个的。讲的不是很细，但是把用法和注意的点都讲解到了。其实只要学会了Behavior也够我们开发产品了。 小学CoordinatorLayout的交互 动态高斯模糊 学习了Android开发学习之路-动态高斯模糊怎么做 这个大神用了双ImageView重叠来做，（其实我一开始也想到了用重叠，但是我不知道ImageView.setImageAlpha(alpha)这个
XML中配置网易云歌手详情滑动效果
Android 开发架构
08-01 331
HeaderLayout 网易云音乐App给用户的体验效果一直都非常好，尤其是流畅的动画和滑动的联动效果，都给人一种如丝滑般的感受，这一点在其歌手详情页面体现得尤为突出。那么我们就来实现这样的效果，但是我们不能只局限在实现当中，否则当需求变化就需要改动大量的代码，同时也不能保证它的复用性，放到其他界面则需要写许多重复代码。因此我们需要跳出实现的限制，将其中的元素抽取出来，制作成一个通用的库，并且...
Android 仿网易云音乐App
RikkaTheWorld
10-24 2万+
因为工作实在是有点忙，所以还没完成成品，就先挂到GitHub上。日后慢慢更新啦。
Android-拆轮子-学习Depth唯美的动画效果
08-13
"Android-拆轮子-学习Depth唯美的动画效果"这个主题，旨在深入探索如何在Android应用中实现深度（Depth）感知的精美动画。这类动画通常会给用户带来更真实、更有层次的视觉体验，使交互更加生动有趣。 深度动画在...
程序员的中年危机，史上最全的Android面试题集锦，分享PDF高清版.pdf，这是一份不错的文件
06-09
"Android面试题集锦" 根据提供的文件信息，可以总结出以下知识点： 1. 将大块代码分解成小函数：将复杂的代码分解成小的、可管理的函数，可以提高代码的可读性和维护性。 2. 今晒事今毕，如果没毕，就留到明天：...
Android应用源码之仿安卓美团界面.zip
最新发布
06-07
在Android应用开发中，开发者经常会参考已有的成熟应用来学习和提升自己的技能，"Android应用源码之仿安卓美团界面.zip"就是一个这样的学习资源。这个压缩包提供了对美团APP界面的模仿实现，可以帮助我们深入了解...
如何造个android Flow流式响应的轮子
08-25
Flow流式响应的轮子的实现主要通过Flow.create方法创建一个流，然后使用then方法将Event组合成一个流式的处理过程。 Flow.create方法创建一个流式响应的轮子，然后使用then方法将Event组合成一个流式的处理过程。 ...
使用Android造了个滚轮控件轮子示例
08-27
本文将探讨如何在Android上创建一个自定义滚轮控件，即“滚轮控件轮子”示例。该控件允许用户通过滚动来选择项目，通常用于日期选择、时间选择或选项列表等场景。 首先，创建自定义控件的关键步骤包括`measure`、`...
Android 每周一个小轮子之 学习仿网易云广场歌单的效果
RikkaTheWorld
08-16 566
这一篇Blog是学习自：Android自定义ViewGroup第十三式之移花接木 小缘老哥太顶了，写的东西都巨棒，关注Ta很久了，我决定向他学习，学着去像他那样思考问题。 建议各位老哥都去关注他！ 这次模仿的效果是网易云的广场歌单： 跟着大佬做的效果： 滑动的时候，三个View跟着移动，最上面的View会到下面去，跟着的View就会轮着上来。 关于这个View剖析，陈小缘大佬已经写到很...
Android自定义ViewGroup第十三式之移花接木
陈小缘的博客
04-27 1万+
前言 上个星期更新了网易云音乐之后，在发现 - 歌单页面中看到一个挺炫酷的效果，介系我没有见过的船新版本，看图： 对，一眼看上去就像是在ViewPager的基础上改造过，但仔细看，又不像ViewPager的行为，因为它固定只有三个子View(我特意观察了几天)，而且，在滑动的时候，除了尺寸和透明度的渐变，跟ViewPager有一个明显的区别就是，最前面的子View会向相反方向移动，这就像六一儿童节...
毕业设计别再做 XX 管理系统了！！！
热门推荐
公众号：Java后端
01-14 6万+
前几天写了一篇文章：你的毕业设计是 XX 管理系统吗？阅读量挺高的，很多读者还以为是推荐几个亮眼的 GitHub 项目，发现并不是。今天推荐几个项目，毕业设计可借鉴下面这几个 GitHu...
ViewGroup 添加移除View 常用几种方式的区别
水手辛巴的博客
04-03 6799
简单来说ViewGroup 维护一个子类的View 数组 attachViewToParent 和 DetachViewToparent 是直接操作这个数组，不会去调用requestlayout 去重绘。 removeView 和 addView 会主动调用requestlayout 和 invalidate 去强制重绘。 removeViewInLayout 和 addViewInLayout 不
音乐歌单Android,仿网易云音乐歌单界面 Header滑动效果
weixin_35910073的博客
05-29 459
这是我的第一篇博客，做Android 开发2年多以来，曾经也有过写一些技术博客的想法，但因为有时候因为懒，有时候工作忙加班多而力不从心，所以迟迟没有开始写自己的博客。最近正好工作不忙，想写一些博客，记录一下项目中用到的知识点或者自己空余时间学习的一些学习笔记，一来是对自己平时工作的一个总结，二来做一个纪录，以后碰到类似的问题也可以翻一下笔记，避免踩相同的坑。好了，闲话到此，一下是今天的正文。一直以...
Android仿网易云音乐播放器
08-09
Android仿网易云音乐播放器，学习本课程可以学习到音乐播放器开发流程，Activity与Service接口通信，音乐播放器逻辑处理，Android项目开发以及常用控件，单例设计模式的封装使用以及MediaPlayer的使用和封装，还有专属的QQ群解答各种问题，帮助初学者成长。
仿网易云音乐日推界面（监听AppBarLayout滑动+动态高斯模糊）
RikkaTheWorld
08-02 5478
首先来看下日推界面的效果： 网易云音乐日推界面的亮点就是在上拉的时候，banner页面逐渐模糊。字体透明度下降，最后左上角显示出“每日推荐”的字体。 这个界面用户会觉得很清晰、便捷又不失美观（网易云音乐的AppUI设计是真的太顶） 但是去模仿去做，其实又会遇到一些坑。 比如说，这里明显使用了AppBarLayout，图片放在CollapsingToolbarLayout里，但是：下面的Recyc...
ViewFlow 源码阅读笔记(1)
fyfcauc的专栏
05-05 527
1. ViewFlow， 继承自AdapterView， 基本和ViewPager差不多，不过可以动态的增加View,    自行维护了一个SideBuffer*2大小的view buffer, 提升用户体验，可以作为xml属性设置。    A horizontally scrollable ViewGroup with items populated from an    Adapter.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值