Android 的 View (三）

迈不过友情╰ 2024-04-06 12:26 83阅读 0赞

## 一、View ##

**通常，我们将屏幕的用户界面简称为 UI，英文全称叫做 user interface**

**UI 由称为 View 对象层次结构组成，屏幕中的每个元素都称为 View，该 View 代表所有 UI 组件的基本构建块，是提供交互式 UI 组件的类的基类**。简单理解就是，UI 代表的就是这个应用的界面，View 就是这个界面上一个个的小组件。

**常用的 View 有**

**<1> TextView：用于显示文本 <2> EditView：用于用户的输入和文本的编辑**

**<3> Button：提供点击，与其它元素形成交互 <4> ImageView：用于显示图像**

**<5> ScrollView / RecyclerView：显示可滚动的组件**

## 二、ViewGroup ##

ViewGroup 通常会充当一个容器，View 元素可以放入其中。屏幕 View 是按照层次结构来进行组织的，在整个层次的根部是一个 ViewGroup，用来包裹整个屏幕，当然 ViewGroup 可以包含 View 或者是 ViewGroup。( 可以类比 bookstrap中的布局格式 ）

![77ca96b4bbc54711b73628eea1385395.png][]

### **Layout ViewGroup** ###

**Android 中有一些特定的 ViewGroup 被称为 Layout ViewGroup，用来以特定的方式来组织或者排版 UI。这几种布局分别是：① ConstraintLayout：约束布局(官网推荐) ② LinearLayout：线性布局(常用) ③ RelativeLayout：相对布局 ④ TableLayout：表格布局 ⑤ FrameLayout：框架布局 ⑥ GridLayout：网格布局**

![ac4fe1a298604f43950d635e4d7f63d9.png][]

**这里我们用 LinearLayout 布局来简单说明一下，如图**

![40a48e30bdb941b5ba8323c9309f74a1.png][]

**分析上图：**

**① LinearLayout：代表的是整个UI的一个跟布局，表示当前UI被 LinearLayout 作为根布局包裹**

**② Button：这是 L****inearLayout 的一个 View，以线性布局的格式来排列着**

**③ TextView：这同样也是** **LinearLayout 的一个 View，同样也是以线性布局的格式排列着**

**④ Button：与上面的 Button 一样，也是VIew，也是以线性布局排列着**

**这里用一个较简单的例子，来说明了布局的层次结构的问题，一定要搞明白！**

## **三****、在 XML 文件编辑 View** ##

View 可以在屏幕上定义大小，显示位置，如何输入等一系列属性，那么我们如何定义 View 的属性呢？

**语法格式**

android:attribute_name = "value"

### 举例 ###

**识别每个 View，我们需要在 XML 文件中给每一个 View 定义唯一的 id，不能重复~**

android:id="@+id/button_count"

**从 Java 中获取不同的 View，需要用 findViewById( ) 方法，来对应 XML 中每个 View 的 id**

View view = findViewById(R.id.button_count);

由于 View 的种类很多，属性也是非常的多，这里就不再一一列出了，有兴趣的小伙伴，可以从网上查找资料学习~

[77ca96b4bbc54711b73628eea1385395.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a8fbf97b860a4e599bc47d73a9368d6e.png
[ac4fe1a298604f43950d635e4d7f63d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/578b9e561efa488aa4e70eb3b34227af.png
[40a48e30bdb941b5ba8323c9309f74a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d6a44337bc2b4b26945cc8abf907d5f3.png