Android基础一：Android UI基础容器

水深无声 2024-04-01 15:32 76阅读 0赞

> **从今天开始，我来分享一些关于Android的一些基础知识，感兴趣一起来学啊！**
> 
> **大学生交流群：****728910358**

**目录**

前言

二、相对布局RelativeLayout

三、 帧布局FrameLayout

--------------------

## 前言 ##

从今天开始，我准备分享我最近一年所学到的一些Android基础知识，一方面为了巩固一下我的知识体系，还有一方面是方便各位CSDN有需求的小伙伴学习，接下来让我们一起来学习Android的第一次内容：**基础布局容器**。

--------------------

**一、线性布局LinearLayout**

线性布局就是从左到右或从上到下按顺序排列的一种布局。下面讲一讲 LinearLayout 的基础属性。

![b6a95b3d07174c2184e2cbc44af417ef.png][]![9b8d1c171f1f432aa762efa883815e96.png][]

效果展示

**android:orientation ="vertical"所有子视图纵向摆放**

![3044dae7e3ad428b962658500fce7e20.png][]

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:gravity="center" //子视图相对父视图居中显示
     android:orientation="vertical"> //所有子视图纵向摆放
     <Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="普通按钮" />
     <Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="普通按钮" />
     <Button
     android:layout_width="wrap_content"
    android:layout_height="wrap_content"
     android:text="普通按钮" />
     <Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="普通按钮" />
    </LinearLayout>

**android:orientation ="horizontal"所有子视图横向摆放**

![308163b457a84000953202e907818079.png][]

--------------------

## 二、相对布局RelativeLayout ##

相对于父元素 7 个常用属性

![0b969f35e2cc4ef68f885cd6ff4f9176.png][]

相对于兄弟元素 4 个常用属性

![b6ecc062b3fb480fae23484bdaece9ba.png][]

相对于兄弟元素的对齐方式

![4eb80387f1624544932131a33fe176f3.png][]![aa3417a2d0224113a150e63c9f9f691b.png][]

效果演示

![ab4649a313394c10b2601cc44dff2961.png][]

使用 layout\_below 使得后面一个组件位于前面一个组件的下方，配合 layout\_toRightOf 使得后面一个组件位于前面一个组件的右方。

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
     <Button
     android:id="@+id/btn1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="普通按钮 1" />
     <Button
     android:id="@+id/btn2"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_below="@+id/btn1"
     android:layout_toRightOf="@+id/btn1"
     android:text="普通按钮 2" />
     <Button
     android:id="@+id/btn3"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_below="@+id/btn2"
     android:layout_toRightOf="@+id/btn2"
     android:text="普通按钮 3" />
     <Button
     android:id="@+id/btn4"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_below="@+id/btn3"
     android:layout_toRightOf="@+id/btn3"
     android:text="普通按钮 4" />
    </RelativeLayout>

## 三、 帧布局FrameLayout ##

组件的默认位置都是左上角，组件之间可以重叠。像千层饼一样，一层压着一层可以设置上下左右的对齐、水平垂直居中、设置方式与线性布局相似。

常用属性

![18272e37e6af4a59b82b82470399690d.png][]

效果演示

<?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
     
     <TextView
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:layout_gravity="center"
     android:background="@color/purple_200" 
     android:gravity="center_horizontal" 
     android:paddingTop="100dp" 
     android:text="layout_gravity:center" 
     android:textSize="30dp" /> 
     <TextView
     android:layout_width="300dp"
     android:layout_height="360dp"
     android:layout_gravity="center"
     android:background="@color/purple_500" />
     <TextView
     android:layout_width="240dp"
     android:layout_height="240dp"
     android:layout_gravity="center"
     android:background="@color/purple_700" />
     <TextView
     android:layout_width="140dp"
     android:layout_height="140dp"
     android:layout_gravity="center"
     android:background="@color/teal_700" />
     <TextView
     android:layout_width="60dp"
     android:layout_height="60dp"
     android:layout_gravity="center"
     android:background="#ffffff"
     android:gravity="center" />
    </FrameLayout>

--------------------

**总结**

![4299aed88fd94bdb997320c7cd436901.png][]

[b6a95b3d07174c2184e2cbc44af417ef.png]: https://img-blog.csdnimg.cn/b6a95b3d07174c2184e2cbc44af417ef.png
[9b8d1c171f1f432aa762efa883815e96.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0e1d112d39d24ae9a27601d607228ef2.png
[3044dae7e3ad428b962658500fce7e20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e2448128da4b443ca0a3788aa54b9345.png
[308163b457a84000953202e907818079.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b28b5d569d9441cd86775e7825c19062.png
[0b969f35e2cc4ef68f885cd6ff4f9176.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3ab510669fb148c3bb7ae676dc395340.png
[b6ecc062b3fb480fae23484bdaece9ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/884011967e3e470bab8d4175413610d2.png
[4eb80387f1624544932131a33fe176f3.png]: https://img-blog.csdnimg.cn/4eb80387f1624544932131a33fe176f3.png
[aa3417a2d0224113a150e63c9f9f691b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/62eefe329560470e809657d01d5ba5f0.png
[ab4649a313394c10b2601cc44dff2961.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9237519f2c89447c9a95b1447c809abd.png
[18272e37e6af4a59b82b82470399690d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6533d86b3f9c4b179c334294db3b2780.png
[4299aed88fd94bdb997320c7cd436901.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6b15d6783d95481d8fc0b21c3e8aef45.png