shape图形中的stroke和solid中的细节

通过shape可以创建一个图形，比如圆形、四方形，定义一个圆形如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <stroke android:color="@color/transparent_white" android:width="20dp"/>
    <solid android:color="@color/red"/>
    
</shape>

• stroke为边框的相关设置，如边框线条的颜色，这里我设置了一个半透明的白色，边框线条的宽度，这里设置了20dp。
• solid为图形的填充颜色，这里设置为红色。

接下来我们把这个图形显示到Activity上，界面使用黑色背景，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:background="@color/black">

    <View
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/shape_indicator_current"
        android:layout_gravity="center"/>

</FrameLayout>

显示效果如下：

我们定义的圆形边框线条宽度为20dp，设置了圆的宽度为100dp，除去边框线条的宽度，则圆的填充直径应该是60dp（100 - 20 x 2），但从效果图我们可以发现，填充颜色和边框的线条有重叠的，重叠的宽度是边框线条宽度的1半。如果我想定义两个圆形，一个圆形只有边框，一个圆形只有填充颜色，这两个圆形可以重叠在一起，但是填充颜色不能覆盖到边框线条，理解了这个细节之后，实现这个就很简单了，在定义填充图形的时候，我们把它的线条宽度设置为另一个图形的线条宽度的两倍即可，如下：

图形1，只有边框线条：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <stroke android:color="@color/transparent_white" android:width="20dp"/>

</shape>

这里没有定义填充颜色默认为完全透明。

图形2，只有填充颜色：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <stroke android:color="@android:color/transparent" android:width="40dp"/>
    <solid android:color="@color/red"/>

</shape>

这里设置边框线条颜色为完全透明，虽然透明了，但是它还是占着宽度的。

两个图形用到界面上显示，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:background="@color/black">

    <View
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/shape_indicator_current"
        android:layout_gravity="center"/>
    
    <View
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/shape_indicator_normal"
        android:layout_gravity="center"/>

</FrameLayout>

效果如下：

可以看到，此时的填充色和线条就没有发生重叠的问题了。

最后，放上一个实战效果图，实现引导页的指示器效果，如下：