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

勤恳的小猪猪
76 阅读3分钟

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

常规&高级UI编程

UI界面

UI：图形用户界面，UI界面中由多个不同功能的UI组件构成

常规UI组件

image.png 注：常规UI组件大多由Android Framework中的android.widget这个package提供

常规view的属性和方法：

属性：

  • margin：与其他组件或者父容器的间距
  • paddong：组件内容与组件边界的距离...
  • gravity：子元素在该容器内的对齐方式
  • layout_gravity:组件相对于父容器的对其方式 方法：
  • setId(@Idres int id)
  • setPadding(int left，int top, int right, int bottom)...

注：组件的位置原点是屏幕的左上角

高级UI组件

image.png

ViewGroup继承View、可以包含View，View不能包含ViewGroup

常用布局

1.LinearLayout线性布局

重要属性：

  • android:orientation:布局内组件的排列方式，vertical/horizontal
  • android:layout_weight:布局内组件大小权重
  • abdroid:divider：布局内组件间分割线

weight表示权重，当其他组件权重为0，该组件权重为1时，先给其他组件分配位置，剩余的全给为1的组件。

2.RelativeLayout相对布局

重要属性：

android:layout_centerInparent:组件位于父容器中间位置
android:layout_centerHorizontal:组件位于父容器水平中央位置
android:layout_centerVertical:组件位于父容器垂直中央位置
android:layout_alignParentTop:组件与父容器顶部对其
android:layout_above:组件位于某部件上部
android:layout_below:组件位于某部件下部
android:layout_toLeftOf:组件位于某部件左部
android:layout_alignBottom:组件与某部件底部对其

3.FrameLayout层级布局

重要属性：

  • android:foreground 设置前景图像
  • android:foregroundGravity 设置前景图像Gravity
  • 前景图像：永远处于FrameLayout最上层，不会被覆盖的图片

4.ConstraintLayout约束布局 重要属性：

  • layout_constrainLeft_toLeftOf:组件的左部与某组件左部对其
  • layout_constrainBottom_toTopOf:组件的底部与某组件顶部对其
  • layout_constrainBaseline_toBaselineOf:组件基线与某组件基线对其
  • layout_constrainStart_toEndof:组件首部与某组件尾部对其

渲染

1.布局加载

  • ①编写布局文件
  • ②注册Manifest
  • ③设置布局文件
  • 布局加载：setContentView：创建DecorView最终由LayoutInflater来加载XML文件
  • 布局解析：LayoutInflater 解析XML文件，并根据XML文件生成了View实例，并肩View实例添加到其ViewFroup中
  • createView根据XML中View类名来找到相应View，并将XML中描述属性解析为AttributeSet，并作为第二个参数传递给View构造器
  • 所有声明的XML组件一定被映射为对应的java代码然后构建对应的Java对象

image.png

为什么Activity要在onResume()之后才会显示

image.png

View绘制流程

image.png

Vstnc时钟同步信号

UI渲染

image.png

总结：

image.png

交互

  • 1.通过findViewById获取View实例
  • 2.添加相应的监听器（匿名内部类）

回调方法：

  • OnClick()方法：点击项目触发
  • onLongClick()方法：长按项目触发
  • onFocusChange()方法：用户使用导航键或轨迹球转到或离开项目触发
  • onKey()方法：用户聚焦于项目并按下或释放设备上的硬件按键时触发
  • onTouch()方法：用户执行可视为触摸事件的操作时触发

触摸事件：

  • ACTION_DOWN:手机接触屏幕时触发，表示触摸事件的开始
  • ACTION_CANCEL：当一个时间序列需要提早终止时由系统自动产生
  • ACTION_POINTER_DOWN：多点触摸时产生此事件，除第一个手指外其余手指接触时触发

触摸事件分发：

image.png

image.png

View的事件响应：

  • 在onTouchEvent()的ACTION_DOWN设置了一个Runnable,用于处理onLongcLicklistance
  • 在onTouchEvent()的ACTION_UP中，判断onLongClick是否执行，未执行则移除，然后执行onClickListener

动画

常见动画类型：帧动画，补间动画，属性动画

image.png

image.png

系统是根据差值器实现动画播放速度的控制

image.png

自定义View

  • 1.创建view：继承View
  • 2.处理布局
  • 3.绘制View
  • 4.处理用户交互
  • 5.处理动画

image.png

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

avatar
文章
阅读
粉丝