Android样式之shape标签

引言

　　在Android开发中我们很多情况都是使用图片来展示相关效果，今天我就来详细介绍下Android下使用Shape来进行简单UI的开发。一方面这些是Android开发的基础，另一方面这方面的知识可以在一定程度上减少图片的使用，降低App的体积。下面我就来详细介绍Shape的相关知识。

注意点：一般用shape定义的xml文件存放在drawable目录下，若项目没有该目录则新建一个，而不要将它放到drawable-hdpi等目录中。

Shape支持的类型形状

　   rectangle: 矩形，默认的形状，可以画出直角矩形、圆角矩形、弧形等

　　oval: 椭圆形，用得比较多的是画正圆

　　line: 线形，可以画实线和虚线

　　ring: 环形，可以画环形进度条

　　下面我就依次开始介绍

1、rectangle

　　这种类型应该是我们使用的最多的类型了，一些控件的背景、布局的背景都可以使用它来完成。

　　我们来看详细的介绍：

　　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 设置虚线时的横线之间的距离

　　下面我们来看一个例子：

 

　　效果图如下：

　　

2、oval

　　oval用来画椭圆，而在实际应用中，更多是画正圆，比如消息提示，圆形按钮等，下图是一些例子：

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

• • android:width 宽度
  • android:height 高度

　　如果你使用TextView之类的设置椭圆，size默认会是View的宽度和高度。

　　下面来看一个例子：

　　效果图如下：

　　

3、line

　　通过Shape我们还可以设置分割线。不过一般我使用线都是直接View的。通过设置stroke我们可以设置线的样式（颜色、虚线还是实线等）。例子如下：

　　注意点：画线时，有几点特性必须要知道的：

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

4、ring

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

• android:innerRadius  内环的半径
• android:innerRadiusRatio  浮点型，以环的宽度比率来表示内环的半径，默认为3，表示内环半径为环的宽度除以3，该值会被android:innerRadius覆盖
• android:thickness  环的厚度
• android:thicknessRatio  浮点型，以环的宽度比率来表示环的厚度，默认为9，表示环的厚度为环的宽度除以9，该值会被android:thickness覆盖
• android:useLevel  一般为false，否则可能环形无法显示，只有作为LevelListDrawable使用时才设为true

　　下面我们来看一个例子：

　　效果图如下：

　　

使用Drawable有什么好处？

• 很方便得到一个矩形，圆，椭圆，圆环，很容易维护和修改
• 很方便实现圆角，渐变（线性渐变，径向渐变，扫描渐变）
• 代替图片作为 View 的背景，减少 apk 的体积（减少 apk 体积最明显最有效的步骤就是去掉图片）
• 大图片耗内存，使用 Drawable 节省内存，Android 本身对 Drawable 做了很好的优化（内存优化需要考虑）

什么情况下选择使用Drawable，而不是使用一张图，反之呢？

• 理论上能用 Drawable 的地方就用 Drawable
• 如果能够通过 shape 标签就能定义的几何图形就能满足需求，就不用图片来表示
• 渐变类型的背景也尽量使用 shape 来实现
• 不规则的，复杂的图形还是只能使用图片，比如要一个表示手机的图标，一个人的头像
• 有些特殊拉升效果需要使用 .9.png 图片（尽可能的小吧，越小越省内存）

shape标签能定义多少种类型的Drawable？

  shape 可以定义四种类型的几何图形，由 android:shape 属性指定

  line --> 线

  rectangle --> 矩形（圆角矩形）

  oval --> 椭圆，圆

  ring --> 圆环

 

  shape 可以定义边框属性

  有边框，无边框，虚线边框，实线边框

 

  shape 可以实现矩形圆角效果

  可以指定其中一个角或者多个角设置圆角效果

  指定圆角半径设置圆角的大小

 

  shape 可以实现三种渐变，由子标签 gradient 实现

  linear --> 线性渐变（水平，垂直，对角线三个渐变）

  sweep --> 扫描渐变（只支持顺时针方向，其实颜色反过来就跟逆时针一样的了）

  radial --> 径向渐变（由指定的中心点开始向外渐变，指定半径）

  xml 实现只支持三个颜色，startColor，CenterColor，endColor

  更多更详细关于 shape 的介绍请移步 Android GradientDrawable(shape标签定义) 静态使用和动态使用(圆角，渐变实现)

  由上面的组合可以定义很多 Drawable，下面依次进行介绍：

 

线（实线+虚线）

  

实线：line_solid.xml

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

虚线：line_dashed.xml

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

矩形（边框+填充）

  

矩形实线边框内部无填充：rect_solid_border.xml

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

矩形虚线边框内部无填充：rect_dashed_border.xml

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

矩形实线边框-内部填充：rect_solid_border_and_fill.xml

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

矩形虚线边框-内部填充：rect_dashed_border_and_fill.xml

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

圆角矩形

  

圆角矩形-只有边框：rect_rounded_border.xml

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

圆角矩形-只有内部填充：rect_rounded_fill.xml

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

圆角矩形-有边框有填充:rect_rounded_border_and_fill.xml

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

圆角矩形-左边圆角为一个半圆弧：rect_rounded_left_arc.xml

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

圆角矩形-左右两边都是半圆弧:rect_rounded_left_right_arc.xml

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

圆角矩形-左右两边都是半圆弧-带边框：rect_rounded_left_right_arc_border.xml

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

圆角矩形-圆：rect_rounded_arc.xml

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

圆角矩形-上下两边半圆弧:rect_rounded_top_bottom_arc.xml

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

渐变效果（以矩形为例）

  

垂直线性渐变：rect_gradient_linear_vertical.xml

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

水平线性渐变:rect_gradient_linear_horizon.xml

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

对角线线性渐变：rect_gradient_linear_diagonal.xml

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

径向渐变：rect_gradient_radial.xml

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

扫描渐变：rect_gradient_sweep.xml

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

圆（边框+填充+渐变）

  

圆-边框：circle_border.xml

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

圆-填充：circle_fill.xml

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

圆-边框填充：circle_border_and_fill.xml

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

线性渐变：circle_gradient_linear.xml

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

径向渐变：circle_gradient_radial.xml

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

扫描渐变：circle_gradient_sweep.xml

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

椭圆（边框+填充+渐变）

  

边框：oval_border.xml

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

填充：oval_fill.xml

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

边框+填充：oval_border_and_fill.xml

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

线性渐变：oval_gradient_linear.xml

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

径向渐变：oval_gradient_radial.xml

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

扫描渐变：oval_gradient_sweep.xml

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

圆环（边框+填充+渐变）

  

环内填充：ring_fill.xml

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

圆环边框:ring_border.xml

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

边框+填充：ring_border_and_fill.xml

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

线性渐变：ring_gradient_linear.xml

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

径向渐变：ring_gradient_radial.xml

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

扫描渐变:ring_gradient_sweep.xml

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

原文地址：浅谈Android样式开发之shape：https://www.cnblogs.com/dreamGong/p/6170770.html 

                 Android XML shape 标签使用详解：https://www.cnblogs.com/popfisher/p/6238119.html

更多相关文章

1. android去除ImageButton白色边框
2. android和j2me之清屏(clearScreen)
3. android和j2me之清屏(clearScreen)
4. android圆形图片显示效果，带边框
5. Android仿美图秀秀给图片加框
6. 安卓shape属性详细介绍
7. Android实现圆角照片和圆形照片
8. android使用shape设置下边框
9. Android(安卓)UI学习 -网址列表

随机推荐

1. Android Tab 选项卡的简单实现
2. Android百度地图(四):百度地图运动轨迹纠
3. AndroidStudio中的gradle脚本文件解读
4. Android中的eventBus传值
5. Android安全机制概述
6. This Android(安卓)SDK requires Android
7. Android SDK安装方法
8. Android:shape的使用详解（1）
9. Android Studio的Gradle文件方法说明
10. Windows7下使用Eclipse搭建Cocos2dx+Andr