版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ddxxii/article/details/79705275
关于Shape的使用,简单来说说吧,
shape作为Android程序员你也是一定会用到的一个工具。
用官方的话来说,这是在 XML 中定义的一般形状。指向 GradientDrawable 的资源指针。
Shape可以绘制几种图形:
- 方型:rectangle,这也是默认的形状
- 原型:oval
- 线性:line
- 环:ring,为环的时候还有些针对它才使用的一些属性
我们用到的属性
- solid :用于填充形状的纯色
- corners:为形状产生圆角。仅当形状为矩形时适用
- android:radius : 所有角都进行圆角处理半径,如果有单独设置某个角,这个属性则会被覆盖
- android:topLeftRadius : 左上圆角
- android:topRightRadius : 右上圆角
- android:bottomLeftRadius : 左下圆角
- android:bottomRightRadius : 右下圆角
- padding : 要应用到包含视图元素的内边距(这会填充视图内容的位置如textview那么就是和文字都内编剧距离,而非形状)
- android:left : 左内边距
- android:top : 上内边距
- android:right :右内边距
- android:bottom :下内边距
- size : 形状的大小,可以通过这里来设置形状大小,默认根据这里设置的大小来等比缩放至容器大小。在ImageView中可设置android:scaleType 设置为 “center” 来限制缩放。
- stroke : 描边,就是最外面一层边线,可以是实线也可以是虚线
- android:width :线宽
- android:color :颜色
- android:dashWidth :虚线的间距。仅在设置了 android:dashGap 时有效
- android:dashGap : 虚线的厚度大小。仅在设置了 android:dashWidth 时有效
- gradient :形状渐变颜色。
- android:angle : 整型。渐变的角度(度)。0 为从左到右,90 为从上到上。必须是 45 的倍数。默认值为 0。
- android:centerX : 浮点型。渐变中心的相对 X 轴位置 (0 - 1.0)。
- android:centerY : 浮点型。渐变中心的相对 Y 轴位置 (0 - 1.0)。
- android:centerColor :颜色。起始颜色与结束颜色之间的可选颜色
- android:endColor : 颜色。结束颜色
- android:gradientRadius : 浮点型。渐变的半径。仅在 android:type=”radial” 时适用。
- android:startColor : 颜色。起始颜色
- android:type :要应用的渐变图案的类型
- linear :线性渐变。这是默认值
- radial : 径向渐变。起始颜色为中心颜色。
- sweep : 流线型渐变
矩形(rectangle)
就像上图一样,我们可以弄出这一类甚至更多(颜色我是用的新建项目自带的,难看,吐槽我比较懒吧- 。-),我们是通过如下方式弄成的
- 一般矩形:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--定义颜色-->
<solid android:color="@color/colorAccent" />
</shape>
- 圆角矩形(省去外层代码,与第一段相同)
<solid android:color="@color/colorAccent" />
<corners android:radius="5dp" />
- 圆弧矩形(其实把圆角加大就能达到)
<solid android:color="@color/colorAccent" />
<corners android:radius="10dp" />
- 带padding的矩形(如一开始定义所说,padding是与内容的内边距,看到了吧)
<solid android:color="@color/colorAccent" />
<padding android:right="20dp"
android:top="20dp"/>
- 半圆弧矩形(就是只定义上半部分圆角)
<solid android:color="@color/colorAccent" />
<corners
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
- 加描边(使用stroke)
<solid android:color="@color/colorAccent" />
<corners
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
<stroke
android:width="2dp"
android:color="@color/colorPrimary" />
- 加虚线(stroke开启虚线)
<solid android:color="@color/colorAccent" />
<stroke
android:width="2dp"
android:color="@color/colorPrimary"
android:dashGap="1dp"
android:dashWidth="2dp" />
- 颜色渐变(打开gradient)
<solid android:color="@color/colorAccent" />
<gradient
android:centerColor="@color/colorAccent"
android:centerX="0.2"
android:centerY="0.5"
android:endColor="@color/colorPrimary"
android:startColor="@color/colorPrimary" />
圆形(oval)
矩形就是在最外层设置android:shape=”oval”
- 0 :默认,只用了一个颜色,也就是默认就包括控件大小
- 1 : 添加了上和右的padding
- 2 : size属性宽高相同,当然你的控件也设置了宽高相同,毕竟会根据空间宽高等比缩放嘛,我控件是用的TextView
- 3 : solid不设置颜色,也就是镂空,然后再一个stroke描边
- 4 : 同3,不过描边设置为虚线
- 5 : 加了一个渐变,这里渐变type选择使用radial,所以也需要加一下渐变的半径即gradientRadius
如5:
<size
android:width="20dp"
android:height="20dp" />
<gradient
android:centerColor="@color/colorAccent"
android:centerX="0.2"
android:centerY="0.5"
android:gradientRadius="10dp"
android:endColor="@color/colorPrimary"
android:startColor="@color/colorPrimary"
android:type="radial" />
线条(line)
线条就是shape设置为line,就和前面说的一样,此形状需要 元素定义线宽,主要是用做分割线。
line主要依靠size和stroke属性来控制。
例如第二条线xml:
<size
android:width="100dp"
android:height="2dp" />
<stroke
android:width="2dp"
android:color="@color/colorAccent"
android:dashGap="2dp"
android:dashWidth="1dp" />
注:1.如果size宽不设置(高不用设置,高度依靠stroke的width控制),那么view控件宽度为wrap_content的话会不显示哦。因为view宽度就没了,自然也就看不见了
环(ring)
对于环,能看到有一些属性是单独针对它的(设置位置跟shape=ring同级):
- 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”,否则形状不会显示。
- 第一个就只有size和solid
- 第二个设置了android:innerRadius=”5dp”
android:thickness=”1dp”,看起来小了许多 - 第三个就只设置了gradient
- 第四个只设置了stroke
- 第五个设置了stoke和gradient
如第2个:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:useLevel="false"
android:innerRadius="5dp"
android:thickness="1dp">
<size
android:width="30dp"
android:height="30dp" />
<solid android:color="@color/colorAccent" />
</shape>
注:和oval一样的,如果不设置size,修饰的view需要设置宽高,否则不会显示哦,不过在设置了stroke的时候,可以不用设置size
shape大概就这么多,咱们可以通过shape来给各个控件设置背景,用这几种来选择已经能满足大部分需求。shape还能被其他组合使用比如selector里放到item中,来完成点击/焦点/选中效果切换等