AndroidStdio TableLayout表格布局实现帮助界面

AndroidStdio TableLayout表格布局实现帮助界面

先看效果图：

帮助界面包括上面的图片区以及下面的表单区。下面的帮助信息采用表格布局实现，蓝色字体是网页链接，可以点击查看内容（该功能这里不做实现，会在之后发布）。代码放在最后面，下面简单说一下表格布局。

概览

Tablelayout类以行和列的形式对控件进行管理，每一行为一个TableRow对象，或一个View控件。

特点

直接往TableLayout中添加组件，那么这个组件将占满一行
TableRow是容器,把多个组件放在里面

TableRow的宽度会占满父布局，设置其他值不生效

表格的行数由TableRow的个数决定

常用属性

android:collapseColumns:设置需要被隐藏的列的序号

android:shrinkColumns:设置允许被收缩的列的列序号

android:stretchColumns:设置运行被拉伸的列的列序号

示例可看：https://www.jianshu.com/p/77599d96d499

帮助界面代码

<?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"
    android:orientation="vertical"
    tools:context=".HelpActivity">

    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="match_parent"
        android:layout_height="178dp"
        app:srcCompat="@drawable/help" />

    <TextView
        android:id="@+id/textView10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:textSize="30dp"
        android:text="帮助信息" />

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="50dp">

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

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="155dp"
                android:textSize="20dp"
                android:text="第一章：" />
            <TextView
                android:id="@+id/textView11"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20dp"
                android:textColor="@color/colorhelp"
                android:text="产品简介" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="30dp">

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="155dp"
                android:textSize="20dp"
                android:text="第二章：" />
            <TextView
                android:id="@+id/textView21"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20dp"
                android:textColor="@color/colorhelp"
                android:text="快速入门" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="30dp">

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="155dp"
                android:textSize="20dp"
                android:text="第三章：" />
            <TextView
                android:id="@+id/textView31"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20dp"
                android:textColor="@color/colorhelp"
                android:text="使用说明" />
        </TableRow>


    </TableLayout>
</LinearLayout>
extColor="@color/colorhelp"
                android:text="使用说明" />
        </TableRow>


    </TableLayout>
</LinearLayout>