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

1.UI组件详解

1.1 AndroidUI组件

• 1.1.1 UI组件定义：

1. UI：User Interface（图像用户接口）。
2. 图形用户界面。
3. UI界面由多个不同界面的UI组件构成（UI组件已经封装好并且经常更新）。
4. Android SDK提供大量的UI组件。

• 如果我们学习过界面化编程，例如博主学习过微信小程序的开发，就会看得出，如下的今日头条客户端，界面上所包含的组件有：输入框组件、按钮组件、文本组件，播放器组件、图片组件和列表组件等，接下来将会逐一介绍！

• 常规UI组件：

1. 常规UI大多由Android Framework中的android.widge这个package提供，所以大家在编写成绩的过程中一定会用到本包，记得在build文件里面添加依赖哦。
2. 下面便是常见的组件清单，不了解的小伙伴可以来查哦

• 常见UI组件的属性及方法：

1. 下图便是常见的UI组件及属性方法总结的思维导图，非常方便各位小伙伴记忆，快来进行收藏吧！

• 1.1.2 常见UI组件的使用：

1. 下面这张图是关于一些布局的知识介绍，大家可以非常清楚的从图中查看所有布局属性的相关使用的方法和所代表的含义，大家记得时常来温习哦！

• 解释：

1. marginTop:是当前组件上边界与其它组件下边界之间的距离。
2. paddingTop:是容器内部组件与父容器之间的距离，如文本组件中，文字与文本框之间的距离。
3. layout_height:直接设定组件的大小和规格。

• 1.1.3 高级UI组件：

1. 常规UI组件大多是view，高级UI组件大多是viewgroup，将会比常规UI功能更加丰富，所以对于一些复杂的需求场景，可以非常方便的实现布局组件的调用，不需要再使用简单布局的复杂组合了

• 1.1.4 UI组件间关系：

1. view和viewgroup关系

• viewgroup中可以包含若干个view，也可以包含若干个viewgroup 二者是相互包含的关系，所以可以方便的进行组件之间的切换

2. 部分view继承关系

• 如下图所示，可以非常方便的查看各个组件之间的关系，这样对于我们开发人员将会是非常大的帮助呀！

1.2 UI实例和总结：

• 先贴上代码：

效果如下图所示，这样就可以实现一个简单的UI实例：

2.2 RelativeLayout（相对布局）

• 原理：采用当前组件与相邻组件，或者与父容器的相对位置进行布局。

1. RelativeLayout特定属性：

• 如下图所示：

2. RelativeLayout示例：

• 下面就是效果图：

2.3 FrameLayout（重叠布局）

• 原理通过设置组件属性，实现组件的覆盖和重叠

1. FrameLayout特定属性：

• 前景图像：永远处在最上层，不会被覆盖

• 下面是对布局详细的解释

2. FrameLayout示例：

效果如下图所示：

2.4 ConstraintLayout（更加常用）：

• 原理：与相对布局类似，在实际代码编写中更加常用，通常我们可以根据Android Studio中的强大的预览界面进行动态编程，即用鼠标进行拖拽即可在code里面自动实现相应的代码，这将会大大方便编程人员的操作方式，有利于我们对UI界面本身的设计

1. ConstraintLayout特殊属性：

• 下面是相关的布局的结构示例

• 下面是相关的代码部分

2.5 布局总结