Android Shape 笔记

学习来源 KEEGAN小钢,谢谢大神分享。

海洋景观

Shape 的作用

shape用于设定形状,可以在selectorlayout等里面使用。

  • 可以设定的形状有:rectangle ( 矩形 ),line ( 直线 ),ring ( 环形 ),oval ( 椭圆 )
  • 在selector中这么使用

    如下面代码中写的在没点击或者没有呗触摸的时候显示的是point1图片,触摸或者点击的时候显示的是设置的shape_bg_ring样式,在代码中这么设置即可:android:drawable="@drawable/shape_bg_ring,具体的样式代码在Shape的设定形状用法中实现。

1
2
3
4
5
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:drawable="@drawable/shape_bg_ring" />
<item android:state_enabled="false" android:drawable="@drawable/point1" />
</selector>
  • 在layout中这么使用

Viewbackground属性里设置我们写好的shape样式android:background="@drawable/shape_bg_oval_with_gradient"

1
2
3
4
5
6
7
8
<TextView
android:id="@+id/id_link"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/shape_bg_oval_with_gradient"
android:layout_alignParentBottom="true"
android:layout_marginBottom="16dp"
android:text="gogogogogo"/>

Shape 的设定形状的用法

  • rectangle

rectangle 定义的是矩形,它有以下属性:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
solid: 设置形状填充的颜色,只有android:color一个属性 android:color 填充的颜色

padding: 设置内容与形状边界的内间距,可分别设置左右上下的距离
android:left 左内间距
android:right 右内间距
android:top 上内间距
android:bottom 下内间距

gradient: 设置形状的渐变颜色,可以是线性渐变、辐射渐变、扫描性渐变
android:type 渐变的类型
linear 线性渐变,默认的渐变类型
radial 放射渐变,设置该项时,android:gradientRadius也必须设置
sweep 扫描性渐变
android:startColor 渐变开始的颜色
android:endColor 渐变结束的颜色
android:centerColor 渐变中间的颜色
android:angle 渐变的角度,线性渐变时才有效,必须是45的倍数,0表示从左到右,90表示从下到上
android:centerX 渐变中心的相对X坐标,放射渐变时才有效,在0.0到1.0之间,默认为0.5,表示在正中间
android:centerY 渐变中心的相对X坐标,放射渐变时才有效,在0.0到1.0之间,默认为0.5,表示在正中间
android:gradientRadius 渐变的半径,只有渐变类型为radial时才使用
android:useLevel 如果为true,则可在LevelListDrawable中使用

corners: 设置圆角,只适用于rectangle类型,可分别设置四个角不同半径的圆角,当设置的圆角半径很大时,比如200dp,就可变成弧形边了
android:radius 圆角半径,会被下面每个特定的圆角属性重写
android:topLeftRadius 左上角的半径
android:topRightRadius 右上角的半径
android:bottomLeftRadius 左下角的半径
android:bottomRightRadius 右下角的半径

stroke: 设置描边,可描成实线或虚线。
android:color 描边的颜色
android:width 描边的宽度
android:dashWidth 设置虚线时的横线长度
android:dashGap 设置虚线时的横线之间的距离
  • rectangle使用例子

    先在drawable目录下创建一个drawable文件shape_rectangle.xml,然后在View中设置给background属性就OK

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <?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"/>
    <!--设置内容区域距离边界的范围-->
    <padding android:bottom="10dp"
    android:top="10dp"
    android:left="5dp"
    android:right="5dp"/>
    <!--设置圆角,只适用于rectangle-->
    <corners android:radius="20dp"/>
    <!--设置描边 dashWidth 设置虚线时的横线长度 dashGap 设置虚线时的横线之间的距离-->
    <stroke android:width="2dp"
    android:dashGap="4dp"
    android:dashWidth="4dp"
    android:color="@color/colorAccent"/>
    </shape>
  • line

line主要用于画分割线,是通过stroke和size特性组合来实现的。

画线时,有几点特性必须要知道的:

  1. 只能画水平线,画不了竖线;
  2. 线的高度是通过strokeandroid:width属性设置的;
  3. sizeandroid:height属性定义的是整个形状区域的高度;
  4. sizeheight必须大于strokewidth,否则,线无法显示;
  5. 线在整个形状区域中是居中显示的;
  6. 线左右两边会留有空白间距,线越粗,空白越大;
  7. 引用虚线的view需要添加属性android:layerType,值设为”software”,否则显示不了虚线。
  • line 使用例子

也是需要先在drawable目录下创建xml文件,然后对对应的View设置即可。

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">

<stroke android:width="5dp"
android:color="@color/colorAccent"
android:dashGap="2dp"
android:dashWidth="5dp"/>
<!--整个形状区域的高度-->
<size android:height="10dp"/>
</shape>
  • ring 使用例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="utf-8"?>
<!--可以旋转的ring-->
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="1080.0">

<shape android:shape="ring"
android:innerRadius="5dp"
android:thicknessRatio="10"
android:useLevel="false">
<!--扫描渐变-->
<gradient android:endColor="@color/colorAccent"
android:startColor="@color/colorPrimary"
android:type="sweep"/>

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

首先,shape根元素有些属性只适用于ring类型,先过目下这些属性吧:

  • android:innerRadius 内环的半径
  • android:innerRadiusRatio 浮点型,以环的宽度比率来表示内环的半径,默认为3,表示内环半径为环的宽度除以3,该值会被android:innerRadius覆盖
  • android:thickness 环的厚度
  • android:thicknessRatio 浮点型,以环的宽度比率来表示环的厚度,默认为9,表示环的厚度为环的宽度除以9,该值会被android:thickness覆盖
  • android:useLevel 一般为false,否则可能环形无法显示,只有作为LevelListDrawable使用时才设为true
  • LevelListDrawable` ( 等级列表图片 ) 可参考Android Drawable Resource学习(六)、LevelListDrawable

LevelListDrawable对应的标签是标签,他表示的是一个Drawable集合。
集合里面的每一个item都有的Drawable都有一个对应的level,然后我们在代码中通过的View 的setLevel来设置不同的等级,等级的范围为0-10000(最小值和默认值都是0),然后根据不同的等级在level-list寻找不同的drawable来显示。作者:阿敏其人链接:http://www.jianshu.com/p/aa87c41182b7來源:简书著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • oval

oval用来画椭圆,而在实际应用中,更多是画正圆,比如消息提示,圆形按钮等

size:设置形状默认的大小,可设置宽度和高度

android:width 宽度

android:height 高度

  • oval 使用例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">

<padding android:bottom="10dp"
android:top="10dp"
android:left="5dp"
android:right="5dp"/>
<!--设置形状的大小-->
<size android:width="40dp"
android:height="40dp"/>
<!--注意,android:gradientRadius 渐变的半径,只有渐变类型为radial 放射渐变时才使用-->
<gradient android:startColor="@color/colorPrimary"
android:endColor="@color/colorAccent"
android:gradientRadius="40dp"
android:type="radial"/>
</shape>

总结

  1. 使用shape需要在drawable目录下创建drawable文件,在Viewbackground中使用
  2. rectangle 画矩形,line画直线,oval 画椭圆,ring画圆环
  3. 属性值有:padding形状边距,size形状大小,gradient渐变色,stroke设置描边,corners设置圆角,solid 设置形状填充的颜色
小额支持我写出更好的文章~