Android 讲解：布局

最新推荐文章于 2023-05-16 11:12:43 发布

怖呆

最新推荐文章于 2023-05-16 11:12:43 发布

阅读量189

点赞数

分类专栏： android 文章标签： android ui

本文链接：https://blog.csdn.net/u012733415/article/details/50505665

版权

android 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

Android 的界面配置在项目res\layout 路径的XML 文件。

XML 的根标签代表界面的布局模式。用来设置一个界面的控件布局。

当然布局里面还可以有其他布局。

<LinearLayout>...</LinearLayout> 线性布局
<RelativeLayout>...</RelativeLayout> 相对布局
<FrameLayout>...</FrameLayout> 帆布局
<TableLayout>...</TableLayout> 表格布局
<AbsoluteLayout>...</AbsoluteLayout> 绝对布局

线性布局

线性布局是比较常用的布局方式，而线性布局分两种排列方式，一种是水平，一种是垂直。

线性布局的排列方式由根标签的android:orientation 属性进行设置。

垂直布局

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

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1" />

</LinearLayout>

垂直布局

水平布局

android:orientation="horizontal" 为水平布局

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

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1" />

</LinearLayout>

这里写图片描述

相对布局

相对布局也是android 里面比较常用的布局方式，它可以相对屏幕布局，也可以相对控件布局。

根据屏幕相对布局

android:layout_alignParentLeft="true" 控件左边显示
android:layout_centerInParent="true" 控件居中显示
android:layout_alignParentRight="true" 控件右边显示
android:layout_alignParentBottom="true" 控件下边显示

<?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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerInParent="true"
        android:text="button1"
        />


    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="button2"
        />
</RelativeLayout>

这里写图片描述

根据控件相对布局

android:layout_below 根据控件的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/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:background="#ccc"
        android:textSize="20dp"
        android:text="hello gril !! " />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/text1"
        android:background="#ccc"
         android:textSize="20dp"
        android:text="hello boy" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" >

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <Button
            android:background="#2177C7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="send" />
    </LinearLayout>

</RelativeLayout>

这里写图片描述

帆布局

帆布局应用非常少，它的布局规则是所有控件在左上角显示。

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

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

</FrameLayout>

这里写图片描述

表格布局

表格布局应用场景不是很多。但是也是比较简单的。
表格布局不能知道宽度，只能知道高度。
表格的行数由TableRow 绝定。
表格的列数由TableRow 里的控件个数决定。

<TableRow></TableRow> 创建一行
android:layout_span 合并表格

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    >

    <TableRow >
        <TextView android:textSize="20dp" android:text="username"/>
        <EditText/>
    </TableRow>

    <TableRow >
        <TextView android:textSize="20dp" android:text="password"/>
        <EditText/>
    </TableRow>
     <TableRow>
        <Button android:layout_span="2" android:text="Login"/>
    </TableRow>


</TableLayout>

这里写图片描述

上图的表格布局的控件没有足够的应用屏幕宽度。

android:stretchColumns="1" 第二列填充剩余屏幕

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 

    android:stretchColumns="1"
    >

    <TableRow >
        <TextView android:textSize="20dp" android:text="username"/>
        <EditText/>
    </TableRow>

    <TableRow >
        <TextView android:textSize="20dp" android:text="password"/>
        <EditText/>
    </TableRow>
     <TableRow>
        <Button android:layout_span="2" android:text="Login"/>
    </TableRow>


</TableLayout>

这里写图片描述

绝对布局

绝对布局是通过屏幕的坐标来控制控件的位置，由于兼容性较差，应用不是很广泛。
android:layout_x 设置垂直坐标
android:layout_y 设置水平坐标

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="46dp"
        android:layout_y="77dp"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="48dp"
        android:layout_y="138dp"
        android:text="Button" />

</AbsoluteLayout>

这里写图片描述

怖呆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android 讲解：布局

Android 的界面配置在项目res\layout 路径的XML 文件。XML 的根标签代表界面的布局模式。用来设置一个界面的控件布局。当然布局里面还可以有其他布局。<LinearLayout>...</LinearLayout> 线性布局 <RelativeLayout>...</RelativeLayout> 相对布局 <FrameLayout>...</FrameLayout> 帆布局
复制链接

扫一扫

专栏目录