Android学习——布局

Android一共有6种布局:LinearLayout线性布局、RelativeLayout相对布局、FrameLayout帧布局、TableLayout表格布局、GridLayout网格布局、ConstraintLayout约束布局

一、LinearLayout线性布局

线性布局。这个布局简单的说,就是所有控件都依次排序,
谁也不会覆盖谁。线性布局需要定义一个方向,
在最开始我通常会使用orientation属性来定义布局中控件的排列方式,Horizontal空间水平排列,Vertical控件垂直排列。

这是一个线性布局的垂直排列

<?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:orientation="vertical">

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/purple_500"
        android:text="hello world"/>
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/teal_200"
        android:text="hello world"/>
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/teal_700"
        android:text="hello world"/>
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#00ff00"
        android:text="hello world"/>

</LinearLayout>

 

 

 将orientation改为horizontal布局将会变为下面这样

 

 

 我使用的Android Studio默认为空间水平排列

 线性布局中还有两个常用属性分别为divider分割线和layout_weight权重(等比例划分区域)

<TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/purple_500"
        android:layout_weight="1"
        android:text="hello world"/>

 

 

 

<!--分割线-->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <size
        android:height="1dp"
        android:width="30sp"
        />
    <solid
        android:color="@color/black"
        />
</shape>

二、RelativeLayout相对布局

在线性布局中控件只能水平或垂直排列,不够灵活,相对布局能够解决其相对应的不足,它能够根据容器和控件的相对定位来操作控件。

1、根据父容器定位

在根据父容器定位时,属性一般有Parent,例如:layout_alignParentLeft 左对齐

2、根据兄弟组件定位

在这个定位中,每个控件都有id,根据id进行相对的定位。

下面是相对布局的基本使用

<?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">

    <TextView
        android:id="@+id/first"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="hello world"
        android:background="@color/teal_700" />
    <TextView
        android:id="@+id/second"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="hello world"
        android:background="@color/teal_200"
        android:layout_toRightOf="@id/first"/>
    <TextView
        android:id="@+id/third"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="hello world"
        android:background="@color/purple_500"
        android:layout_below="@id/first"/>
    <TextView
        android:id="@+id/fourth"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="hello world"
        android:background="@color/purple_200"
        android:layout_centerInParent="true"/>
    <TextView
        android:id="@+id/sixth"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="hello world"
        android:background="@color/black"
        android:layout_centerVertical="true"/>

</RelativeLayout>

 

 

 除此之外,还有一个通用属性margin,可以用来设置组件与父容器的边距

三、FrameLayout帧布局

这个布局的所有控件都会默认放在左上角

它的两个重要属性为foreground设置前景和foregroundGravity设置前景的位置

<TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="hello world"
        android:background="@color/black"
        android:foreground="@color/purple_500"/>

如这个,这个控件本身背景色为黑色,但设置前景之后,第一眼看到的便不是黑色

 

 

 

<?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_gravity="center"
        android:background="#687564"
        android:id="@+id/textView"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:text="第一个" />

    <TextView
        android:layout_gravity="center"
        android:background="#422322"
        android:id="@+id/textView2"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:text="第二个" />

    <TextView
        android:layout_gravity="center"
        android:background="#f1f1f1"
        android:id="@+id/textView3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="第三个" />

    <TextView
        android:layout_gravity="center"
        android:background="#f22"
        android:id="@+id/textView4"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:text="第四个" />

</FrameLayout>

 

 

 

四、TableLayout表格布局

Tablelayout类以行和列的形式对控件进行管理,每一行为一个TableRow对象,或一个View控件。当为TableRow对象时,可在TableRow下添加子控件,默认情况下,每个子控件占据一列。

<?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:orientation="vertical">

    <TableLayout
        android:id="@+id/table1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:collapseColumns="1"
        android:stretchColumns="0"
        android:shrinkColumns="3">
<!--        隐藏了第二列-->
<!--    拉伸了第一列-->
<!--    收缩了第四列-->
        <TableRow>
            <Button android:text="one"></Button>
            <Button android:text="two"></Button>
            <Button android:text="three"></Button>
            <Button android:text="four"></Button>
            <Button android:text="five"></Button>
        </TableRow>
    </TableLayout>
    <TableLayout
        android:id="@+id/table2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TableRow>
            <Button android:text="one"
                android:layout_column="2"
                ></Button>
            <Button android:text="two"
                android:layout_span="2"
                ></Button>
        </TableRow>
    </TableLayout>
</LinearLayout>

五、GridLayout网格布局

作为android 4.0 后新增的一个布局,与前面介绍过的TableLayout(表格布局)其实有点大同小异;

不过新增了一些东东

①跟LinearLayout(线性布局)一样,他可以设置容器中组件的对齐方式

②容器中的组件可以跨多行也可以跨多列(相比TableLayout直接放组件,占一行相比较)

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="5"
    android:rowCount="5">
<!--设置显示行和列的个数-->
    <Button android:text="on"/>
    <Button android:text="two"
        android:layout_column="3"/>
    <Button android:text="three"/>
    <Button android:text="four"
        android:layout_column="3"/>
</GridLayout>

 

 

 子控件的属性:

layout_column 显示在第几列 layout_row 显示在第几行
layout_columnSpan 横向跨列 layout_rowSpan 纵向跨行
layout_columnWeight 横向剩余空间分配 layout_rowWeigth 纵向剩余空间分配
layout_gravity 在网格中显示位置    

 

 

 

 

六、ConstraintLayout约束布局

 我认为约束布局是这六个布局中最简单的一个,它也是Android Studio的默认布局

直接使用控件将你想要的布局创建出来即可,相当于画一个图(不用写代码),自由度非常大。

posted on 2022-02-21 21:07  跨越&尘世  阅读(332)  评论(0编辑  收藏  举报