android-高级UI
文章平均质量分 61
包含控件绘制,事件处理,动画效果实现,交互效果实现,UI系统源码等教程
命运之手
这个作者很懒,什么都没留下…
展开
-
【高级UI】【031】阿里VLayout使用和源码解析
什么是VLayoutVLayout全称Virtual Layout Manager,是由阿里发布的一个针对RecyclerView的LayoutManager扩展库它提供了若干种常用的布局,并支持多种不同的布局,按线性的方式进行组合使用案例以淘宝首页为例,整个页面只需要一个RecyclerView即可完成这是因为VLayout使用的是加强型的DelegateAdapter,它能够对多个子DelegateAdapter进行组合VLayout十大布局LinearLayoutHelper:线性原创 2022-04-09 11:51:51 · 3838 阅读 · 0 评论 -
【高级UI】【030】自定义LayoutManager
前言RecyclerView的核心功能,并不是由自己来完成的,而是转交给LayoutManager来完成的LayoutManager负责的功能有:布局管理,滑动管理,缓存管理自定义流式布局管理器 - FlowLayoutManager这里,我们自定义了一个流式布局管理器,来演示LayoutManager是如何工作的代码比较简单,对标准流程做了简化了,主要是为了演示,在性能和和细节上并不够好 public class MainActivity extends AppCompatActivity原创 2022-04-06 12:59:39 · 2427 阅读 · 0 评论 -
【高级UI】【029】RecyclerView缓存机制解析(偏业务角度)
前言有一定开发经验的朋友基本都知道,RecyclerView有一个Item复用的功能就是将划出的Item,重新利用,给将要划入的Item使用从代码上来说,就是将不再使用的ViewHolder,与新划入的Item绑定这样就不需要重新执行onCreateViewHolder,只要执行onBindViewHolder,然后将其摆放到新的布局位置即可这是RecyclerView缓存机制最核心的东西,这里我们要详细讲解下,其背后具体是如何工作的Recycler这个类是负责RecyclerView缓存工作原创 2022-04-06 11:24:47 · 550 阅读 · 0 评论 -
【高级UI】【028】CoordinatorLayout源码解析和手动实现
CoordinatorLayout工作原理CoordinatorLayout,可译为协调者布局,用于协调多个子View进行滑动交互CoordinatorLayout实现滑动交互逻辑的核心是Behavior类,Behavior类规定子View间如何进行交互CoordinatorLayout实现了一个自己的LayoutParamCoordinatorLayout会为每个子View的LayoutParam设置一个Behavior子View具体使用哪个Behavior,可以在xml布局中,通过自定义属性l原创 2022-03-31 14:48:32 · 2135 阅读 · 0 评论 -
【高级UI】【027】RecyclerView侧滑源码解析
前言RecyclerView的侧滑功能主要是通过ItemTouchHelper这个类来完成的这个类在androidx和support库里面都有这里我们主要是手动拷贝一份,来讲解所有关键代码的实现思路在阅读时,没必要每行代码都弄懂,那是不太现实的关键是能读懂关键代码,能对自己想要的地方进行改动实现思路核心代码//这个控件的拖拽还有BUG,有时交换元素时,元素会消失//主要通过Demo来读源码流程,细节上不要太较真@SuppressWarnings("all")publi原创 2022-03-20 18:32:03 · 447 阅读 · 0 评论 -
【高级UI】【026】手动为RecyclerView添加橡皮筋拉伸回弹效果
实现思路控件拉伸回弹,可通过缩放画布来达到,我们只要计算出控件在拉伸时的缩放比例即可缩放比例可通过手指移动距离来计算,当控件滑动到边界时,手指继续滑动,额外滑动距离/控件总高度,即可作为拉伸比例控件状态可分为三类,正常滑动状态,手越界滑动时的拉伸状态,手松开时的回弹状态,第一种状态我们使用RecyclerView默认的滑动处理即可手松开时,我们可以通过一个渐变值动画,来让额外滑动距离逐渐减少到0回弹过程中欧冠,如果手指重新按下,我们则立刻取消渐变值动画,并让控件重新进入到拉伸状原创 2022-03-10 16:14:53 · 5267 阅读 · 0 评论 -
【高级UI】【025】手动为ScrollView添加回弹效果
效果ScrollView滚动到最顶端和最底端时,还可以继续拉伸出一片空白区域,手松开后再回弹到正常状态实现思路到达顶端和底端后,还想继续拉伸,这个可以通过layout方法对Content重新定位就能实现回弹效果,可以通过平移动画TranslateAnimation来实现当内容没到达顶端或底端时,通过ScrollView默认的onTouchEvent处理来正常滚动即可根据ScrollView的大小,ScrollView的滚动距离,ContentView的大小,可以判断控件是否滚动到顶端核心代原创 2022-03-02 17:17:42 · 2479 阅读 · 0 评论 -
【高级UI】【024】TouchEvent事件分发流程
分发流程安卓的事件分发流程,并没有网上说的那么复杂之所以网上很多讲得非常复杂,是因为动不动就系统源码说事其实系统源码大多都是繁杂的细节处理,真正核心的东西剥离出来,还是比较简单的还有就是,有的博主把流程图做得太细太复杂了其实只要把最核心的流程讲清楚,剩下的让读者自己去思考发散下,就已经够了图画得太细,反而很多人根本看不下去这里一张图,已经足够总结了整个事件分发的完整流程了核心知识点上面的图,基本上已经包含了全部的知识,这里再以文字的形式,列举其中最核心的内容这是因为,整张图看下去,很容原创 2021-11-19 14:57:23 · 913 阅读 · 0 评论 -
【高级UI】【023】Android手写波纹效果
前言其实水纹效果特别简单,就是以手指触摸位置为中心,画一个逐渐变大的渐变圆这里我们以Button为例,手写一个带水纹效果的Button代码 package com.android.architecture; import android.animation.ValueAnimator; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; impor原创 2021-11-17 22:46:14 · 107 阅读 · 0 评论 -
【高级UI】【022】Android手写阴影效果
前言安卓实现阴影大致有三种方式 使用View自带的elevation属性产生阴影效果 TextView可通过shadowColor,shadowRadius,shadowDx,shadowDy来控制阴影 使用Paint的setShadowLayer功能,绘图的同时绘制阴影 通过BlurMaskFilter给Paint设置蒙板滤镜,达到模糊效果,从而画出阴影其中,第三种是一种最具通用性的方案,它代表了阴影效果的底层实现方式它不仅适用于安卓,在其它语言中,一般也有类似API与之对应,所以掌握这原创 2021-11-17 17:20:03 · 1250 阅读 · 0 评论 -
【高级UI】【021】Bitmap的使用
比较基础的知识刚刚用到,想起以前初学安卓时,这方面的博客写的都不是很清楚,所以系统整理下,方便新手copy创建Bitmap,Bitmap压缩,Bitmap写出,获取ARGB像素 //获取Bitmap原始尺寸 //当inJustDecodeBounds为true时,只获取Bitmap尺寸到option中,不解码图像数据,decodeFile返回的对象也为null BitmapFactory.Options options = new BitmapFactory.Options(); option原创 2021-03-28 16:50:53 · 260 阅读 · 0 评论 -
【高级UI】【020】通过PathMeasure测量Path
什么是PathMeasurePathMeasure是用来对Path相关数据进行测量的工具类它可以测出Path的长度,点位置,切线斜率,判断路径是否闭合,截取子路径等功能PathMeasure函数接口 //绑定Path,如果曲线没有闭合,可以通过forceClosed强制闭合 public void setPath(Path path, boolean forceClosed); //计算路径总长度 public float getLength(); //获取路径指定位置的坐标和切线原创 2021-11-14 17:54:58 · 976 阅读 · 0 评论 -
【高级UI】【019】通过Matrix变换Canvas坐标系
前言关于矩阵运算规则,我们在前面已经讲过Matrix在绘图方面,很多地方都能用到,不同的矩阵,格式不一样,功能也不一样像我们前面提到的ColorMatrix,可以用来进行色彩变换此外,Matrix还可以应用于画笔,画布,它能将本来应该绘制在(x,y)位置的坐标,自动转为(x’,y’)试想,如果没有Matrix帮我们自动转换,我们做个旋转,拉伸,平移,都要自己去处理,那真是太恐怖了Matrix本身不难,前面我们也已经用到过不少次这篇博客,主要是为了给大家讲解下,Matrix底层的具体实现规则和工原创 2021-11-13 14:44:47 · 1020 阅读 · 0 评论 -
【高级UI】【018】代码模拟贝塞尔曲线形成过程
前言前面我们讲解过贝塞尔曲线的原理和公式这篇博客,我们通过代码来实现任意阶的贝塞尔曲线,并通过动画演示其形成过程能把这份代码完成吃透,说明对贝塞尔曲线已经完全了解了效果图核心代码 package com.android.architecture; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics原创 2021-11-11 10:05:05 · 536 阅读 · 0 评论 -
【高级UI】【017】自定义Drawable
前言在前面我们已经讲过,Drawable并不是图片,它只是一个抽象类,对要绘制什么,怎么绘制进行了封装这篇博客,我们以一个实际的例子来具体阐述,Drawable是如何工作的功能功能非常简单,主要是为了演示Drawable如何工作我们实现的是一个ImageView,它将图片的左半侧显示为灰色,右半侧显示为彩色这个效果非常容易实现,这里我们主要是通过它来演示Drawable的工作原理代码 package com.android.architecture; import android.g原创 2021-11-06 16:48:20 · 1033 阅读 · 0 评论 -
【高级UI】【016】Canvas特效之XferMode
什么是XferModeXferMode全称TransferMode,可翻译为像素转换模式,或色彩混合模式它指定了,在一个已存在的目标图形上(DST),再绘制一个新图形(SRC),两个图形的像素如何进行混合,形成新的像素XferMode目前只有一个实现类PorterDuffXfermode,它通过PorterDuff.Mode算法来决定像素如何进行混合关于这个模式,我们前面在讲Shader时,有详细说明,各种Mode的效果如下PorterDuff.Mode算法原理XferMode的使用方法非常简单原创 2021-11-05 11:31:48 · 920 阅读 · 0 评论 -
【高级UI】【015】Canvas特效之Filter
什么是FilterFilter中文名为滤镜,是图像处理领域的专业术语,统指各种用来实现图像特效的技术Android中常用的特效包括两种,一种是蒙板滤镜MaskFilter,一种是色彩滤镜ColorFilterMaskFilter工作原理MaskFilter在绘制时,通过对Paint边缘像素的alpha通道进行变换,来实现模糊化或立体化等效果Android内置的MaskFilter实现类有两个一个是BlurMaskFilter,用于实现模糊效果一个是EmbossMaskFilter,用于实现浮雕原创 2021-11-02 22:23:12 · 1230 阅读 · 0 评论 -
【高级UI】【014】Canvas特效之Shader
什么是ShaderShader中文名又叫着色器,它用于在绘制图形的同时,为图形添加特定的色彩效果常见的ShaderLinearGradientSweepGradientRadialGradientBitmapShaderComposeShader效果展示 - 01原创 2021-11-01 17:05:50 · 481 阅读 · 0 评论 -
【高级UI】【013】Bitmap,Picture,Drawable的区别
Bitmap位图,这和我们平常所接触的图片文件的概念,是最相似的它通过直接保存所有像素色彩值的方式来存储图像Picture名字叫图片,但其实它是一个用于记录绘制过程的类它通过一定的格式,可以把Canvas的drawText,drawLine,drawRect等各种绘制过程全部记录下来,并可以保存起来当下次需要绘制相同图形时,再取出来就可以直接重新绘制Picture的效率,甚至比直接调用Canvas的API更加高因为Canvas在绘制时,需要计算绘制范围,曲线公式等参数,而Picture是直接原创 2021-10-27 22:32:56 · 404 阅读 · 0 评论 -
【高级UI】【012】FontMetric详解,Android文字居中绘制
文字绘制和图片绘制的区别我们绘制一张图片,一条直线,或一个矩形时基本上确定上下左右的坐标,就确定了图片或几何元素的位置但字体元素,由于其特殊的格式,并非从左往右,从上到下直接绘制的字体格式的专业规范Android中的FontMetricAndroid中的FontMetric即是对以上字体规范的一种实现在Android中,文字的绘制是从baseline位置开始的,它的y值为0我们来看看FontMetric中各个字段代表的含义 baseline,基线,文字绘制的起始位置 ascent,上原创 2021-06-13 15:27:49 · 661 阅读 · 3 评论 -
【高级UI】【011】Canvas和Paint常用API
前言Canvas(画布)是用来画图形的,而Paint(画笔)则是用来指定画图形时用的颜色,宽度等样式信息这里我们列举一些常用的API,方便新手快速上手至于不常用的,和比较复杂的API,我们后面的课程用到时在详解一来篇幅有限,复杂的难以讲清楚,二来也没必要将博客写成百科全书,比较偏的知识大家用到时百度即可这篇博客建议大家快速扫一遍,有个印象后,直接看下篇教程Paint常用API //画笔API Paint paint = new Paint(); paint.setAntiAlias(tr原创 2021-10-27 21:17:49 · 205 阅读 · 0 评论 -
【高级UI】【010】使用贝塞尔曲线,绘制经过若干固定点的平滑曲线
前言前篇我们已经见过贝塞尔曲线的功能,原理,公式,和推导过程这节课我们来讲实际应用:如何通过贝塞尔曲线,绘制经过若干固定点的平滑曲线在上节课中,我们已经可以根据起点,终点,控制点,绘制出贝塞尔曲线但在实际应用中,我们知道的往往不是控制点,而是曲线经过的点所以现在最重要的问题就是,如何根据贝塞尔曲线上的若干点,找到相应的控制点只要能找到控制点,我们根据上节中的公式去绘制就可以了确定贝塞尔曲线的控制点...原创 2021-10-21 21:23:50 · 1400 阅读 · 0 评论 -
【高级UI】【009】贝塞尔曲线图形原理和公式推导
什么是贝塞尔曲线贝塞尔曲线,英文名Bezier Curve,是计算机图形学非常重要的一种曲线它可以将若干的点,用一条平滑自然的曲线来连接起来比如我们在地图库中绘制用户行走轨迹时,如果用折线来展示,就比较难看如果通过贝塞尔曲线,转为曲线来显示,就特别舒服自然了像安卓中的水纹,波形等,很多就是通过贝塞尔曲线实现的所以在讲绘制之前,先把这个基础知识给讲了贝塞尔曲线简单示例如图,P0和P2为贝塞尔曲线要经过的点,P1为控制点选择不同的控制点,可以得到不同的曲线路径,但都可以结果P0和P2贝塞尔原创 2021-10-20 21:35:13 · 3406 阅读 · 0 评论 -
【高级UI】【008】从编程的角度,轻松学习矩阵运算
前言矩阵属性大学线性代数课程知识点,很多同学都是靠死记硬背学会的,一知半解,毕业后很容易就忘记了这是因为,大学学习时缺少应用场景,对其功能和作用理解不够透彻,强记公式自然是很容易忘记的这篇博客,我们就从编程的角度来说说,矩阵有什么用,如何进行运算的其实联系实际应用场景来学习,矩阵是非常简单的由于后面的博客,我们马上就要讲解Paint绘制部分,会用到这个知识点,所以提前列出来矩阵功能和运算规则下图是一个矩阵运算,它由三个同学的各科分数,推算出三个通信的文理科总分初始矩阵 * 转换矩阵 = 结果原创 2021-10-16 16:57:41 · 155 阅读 · 0 评论 -
【高级UI】【007】Surface与Canvas,draw和invalidate具体流程
Surface与Canvas的区别在哪里Surface和Canvas都有画布的意思但实际上,Surface才是真正和屏幕管理器打交道的画布Canvas是对画布操作细节的封装,它更多的是和View、用户打交道当Canvas完成一轮绘制后,会将绘制结果提交到Surface的缓冲区中,然后由Surface交给屏幕管理器绘制Surface与Canvas是如何关联的每个Window对应一个Surface,每个Surface对应一块屏幕缓冲区SurfaceFlinger按照z轴顺序,将所有Surface的原创 2021-10-14 12:50:49 · 915 阅读 · 0 评论 -
【高级UI】【006】测量和布局实战,流式布局
前言 实现思路 源码 下载原创 2021-10-12 15:17:09 · 195 阅读 · 0 评论 -
【高级UI】【005】利用WindowManager创建自定义的PopupWindow和SystemAlertDialog
目标本篇博客的目标主要有三个不使用安卓原生控件,比如PopupWindow,Dialog等控件,实现我们的目标PopupWindow用于在Activity中全屏展示,模态,PopupWindow下面的全部内容不可操作,当Activity隐藏时,PopupWindow也随之隐藏SystemAlertDialog用于在整个系统中悬浮展示,非模态,SystemAlertDialog下面的内容仍然可以操作,当Activity隐藏时,SystemAlertDialog并不隐藏,它可以在系统桌面之上显示注原创 2021-10-11 23:15:44 · 307 阅读 · 0 评论 -
【高级UI】【004】MeasureSpec测量模式
MeasureSpec是什么在onMeasure等方法中,我们常会见到MeasureSpec这一个单词它是一个整数,4字节32位,是对测量时具体条件的一个封装,它有mode和size两部分组成MeasureSpec的前2位为mode,表示父控件对子控件的约束方式MeasureSpec的后30位为size,存储参考的尺寸数值MeasureSpec的计算方式 public static class MeasureSpec { public static final int MODE_原创 2021-10-11 11:03:22 · 198 阅读 · 0 评论 -
【高级UI】【003】Activity启动流程
前言本篇博客主要包含以下知识点 Activity是如何启动的 setContentView是如何将布局设置到Window上的 Window是如何开始绘制工作的带着目标去看,才更容易记住流程图由于图片每一步都有详细的备注,这里就不需要再讲解了...原创 2021-10-09 16:24:41 · 86 阅读 · 0 评论 -
【高级UI】【002】Window与WindowManager
什么是Window这个问题应该很简单,用过Windows系统的大家都知道什么是窗口几乎在所有的语言当中,Window代表的含义都是一样的,Android中也是如此只不过由于移动设备的特殊性,Android中的窗口没有关闭、最小化、最大化这些按钮而已之所以我们平常开发中接触不到Window这个概念,是因此AndroidSDK已经把这些封装好了像我们平时所使用的Activity,Toast,Dialog,PopupWindow,SystemAlertDialog,它们其实都是展示在独立的Window当原创 2021-10-07 00:57:39 · 187 阅读 · 0 评论 -
【高级UI】【001】Android控件绘制流程
流程图整个流程的核心部分就是这样,理清了就不是很难,一张图足以说明全部问题核心代码说明对于没有耐心看完全部,或者只关心其中一两点的,可以只看文字部分 ViewRootImpl,它是一个连接ContentView和WindowManager的角色,控件绘制的任务,最先就是从它开始下发的 performMeasure,ViewRootImpl开始全局测量工作 performLayout,ViewRootImpl开始全局布局工作 performDraw,ViewRootImpl开始全局绘制工作原创 2021-09-28 11:14:23 · 250 阅读 · 0 评论