欢迎回来,这期开始来介绍两种常用的布局,分别是LinearLayout(线性布局)和RelativeLayout(相对布局)。

那么本期先来介绍线性布局,回到Android Studio,打开activity_main.xml,切换到Text 文本编辑模式。

那么在正式开始之前,先来介绍几个常用的属性:

android:layout_width 组件宽度 match_parent(随父组件) wrap_content(随内容)

android:layout_height 组件高度

android:margin 外边距 改变组件位置

android:padding 内边距 不改变组件位置

android:gravity 组件内容对齐方式

android:layout_gravity 组件对齐方式

android:background 背景颜色

组件通用属性

上述属性非常重要,熟练掌握使用方法,是编写UI的基础。

顺带一说,margin和padding的值可以为负数。

了解了上述属性,下面介绍两个LinearLayout常用的属性:

android:orientation 排布方式

android:layout_weight 权重

android:weightSum 权重总和

LinearLayout

首先看排布方式,它的值只能为vertical(垂直)和horizontal(水平)

那么这两种方式有什么区别呢,可以将你的<TextView>复制一份 将 androidx.constraintlayout.widget.ConstraintLayout改为LinearLayout,添加属性orientation,分别将它的值设置为vertical和horizontal查看效果。如下图所示

Vertical
Horizontal

很明显就能区分它们的效果,水平排布取决于子组件的宽度。

下面来介绍一下weight权重,简单来说就是按照一定的比例为子组件分配位置。来看一个例子。

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_weight="1"
            android:gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="My"/>
        <TextView
            android:layout_weight="2"
            android:gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="MyApplication"/>
    </LinearLayout>

可以看到图中两个组件按照1/3,2/3的比例平分了父组件的宽度。看到这想必你也知道weight该怎么用了吧。当你设置了weight之后,可能会提示你需要将原有的宽或高度改为0dp,Google建议使用0dp,但我还是建议在TextView上使用wrap_content,0dp可能会造成TextView内容重叠,而随内容宽高就可以正常显示。

那么weightSum又有什么用呢?顾名思义就是权重总和。可以理解为强制分割,那么拥有weight属性的父组件(如上)就不会再按照1/3,2/3平分父组件了。具体例子如下所示:

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="4">
        <TextView
            android:layout_weight="1"
            android:gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="My"/>
        <TextView
            android:layout_weight="1"
            android:gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="My"/>
    </LinearLayout>

这里我将线性布局的权重总和设置为了4,两个子组件的weight改为了1,内容都是My,宽度随内容。

可以看到它们不再按照1/2,1/2的比例平分,而是1/4。那么权重总和就到这里,这几个属性都通俗易懂,自己多加练习,可以组合出不同的样式。那么下面放出一个简单的例子:

<?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=".MainActivity"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="15dp"
        android:orientation="horizontal">
        <ImageView
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:src="@mipmap/ic_launcher_round"/>
        <TextView
            android:layout_marginLeft="15dp"
            android:gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="My First Android Application"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="15dp">
        <ImageView
            android:layout_gravity="center"
            android:layout_width="128dp"
            android:layout_height="128dp"
            android:src="@mipmap/ic_launcher_round"/>
        <TextView
            android:layout_marginTop="15dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="My First Android Application"/>
    </LinearLayout>
</LinearLayout>

那么本期教程就到此结束了,回顾一下,学习了很多新属性,这些都是必须要掌握的,多多练习。下期继续介绍RelativeLayout相对布局。

若你有任何问题可以在评论区留言。感谢观看。


0 条评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注