android开发之shape详解

很多时候,使用shape能够实现的效果,你用一张图片也能够实现,但问题是一张图片无论你怎么压缩,它都不可能比一个xml文件小,因此,为了获得一个高性能的手机App,我们在开发中应该遵循这样一个原则:能够用shape实现的效果尽量不使用图片来实现。

今天我们就一起来看看shape的使用。

首先,使用shape画的图形,这个xml文件的根节点是shape,如下:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle|oval|line|ring" >
<shape>

shape取值有四种,可以是rectangle(长方形),oval(椭圆),line(线条),ring(圆环),如果设置的话默认是长方形,只有当我们要画的图形是ring的时候,下面这几个属性才会生效:

  1. android:innerRadius:内环的半径。
  2. android:innerRadiusRatio:内环的比例,比如这个值为2,那么内环的半径就为环半径除以2,如果设置了第一个属性,则这个属性不起作用。
  3. android:thickness:环的厚度。
  4. android:thicknessRatio:环的厚度比例,比如这个值为2,那么环的厚度就为环半径除以2,如果设置了第三个属性,则这个属性不起作用。
  5. android:useLevel:只有当我们的shape使用在LevelListDrawable中的时候,这个值为true,否则为false。

以上是shape节点,在shape节点中我们还可以定义其他的节点:

圆角:

<corners
android:radius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
/>

android:radius表示长方形四个角的半径,当然也可以每个角单独设定,后面单独设定的圆角半径会覆盖android:radius。

渐变:

    <gradient
android:angle="90"
android:centerColor="#9ACD32"
android:endColor="#9AC0CD"
android:startColor="#9AFF9A"
android:type="linear"
android:useLevel="false" />
  1. android:angle="90"表示渐变的起始位置,这个值必须为45的倍数,包括0,0表示从左往右渐变,逆时针旋转,依次是45,90,135.....,90表示从下往上渐变,270表示从上往下渐变,剩下的大家依次去推理。
  2. android:startColor="#9AFF9A",表示渐变的起始颜色
  3. android:centerColor="#9ACD32"表示渐变的过渡颜色
  4. android:endColor="#9AC0CD"表示渐变的结束颜色
  5. type表示渐变的类型,有三种,分别是linear(线性变化),radial(辐射渐变)以及sweep(扫描渐变)
  6. 当type为radial时,我们要设置android:gradientRadius="",这个表示渐变的半径(线性渐变和扫描渐变不需要设置)

填充:

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

这个比较简单,不多说。

描边:

<stroke
android:width="1dp"
android:color="#FFFF00"
android:dashWidth="15dp"
android:dashGap="5dp"
/>

  1. android:dashWidth表示虚线的宽度
  2. android:dashGap表示虚线之间的间隔
  3. 以上两个属性如果不设置则为实线

大小:

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

这个表示该shape的大小,默认情况下,shape的大小与它所在的容器大小成正比。如果我们在ImageView中使用这个shape,那么可以通过android:scaleType="center"属性来限制这种缩放。

当然,还有一种padding,这和我们在xml文件中用的一样,我这里就不多说了。

最后,基于以上几种特性,我做了以下几种效果供大家参考。

android开发之shape详解

示例效果代码下载https://github.com/lenve/shape

版权声明:本文为博主原创文章,未经博主允许不得转载。若有错误地方,还望批评指正,不胜感激。

上一篇:Gazebo機器人仿真學習探索筆記(一)安裝與使用


下一篇:5.Hystrix-服务降级