Android Shape的使用详解

Posted 2021-05-29 xzj_2013

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android Shape的使用详解相关的知识，希望对你有一定的参考价值。

文章目录

概念

什么是Shape

官方的话来说，这是在 XML 中定义的一般形状。指向 GradientDrawable 的资源指针

Shape可以用来做什么？

快速实现一些基本图形
- 方型：rectangle，这也是默认的形状
- 椭圆型/圆：oval
- 线性：line环：
- ring，为环的时候还有些针对它才使用的一些属性.
快速实现一些圆角，渐变（线性渐变，径向渐变，扫描渐变），阴影等效果
代替图片设置为View的背景
可以减少apk大小(Drawble比图片文件小)
还可以减少内存占用
方便修改与维护

Shape的一些基础属性

solid ：填充形状的纯色
- android:color : 填充颜色
corners：形状圆角设置，仅当形状为矩形时适用
- android:radius : 所有角都进行圆角处理半径，如果有单独设置某个角，这个属性则会被覆盖
- android:topLeftRadius ：左上圆角
- android:topRightRadius ：右上圆角
- android:bottomLeftRadius ：左下圆角
- android:bottomRightRadius ：右下圆角
padding ：与包含视图元素的内边距
- android:left : 左内边距
- android:top ：上内边距
- android:right ：右内边距
- android:bottom ：下内边距
size ：形状的大小，可以通过这里来设置形状大小
- android:width 宽度
- android:height 高度
  注意：默认根据这里设置的大小来等比缩放至容器大小。在ImageView中可设置android:scaleType 设置为 “center” 来限制缩放
stroke ：描边，就是最外面一层边线，可以是实线也可以是虚线（当父节点shape为line时必须设置该子节点）
- android:width ：线宽
- android:color ：颜色
  以下两个属性是把边框线设置成虚线
- android:dashWidth ：虚线的间距。仅在设置了 android:dashGap 时有效
- android:dashGap : 虚线的厚度大小。仅在设置了 android:dashWidth 时有效
  注意：不论android:dashWidth和android:dashGap哪个设置成0dp边线都会是实线
gradient：渲染器
- android:angle ：整型。渐变的角度（度）。0 为从左到右，90 为从上到上。必须是 45 的倍数。默认值为 0 ，仅在 android:type="linear " 时适用
- android:centerX ：浮点型。渐变中心的相对 X 轴位置 (0 - 1.0)
- android:centerY ：浮点型。渐变中心的相对 Y 轴位置 (0 - 1.0)
- android:centerColor ：颜色。起始颜色与结束颜色之间的可选颜色
- android:startColor ：颜色。起始颜色
- android:endColor ：颜色。结束颜色
- android:type ：要应用的渐变图案的类型
  - linear ：线性渐变。这是默认值，通过调整android:angle 实现水平渐变、垂直渐变、对角线渐变
  - radial ：径向渐变。起始颜色为中心颜色
  - sweep ：流线型渐变
- android:gradientRadius ：浮点型。渐变的半径。仅在 android:type=“radial” 时适用
注意事项
- 针对gradient属性：android:centerX android:centerY在设置为android:type="radial"和android:type="sweep "时适用
- 对于环Ring，Shape还存在一些特性的属性设置
  - android:innerRadius : 尺寸。环内部（中间的孔）的半径，以尺寸值或尺寸资源表示
  - android:innerRadiusRatio : 浮点型。环内部的半径，以环宽度的比率表示。例如，如果 android:innerRadiusRatio=“5”，则内半径等于环宽度除以 5。此值被 android:innerRadius覆盖。默认值为 9
  - android:thickness : 尺寸。环的厚度，以尺寸值或尺寸资源表示
  - android:thicknessRatio : 浮点型。环的厚度，表示为环宽度的比率。例如，如果 android:thicknessRatio=“2”，则厚度等于环宽度除以 2。此值被 android:innerRadius 覆盖。默认值为 3
  - android:useLevel : 布尔值。如果这用作 LevelListDrawable，则此值为“true”。这通常应为“false”，否则形状不会显示

使用

Shape标签
- android：shape 通过该字段可以设置绘制图形的类型，示例中设置为矩形

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

绘制线line

绘制实线

<shape
    android:shape="line"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="2px"
        android:color="#ffff0000"
        ></stroke>
</shape>

绘制虚线

注意：绘制虚线 不显示或者显示为实线的解决方案
  1、如果不显示---检查view的高度是否大于虚线的高
  2、如果显示为实线---这个涉及系统版本 有以下两种方案   
        a、动态解决方案：通过代码设置view.setLayerType(View.LAYER_TYPE_SOFTWARE, null)
        b、静态解决方案：在AndroidManifest.xml中android:hardwareAccelerated="false" 加到相应的Activity处即可，或者给view设置android:layerType为software

<shape
    android:shape="line"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="1px"
        android:color="#ffff0000"
        android:dashGap="10px"
        android:dashWidth="15px"
        ></stroke>
</shape>

显示效果

绘制矩形

绘制实线无颜色填充矩形–指定大小

	<!-- 实线边框 -->
	<shape
	    android:shape="rectangle"
	    xmlns:android="http://schemas.android.com/apk/res/android">
	    <stroke
	        android:width="2px"
	        android:color="#ffff0000"
	        ></stroke>
	    <size
	        android:width="800dp"
	        android:height="30dp"></size>
	</shape>
	```

绘制虚线无颜色填充矩形

<!-- 虚线边框 -->
<shape
    android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="2px"
        android:color="#ffff0000"
        android:dashWidth="10px"
        android:dashGap="5px"
        ></stroke>
</shape>

绘制实线有颜色填充矩形

<!-- 实线边框+内部填充 -->
<shape
    android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="2px"
        android:color="#ffff0000"
        ></stroke>
    <solid
        android:color="#ff009fff"></solid>
</shape>

绘制虚线有颜色填充矩形

<!-- 虚线边框+内部填充 -->
<shape
    android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="2px"
        android:color="#ffff0000"
        android:dashWidth="10px"
        android:dashGap="5px"
        ></stroke>
    <solid
        android:color="#ff009fff"></solid>
</shape>

绘制圆角实线有颜色填充矩形

<!-- 实线边框+内部填充+全部圆角 -->
<shape
    android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="2px"
        android:color="#ffff0000"
        ></stroke>
    <solid
        android:color="#ff009fff"></solid>
    <corners
        android:radius="10dp"></corners>
</shape>

指定上半区圆角矩形

<!-- 实线边框+内部填充+左上角圆角+右上角圆角 -->
<shape
    android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="2px"
        android:color="#ffff0000"
        ></stroke>
    <solid
        android:color="#ff009fff"></solid>
    <corners
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp"></corners>
</shape>

左半区圆角无描边有颜色填充矩形

<!-- 无边框+内部填充+左上角圆角+左下角圆角 -->
<shape
    android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="#ff009fff"
        ></solid>
    <corners
        android:bottomLeftRadius="5dp"
        android:topLeftRadius="5dp"
        ></corners>
</shape>

描边指定左半区圆角矩形–从左至右线性渐变

<!-- 实线边框+内部填充+左上角圆角+左下角圆角+从左至右线性渐变 -->
<shape
    android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="2px"
        android:color="#ffff0000"
        ></stroke>
    <solid
        android:color="#ff009fff"
        ></solid>
    <corners
        android:bottomLeftRadius="5dp"
        android:topLeftRadius="5dp"
        ></corners>
    <!--angle="0"是从左至右，angle="180"是从右至左  -->
    <gradient
        android:type="linear"		       
        android:angle="0"
        android:startColor="@color/colorAccent"
        android:endColor="@color/colorPrimary"
        ></gradient>
</shape>

描边指定左半区圆角矩形–从上至下线性渐变

<!-- 实线边框+内部填充+左上角圆角+左下角圆角+从上至下线性渐变 -->
<shape
    android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="2px"
        android:color="#ffff0000"
        ></stroke>
    <solid
        android:color="#ff0009fff"
        ></solid>
    <corners
        android:bottomLeftRadius="5dp"
        android:topLeftRadius="5dp"
        ></corners>
     <!--angle="90"是从上至下，angle="270"是从下至上  -->
    <gradient
        android:type="linear"		       
        android:angle="90"
        android:startColor="@color/colorAccent"
        android:endColor="@color/colorPrimary"
        ></gradient>
</shape>

描边指定左半区圆角矩形–对角线线性渐变

<!-- 实线边框+内部填充+左上角圆角+左下角圆角+对角线渐变 -->
<shape
    android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="2px"
        android:color="#ffff0000"
        ></stroke>
    <solid
        android:color="#ff009fff"
        ></solid>
    <corners
        android:bottomLeftRadius="5dp"
        android:topLeftRadius="5dp"
        ></corners>
     <!--angle="45"是从左上角至右下角，angle="135"是从右下角至左上角，依次类推45的倍数  -->
    <gradient
        android:type="linear"
        android:angle="45"
        android:startColor="@color/colorAccent"
        android:endColor="@color/colorPrimary"
        ></gradient>
</shape>

描边指定左半区圆角矩形–径向渐变

<shape
    android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="2px"
        android:color="#ffff0000"
        ></stroke>
    <solid
        android:color="#ff009fff"
        ></solid>
    <corners
        android:bottomLeftRadius="5dp"
        android:topLeftRadius="5dp"
        ></corners>
    <gradient
        android:type="radial"
        android:centerX="0.5"
        android:centerY="0.5"
        android:startColor="@color/colorAccent"
        android:endColor="@color/colorPrimary"
        android:gradientRadius="100dp"
        ></gradient>
</shape>

矩形带中间颜色值–流线型渐

<shape
      android:shape="rectangle"
      xmlns:android="http://schemas.android.com/apk/res/android">
      <stroke		          android:width="2px"
          android:color="#ffff0000"
          ></stroke>
      <solid
          android:color="#ff009fff"
          ></solid>
      <corners
          android:bottomLeftRadius="5dp"
          android:topLeftRadius="5dp"
          ></corners>
      <gradient
          android:type="sweep"
          android:centerX="0.5"
          android:centerY="0.5"
          android:centerColor="#78D9FF"
          android:startColor="@color/colorAccent"
          android:endColor="@color/colorPrimary"
          ></gradient>
  </shape>

绘制圆
```
  					x	x	
```

以上是关于Android Shape的使用详解的主要内容，如果未能解决你的问题，请参考以下文章

Android Shape的使用详解

Android中shape属性详解

android shape.xml 属性详解