Android shape

Shape介绍

Shape是什么？

Shape是Android图形定义标签，在res/drawable/xx.xml里，通过xml代码用于定义一个基本的几何图形（如矩形、圆形、线条等）。

能实现的效果如下：

 

 

4种图形，3种渐变色类型

 

Shape有哪些属性？

Android:shape指定定义哪种几何图形

rectangle：矩形

oval：椭圆形

line：直线

ring：环形

 

solid：实心，就是填充的意思
android:color指定填充的颜色

gradient：渐变
android:startColor、android:centerColor、android:endColor分别为起始、中间、结束颜色。

android:angle是渐变角度，必须为45的整数倍。
android:type渐变类型

linear 线性渐变，这是默认值

radial 放射性渐变，以开始色为中心，需指定半径android:gradientRadius="50"

sweep  扫描线式渐变

stroke：描边
android:width="2dp" 描边的宽度，android:color 描边的颜色。
我们还可以把描边弄成虚线的形式，设置方式为：
android:dashWidth="5dp" 
android:dashGap="3dp"
其中android:dashWidth表示'-'这样一个横线的宽度，android:dashGap表示之间隔开的距离。

corners：圆角
android:radius为角的弧度，值越大角越圆。
我们还可以把四个角设定成不同的角度，方法为：
<corners 
  android:topRightRadius="20dp"    右上角
  android:bottomRightRadius="0dp"   右下角
  android:topLeftRadius="1dp"      左上角
  android:bottomLeftRadius="20dp"   左下角
 />


padding：间隔

这个就不用多说了，XML布局文件中经常用到。

Shape使用实例

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" >...</shape>

 

 

矩形边框

    <stroke

        android:width="1dp"

        android:color="#4A8DE6" />

 

 

圆角边框

    <stroke

        android:width="1dp"

        android:color="#4A8DE6" />

    <corners

        android:bottomLeftRadius="@dimen/radius"

        android:bottomRightRadius="0dp"

        android:topLeftRadius="@dimen/radius"

        android:topRightRadius="0dp" />

 

 

背景色填充圆角矩形

    <solid android:color="#F16F0E" />

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

 

 

 

圆形放射性渐变

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="oval">  // 椭圆形   

    <gradient

        android:centerColor="#EFF10E"  // 可以没有

        android:endColor="#92F10E"

        android:startColor="#FF0000"

        android:gradientRadius="60"

        android:type="radial" />

    <stroke

        android:width="1dp"

        android:color="#4A8DE6" />

 

 

矩形虚线边框线性渐变

    <gradient

        android:centerColor="#EFF10E"

        android:endColor="#92F10E"

        android:startColor="#F1550E"

        android:type="linear" />

    <stroke

        android:width="1dp"

        android:color="#4A8DE6"

        android:dashWidth="4dp"

        android:dashGap="2dp" />

    <corners android:radius="@dimen/radius" />

 

 

 

线性渐变方向改变

    <gradient

        android:endColor="#3E1C03"

        android:startColor="#F16F0E"

        android:angle="270"  // 线性渐变的方向

        android:type="linear" />

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

 

 

 

扫描线状渐变效果

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="oval" >  // 椭圆形

    <gradient

        android:endColor="#050EFB"

        android:startColor="#D0D2F9"

        android:type="sweep" />

    <stroke

        android:width="1dp"

        android:color="#4A8DE6" />

 

 

 

环状图形

<shape xmlns:android="http://schemas.android.com/apk/res/android"

       android:shape="ring"  // 环形

       android:innerRadius="20dp"  // 内圆半径

       android:thickness="13dp"  // 环厚度

       android:useLevel="false">

    <stroke android:width="1dp"  android:color="#FF0000" />  // 红色描边

    <solid android:color="#00FF00"/>  // 绿色填充

</shape>

 

 

 

虚线效果

<!-- 要想看到虚线效果，需要在AndroidManifest.xml里对Activity关闭硬件加速，

      android:hardwareAccelerated="false" -->

    <stroke

        android:dashGap="2dp"  // 虚部宽度

        android:dashWidth="2dp"  // 实部宽度

        android:width="1dp"  // 线宽

        android:color="#4A8DE6" />