第四期：Android常规&高级UI编程（二）|青训营笔记

猿小龙
183 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的第4天

欢迎关注微信公众号《猿小龙》，为您分享更多编程知识，共同进步！

第三期文章中介绍了Android UI组件和布局，今天我们来介绍一下Android 渲染、动画和自定义UI。

1. Android 渲染

1.1 布局是如何被加载的？

通常，我们分为以下3个步骤：

  1. 编写布局文件

image.png

  1. 注册Manifest

image.png

  1. 设置布局文件

image.png

  • 问题一：XML中描述的view是如何绘制到屏幕上的？
  • 我们阅读上面代码可知，setContentView(R.layout.main_activity)非常重要!

1.2 布局加载 setContentView()

  • setContentView究竟做了什么？
  • 梳理流程之前，我们先将流程总结如下，就不会乱！

image.png

视图结构如下：

image.png

  • 创建了DevorView后，最终由LayoutInflater来加载XML文件

1.3 布局解析 LayoutInflater

  • LayoutInflater究竟做了什么？
  • 我们将流程总结如下：

image.png

1.4 布局解析 createView

  • XML中的View如何生成实例？

image.png

image.png

  • 根据XML中View类名找到相应的View，并将XML中的描述属性解析为AttibuteSet，并作为参数传给了第二个View构造器

1.5 布局解析小结

image.png

1.6 页面绘制起点

  • 为什么Activity在onResume()之后才显示？

  • onCreate():setViewContent()创建了DecorView,并将layout中的View添加到DecorView中

  • onResume():ActivityThread.handleResumeActivity()

  1. WindowManagerImpl.addView
  2. 创建ViewRootImpl
  3. ViewRootImpl.setView
  4. ViewRootImpl.requestlayout(),触发页面绘制

image.png

1.7 View绘制流程

  • 最重要的三个方法：
  1. onMeasure()测量屏幕尺寸
  2. onLayout()指定组件放置布局
  3. onDraw()开始绘制

image.png

1.8 页面绘制流程

image.png

1.9 Vsnyc信号

  • 屏幕绘制与帧间间隔有关

image.png

1.10 UI渲染

image.png

1.11 渲染总结

image.png

2. Android 交互

2.1 一个交互的实例

  1. 获取View实例
  2. 添加相应的监视器

image.png

效果图：

image.png

2.2 获取实例-findViewById

  • Activity相关源码

image.png

  • View相关源码

image.png

2.3 获取View实例-findViewById

  • ViewGroup相关源码

image.png

2.4 常用交互事件监听器

image.png

2.5 屏幕触摸事件

  • 所有的交互事件均是来自对于屏幕触摸信号的处理，View.OnClickListenter()等常用点击事件是对监护事件的二次封装

image.png

2.6 触摸事件-MotionEvent

  • 当用户触摸屏幕时，系统将建立一系列的MotionEvent对象，MotionEvent包含触摸发生的时间和位置等细节，MotionEvent对象被传递到相应的捕获函数中去，如onTouchEvent()中去

image.png

2.7 捕获触摸事件

  • Activity的onTouchEvent()源码
  1. Activity和View都有onTouchEvent()，用于处理触摸事件
  2. 当用户触摸屏幕时，会回调触摸视图上的onTouchEvent()。对于被识别为手势的每个轻触事件序列，onTouchEvent()都会被多次触发。

image.png

2.8 触摸事件的分发

  • 当我们点击每一条咨询的上面的叉号时，为什么不是打开咨询的详情页面的相关逻辑，而是弹出消息提示框dislike相关的逻辑呢？

QQ图片20220726180408.jpg

image.png

2.9 事件处理流程

image.png

## 2.10 View的事件相应 View的onTouchEvent()源码：

image.png

  1. 在onTouchEvent()的ACTION_DOWN中设置了一个延时Runnable,用于处理onLongClickListener
  2. 在onTouchEvent()的ACTION_DOWE中设置了一个判断onLongClick是否执行，未执行则移除，然后执行ClickListener

2.11 交互总结

image.png

3. Android 动画

3.1 常见动画类型

image.png

3.2 帧动画

image.png

3.3 帧动画示例

image.png

image.png

3.4 补间动画

image.png

3.5 补间动画示例

image.png

image.png

  • 这些动画都是匀速播放吗？

3.6 插值器

  • Interpolator:是一个接口，设置属性值从初始值到结束值之间的变化规律
  • 系统提供的Interpolator

image.png

  • 动画效果：

image.png

3.7 View动画小结

image.png

3.8 属性动画

image.png

3.9 属性动画示例

image.png

  • 动画效果：

image.png

3.10 动画总结

  • 两类动画的根本区别在于：是否改变动画本身的属性。
  1. 视图动画：不改变动画的属性，在变化过程中仅对图像进行变换来达到动画效果，无论动画结果在哪里，该View的位置和响应区域都在原地，不会根据结果而移动
  2. 属性动画：改变了动画的属性，因动画属性在动画过程中动态改变了对象的属性，从而达到了动画效果

image.png

4. Android 自定义UI

4.1 自定义UI实例

  1. 涉及UI组件：与第一期契合
  2. 涉及渲染：与第二节契合
  3. 涉及交互：与第四节契合
  4. 涉及动画：与第五节契合
  5. 涉及自定义UI：与本节内容契合

image.png

4.2 自定义创建View

image.png

image.png

4.3 自定义处理View布局

image.png

image.png

image.png

4.4 自定义绘制View

image.png

image.png

image.png

4.5 处理用户交互

image.png

image.png

4.6 处理动画

  1. 设置动画属性，同时添加监听器
  2. 在动画监听器中，根据属性值更新UI状态值，并触发UI绘制

image.png

4.7 自定义View小结

image.png

4.8 课程总结

image.png

avatar
文章
阅读
粉丝