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>

效果如下:
在这里插入图片描述
可以看到,此时的填充色和线条就没有发生重叠的问题了。

最后,放上一个实战效果图,实现引导页的指示器效果,如下:
在这里插入图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

android_cai_niao

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值