Android shape的使用

矩形(rectangle)

直角矩形:

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

    <solid android:color="@color/colorPrimary"></solid>

</shape>

solid:填充颜色

圆角矩形:

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

    <corners android:radius="10dp"></corners>

    <solid android:color="@color/colorPrimary"></solid>

    <padding android:bottom="12dp"
        android:left="12dp"
        android:right="12dp"
        android:top="12dp"></padding>
    
</shape>

corners:圆角大小。

        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer"

android:radius:表示4个角的圆角大小;
还可以分别设置四个角的,使用下面四个属性:android:topLeftRadius、android:topRightRadius、android:bottomLeftRadius、android:bottomRightRadius分别表示:左上、右上、左下、右下。

<padding android:bottom="12dp"
        android:left="12dp"
        android:right="12dp"
        android:top="12dp"></padding>

padding:设置内边距。

无填充带边框:

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

    <corners android:radius="10dp"></corners>


    <padding android:bottom="12dp"
        android:left="12dp"
        android:right="12dp"
        android:top="12dp"></padding>

    <stroke android:width="5dp"
         android:color="@color/colorAccent"></stroke>


</shape>

stroke
android:width:边框大小
android:color:边框颜色

渐变:

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

    <solid android:color="@color/colorPrimary"></solid>

    <padding android:bottom="12dp"
        android:left="12dp"
        android:right="12dp"
        android:top="12dp"></padding>

    <!--angle 渐变角度,0:左到右;90:下到上;180:右到左;270:上到下-->
    <gradient android:startColor="@android:color/white"
        android:endColor="@android:color/black"
        android:angle="0"></gradient>
</shape>

gradient:
android:startColor:渐变起始颜色
android:endColor:渐变结束颜色
android:angle:渐变角度:0:左到右;90:下到上;180:右到左;270:上到下

椭圆(oval)

一般用来画圆。

纯色的圆:

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

    <solid android:color="@color/colorPrimary"></solid>

    <size android:height="100dp"
        android:width="100dp"></size>

</shape>

size的height和width设置为一样大小就是一个圆了。
然后直接使用solid填充颜色即可。

渐变效果:

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

    <size android:height="100dp"
        android:width="100dp"></size>

    <gradient android:centerX="0.5"
        android:centerY="0.5"
        android:type="sweep"
        android:startColor="@color/colorPrimary"
        android:endColor="@color/colorAccent"></gradient>
</shape>

android:centerX:表示渐变的X轴起始位置,范围0-1,0.5表示圆心。
android:centerY:表示渐变的Y轴起始位置,范围0-1,0.5表示圆心。
android:type:渐变类型,有三种
分别是:
linear 线性渐变,默认的渐变类型
radial 放射渐变,设置该项时,android:gradientRadius也必须设置
sweep 扫描性渐变

线(line)

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

    <stroke
        android:width="1dp"
         android:color="@color/colorAccent"
         android:dashGap="3dp"
         android:dashWidth="4dp"></stroke>

    <size android:height="3dp"></size>
</shape>

线是居中显示的。
android:width:填充颜色的高度
android:dashGap:虚线间距宽度
android:dashWidth:虚线宽度
<size android:height="3dp"></size>:line的高度,size大小必须大于android:width

圆环(ring)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:useLevel="false"
    android:thickness="10dp">
    <!--useLevel需要设置为false-->

    <solid android:color="@color/colorAccent"></solid>


</shape>

android:thickness:圆环宽度

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:useLevel="false"
    android:thickness="10dp">
    <!--useLevel需要设置为false-->

    <solid android:color="@color/colorAccent"></solid>

    <gradient android:startColor="@color/colorAccent"
        android:endColor="@color/colorPrimary"
        android:type="sweep"></gradient>

</shape>

以上只是简单的介绍了一下shape的用户,里面有很多属性还没有用到,需要大家自己去实践一下,写出来看到效果才能更好的理解。



作者:猿圆猿
链接:https://www.jianshu.com/p/ef734937b521
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

猜你喜欢

转载自blog.csdn.net/l6666_6666/article/details/79973512