TIPS

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

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


    怎么画?

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

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <!--rectangle 长方形 /默认-->
    3. <!--oval 椭圆-->
    4. <!--line 线-->
    5. <!--ring 环形-->
    6. <shape
    7. xmlns:android="http://schemas.android.com/apk/res/android"
    8. android:shape="rectangle">
    9. <!--corners标签: 圆角-->
    10. <!--bottomLeftRadius 左下角-->
    11. <!--bottomRightRadius 右下角-->
    12. <!--topLeftRadius 左上角-->
    13. <!--topRightRadius 右上角-->
    14. <!--radius 是四个角, 设置了这个就不需要设置上面的四个了, PS:它的优先级比较低, 会被其他参数覆盖-->
    15. <corners
    16. android:bottomLeftRadius="5dip"
    17. android:bottomRightRadius="5dip"
    18. android:radius="5dip"
    19. android:topLeftRadius="5dip"
    20. android:topRightRadius="5dip"/>
    21. <!--gradient标签: 简单的说: 让图形变成一个有颜色梯度的-->
    22. <!--angle 是颜色变换的角度, 默认是0, 取值必须是45的 倍数. 0: 是颜色从左边到右边, 90: 是颜色从底部到顶部, -->
    23. <!--startColor centerColor endColor 一起使用: 开始的颜色, 中间的颜色, 结束的颜色-->
    24. <!--centerX centerY是指定位置坐标, 取值是0.0f ~ 1.0f 之间, 例如: android:centerX="0.5f"  表示X方向的中间位置-->
    25. <!--type 颜色渐变的类型, 取值类型有三种: linear/radial/sweep  -->
    26. <!--linear 线性变化, 就是颜色从左往右, 从下往上-->
    27. <!--radial 放射变化, 例如: 从一个圆中心到圆的边缘变化-->
    28. <!--sweep 扫描式渐变, 类似雷达扫描的那种图形-->
    29. <!--gradientRadius 和android:type="radial"一起连用, 半径-->
    30. <gradient
    31. android:angle="0"
    32. android:centerColor="#000"
    33. android:centerX="0.5"
    34. android:centerY="0.5"
    35. android:endColor="#FFF"
    36. android:gradientRadius="20dip"
    37. android:startColor="#000"
    38. android:type="linear"
    39. android:useLevel="true"/>
    40. <!--padding标签: 这里的padding是控件中间内容与shape图形图片的距离-->
    41. <padding
    42. android:bottom="5dip"
    43. android:left="5dip"
    44. android:right="5dip"
    45. android:top="15dip"/>
    46. <!--size标签 shape图形的宽度和高度  这里一般不用设置, 它的优先级没有控件的优先级大, 他指定控件的宽高就好, shape图形会随控件拉伸-->
    47. <size
    48. android:width="50dip"
    49. android:height="10dip"/>
    50. <!--solid标签: shape图形背景色-->
    51. <!--PS: 这个和上面的gradient标签会互斥, 一个是设置背景色, 一个是设置渐变色, 你懂得-->
    52. <solid
    53. android:color="@android:color/white"/>
    54. <!--stroke标签: 边框-->
    55. <!--width 边框的宽度-->
    56. <!--color 边框的颜色-->
    57. <!--下面两个参数是 把边框变成虚线用-->
    58. <!--dashGap 虚线中空格的长度-->
    59. <!--dashWidth 虚线中实线的长度-->
    60. <stroke
    61. android:width="5dip"
    62. android:color="#0000FF"
    63. android:dashGap="2dip"
    64. android:dashWidth="1dip"/>
    65. </shape>
  • shape图形参数详细解析

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

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

    • 1.rectangle 长方形/默认是长方形
    • 2.oval 椭圆
    • 3.line 线
    • 4.ring 环形
      布局代码如下:
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <LinearLayout xmlns:android="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. <!--rectangle长方形-->
    8. <TextView
    9. android:layout_width="match_parent"
    10. android:layout_height="100dip"
    11. android:background="@drawable/shape_rectangle"
    12. android:text="Hello Shape"/>
    13. <!--oval椭圆形-->
    14. <TextView
    15. android:layout_width="match_parent"
    16. android:layout_height="100dip"
    17. android:background="@drawable/shape_oval"
    18. android:text="Hello Shape"/>
    19. <!--line线性  background-->
    20. <TextView
    21. android:layout_width="match_parent"
    22. android:layout_height="100dip"
    23. android:background="@drawable/shape_line"
    24. android:text="Hello Shape"/>
    25. <!--line线性 src-->
    26. <ImageView
    27. android:layout_width="match_parent"
    28. android:layout_height="100dip"
    29. android:src="@drawable/shape_line"/>
    30. <!--ring环形-->
    31. <TextView
    32. android:layout_width="match_parent"
    33. android:layout_height="100dip"
    34. android:background="@drawable/shape_ring"
    35. android:text="Hello Shape"/>
    36. </LinearLayout>

    shape_rectangle.xml

    1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>
    2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
    3. android:shape="rectangle">
    4. <!--这里shape如果不指定是那种类型, 就会是默认的rectangle长方形.-->
    5. <solid android:color="#33000000"/>
    6. <!--solid标签:指定背景色-->
    7. </shape></span>

    shape_oval.xml

    1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>
    2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
    3. android:shape="oval">
    4. <solid android:color="#00ffff"/>
    5. </shape></span>

    shape_line.xml

    1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>
    2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
    3. android:shape="line">
    4. <!--line模式下solid标签无效-->
    5. <solid android:color="#33000000"/>
    6. <stroke
    7. android:width="99dip"
    8. android:color="#ff0000"/>
    9. <size
    10. android:width="500dip"
    11. android:height="300dip"/>
    12. </shape></span>

    line形状下, solid标签下的color会无效, 
    需要为它设置stroke标签, stroke标签中: stroke标签中如果不指定color的颜色, 则默认是黑色, 
    需要指定width, 如果width如果大于控件的layout_height还无法显示? 背景也无法拉伸值整个控件? 
    用在background的时候, shape图片会被拉伸, 
    用在src的时候会按你指定的size大小去显示, 如果为指定size, 会和background一样效果. 
    还有上述几个疑问, 但没打算深究, 如果你知道, 请告诉我。

  • shape_ring.xml

    1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>
    2. <shape xmlns:android="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. <solid android:color="#FF4081"/>
    10. </shape></span>

    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文件

  1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="rectangle">
  4. <corners
  5. android:bottomLeftRadius="20dip"
  6. android:bottomRightRadius="20dip"
  7. android:radius="20dip"
  8. android:topLeftRadius="20dip"
  9. android:topRightRadius="20dip"/>
  10. <solid android:color="#FF4081"/>
  11. </shape></span>

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布局代码

  1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="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. <!--rectangle长方形 linear 线性渐变-->
  8. <TextView
  9. android:layout_width="match_parent"
  10. android:layout_height="100dip"
  11. android:background="@drawable/shape_rectangle_linear"
  12. android:text="linear"/>
  13. <!--rectangle长方形 radial 放射式渐变-->
  14. <TextView
  15. android:layout_width="match_parent"
  16. android:layout_height="100dip"
  17. android:background="@drawable/shape_rectangle_radial"
  18. android:text="radial"/>
  19. <!--rectangle长方形 sweep 扫描式渐变-->
  20. <TextView
  21. android:layout_width="match_parent"
  22. android:layout_height="100dip"
  23. android:background="@drawable/shape_rectangle_sweep"
  24. android:text="sweep"/>
  25. </LinearLayout></span>

shape_rectangle_linear.xml文件

  1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="rectangle">
  4. <corners android:radius="20dip"/>
  5. <gradient
  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. <!--    <solid android:color="#FF4081"/>-->
  15. <!--android:gradientRadius="150dip"-->
  16. </shape></span>

shape_rectangle_radial.xml文件

  1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="rectangle">
  4. <corners android:radius="20dip"/>
  5. <gradient
  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. <!--    <solid android:color="#FF4081"/>-->
  16. </shape></span>

shape_rectangle_sweep.xml文件

  1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="rectangle">
  4. <corners android:radius="20dip"/>
  5. <gradient
  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. <!--<solid android:color="#FF4081"/>-->
  15. <!--android:gradientRadius="150dip"-->
  16. </shape></span>

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布局代码:

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

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

solid标签

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

stroke标签

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

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

 
XML布局代码

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="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. <TextView
  8. android:layout_width="match_parent"
  9. android:layout_height="100dip"
  10. android:layout_marginTop="30dip"
  11. android:background="@drawable/shape_rectangle_stroke"
  12. android:gravity="center"
  13. android:text="stroke标签"/>
  14. </LinearLayout>

shape_rectangle_stroke.xml布局文件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="rectangle">
  4. <corners android:radius="20dip"/>
  5. <solid android:color="#00ff00"/>
  6. <stroke
  7. android:width="5dip"
  8. android:color="#FF4081"
  9. android:dashGap="5dip"
  10. android:dashWidth="10dip"/>
  11. </shape>

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

shape图形实际开发应用场景

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

场景一: 显示圆角的图形

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

布局XML文件

  1. <pre name="code" class="java"><?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="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. <View
  8. android:layout_width="match_parent"
  9. android:layout_height="48dip"
  10. android:layout_marginLeft="10dip"
  11. android:layout_marginRight="10dip"
  12. android:layout_marginTop="10dip"
  13. android:background="@drawable/shape_test_top"/>
  14. <View
  15. android:layout_width="match_parent"
  16. android:layout_height="48dip"
  17. android:layout_marginLeft="10dip"
  18. android:layout_marginRight="10dip"
  19. android:background="@drawable/shape_test_middle"/>
  20. <View
  21. android:layout_width="match_parent"
  22. android:layout_height="48dip"
  23. android:layout_marginLeft="10dip"
  24. android:layout_marginRight="10dip"
  25. android:background="@drawable/shape_test_bottom"/>
  26. <View
  27. android:layout_width="match_parent"
  28. android:layout_height="48dip"
  29. android:layout_marginLeft="10dip"
  30. android:layout_marginRight="10dip"
  31. android:layout_marginTop="10dip"
  32. android:background="@drawable/shape_test_single"/>
  33. </LinearLayout>

shape_test_top.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:shape="rectangle">
  5. <corners
  6. android:topLeftRadius="10dip"
  7. android:topRightRadius="10dip"/>
  8. <!--背景色-->
  9. <solid android:color="@android:color/white"/>
  10. <!--边框的宽度以及颜色-->
  11. <stroke
  12. android:width="0.5dip"
  13. android:color="#44000000"/>
  14. </shape>

shape_test_middle.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:shape="rectangle">
  5. <!--背景色-->
  6. <solid android:color="@android:color/white"/>
  7. <!--边框的宽度以及颜色-->
  8. <stroke
  9. android:width="0.5dip"
  10. android:color="#44000000"/>
  11. </shape>

shape_test_bottom.xml

 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:shape="rectangle">
  5. <corners
  6. android:bottomLeftRadius="10dip"
  7. android:bottomRightRadius="10dip"/>
  8. <!--背景色-->
  9. <solid android:color="@android:color/white"/>
  10. <!--边框的宽度以及颜色-->
  11. <stroke
  12. android:width="0.5dip"
  13. android:color="#44000000"/>
  14. </shape>

场景二:显示消息的数目

直接上图: 

布局XML代码

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="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. <TextView
  8. android:layout_width="wrap_content"
  9. android:layout_height="wrap_content"
  10. android:layout_margin="20dip"
  11. android:background="@drawable/shape_test_circle"
  12. android:text="1"
  13. android:textColor="@android:color/white"/>
  14. <TextView
  15. android:layout_width="wrap_content"
  16. android:layout_height="wrap_content"
  17. android:layout_margin="20dip"
  18. android:background="@drawable/shape_test_circle"
  19. android:text="99+"
  20. android:textColor="@android:color/white"/>
  21. </LinearLayout>

shape_test_circle.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="rectangle">
  4. <!--圆角大小-->
  5. <corners android:radius="10dip"/>
  6. <!--文字到shape图片边缘的距离-->
  7. <padding
  8. android:bottom="1dip"
  9. android:left="3dip"
  10. android:right="3dip"
  11. android:top="1dip"/>
  12. <!--背景色-->
  13. <solid android:color="@android:color/holo_red_light"/>
  14. </shape>

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

下面是样式代码:

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
    3. android:shape="rectangle">
    4. <corners
    5. android:bottomLeftRadius="15dip"
    6. android:bottomRightRadius="15dip"
    7. android:topLeftRadius="15dip"
    8. android:topRightRadius="15dip"/>
    9. <solid
    10. android:color="#01BAFD"/>  //这个是底色颜色<span style="white-space:pre"> </span>
    11. <stroke android:color="@color/white"
    12. android:width="1dip"
    13. />
    14. </shape>

Android Drawable - Shape Drawable使用详解(附图)的更多相关文章

  1. Drawable实战解析:Android XML shape 标签使用详解(apk瘦身,减少内存好帮手)

    Android XML shape 标签使用详解   一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...

  2. Android XML shape 标签使用详解(apk瘦身,减少内存好帮手)

    Android XML shape 标签使用详解   一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...

  3. android shape的使用详解以及常用效果(渐变色、分割线、边框、半透明阴影效果等)

    shape使用.渐变色.分割线.边框.半透明.半透明阴影效果. 首先简单了解一下shape中常见的属性.(详细介绍参看  api文档 ) 转载请注明:Rflyee_大飞: http://blog.cs ...

  4. Android图片缓存之Bitmap详解

    前言: 最近准备研究一下图片缓存框架,基于这个想法觉得还是先了解有关图片缓存的基础知识,今天重点学习一下Bitmap.BitmapFactory这两个类. 图片缓存相关博客地址: Android图片缓 ...

  5. Android 之窗口小部件详解--App Widget

    Android 之窗口小部件详解--App Widget  版本号 说明 作者 日期  1.0  添加App Widge介绍和示例  Sky Wang 2013/06/27        1 App ...

  6. Android不规则点击区域详解

    Android不规则点击区域详解 摘要 今天要和大家分享的是Android不规则点击区域,准确说是在视觉上不规则的图像点击响应区域分发. 其实这个问题比较简单,对于很多人来说根本不值得做为一篇博文写出 ...

  7. Android中Service的使用详解和注意点(LocalService)

    Android中Service的使用详解和注意点(LocalService) 原文地址 开始,先稍稍讲一点android中Service的概念和用途吧~ Service分为本地服务(LocalServ ...

  8. 《Android群英传》读书笔记 (5) 第十一章 搭建云端服务器 + 第十二章 Android 5.X新特性详解 + 第十三章 Android实例提高

    第十一章 搭建云端服务器 该章主要介绍了移动后端服务的概念以及Bmob的使用,比较简单,所以略过不总结. 第十三章 Android实例提高 该章主要介绍了拼图游戏和2048的小项目实例,主要是代码,所 ...

  9. Android特效 五种Toast详解

    Toast是Android中用来显示显示信息的一种机制,和Dialog不一样的是,Toast是没有焦点的,而且Toast显示的时间有限,过一定的时间就会自动消失.而且Toast主要用于向用户显示提示消 ...

  10. Android 之窗口小部件详解(三)  部分转载

    原文地址:http://blog.csdn.net/iefreer/article/details/4626274. (一) 应用程序窗口小部件App Widgets 应用程序窗口小部件(Widget ...

随机推荐

  1. Python基础:09函数式编程

    Python支持一些函数式编程的特性.比如lambda. map().reduce().filter()函数. 一:匿名函数与lambda Python可以用lambda 关键字创造匿名函数.匿名函数 ...

  2. 3、.net core 部署到IIS

    1)下载对应的Hosting Bundle https://dotnet.microsoft.com/download/dotnet-core/2.2 2)VS发布项目,选择window平台环境 3 ...

  3. Android Animation动画详解(一): 补间动画

    前言 你有没有被一些APP中惊艳的动画效果震撼过,有没有去思考,甚至研究过这些动画是如何实现的呢? 啥?你没有思考,更没有研究过? 好吧,那跟着我一起来学习下如何去实现APP中那些让我们惊羡的动画特效 ...

  4. Python--day69--pythonDjango终端打印SQL语句、在Python脚本中调用Django环境

    Django终端打印SQL语句 在Django项目的settings.py文件中,在最后复制粘贴如下代码: LOGGING = { 'version': 1, 'disable_existing_lo ...

  5. Python--day69--单表查询之神奇的双下划线

    单表查询之神奇的双下划线: 单表查询之神奇的双下划线 models.Tb1.objects.filter(id__lt=10, id__gt=1) # 获取id大于1 且 小于10的值 models. ...

  6. 利用arguments求任意数量数字的和/最大值/最小值

    文章地址 https://www.cnblogs.com/sandraryan/ arguments是函数内的临时数据,用完销毁,有类似于数组的操作,但不是数组. 举个栗子1:利用arguments求 ...

  7. axis2 wsdl2java工具

    wsdl2java工具使用方法描述: C:\Users\Administrator>wsdl2java -h Using AXIS2_HOME: E:\Apache_Projects\axis2 ...

  8. H3C 配置基本ACL

  9. ReadTimeoutError: HTTPSConnectionPool(host='files.pythonhosted.org', port=443): Read timed out.

    ReadTimeoutError: HTTPSConnectionPool(host='files.pythonhosted.org', port=443): Read timed out.You a ...

  10. css3图片展示方式

    <view class='img_block' id='mjltest'> <view class='text_view'> <view class='{{cell_cl ...