Android shape属性

前言

我认为小伙伴可以直接去谷歌官方文档查看，强调一下：

官方文档是中文！
官方文档是中文！！
官方文档是中文！！！

准备

我们先把整体的属性列在下面：

<?xml version="1.0" encoding="utf-8"?>
<shape
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape=["rectangle" | "oval" | "line" | "ring"] >
   <corners
       android:radius="integer"
       android:topLeftRadius="integer"
       android:topRightRadius="integer"
       android:bottomLeftRadius="integer"
       android:bottomRightRadius="integer" />
   <gradient
       android:angle="integer"
       android:centerX="float"
       android:centerY="float"
       android:centerColor="integer"
       android:endColor="color"
       android:gradientRadius="integer"
       android:startColor="color"
       android:type=["linear" | "radial" | "sweep"]
       android:useLevel=["true" | "false"] />
   <padding
       android:left="integer"
       android:top="integer"
       android:right="integer"
       android:bottom="integer" />
   <size
       android:width="integer"
       android:height="integer" />
   <solid
       android:color="color" />
   <stroke
       android:width="integer"
       android:color="color"
       android:dashWidth="integer"
       android:dashGap="integer" />
</shape>

你所疑惑的也就这么点东西，也就这些属性。看明白后你想要的都能得到满足。哈哈！！
上面的还是看不懂没关系，我们来一张图：

shape.png

看到这个图，我认为你理解下面的内容更加容易。

实战

1.线（实线+虚线）

实线虚线图

实线：shape_line_solid.xml

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

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

</shape>

虚线：shape_line_dashed.xml

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

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

</shape>

注意 ：
在使用的时候，控件的高度要比线的宽度大。要不不能显示。

如果需要竖线呢怎么处理?? 上面的实线和虚线都是横的！！

竖线：
1.控件旋转90度。
2.方案来源于：骑马倚斜桥w的简书文章
具体的文件：shape_line_vertical_dashed.xml

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

    <item
        android:left="-300dp"
        android:right="-300dp">
        <rotate
            android:fromDegrees="90"
            android:visible="true">
            <shape android:shape="line">
                <stroke
                    android:width="1dp"
                    android:color="@color/colorAccent"
                    android:dashWidth="6dp"
                    android:dashGap="2dp" />
            </shape>
        </rotate>
    </item>
</layer-list>

2.矩形（边框+填充+圆角）

矩形

圆角实线矩形-边框-填充: shape_rect_solid_round.xml

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

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

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

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

</shape>

圆角虚线矩形-边框-填充：shape_rect_dashed_solid_round.xml

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

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

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

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

</shape>

3.渐变效果（矩形为例）

渐变效果

横向渐变: rect_gradient_linear_horizon.xml

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

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

    <stroke
        android:width="1px"
        android:color="#ffff00ff" />

    <!-- 调整angle实现水平渐变，垂直渐变或者对角渐变 -->
    <gradient
        android:angle="0"
        android:centerColor="#fff"
        android:centerX="0.5"
        android:centerY="0.5"
        android:endColor="#ee3ffe"
        android:startColor="#ff00ff00"
        android:type="linear" />
</shape>

竖向渐变: rect_gradient_linear_vertical.xml

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

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

    <stroke
        android:width="1px"
        android:color="#ffff00ff" />

    <!-- 调整angle实现水平渐变，垂直渐变或者对角渐变 -->
    <gradient
        android:angle="-45"
        android:centerColor="#fff"
        android:centerX="0.5"
        android:centerY="0.5"
        android:endColor="#ee3ffe"
        android:startColor="#ff00ff00"
        android:type="linear" />
</shape>

对角线渐变: rect_gradient_linear_diagonal.xml

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

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

   <stroke
       android:width="1px"
       android:color="#ffff00ff" />

   <!-- 调整angle实现水平渐变，垂直渐变或者对角渐变 -->
   <gradient
       android:angle="45"
       android:centerColor="#fff"
       android:centerX="0.5"
       android:centerY="0.5"
       android:endColor="#ee3ffe"
       android:startColor="#ff00ff00"
       android:type="linear" />
</shape>

放射性渐变: rect_gradient_radial.xml

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

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

    <stroke
        android:width="1px"
        android:color="#ffff00ff" />

    <!-- gradientRadius渐变的半径，只有当渐变类型为radial时才能使用 -->
    <gradient
        android:centerColor="#fff"
        android:centerX="0.5"
        android:centerY="0.5"
        android:endColor="#ee3ffe"
        android:startColor="#ff00ff00"
        android:gradientRadius="20dp"
        android:type="radial" />
</shape>

扫描式渐变: rect_gradient_sweep.xml

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

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

    <stroke
        android:width="1px"
        android:color="#ffff00ff" />

    <gradient
        android:centerColor="#fff"
        android:centerX="0.5"
        android:centerY="0.5"
        android:endColor="#ee3ffe"
        android:startColor="#ff00ff00"
        android:type="sweep" />
</shape>

4.圆和椭圆（边框+填充）

圆和椭圆

圆和椭圆： rect_circle.xml

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

    <stroke
        android:width="1px"
        android:color="#ffff00" />
    <solid android:color="@color/colorPrimaryDark"/>
</shape>

椭圆的实现，View 的长和宽不是正方形，得到的就是椭圆了。

5. 圆环（边框+填充+渐变）

圆环

环内填充： shape_ring_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="10dp"
    android:shape="ring"
    android:thickness="20dp"
    android:useLevel="false">

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

</shape>

圆环边框：shape_ring_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="10dp"
    android:thickness="20dp"
    android:shape="ring"
    android:useLevel="false">

   <stroke android:color="@color/colorPrimaryDark"
       android:width="1dp"/>

</shape>

边框填充：shape_ring_fill_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="10dp"
    android:thickness="20dp"
    android:shape="ring"
    android:useLevel="false">

   <stroke android:color="@color/colorPrimaryDark"
       android:width="1dp"/>
    <solid android:color="@color/colorAccent"/>
</shape>

线性渐变：shape_ring_gradient_linear.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="10dp"
    android:thickness="20dp"
    android:useLevel="false">

    <gradient
        android:endColor="@color/colorPrimaryDark"
        android:startColor="@color/colorAccent"
        android:type="linear" />

</shape>

径向渐变：shape_ring_gradient_radial.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="10dp"
    android:thickness="20dp"
    android:useLevel="false">

    <gradient
        android:endColor="@color/colorPrimaryDark"
        android:startColor="@color/colorAccent"
        android:gradientRadius="30dp"
        android:type="radial" />

</shape>

扫描渐变：shape_ring_gradient_sweep.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="10dp"
    android:thickness="20dp"
    android:useLevel="false">

    <gradient
        android:endColor="@color/colorPrimaryDark"
        android:startColor="@color/colorAccent"
        android:gradientRadius="30dp"
        android:type="sweep" />
</shape>

总结

上面的内容看完，shape的属性和使用相信小伙伴们都应该掌握了吧！

参考链接：
Android中shape的用法详解
(易懂详细)Android样式开发之shape详细使用
Android XML shape 标签使用详解