常规&高级UI编程 | 青训营笔记

102 阅读3分钟

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

UI

常规UI

常常在Android.widget.*下

高级UI

能嵌套功能 举例:

  1. 进度条 ProgressBar
  2. 拖动条 SeekBar
  3. 星级评分条 RatingBar
  4. 显示图像组件 ImageView
  5. 图像切换显示 ImageSwitcher
  6. 网格视图组件 GridView
  7. 下拉列表框 Spinner
  8. 列表视图 ListView
  9. 滚动视图 ScrollView
  10. 选项卡

布局

类似排版

注意:UI组件的大小、位置、层级

根据层级分类

同一层级:LinearLayout、RelativeLayout 不同层级:FrameLayout

LinearLayout

image.png

RelativeLayout

适用于比LinearLayout更复杂的场景 image.png

FrameLayout

以层次叠加方式排列组件 image.png

ConstraintLayout

扩展布局方式,通过约束组件位置排列组件,适用于复杂场景 image.png

渲染

布局加载、布局解析、UI渲染

问题

setContentView最终创建了DecorView,并由LayoutInflater来加载了XML文件;LayoutInflater解析了XML文件,并根据XML文件生成了View实例,并将View实例添加了到了其ViewGroup中

  1. 布局加载:控件为对应java对象

    • 编写布局文件
    • 注册
    • 设置布局文件
  2. 布局加载-setContentView

  3. 布局解析-LayoutInflater 有解析器和内部的方法

  4. 布局解析-createView

    • 根据XML中View类名找到相应的View,并将XML中的描述属性解析为AttributeSet,并作为第二个参数传给View构造器。 6。 Activity在onResume时才触发绘制
  5. Vsync信号(同步信号) 一秒渲染多少帧90、120,丢帧概念。

  6. Graphic Buffer区进行合成交给SurfaceFinger,最后交给Display显示。

image.png

交互

findViewById

其他 找没有,返回null;找到本身,返回名字。 最底层逻辑在ViewGroup里面。如果知道要查找的View知道在哪一个ViewGroup类,直接在ViewGroup会提高速率。

屏幕触摸事件

WMS:当前的页面是那一个 viewRootImpl:处理绘制、处理屏幕触摸事件交互

  • 触摸事件 MotionEvent 当用户触摸屏幕时,系统建立一系列MotionEvent对象,MotionEvent把汗关于发生触摸的位置和时间等细节,MotionEvent对象呗传递到相应的铺货函数中,例如onTouchEvent()。

image.png

  • 触摸事件分发

image.png

  1. 分发事件:事件到底分给谁
  2. 事件拦截
  3. 事件响应
  • 事件处理流程

View的事件响应

不会同时执行

  1. 在onTouchEvent()的ACTION_DOWN设置了一个延时Runnable,用于处理onLongCickListener

  2. 在onTouchEvent()的ACTION_UP中,判断onLongClick是否执行,未执行则移除,然后执行onClickListener

动画

  • 帧动画 类似gif;不能改实际位置,宽高。
  • 补间动画 决定开始视图样式和结束视图样式;不能改实际位置,宽高;只能设置变换形式(四种:透明度、旋转、缩放、平移)。 (速度取决于插值器,如果没有则调用默认插值器)

帧动画和补间动画

  1. 作用对象局限
  2. 只能改变视觉效果,不能改变属性
  3. 动画效果局限
  • 属性动画
    1. 作用对象:任意Java对象,不局限View
    2. 原理,在指定时间间隔内,不断改变or不断赋值给对象属性,实现动画效果

两类动画根本区别: 是否改变动画的属性。

视图动画:不改变属性,仅对动画进行变换达到动画效果,但无论动画结果在哪,该View的位置和响应区域都在原地,不根据结果进行移动 属性动画:改变了动画属性,在动画过程改变了对象属性,从而达到动画效果

自定义View

自定义View传入四个参数,顺序不可换 Context:Java代码中创建View AttributeSet通过XML声明创建View int defStyleAttr 声明Style int defStyleRes 声明Theme

处理交互

逻辑:

  1. ACTION_DOWN 设置操作状态
  2. ACTION_MOVE 处理拖拽,触发UI更新
  3. ACTION_UP 处理开关姿态,播放动画
  4. ACTION_CANCEL 复位操作状态