Android基础第三天 | 青训营笔记

133 阅读2分钟

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

常规 & 高级UI编程

课程回顾 → 四大组件

01. Android UI组件

image.png

  • UI: User Interface
  • 图形用户界面
  • UI界面由多个不同功能的UI组件构成
  • Android SDK提供了大量的UI组件

1.1 常规UI组件

image.png

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

1.2 常规UI组件的属性和方法

image.png

1.3 常规UI组件的使用

image.png

1.4 高级UI组件

image.png

常规UI组件大多是View,高级UI组件大多是ViewGroup、比常规UI组件有多的功能。

1.5 UI组件关系

image.png

View和ViewGroup的关系

image.png

1.6 UI示例和总结

image.png

02. 布局

image.png

2.1 LinearLayout

线性布局

image.png

2.1.1 LinearLayout示例

image.png

weight:权重。

2.2 RelativeLayout

相对布局

image.png

2.2.1 RelativeLayout示例

image.png

2.3 FrameLayout

层级布局

image.png

2.3.1 FrameLayout示例

image.png

2.4 ConstraintLayout

约束布局

image.png

2.4.1 ConstraintLayout示例

image.png

约束布局打破 height为0

2.5 布局总结(常用)

image.png

03. 渲染

image.png

3.1 布局加载

(1)编写布局文件 → (2)注册Manifest → (3)设置布局文件

image.png

3.1.1 布局加载-setContentView

image.png

3.1.2 布局解析-LayoutInflater

image.png

3.1.3 布局解析-createView

image.png

3.1.4 布局解析小结

image.png

3.1.5 页面绘制起点

image.png

3.1.6 View绘制流程

image.png

3.1.7 页面绘制流程

image.png

3.1.8 Vsync信号

image.png

3.2 UI渲染

image.png

3.3 渲染总结

image.png

04. 交互

举个栗子

image.png

4.1 获取View实例——findViewById

image.png

image.png

4.2 常用交互事件监听器

image.png

4.3 屏幕触摸事件

image.png

所有的交互事件都来自于对屏幕触摸信号的处理,View.OnClickListener()等常用点击事件是对交互事件的二次封装。

4.4 触摸事件——MotionEvent

image.png

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

4.5 捕获触摸事件

image.png

4.6 触摸事件分发

image.png

4.7 事件处理流程

image.png

4.8 View的事件响应

image.png

4.9 交互总结

image.png

05.动画

5.1 常见动画类型

image.png

5.2 帧动画

image.png

5.2.1 帧动画示例

image.png

5.3 补间动画

image.png

5.3.1 补间动画示例

image.png

【是否匀速取决于插值器】

5.4 插值器

【生成动画的中间状态】

image.png

5.5 View动画小结

image.png

5.6 属性动画

image.png

5.6.1 属性动画示例

image.png

5.7 动画总结

image.png

视图动画和属性动画根本区别:是否改变了动画本身的属性

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

06. 自定义UI

6.1 自定义View示例

image.png

6.1.1 自定义View示例——创建View

image.png

6.1.2 自定义View示例——处理View布局

image.png

6.1.3 自定义View示例——绘制View

image.png

6.1.4 自定义View示例——处理用户交互

image.png

6.1.5 自定义View示例——处理动画

image.png

6.2 自定义View小结

image.png

07 今日总结

image.png