Android布局

树梢还未果
122 阅读3分钟

1676949954358.jpg

生活本是苦药,糖要你自己找。

良好的布局设计对UI界面至关重要，Android中的布局分为7种，分别为相对布局、线性布局、表格布局、网格布局、帧布局、绝对布局、约束布局 那么这些布局该怎么创建的呢？

image.png

image.png

相对布局（RelativeLayout）

控件属性

属性声明功能描述
android:layout_alignParentLeft是否跟父布局左对齐(true或false)
android:layout_alignParentTop是否跟父布局顶部对齐
android:layout_alignParentRight是否跟父布局右对齐
android:layout_alignParentBottom是否跟父布局底部对齐
android:layout_toRightOf在指定(id)控件的右边
android:layout_toLeftOf在指定(id)控件的左边
android:layout_above在指定(id)控件的上边
android:layout_below在指定(id)控件的下边
android:layout_alignBaseline与指定控件水平对齐
android:layout_alignLeft与指定控件左对齐
android:layout_alignRight与指定控件右对齐
android:layout_alignTop与指定控件顶部对齐
android:layout_alignBottom与指定控件底部对齐

相对布局可以通过视图去拖动来调整想要的布局，上面那些属性是在拖动调整不合适在根据需要调整的。

image.png

线性布局(LinearLayout)

线性布局是以水平排列和垂直排列的方式。 在线性布局中有一个属性android:orientation,该属性的取值有vertical（垂直）和horizontal（水平）两种，vertical表示线性布局是垂直显示的，horizontal表示线性布局水平显示，默认为horizontal。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity5"
    android:orientation="horizontal">

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ccc"
        android:text="按钮1" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:background="#E14040"
        android:text="按钮2" />

    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:background="#D1822F"
        android:text="按钮3" />

</LinearLayout>

image.png

image.png

表格布局（TableLayout）

线性布局虽然方便，但如果遇到控件需要排列整齐的情况就很难达到要求，这时候就需要表格布局来掌控了。 在表格布局中，行数由TableRow对象控制，即布局几个TableRow就有多少行。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="2"
    tools:context=".MainActivity5">

    <TableRow>

        <Button
            android:id="@+id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#ccc"
            android:text="按钮1" />

        <Button
            android:id="@+id/btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:background="#E14040"
            android:text="按钮2" />

        <Button
            android:id="@+id/btn3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:background="#D1822F"
            android:text="按钮3" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#ccc"
            android:text="按钮4" />

    </TableRow>

    <TableRow>

        <Button
            android:id="@+id/btn4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#ccc"
            android:text="按钮4" />

        <Button
            android:id="@+id/btn5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:background="#E14040"
            android:text="按钮5" />

        <Button
            android:id="@+id/btn6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:background="#D1822F"
            android:text="按钮6" />
    </TableRow>
</TableLayout>

image.png

网格布局（GridLayout）

网格布局实现了控件交错显示，能够避免因布局嵌套对设备性能的影响，更利于自由布局开发。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:columnCount="4"
    android:orientation="horizontal"
    tools:context=".MainActivity5">

    <Button
        android:layout_column="3"
        android:text="/" />

    <Button android:text="1" />

    <Button android:text="2" />

    <Button android:text="3" />
    <Button android:text="*" />

    <Button android:text="4" />

    <Button android:text="5" />

    <Button android:text="6" />
    <Button android:text="-" />


    <Button android:text="7" />

    <Button android:text="8" />

    <Button android:text="9" />

    <Button android:layout_gravity="fill"
        android:layout_rowSpan="3"
        android:text="+"/>
    <Button android:layout_gravity="fill"
        android:layout_columnSpan="2"
        android:text="0"/>
    <Button android:text="00"/>
    <Button android:layout_gravity="fill"
        android:layout_columnSpan="3"
        android:text="="/>

</GridLayout>

image.png

在网格布局中我们看到很多按钮，其中个别的按钮包含一些属性，如：android：layout_columm表示该按钮在第几列，android：layout_rowSpan表示该控件占用几行，android:layout_columnSpan表示该控件占用几列。

帧布局（FrameLayout）

帧布局是最简单的一种布局。每添加一个控件占据一帧，如果添加多个空间这些控件会按照顺序在屏幕的左上角重叠显示且会透明显示之前控件的文本。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:context=".MainActivity5">

    <Button
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="控件1"
        android:textColor="#fff"
        android:gravity="right"
        android:textSize="26sp"
        android:background="#FF0000"/>
    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:text="控件2"
        android:textColor="#fff"
        android:gravity="center|bottom"
        android:textSize="26sp"
        android:background="#87C55A"/>
    <TextView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:text="控件3"
        android:textColor="#fff"
        android:gravity="bottom"
        android:textSize="26sp"
        android:layout_gravity="right"
        android:background="#2638D1"/>


</FrameLayout>

image.png

绝对布局（AbsoluteLayout）

绝对布局通过指定的x\y轴来固定位置的。

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:context=".MainActivity5">

    <Button
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="控件1"
        android:layout_x="50dp"
        android:layout_y="50dp"
        android:textColor="#fff"
        android:gravity="right"
        android:textSize="26sp"
        android:background="#FF0000"/>
    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:text="控件2"
        android:layout_x="200dp"
        android:layout_y="300dp"
        android:textColor="#fff"
        android:gravity="center|bottom"
        android:textSize="26sp"
        android:background="#87C55A"/>
    <TextView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:text="控件3"
        android:textColor="#fff"
        android:gravity="bottom"
        android:textSize="26sp"
        android:layout_gravity="right"
        android:background="#2638D1"/>


</AbsoluteLayout>

image.png

约束布局（ConstraintLayout）

约束布局和之前出现的集中布局不同的是，它非常适合使用可视化的方式来编写界面，但并不太适合使用XML的方式来进行编写。

理想就是当你想它时，你是快乐的；欲望就是当你想它时，你是痛苦的。

越是生活忙碌，越是要学会如何与自己相处。不要为已经过去的事过分苛责自己，更别把时间浪费在懊恼和委屈上。张弛有度，才能为持续的成长不断蓄力。

avatar
文章
阅读
粉丝