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

94 阅读3分钟

常规&高级UI编程

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

上节回顾

上节课主要讲了客户端基础知识
四大组件包括界面组件(Activity和Fragment);服务组件(Service);广播组件(Broadcast); 数据组件(ContentProvider和CotentResolver)
Q:如何实现Activity中的UI?
A:通过UI组件

1.UI组件

UI:User Interface,是图形用户界面,由UI组件构成(SDK提供)。
输入框组件、按钮组件、列表组件...

常规UI组件

单一组件: 文本组件 图片组件 按钮组件 输入框组件 复选框组件 单选按钮
属性和方法:
通用:属性(id、hight、wigth、margin...)和方法 (setId...)
特定:TextView、ImageView、CheckBox
常规UI组件的使用: 手机屏幕的原点在左上角,left和right、top和bottom。margintop:距父容器的边距
gravity:内容在容器内的对齐方式。layout_gravity:相对父容器。

高级UI组件

Viewgroup,有更多功能,能嵌套组件。
eg:滑动组件 列表组件 下拉刷新组件 分页组件 布局组件

UI组件关系

Viewgroup可以嵌套View,反之则不可以。UI组件都是View,继承关系如下:
image.png
eg:ViewGroup继承自View

UI示例和总结

Q:布局文件声明View时未指明位置,什么决定?

2.布局

多个UI组件组成页面时考虑其大小、位置和层级。

4种布局方式:

1.LinearLayout

组件水平或竖直布局,weight属性:剩余空间的分配会根据此权重值。
可以嵌套。

2.RelativeLayout

其中组件的布局根据父容器和兄弟组件定位。

3.FrameLayout

层级叠加的方式布局组件,在Z轴。

4.ConstrainLayout

组件的某部和另一个某部对齐,拓展包支持,适用于复杂场景。
布局总结:
image.png

3.渲染

Q:布局页面是如何渲染出来的?
布局加载+布局解析+UI渲染

布局加载

SetContentView;

1.编写布局文件

2.注册Manifest

3.设置布局文件

布局解析

LayoutInflater:它的基本作用是将 xml 布局文件解析成View / View 树。
createView 小结:
页面绘制起点;View绘制流程;页面绘制流程;Vsnc信号;UI渲染;渲染总结

4.交互

1.获取View实例

findViewByte
常用交互事件监听器:

屏幕触摸事件:当用户触摸屏幕时,系统将建立一系列的MotionEventi对象,MotionEvent包含关于发生触摸的位置和时间等细节信息,MotionEvent对象被传递到相应的捕获函数中,例如onTouchEventO。
捕获触摸事件;触摸事件分发;事件处理流程;View的事件响应;
交互总结:

2.添加响应监听器

5.动画

1、帧动画;

每一帧是一张图片

2、补间动画;

可以旋转、移动、缩放操作

差值器

是一个接口,设置属性从初始值过渡到结束值的变化规律。
View动画小结:

3、属性动画;

主要是ValueAnimator和ObjectAnimator。属性动画指的是改变的是View的属性,以位移动画为主。

总结:

常用的API,坐标点选择等

6.自定义UI