Android中步骤图界面的编写

一、前言

相信大家在电脑版网页上经常看到这种情形：用户要完成某一件事情，需要经过多个步骤，这时页面上会以图形的方式显示总共有多少个步骤，当前处于第几步。对于手机端，这种用法相对而言要少一些，不过毕竟不是没有，掌握这种图形的编写方式还是很有必要的。当然，你也可以用PS绘制一张图片，直接放到XML界面上，但是使用直接放置图片的方法，可能会由于图像被拉伸而出现模糊的问题。本篇文章讲的是单纯地使用XML编写步骤图，效果如下图所示：

二、关键点

1、形状图形ShapeDrawable

利用形状图形ShapeDrawable绘制步骤图中的圆圈和圆圈之间的横线。当然这里指的是直接用XML来编写，不是用Java代码去编写（如果你想动态地改变圈圈的颜色的话，可以使用Java代码去绘制形状图形）。绘制圆形的XML代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#58aa2e"/>
    <size android:width="30dp" android:height="30dp"/>
</shape>

对于步骤图中两个圆圈之间的横线，直接绘制矩形就好了，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#58aa2e"/>
</shape>

2、线性布局中layout_weight属性

我想要让整个步骤图占满父布局，并且两个圆圈之间的横线长度要相同，那么我可以采用这种方法：为每条横线增加android:layout_weight="1"即可实现。增加了这个属性，就代表3条横线平分剩余的空间。

3、填充大法

我想要让每个圆圈和其底下的文字在垂直方向上能够形成对称轴，那么我采用的方法是使用View或ImageView填充。如下图所示：

具体来说，就是在圆圈的两边或者文字的两边，增加View或者ImageView以实现上面的图形和底部的文字的宽度是一样的，如下图：

从结构上可以看出来，上面图形部分是一个LinearLayout，下面文字部分也是一个LinearLayout，要让圆圈和底部的文字对齐，我想到的是填充大法：让“选择英雄”的TextView和上面的序号的宽度保持一致。如果不填充就很难对齐了。

三、整个布局的代码

说明：代码里面引用了4种形状图形：circle_current、circle_normal、rectangle_current、rectangle_normal，分别代表绿色圆圈、灰色圆圈、绿色横线（矩形）、灰色横线（矩形）。前面已经说明如何使用xml来绘制形状图形了，这里就不再赘述。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_marginTop="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:gravity="center_vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:layout_width="60dp"
            android:layout_height="wrap_content">
            <View android:layout_width="15dp"
                android:layout_height="match_parent"/>
            <TextView
                android:gravity="center"
                android:text="1"
                android:textColor="#fff"
                android:textSize="18sp"
                android:background="@drawable/circle_current"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
            <ImageView
                android:layout_gravity="center"
                android:src="@drawable/rectangle_current"
                android:layout_width="15dp"
                android:layout_height="4dp"/>
        </LinearLayout>
        <ImageView
            android:layout_weight="1"
            android:src="@drawable/rectangle_current"
            android:layout_width="0dp"
            android:layout_height="4dp"/>
        <ImageView
            android:layout_gravity="center"
            android:src="@drawable/rectangle_current"
            android:layout_width="15dp"
            android:layout_height="4dp"/>

        <TextView
            android:gravity="center"
            android:text="2"
            android:textColor="#fff"
            android:textSize="18sp"
            android:background="@drawable/circle_current"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <ImageView
            android:layout_gravity="center"
            android:src="@drawable/rectangle_normal"
            android:layout_width="15dp"
            android:layout_height="4dp"/>
        <ImageView
            android:layout_weight="1"
            android:src="@drawable/rectangle_normal"
            android:layout_width="0dp"
            android:layout_height="4dp"/>
        <ImageView
            android:layout_gravity="center"
            android:src="@drawable/rectangle_normal"
            android:layout_width="15dp"
            android:layout_height="4dp"/>
        <TextView
            android:gravity="center"
            android:text="3"
            android:textColor="#fff"
            android:textSize="18sp"
            android:background="@drawable/circle_normal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <ImageView
            android:layout_gravity="center"
            android:src="@drawable/rectangle_normal"
            android:layout_width="15dp"
            android:layout_height="4dp"/>
        <ImageView
            android:layout_weight="1"
            android:src="@drawable/rectangle_normal"
            android:layout_width="0dp"
            android:layout_height="4dp"/>
        <LinearLayout
            android:layout_width="60dp"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_gravity="center"
                android:src="@drawable/rectangle_normal"
                android:layout_width="15dp"
                android:layout_height="4dp"/>
            <TextView
                android:gravity="center"
                android:text="4"
                android:textColor="#fff"
                android:textSize="18sp"
                android:background="@drawable/circle_normal"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        </LinearLayout>
    </LinearLayout>
    <LinearLayout
        android:layout_marginRight="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:gravity="center"
            android:text="选择英雄"
            android:textColor="#000"
            android:layout_width="60dp"
            android:layout_height="wrap_content"/>
        <View
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"/>
        <TextView
            android:text="选择装备"
            android:textColor="#000"
            android:gravity="center"
            android:layout_width="60dp"
            android:layout_height="wrap_content"/>
        <View
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"/>
        <TextView
            android:text="发起进攻"
            android:gravity="center"
            android:layout_width="60dp"
            android:layout_height="wrap_content"/>
        <View
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"/>
        <TextView
            android:text="接受投降"
            android:gravity="center"
            android:layout_width="60dp"
            android:layout_height="wrap_content"/>
    </LinearLayout>
</LinearLayout>

四、结语

以上是鄙人想到的方法，XML代码量可能会有点多，如果您有更好的方法，欢迎提出来。