四种基本布局

﹏ヽ暗。殇╰゛Y 2021-09-28 06:52 369阅读 0赞

**目录**

*  线性布局
 *  相对布局
 *  帧布局
 *  百分比布局

**一：线性布局**

LinearLayout又称线性布局，他将包含的控件在线性方向上依次排列，可以通过android:orientation来指定方向

如果是vertical就是垂直方向，horizontal是水平方向

注意：如果是水平方向，就不能把控件的宽度设置为match\_parent，如果是垂直方向，就不能将高度设置为match\_parent

注意：android:layout\_gravity指定控件在布局中的对齐方式，当是水平方向时，只有垂直向上的对齐方式才会生效，因为此时水平方向上的长度是不固定的；同理，垂直方向时，只有水平向上的对齐方式才生效。

要不看不懂看这个文章：[https://blog.csdn.net/weixin\_42717928/article/details/83662905][https_blog.csdn.net_weixin_42717928_article_details_83662905]

**在线性布局还有一个重要的属性android:layout\_weight，这个属性允许我们使用比例的方式来指定控件的大小**

<?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">
    
        <EditText
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="编辑框"/>
    
        <Button
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="1"/>
    
    
    </LinearLayout>

![20190309220117647.png][]

在上面layout\_width的值是0dp,但这里不再由layout\_width决定宽度，写出来是一种规范写法

这里由layout\_weight决定，表明编辑框和按钮1:1平分宽度

比如若编辑框是2，按钮是1，说明将宽度分3份，编辑框占2份，按钮占1份

![20190309220521301.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:orientation="horizontal">
    
        <EditText
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="编辑框"/>
    
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"/>
    
    
    </LinearLayout>

按钮宽度由wrap\_content计算，而编辑框占满剩下的（因为没人和它争）

![20190309220846458.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:orientation="horizontal">
    
        <EditText
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="编辑框"/>
    
        <EditText
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="编辑框"/>
    
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"/>
    
    
    </LinearLayout>

那按钮就还是宽度由wrap\_content计算，另外两个编辑框就1:1平分剩下的宽度

![20190309221112267.png][]

**二：相对布局**

RelativeLayout布局又称相对布局。

（1）相对于父布局进行定位

android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:layout_centerInParent="true"

比如你想左上角对齐，那就

android:layout\_alignParentLeft="true"  
android:layout\_alignParentTop="true"

（2）相对于控件进行布局

<?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/b3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="3"/>
    
        <Button
            android:id="@+id/b1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/b3"
            android:layout_toLeftOf="@+id/b3"
            android:text="1"/>
    
        <Button
            android:id="@+id/b2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/b3"
            android:layout_toRightOf="@+id/b3"
            android:text="2"/>
    
    </RelativeLayout>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcxNzkyOA_size_16_color_FFFFFF_t_70][]

layout_above属性让一个控件在另一个控件的上方，layout_toLeftOf和layout_toRightOf分别表示让一个控件位于另一个控件的左边或者右边

（3）其他的相对于控件进行定位的属性

layout_alignLeft和layout_alignRight表示让一个控件的左/右边缘和另一个控件的左/右边缘对齐
    layout_alignTop和layout_alignButtom表示让一个控件的上/下边缘和另一个控件的上/下边缘对齐

**三：帧布局**

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:text="women"/>
    
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"/>
    
    </FrameLayout>

![20190309232119141.png][]

可以使用layout\_gravity来指定控件在布局中的对齐方式

FrameLayout因为定位方式的欠缺，所以少用，不过在碎片中会用到

**四：百分比布局**

直接指定控件在布局中的百分比，因为线性布局已经支持按比例指定控件大小，所以百分比布局只为RelativeLayout和FrameLayout进行功能扩展，提供了PercentRelativeLayout和PercentFrameLayout两个全新布局。

要让百分比布局在所有Android版本上使用，只用添加百分比布局的依赖就行

在app/build.gradle,打开dependencies闭包中添加一句内容：

compile 'com.android.support:appcompat-v7:24.2.1'
        //百分比布局
        compile 'com.android.support:percent:24.2.1'
        testCompile 'junit:junit:4.12'

注意，每当修改了任何gradle文件，都会弹出提示

![20190309233746454.png][]

要点击Sync Now进行同步

<android.support.percent.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
            android:id="@+id/b1"
            android:text="Button1"
            android:layout_gravity="left|top"
            app:layout_widthPercent="50%"
            app:layout_heightPercent="50%"/>
    
    
        <Button
            android:id="@+id/b2"
            android:text="Button2"
            android:layout_gravity="right|top"
            app:layout_widthPercent="50%"
            app:layout_heightPercent="50%"/>
    
        <Button
            android:id="@+id/b3"
            android:text="Button3"
            android:layout_gravity="left|bottom"
            app:layout_widthPercent="50%"
            app:layout_heightPercent="50%"/>
    
    
        <Button
            android:id="@+id/b4"
            android:text="Button4"
            android:layout_gravity="right|bottom"
            app:layout_widthPercent="50%"
            app:layout_heightPercent="50%"/>
    
    
    
    </android.support.percent.PercentFrameLayout>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcxNzkyOA_size_16_color_FFFFFF_t_70 1][]

最外层使用PercentFrameLayout，因为百分比布局不是内置在SDK中，所以要把完整的包路径写出来。然后还要定义一个app的命名空间，这样才能使用。

在PercentFrameLayout布局中使用了layout\_widthPercent和layout\_heightPercent的宽度和高度指定为布局的50%。

这里能够使用app前缀的属性是因为刚刚定义了app的命名空间。不过PercentFrameLayout还是会继承FrameLayout的特性，即控件默认左上角摆放，所以借助layout\_gravity来定位。

[https_blog.csdn.net_weixin_42717928_article_details_83662905]: https://blog.csdn.net/weixin_42717928/article/details/83662905
[20190309220117647.png]: /images/20210923/4ce0fdaa98354d88ba0ba1ac317dcb96.png
[20190309220521301.png]: /images/20210923/653b454580e54161b820f637c399a2f1.png
[20190309220846458.png]: /images/20210923/4b58fb25e1a24169a7c39c1b95686109.png
[20190309221112267.png]: /images/20210923/f87ad3e2b3e44ec99976f54dee743b0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcxNzkyOA_size_16_color_FFFFFF_t_70]: /images/20210923/8d4cd893a7f84ed889729c0aaff87f65.png
[20190309232119141.png]: /images/20210923/763e7604c6f5478599f535bb68ef4b98.png
[20190309233746454.png]: /images/20210923/b248e861990344a7b54735f71e7d6ebc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcxNzkyOA_size_16_color_FFFFFF_t_70 1]: /images/20210923/671f693fdd474459a45b1d2e4f6e9892.png