您当前的位置： 首页 > 学无止境 > 心得笔记 网站首页心得笔记

12_常用的一些布局简洁

发布时间：2021-02-03 19:54:18编辑：雪饮阅读（）

  水平线性布局与、setContentView

布局xml(就是res/layout下面的文件)可以单独建立也可以像前面一样随着项目一起建立空布局然后在设计视图下拖拽一个布局

那么单独建立一个水平线性布局如：

自定义一个布局文件名称

进入了熟悉的界面，选择线性水平布局拖拽到根容器里面

然后回到代码视图就可以看到线性水平布局就创建成功了

然后放入3个按钮和3个文本进去

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

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

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="按钮1" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="文本1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="按钮2" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="文本2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="按钮3" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="文本3" />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout> 这里面用到一个新属性android:layout_weight（权重）

首先声明只有在Linearlayout中，该属性才有效

android:layout_weight的含义是:一旦View设置了该属性(假设有效的情况下)，那么该 View的宽度等于原有宽度(android:layout_width)加上剩余空间的占比！

Google官方推荐，当使用weight属性时，将width设为0dip即可，效果跟设成wrap_content是一样的。这样weight就可以理解为占比了！

此时还不能直接运行项目，因为MainActivity.java中在onCreate方法中使用setContentView是用来设置内容视图（也就是设置布局的，定义要用具体某个布局的xml），默认设置的布局是activity_main

setContentView(R.layout.activity_main); 将其修改为刚才新建的m1

setContentView(R.layout.m1); 这个时候刷新到设备中有可能报错这个

大致意思是有重命名或新增文件资源等就需要重新安装且重启app，那么它给出的这个链接，点击下即可，如果只是单纯的修改了代码，则不会出现该问题，这里是因为我们还新增加了资源文件

则水平线性布局最终的效果如：

水平居中

使用android:gravity可实现布局中元素的对齐方式，其值为center_horizontal

时表示水平居中对齐

多属性与垂直居中

标签中的属性可以是多个的，以“|”这个来分割，如果多个属性都可以被同时支持则多属性是可用的。例如android:gravity就支持多属性值，可以同时支持水平和垂直都居中，其中垂直居中使用center_vertical属性值

绝对布局

这个绝对布局在web开发中经常被称为绝对定位

绝对布局中的元素以布局左上角为x，y坐标，x越大越向右边，y越大越向下边

可能是绝对布局因为被废弃的不推荐使用的关系，所以android studio当前版本上面在设计视图中是没有对应可操作选择的布局项的。所以只能在代码视图上来实现。

<?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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="0dp"
        android:layout_y="66dp"
        android:text="按钮1" />
</AbsoluteLayout> 这里又有新的关键词dp

在Android开发中，我们在描述View的宽、高时通常使用dp

相对布局

相对布局主要在元素使用定位时以layout_below（不一定是below，后面连缀一般是方向，这里below是指下方）关键字来声明其居于当前布局中另外一个元素的位置。所以这个相对布局和web中的相对定位是有所不同的。

相对布局不知怎么也无法在设计视图中直接拖拽，这里也只用代码模式了

<?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_x="0dp"
        android:layout_y="66dp"
        android:text="按钮1在下面"
        android:layout_below="@id/an2"
        />
    <Button
        android:id="@+id/an2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="0dp"
        android:layout_y="66dp"
        android:text="按钮2在上面" />
</RelativeLayout> 



layout_方向可以多个方向一起使用，比如表示一个按钮在布局的右下方可以这样写

<?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_x="0dp"
        android:layout_y="66dp"
        android:text="按钮1在右下方"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        />
</RelativeLayout> 



帧布局与图片的隐藏

FrameLayout(帧布局)可以说是六大布局中最为简单的一个布局,这个布局直接在屏幕上开辟出一块空白的区域,当我们往里面添加控件的时候,会默认把他们放到这块区域的左上角,而这种布局方式却没有任何的定位方式,所以它应用的场景并不多;帧布局的大小由控件中最大的子控件决定,如果控件的大小一样大的话,那么同一时刻就只能看到最上面的那个组件!后续添加的控件会覆盖前一个!虽然默认会将控件放置在左上角,但是我们也可以通过layout_gravity属性,指定到其他的位置!

这个帧布局可以通过拖拽来创建

图片组件可以使用ImageView标签实现，该标签的scaleType属性用于设置图片的缩放模式，其值为center时“先把当前的图片放置到ImageView的中间，不执行缩放，如果图片小，那么就会有空白区域，如果图片大，那么便会被裁减”

如果不想要这个图片显示，则设置一个属性visibility="invisible"

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

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我是文本" />

        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:scaleType="center"
            android:src="@drawable/ic_launcher_background"
            android:visibility="invisible"
        />
    </FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout> 



放开这个隐藏图片的属性

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

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我是文本" />

        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:scaleType="center"
            android:src="@drawable/ic_launcher_background"
        />
    </FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>  

表格布局

一个简单的表格布局

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

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="姓名"
                />
            <EditText
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                />
        </TableRow>
    </TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout> 很明显这个真的有点low的说，可输入区域太短了，可是老师没有办法，就先填写固定宽度吧



于是乎

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

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="姓名"
                />
            <EditText
                android:layout_width="200dip"
                android:layout_height="wrap_content"
                />
        </TableRow>
    </TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout> 这样能好点

其实对于此老师也算是无奈了，但是更无奈的还在后面

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

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <LinearLayout android:layout_width="300dip"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="姓名"
                    />
                <EditText
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    />
            </LinearLayout>

        </TableRow>
    </TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout> 老师只是外层包裹了一个水平线性布局，然后没有什么用，所以线性布局又增加了一个宽度。。。

然而还是原样子

你看吧，只要把这个水平线性布局换成fill_parent就又回到之前的问题上了

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

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <LinearLayout android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="姓名"
                    />
                <EditText
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    />
            </LinearLayout>

        </TableRow>
    </TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout> 



至此我也是无语了

如果此时我们再加一行（TableRow是表格布局中的行）

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

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <LinearLayout android:layout_width="300dip"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="姓名"
                    />
                <EditText
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    />
            </LinearLayout>

        </TableRow>
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="密码"
                />
            <EditText
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                />
        </TableRow>
    </TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout> 然后会发现我们的密码行也受到了上面线性布局行的影响，密码行的输入框由于姓名字段所在行最大宽度给影响了

这也就是TableRow的特点，所有组件都是等宽等高的，由于上面使用了线性布局，那么该线性布局整体就是一个组件，那么也就是说第一行中就一个单元格，而第二行没有使用线性布局，直接占用两个单元格，所以第二行的第一个单元格（密码）的长度就等于第一行整体的宽度，所以第二行第二个单元格自然就会超过第一行的最大长度的位置才出来

那么也就是说只要让第一行去除线性布局，然后将dip用在姓名输入框中，姓名及姓名输入框都各自做为第一行的两个单元格，这样一来样式就会比较好看些。

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

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="姓名"
                    />
                <EditText
                    android:layout_width="300dip"
                    android:layout_height="wrap_content"
                    />
        </TableRow>
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="密码"
                />
            <EditText
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                />
        </TableRow>
    </TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout> 



那么正确的合理table布局对于上面这种美好需求应该怎么做？可以参考下apidemos中的相关案例不过这个包在老版本有，新版本，目前我还没有找到

那么这里将具体实现展示下

<?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:text="用户"
            android:textStyle="bold"
            android:gravity="right"
            android:padding="3dip"/>
        <EditText android:padding="3dip"
            android:scrollHorizontally="true"/>
    </TableRow>
    <TableRow>
        <TextView android:text="密码"
            android:textStyle="bold"
            android:gravity="right"
            android:padding="3dip"/>
        <EditText android:padding="3dip"
            android:scrollHorizontally="true"/>
    </TableRow>
</TableLayout>

这里出现了几个新属性

android:stretchColumns：

android:stretchColumns = "指定的列"，其功能是尽量（个人认为是剩余空间，比如指定第1列，则第0列正常显示，剩余的即第二列就占据所有剩余宽度）填充指定的列

gravity是设置自身内部元素的对齐方式，这里觉得可有可无

android:scrollHorizontally="true"表示一个EditText满了后是自动横着移动不是默认的换行。这里觉得可有可无

android:textStyle="bold"来使字体显示为粗体（据说默认只对英文有用），这里觉得可有可无

padding字面意思也是填充，这里觉得可有可无