4种基本布局

前方是否可导？

于 2021-03-23 22:20:24 发布

阅读量345

点赞数

分类专栏： android基础

本文链接：https://blog.csdn.net/weixin_44110537/article/details/115139283

版权

android基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

4种基本布局

线性布局（LinearLayout）

线性布局是一种非常常见的布局，这个布局会将它包含的控件在线性方向上依次排列。

排列方向（orientation）

水平(horizontal)

线性布局的默认方向是水平的，可以通过orientation的值来设置。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        />
</LinearLayout>

垂直(vertical)

将orientation的值设为vertical即可。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        />
</LinearLayout>

对齐方式（layout_gravity）

要注意的是：水平方向放置只有垂直方向能对齐。垂直方向放置只有水平方向能对齐。

水平方向

top

center_vertical

bottom

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:text="1"
        />
    <Button
        android:layout_gravity="center_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        />
    <Button
        android:layout_gravity="bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        />
</LinearLayout>

效果图
在这里插入图片描述

垂直方向

left

center_horizontal

right

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:text="1"
        />
    <Button
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        />
    <Button
        android:layout_gravity="right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        />
</LinearLayout>

效果图
在这里插入图片描述

权重（layout_weight）

通过权重值给布局下的控件按比例分配空间。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <EditText
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="send"
        android:textAllCaps="false"
        android:layout_weight="1"/>
</LinearLayout>

效果如下：
在这里插入图片描述
这种效果看起来不是很好，可以修改xml,让按钮只保留他的原来大小就好，剩下的全部给EditText

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <EditText
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="send"
        android:textAllCaps="false"/>
</LinearLayout>

效果如下:
在这里插入图片描述

相对布局（RelativeLayout）

RelativeLayout也是一种非常常用的布局，和LinearLayout布局的排列规则不同，这种布局的方式显得比较随意一些。它可以通过相对定位的方式让控件出现在布局的任何一个位置,正因为如此所以RelativeLayout的属性比较多。

控件相对于父布局进行定位

layout_alignParentLeft

layout_alignParentTop

layout_alignParentRight

layout_centerInParent

layout_alignParentBottom

其实就是父布局中的五个方位。

<?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_alignParentTop="true"
        android:textAllCaps="false"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:textAllCaps="false"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textAllCaps="false"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:textAllCaps="false"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:textAllCaps="false"/>
</RelativeLayout>

效果如下：
在这里插入图片描述

相对控件进行定位

给一个控件id，别的控件可以通过这个id进行相对定位。

layout_above

layout_below

layout_toRightOf

layout_toLeftOf

<?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/center"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/center"
        android:layout_toLeftOf="@id/center"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/center"
        android:layout_toRightOf="@id/center"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/center"
        android:layout_toLeftOf="@id/center"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/center"
        android:layout_toRightOf="@id/center"/>
</RelativeLayout>

效果如下：
在这里插入图片描述

帧布局（FrameLayout）

这种布局相对于前面的两种布局来说非常的简单，他的应用的场景也少了很多。这种布局没有方便的定位方式，所有的控件都会默认在布局的左上角。

<?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="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20dp"
        android:text="aaa"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bbb"
        android:textSize="30dp"/>
</FrameLayout>

在这里插入图片描述
可以发现在左上角重合了。

也可以设置对齐方式，由于没有明确的排列顺序，会根据对齐的方式进行放置。

<?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="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20dp"
        android:text="aaa"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="bbb"
        android:textSize="30dp"/>
</FrameLayout>

在这里插入图片描述

百分比布局

这种布局针对FrameLayout和RelativeLayout进行了功能扩展，（LinearLayout有Layout_Weight进行比例分配）

<?xml version="1.0" encoding="utf-8"?>
<androidx.percentlayout.widget.PercentFrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        android:layout_gravity="left|top"
        />
    <Button
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        android:layout_gravity="right|top"
        />
        <Button
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        android:layout_gravity="left|bottom"
        />
        <Button
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        android:layout_gravity="right|bottom"
        />
</androidx.percentlayout.widget.PercentFrameLayout>

前方是否可导？

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
4种基本布局

4种基本布局线性布局（LinearLayout）排列方向（orientation）水平(horizontal)垂直(vertical)对齐方式（layout_gravity）水平方向topcenter_verticalbottom垂直方向leftcenter_horizontalright权重（layout_weight）相对布局（RelativeLayout）控件相对于父布局进行定位layout_alignParentLeftlayout_alignParentToplayout_alignParent.
复制链接

扫一扫