Android Drawable - Shape Drawable使用详解(附图)

TIPS

 

  • shape图形 –简单介绍
  • shape图形 –如何画?
  • shape图形 –参数详细解析
  • shape图形 –如何用?
  • shape图形 –实际开发应用场景
  • shape图形简单介绍

    用xml实现一些形状图形, 或则颜色渐变效果, 相比PNG图片, 占用空间更小; 相比自定义View, 实现起来更加简单


    怎么画?

    在res/drawable/目录下建一个XML资源文件 
    Shape图片语法相对复杂, 下面是一个总结性的注释, 涵盖了大部分的参数,属性, 建议先跳过这段, 回头再看

    [java]  view plain
    1. "1.0" encoding="utf-8"?>  
    2.   
    3.   
    4.   
    5.   
    6.     xmlns:android="http://schemas.android.com/apk/res/android"  
    7.     android:shape="rectangle">  
    8.   
    9.       
    10.       
    11.       
    12.       
    13.       
    14.       
    15.     
    16.         android:bottomLeftRadius="5dip"  
    17.         android:bottomRightRadius="5dip"  
    18.         android:radius="5dip"  
    19.         android:topLeftRadius="5dip"  
    20.         android:topRightRadius="5dip"/>  
    21.   
    22.       
    23.       
    24.       
    25.       
    26.       
    27.       
    28.       
    29.       
    30.       
    31.     
    32.         android:angle="0"  
    33.         android:centerColor="#000"  
    34.         android:centerX="0.5"  
    35.         android:centerY="0.5"  
    36.         android:endColor="#FFF"  
    37.         android:gradientRadius="20dip"  
    38.         android:startColor="#000"  
    39.         android:type="linear"  
    40.         android:useLevel="true"/>  
    41.   
    42.       
    43.     
    44.         android:bottom="5dip"  
    45.         android:left="5dip"  
    46.         android:right="5dip"  
    47.         android:top="15dip"/>  
    48.   
    49.       
    50.     
    51.         android:width="50dip"  
    52.         android:height="10dip"/>  
    53.   
    54.       
    55.       
    56.     
    57.         android:color="@android:color/white"/>  
    58.   
    59.       
    60.       
    61.       
    62.       
    63.       
    64.       
    65.     
    66.         android:width="5dip"  
    67.         android:color="#0000FF"  
    68.         android:dashGap="2dip"  
    69.         android:dashWidth="1dip"/>  
    70.   

  • shape图形参数详细解析

    • shape 图形形状
    • corners 圆角标签
    • gradient 阶梯渐变标签
    • padding 边距标签
    • size 大小标签
    • solid 背景标签
    • stroke 边框标签

    shape图形的形状, 一共四种形状.

    • 1.rectangle 长方形/默认是长方形
    • 2.oval 椭圆
    • 3.line 线
    • 4.ring 环形
    • 这里写图片描述
      布局代码如下:


  • [java]  view plain
    1. "1.0" encoding="utf-8"?>  
    2. "http://schemas.android.com/apk/res/android"  
    3.               android:layout_width="match_parent"  
    4.               android:layout_height="match_parent"  
    5.               android:background="@android:color/white"  
    6.               android:orientation="vertical">  
    7.   
    8.       
    9.     
    10.         android:layout_width="match_parent"  
    11.         android:layout_height="100dip"  
    12.         android:background="@drawable/shape_rectangle"  
    13.         android:text="Hello Shape"/>  
    14.   
    15.       
    16.     
    17.         android:layout_width="match_parent"  
    18.         android:layout_height="100dip"  
    19.         android:background="@drawable/shape_oval"  
    20.         android:text="Hello Shape"/>  
    21.   
    22.       
    23.     
    24.         android:layout_width="match_parent"  
    25.         android:layout_height="100dip"  
    26.         android:background="@drawable/shape_line"  
    27.         android:text="Hello Shape"/>  
    28.   
    29.       
    30.     
    31.         android:layout_width="match_parent"  
    32.         android:layout_height="100dip"  
    33.         android:src="@drawable/shape_line"/>  
    34.   
    35.       
    36.     
    37.         android:layout_width="match_parent"  
    38.         android:layout_height="100dip"  
    39.         android:background="@drawable/shape_ring"  
    40.         android:text="Hello Shape"/>  
    41.   
    shape_rectangle.xml
  • [java]  view plain
    1. "color:#666666;">"1.0" encoding="utf-8"?>  
    2. "http://schemas.android.com/apk/res/android"  
    3.        android:shape="rectangle">  
    4.          
    5.     "#33000000"/>  
    6.          
    7.   

    shape_oval.xml
  • [java]  view plain
    1. "color:#666666;">"1.0" encoding="utf-8"?>  
    2. "http://schemas.android.com/apk/res/android"  
    3.        android:shape="oval">  
    4.     "#00ffff"/>  
    5.   

    shape_line.xml
    [java]  view plain
    1. "color:#666666;">"1.0" encoding="utf-8"?>  
    2. "http://schemas.android.com/apk/res/android"  
    3.        android:shape="line">  
    4.       
    5.     "#33000000"/>  
    6.     
    7.         android:width="99dip"  
    8.         android:color="#ff0000"/>  
    9.     
    10.         android:width="500dip"  
    11.         android:height="300dip"/>  
    12.   
    line形状下, solid标签下的color会无效, 
    需要为它设置stroke标签, stroke标签中: stroke标签中如果不指定color的颜色, 则默认是黑色, 
    需要指定width, 如果width如果大于控件的layout_height还无法显示? 背景也无法拉伸值整个控件? 
    用在background的时候, shape图片会被拉伸, 
    用在src的时候会按你指定的size大小去显示, 如果为指定size, 会和background一样效果. 
    还有上述几个疑问, 但没打算深究, 如果你知道, 请告诉我。
  • shape_ring.xml
    [java]  view plain
    1. "color:#666666;">"1.0" encoding="utf-8"?>  
    2. "http://schemas.android.com/apk/res/android"  
    3.        android:innerRadius="10dip"  
    4.        android:innerRadiusRatio="2"  
    5.        android:shape="ring"  
    6.        android:thickness="50dip"  
    7.        android:thicknessRatio="3"  
    8.        android:useLevel="false">  
    9.     "#FF4081"/>  
    10.   

    ring形状下, 有几个特殊的属性:

    • innerRadius 中间圆圈的半径;
    • innerRadiusRatio 如果和innerRadius同时存在是, innerRadiusRatio无效, 是一个比率: shape图片宽度/内半径, 默认是9;
    • thickness 圆环的厚度, 整的shape图片的半径减去内圆的半径;
    • thicknessRatio 同样如果和thickness同时存在是, thicknessRatio无效, 也是一个比率: shape图片宽度/圆环厚度, 默认值是3;
    • useLevel 一般使用false, 否则无法显示之类

    可能看到这里还是不会用, 下面就用最常用的rectangle长方形做详细的讲解:

    corners标签:

    作用: 指定长方形四角的圆滑度, 圆角矩形就是用这个corners标签办到

    • bottomLeftRadius 左下角
    • bottomRightRadius 右下角
    • topLeftRadius 左上角
    • topRightRadius 右上角
    • radius 是四个角, 设置了这个就不需要设置上面的四个了, 但是它的优先级比较低, 会被上面的设置所覆盖
    这里写图片描述

shape_rectangle.xml文件

 

 

[java]  view plain
  1. "color:#666666;">"1.0" encoding="utf-8"?>  
  2. "http://schemas.android.com/apk/res/android"  
  3.        android:shape="rectangle">  
  4.     
  5.         android:bottomLeftRadius="20dip"  
  6.         android:bottomRightRadius="20dip"  
  7.         android:radius="20dip"  
  8.         android:topLeftRadius="20dip"  
  9.         android:topRightRadius="20dip"/>  
  10.     "#FF4081"/>  
  11.   

 


gradient标签:

作用: 让图形有颜色的渐变效果

  • angle 是颜色变换的角度, 默认是0, 取值必须是45的倍数. 0: 是颜色从左边到右边, 90: 是颜色从底部到顶部,
  • startColor centerColor endColor : 开始的颜色, 中间的颜色, 结束的颜色
  • centerX centerY是指定位置坐标, 取值是0.0f ~ 1.0f 之间, 例如: android:centerX=”0.5f” 表示X方向的中间位置
  • type 颜色渐变的类型, 取值类型有三种: linear/radial/sweep 
    • linear 线性渐变, 就是颜色从左往右, 从下往上
    • radial 放射渐变, 例如: 从一个圆中心到圆的边缘变化
    • sweep 扫描式渐变, 类似雷达扫描的那种图形
  • gradientRadius 和android:type=”radial”一起连用, shape图片的半径

这里写图片描述

XML布局代码

[java]  view plain
  1. "color:#666666;">"1.0" encoding="utf-8"?>  
  2. "http://schemas.android.com/apk/res/android"  
  3.               android:layout_width="match_parent"  
  4.               android:layout_height="match_parent"  
  5.               android:background="@android:color/white"  
  6.               android:orientation="vertical">  
  7.   
  8.       
  9.     
  10.         android:layout_width="match_parent"  
  11.         android:layout_height="100dip"  
  12.         android:background="@drawable/shape_rectangle_linear"  
  13.         android:text="linear"/>  
  14.   
  15.       
  16.     
  17.         android:layout_width="match_parent"  
  18.         android:layout_height="100dip"  
  19.         android:background="@drawable/shape_rectangle_radial"  
  20.         android:text="radial"/>  
  21.   
  22.       
  23.     
  24.         android:layout_width="match_parent"  
  25.         android:layout_height="100dip"  
  26.         android:background="@drawable/shape_rectangle_sweep"  
  27.         android:text="sweep"/>  
  28.   


shape_rectangle_linear.xml文件

 

[java]  view plain
  1. "color:#666666;">"1.0" encoding="utf-8"?>  
  2. "http://schemas.android.com/apk/res/android"  
  3.        android:shape="rectangle">  
  4.     "20dip"/>  
  5.     
  6.         android:angle="0"  
  7.         android:centerColor="#FF4081"  
  8.         android:centerX="0.5"  
  9.         android:centerY="0.5"  
  10.         android:endColor="#000000"  
  11.         android:startColor="#FFFFFF"  
  12.         android:type="linear"  
  13.         android:useLevel="false"/>  
  14.       
  15.       
  16.   


shape_rectangle_radial.xml文件

 

 

[java]  view plain
  1. "color:#666666;">"1.0" encoding="utf-8"?>  
  2. "http://schemas.android.com/apk/res/android"  
  3.        android:shape="rectangle">  
  4.     "20dip"/>  
  5.     
  6.         android:angle="0"  
  7.         android:centerColor="#FF4081"  
  8.         android:centerX="0.5"  
  9.         android:centerY="0.5"  
  10.         android:endColor="#FFFFFF"  
  11.         android:gradientRadius="150dip"  
  12.         android:startColor="#000000"  
  13.         android:type="radial"  
  14.         android:useLevel="false"/>  
  15.       
  16.   

shape_rectangle_sweep.xml文件

 

 

[java]  view plain
  1. "color:#666666;">"1.0" encoding="utf-8"?>  
  2. "http://schemas.android.com/apk/res/android"  
  3.        android:shape="rectangle">  
  4.     "20dip"/>  
  5.     
  6.         android:angle="0"  
  7.         android:centerColor="#FF4081"  
  8.         android:centerX="0.5"  
  9.         android:centerY="0.5"  
  10.         android:endColor="#FFFFFF"  
  11.         android:startColor="#000000"  
  12.         android:type="sweep"  
  13.         android:useLevel="false"/>  
  14.       
  15.       
  16.   

 

PS: 
- solid标签会和gradient标签冲突, 会覆盖gradient配置的颜色; 
- gradient标签中的android:gradientRadius属性和android:type=”radial”一起连用, 配置shape图片的半径 
- centerX centerY是指定位置坐标, 取值是0.0f ~ 1.0f 之间, 例如: android:centerX=”0.5f” 表示X方向的中间位置, 这里就不做演示了

padding标签

作用: 设置控件中(文字)内容与shape图片边框的距离

  • bottom 底部距离
  • left 左边距离
  • right 右边距离
  • top 听不距离

这里写图片描述 
XML布局代码:

 

[java]  view plain
  1. "1.0" encoding="utf-8"?>  
  2. "http://schemas.android.com/apk/res/android"  
  3.               android:layout_width="match_parent"  
  4.               android:layout_height="match_parent"  
  5.               android:background="@android:color/white"  
  6.               android:orientation="vertical">  
  7.       
  8.     
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="wrap_content"  
  11.         android:layout_marginTop="30dip"  
  12.         android:background="@drawable/shape_rectangle"  
  13.         android:text="这里是没有设置padding大小的shape的图片"/>  
  14.   
  15.       
  16.     
  17.         android:layout_width="match_parent"  
  18.         android:layout_height="wrap_content"  
  19.         android:layout_marginTop="30dip"  
  20.         android:background="@drawable/shape_rectangle_padding"  
  21.         android:text="这里是设置padding大小为30dip的shape的图片"/>  
  22.   
  23.   
  24. shape_rectangle.xml文件  
  25.   
  26. "1.0" encoding="utf-8"?>  
  27. "http://schemas.android.com/apk/res/android"  
  28.        android:shape="rectangle">  
  29.     "20dip"/>  
  30.     "#00ff00"/>  
  31.   
  32.   
  33. shape_rectangle_padding.xml文件  
  34.   
  35. "1.0" encoding="utf-8"?>  
  36. "http://schemas.android.com/apk/res/android"  
  37.        android:shape="rectangle">  
  38.     "20dip"/>  
  39.     "#FF4081"/>  
  40.     
  41.         android:bottom="30dip"  
  42.         android:left="30dip"  
  43.         android:right="30dip"  
  44.         android:top="30dip"/>  
  45.   
  46.   
  47. size标签  
  48.   
  49. 作用: 指定图片的大小   
  50. 使用drawable有两种方式, 一种是控件的background属性; 一种是控件的src属性;   
  51. 两种方式在使用size方式的时候出现了不同的结果  
  52.   
  53. 当用background属性去使用drawable的时候, size标签无效, shape图片大小会随着控件的大小去放大或缩小  
  54. 当用src属性去使用drawable的时候. 有两种情况:   
  55. 一, 如果shape图片大小比控件指定大小小, shape图片会显示在控件的中间;  
  56. 二, 如果shape图片大小比控件的大小大时, shape图片的宽高会等比例缩放, 一直压缩到宽或者高能放进控件内, 并放置在控件的中间, 如下图所示:  
  57. 这里写图片描述   
  58. XML布局代码:  
  59.   
  60. "1.0" encoding="utf-8"?>  
  61. "http://schemas.android.com/apk/res/android"  
  62.               android:layout_width="match_parent"  
  63.               android:layout_height="match_parent"  
  64.               android:background="@android:color/white"  
  65.               android:orientation="vertical">  
  66.   
  67.       
  68.     
  69.         android:layout_width="match_parent"  
  70.         android:layout_height="100dip"  
  71.         android:background="@drawable/shape_rectangle_size"  
  72.         android:text="这里是用background属性去设置图片"/>  
  73.   
  74.     
  75.         android:layout_width="match_parent"  
  76.         android:layout_height="wrap_content"  
  77.         android:layout_marginTop="30dip"  
  78.         android:text="这里是用src属性去设置图片  宽度是200dip 高度是100dip"/>  
  79.   
  80.       
  81.     
  82.         android:layout_width="match_parent"  
  83.         android:layout_height="100dip"  
  84.         android:background="#33000000"  
  85.         android:src="@drawable/shape_rectangle_size"/>  
  86.   
  87.     
  88.         android:layout_width="match_parent"  
  89.         android:layout_height="wrap_content"  
  90.         android:layout_marginTop="30dip"  
  91.         android:text="这里是用src属性去设置图片  宽度是500dip 高度是100dip"/>  
  92.   
  93.       
  94.     
  95.         android:layout_width="match_parent"  
  96.         android:layout_height="100dip"  
  97.         android:background="#33000000"  
  98.         android:src="@drawable/shape_rectangle_size_long"/>  
  99.   
  100.   
  101. shape_rectangle_size.xml文件  
  102.   
  103. "1.0" encoding="utf-8"?>  
  104. "http://schemas.android.com/apk/res/android"  
  105.        android:shape="rectangle">  
  106.     "20dip"/>  
  107.     "#00ff00"/>  
  108.     
  109.         android:width="200dip"  
  110.         android:height="100dp"/>  
  111.   
  112.   
  113. shape_rectangle_size_long.xml文件  
  114.   
  115. "1.0" encoding="utf-8"?>  
  116. "http://schemas.android.com/apk/res/android"  
  117.        android:shape="rectangle">  
  118.     "20dip"/>  
  119.     "#00ff00"/>  
  120.     
  121.         android:width="500dip"  
  122.         android:height="100dp"/>  
  123.   

 

 

PS: 用src去设置drawable处理起来会比较麻烦, 实际开发中其实也很少有人这么用

solid标签

给图片设置背景色. 上面已经用到了, 就不多说了, 
PS: 它和gradient标签是冲突的, solid标签会覆盖gradient标签配置的颜色 
我常用的用法, 在solid标签中的color属性配置颜色选择器selector.xml, 实现点击换色的点击效果

stroke标签

作用: 给shape图形设置边框, 设置边框的宽度, 颜色, 实现还是虚线, 以及虚线的间隔大小

  • width 边框线的宽度
  • color 边框线的颜色
  • 下面两个参数是设置虚线是需要用到的
  • dashGap 虚线间隔的长度
  • dashWidth 虚线中实线的长度

这里写图片描述 
XML布局代码

[java]  view plain
  1. "1.0" encoding="utf-8"?>  
  2. "http://schemas.android.com/apk/res/android"  
  3.               android:layout_width="match_parent"  
  4.               android:layout_height="match_parent"  
  5.               android:background="@android:color/white"  
  6.               android:orientation="vertical">  
  7.   
  8.     
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="100dip"  
  11.         android:layout_marginTop="30dip"  
  12.         android:background="@drawable/shape_rectangle_stroke"  
  13.         android:gravity="center"  
  14.         android:text="stroke标签"/>  
  15.   


shape_rectangle_stroke.xml布局文件

 

[java]  view plain
  1. "1.0" encoding="utf-8"?>  
  2. "http://schemas.android.com/apk/res/android"  
  3.        android:shape="rectangle">  
  4.     "20dip"/>  
  5.     "#00ff00"/>  
  6.     
  7.         android:width="5dip"  
  8.         android:color="#FF4081"  
  9.         android:dashGap="5dip"  
  10.         android:dashWidth="10dip"/>  
  11.   

 

现在在去看那个总结图是不是不一样呢?

shape图形实际开发应用场景

我想说, shape图形真的非常非常常见

场景一: 显示圆角的图形

这里写图片描述

用shape图片设置background实现起来非常简单 
只需要设置形状,背景色,四个角的圆角度数,边框的宽度, 以及边框的颜色

这里写图片描述

布局XML文件

[java]  view plain
  1. "code" class="java">"1.0" encoding="utf-8"?>  
  2. "http://schemas.android.com/apk/res/android"  
  3.               android:layout_width="match_parent"  
  4.               android:layout_height="match_parent"  
  5.               android:background="#22000000"  
  6.               android:orientation="vertical">  
  7.   
  8.     
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="48dip"  
  11.         android:layout_marginLeft="10dip"  
  12.         android:layout_marginRight="10dip"  
  13.         android:layout_marginTop="10dip"  
  14.         android:background="@drawable/shape_test_top"/>  
  15.   
  16.     
  17.         android:layout_width="match_parent"  
  18.         android:layout_height="48dip"  
  19.         android:layout_marginLeft="10dip"  
  20.         android:layout_marginRight="10dip"  
  21.         android:background="@drawable/shape_test_middle"/>  
  22.   
  23.     
  24.         android:layout_width="match_parent"  
  25.         android:layout_height="48dip"  
  26.         android:layout_marginLeft="10dip"  
  27.         android:layout_marginRight="10dip"  
  28.         android:background="@drawable/shape_test_bottom"/>  
  29.   
  30.     
  31.         android:layout_width="match_parent"  
  32.         android:layout_height="48dip"  
  33.         android:layout_marginLeft="10dip"  
  34.         android:layout_marginRight="10dip"  
  35.         android:layout_marginTop="10dip"  
  36.         android:background="@drawable/shape_test_single"/>  
  37.   



 
   

 

shape_test_top.xml

[java]  view plain
  1. "1.0" encoding="utf-8"?>  
  2.     xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:shape="rectangle">  
  4.   
  5.     
  6.         android:topLeftRadius="10dip"  
  7.         android:topRightRadius="10dip"/>  
  8.   
  9.       
  10.     "@android:color/white"/>  
  11.   
  12.       
  13.     
  14.         android:width="0.5dip"  
  15.         android:color="#44000000"/>  
  16.   

shape_test_middle.xml

[java]  view plain
  1. "1.0" encoding="utf-8"?>  
  2.     xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:shape="rectangle">  
  4.   
  5.       
  6.     "@android:color/white"/>  
  7.   
  8.       
  9.     
  10.         android:width="0.5dip"  
  11.         android:color="#44000000"/>  
  12.   


shape_test_bottom.xml

 

 

 

[java]  view plain
  1. "1.0" encoding="utf-8"?>  
  2.     xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:shape="rectangle">  
  4.   
  5.     
  6.         android:bottomLeftRadius="10dip"  
  7.         android:bottomRightRadius="10dip"/>  
  8.   
  9.       
  10.     "@android:color/white"/>  
  11.   
  12.       
  13.     
  14.         android:width="0.5dip"  
  15.         android:color="#44000000"/>  
  16.   



场景二:显示消息的数目

 

这里写图片描述

直接上图: 
这里写图片描述

布局XML代码

[java]  view plain
  1. "1.0" encoding="utf-8"?>  
  2. "http://schemas.android.com/apk/res/android"  
  3.               android:layout_width="match_parent"  
  4.               android:layout_height="match_parent"  
  5.               android:background="#22000000"  
  6.               android:orientation="vertical">  
  7.   
  8.     
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="wrap_content"  
  11.         android:layout_margin="20dip"  
  12.         android:background="@drawable/shape_test_circle"  
  13.         android:text="1"  
  14.         android:textColor="@android:color/white"/>  
  15.   
  16.     
  17.         android:layout_width="wrap_content"  
  18.         android:layout_height="wrap_content"  
  19.         android:layout_margin="20dip"  
  20.         android:background="@drawable/shape_test_circle"  
  21.         android:text="99+"  
  22.         android:textColor="@android:color/white"/>  
  23.   


shape_test_circle.xml

 

[java]  view plain
  1. "1.0" encoding="utf-8"?>  
  2. "http://schemas.android.com/apk/res/android"  
  3.     android:shape="rectangle">  
  4.   
  5.       
  6.     "10dip"/>  
  7.   
  8.       
  9.     
  10.         android:bottom="1dip"  
  11.         android:left="3dip"  
  12.         android:right="3dip"  
  13.         android:top="1dip"/>  
  14.   
  15.       
  16.     "@android:color/holo_red_light"/>  
  17.   

 

最后这种样式是开发中用到比较多的情况,就是给按钮设置背景

 

 

下面是样式代码:

 

[java]  view plain
    1. "1.0" encoding="utf-8"?>  
    2. "http://schemas.android.com/apk/res/android"  
    3.     android:shape="rectangle">  
    4.      
    5.         android:bottomLeftRadius="15dip"  
    6.         android:bottomRightRadius="15dip"  
    7.         android:topLeftRadius="15dip"  
    8.         android:topRightRadius="15dip"/>  
    9.      
    10.         android:color="#01BAFD"/>  //这个是底色颜色   
    11.      
    12.    "@color/white"  
    13.        android:width="1dip"  
    14.        />  
    15.      
    16.   
    17.   

转载于:https://www.cnblogs.com/itgoyo/p/5855400.html

你可能感兴趣的:(Android Drawable - Shape Drawable使用详解(附图))