Android中步骤图界面的编写

川长思鸟来 2022-11-14 14:38 182阅读 0赞

# 一、前言 #

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

# 二、关键点 #

## 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填充。如下图所示：  
![在这里插入图片描述][20210329214440835.jpg_pic_center]  
具体来说，就是在圆圈的两边或者文字的两边，增加View或者ImageView以实现上面的图形和底部的文字的宽度是一样的，如下图：  
![在这里插入图片描述][2021032921482933.png_pic_center]  
从结构上可以看出来，上面图形部分是一个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代码量可能会有点多，如果您有更好的方法，欢迎提出来。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RlZXBfcm9vdGVk_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/fd3a7588e5984d4ea0b2885a9ab10923.png
[20210329214440835.jpg_pic_center]: /images/20221022/092b99793b3246beba2d9c3866d8f74d.png
[2021032921482933.png_pic_center]: https://img-blog.csdnimg.cn/2021032921482933.png#pic_center