11月更文挑战｜Android基础-常用布局学习

这是我参与11月更文挑战的第25天，活动详情查看：2021最后一次更文挑战

前言

在页面开发中Android提供了几种基础布局。基础布局包括FrameLayout、LinearLayout、RealativeLayout、TableLayout以及AbsoluteLayout。这几种基础布局就能支持在页面中设计出简单页面UI效果。

特殊布局

在开发UI布局时经常会有编写许多相似的布局结构，如果采用复制粘贴形式重用布局就过于笨拙。在Android开发XML布局需要考虑重用时可以采用标签<include>和<merge>。

include

<include>标签允许一个布局引入另外一个布局，当xml文件中有复用相同布局内容时就能使用了。例如volume_item_view是音量调节布局文件，layout_volume_view是音量整体调节布局文件需要有多个音量调节器的时候就能用到<include>标签复用volume_item_view布局文件了

• volume_item_view

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:paddingHorizontal="9dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
        <LinearLayout
            android:layout_marginTop="20dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <androidx.appcompat.widget.AppCompatSeekBar
                android:id="@+id/sb_volume"
                android:paddingStart="9dp"
                android:paddingEnd="20dp"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="18dp"
                android:progressDrawable="@drawable/ugckit_seekbar_style"
                android:thumb="@drawable/ugckit_seekbar_thumb"
                />
        </LinearLayout>
</RelativeLayout>

• layout_volume_view

<?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:background="@drawable/ugckit_bg_paster_panel"
    android:paddingTop="33dp"
    android:layout_height="wrap_content">
    <include android:id="@+id/layout_video_volume" layout="@layout/volume_item_view"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="23.5dp"/>
    <include android:id="@+id/layout_music_volume" layout="@layout/volume_item_view"/>

</LinearLayout>

merge

使用<include>标签有一个缺点是会增加布局的嵌套。如上所示的volume_item_view布局文件最外层的<RelativeLayout>其实是多余布局，无形中增加了一层没有必要的嵌套。因此可以使用<merge>标签代替<RelativeLayout>标签减少布局层级嵌套。

• volume_item_view

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    android:paddingHorizontal="9dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
        <LinearLayout
            android:layout_marginTop="20dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <androidx.appcompat.widget.AppCompatSeekBar
                android:id="@+id/sb_volume"
                android:paddingStart="9dp"
                android:paddingEnd="20dp"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="18dp"
                android:progressDrawable="@drawable/ugckit_seekbar_style"
                android:thumb="@drawable/ugckit_seekbar_thumb"
                />
        </LinearLayout>
</merge>

ViewStub

ViewStub实际上是宽高为0的View，默认不可见。可通过setVisibility或inflate将布局加载出来，实现延迟加载效果。ViewStub自身没有布局内容而是通过android:layout属性来设置需要加载的布局文件。

setVisibility和inflate两个方法不同点在于setVisibility加载可以通过判断可见性来做；若是inflate方法则不可以。

• comment_stub

<ViewStub
    android:id="@+id/vs_comment"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout="@layout/volume_item_view"
    />

ViewStub viewStub = findViewById(R.id.vs_comment);
// 方法一
viewStub.setVisiblity(View.VISIBLE);
View volumeItem = findViewById(R.id.volume_item_view);
// 方法二
View volumeItem = viewStub.inflate();

常用布局

布局类型	特点
FrameLayout	所有添加到这个布局视图是以层叠方式显示。第一个添加的View会显示在最底层，最后添加的View显示在最顶层。显示方式类似堆栈。
LinearLayout	线性布局可分为水平和垂直。通过android:orientation设置布局方向（horizontal,vertical）。
RelativeLayout	相对布局可以设置View相对于其他View的位置。例如上下左右相对应就是android:lauyout_above、android:layout_below、android:layout_toLeftOf、android:layout_toRightOf。
TableLayout	表格布局可以将视图按照行、列排列显示。布局形式上一个<TableLayout>和多个<TableRow>组成
AbsoluteLayout	绝对布局可以任意设置视图位置，通过android:layout_x和android:layout_y设置View的坐标位置