Drawable种类繁多,ShapeDrawable
是一种很常见的Drawable,可以理解为通过颜色来构造的图形,它既可以是纯色的图形,也可以是具有渐变效果的图形。
一、ShapeDrawable语法
ShapeDrawable
语法稍显复杂,如下所示:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"] >
<corners
android:radius="integer"
android:topLeftRadius="integer"
android:topRightRadius="integer"
android:bottomLeftRadius="integer"
android:bottomRightRadius="integer" />
<gradient
android:angle="integer"
android:centerX="integer"
android:centerY="integer"
android:centerColor="integer"
android:endColor="color"
android:gradientRadius="integer"
android:startColor="color"
android:type=["linear" | "radial" | "sweep"]
android:useLevel=["true" | "false"] />
<padding
android:left="integer"
android:top="integer"
android:right="integer"
android:bottom="integer" />
<size
android:width="integer"
android:height="integer" />
<solid
android:color="color" />
<stroke
android:width="integer"
android:color="color"
android:dashWidth="integer"
android:dashGap="integer" />
</shape>
需要注意的是<shape>
标签创建的Drawable,其实体类实际上是GradientDrawable
,下面分别介绍各个属性的含义。
二、各属性含义
-
android:shape
根元素shape表示图形的形状,有四个选项:
- rectangle 矩形
- oval 椭圆
- line 横线
- ring 圆环
另外四个当中,line 和 ring 一定需要通过<stroke>
标签来指定线的宽和和颜色信息等。
-
<corners>
表示shape图形四个交的角度,即四个角的圆角程度。单位是px,只适用于矩形shape。
android:radius
优先级较低,会被其他四个属性覆盖。属性含义望文生义即可。注意:每个圆角半径值都必须大于1,否侧就没有圆角。
-
<solid>
表示纯色填充,利用 android:color 就可以指定shape的颜色。
-
<gradient>
渐变效果,和<solid>标签互斥。
gradient标签属性 | 作用 |
---|---|
android:angle | 渐变的角度,默认是0,其值必须是45的整数倍。0表示从左边到右,90表示从上到下。具体效果随着角度的调整而产生变化,角度影响渐变方向。 |
android:centerX | 渐变中心的横坐标点 |
android:centerY | 渐变中心的纵坐标点 |
android:startColor | 渐变色的起始色 |
android:centerColor | 渐变色的中间色 |
android:endColor | 渐变色的结束色 |
android:type | 渐变的类型,分3种,linear(线性渐变),radio(径向渐变),sweep(扫描线渐变),默认值是 线性渐变 。 |
android:gradientRadius | 渐变的半径(仅当 android:type 为radio时有效) |
android:useLevel | 一般为false,当Drawable作为StateListDrawable时有效。 |
-
<stroke>
Shape的描边,有如下几个属性:
stroke标签属性 | 作用 |
---|---|
android:width | 描边的宽度,越大则shape的边缘线越粗 |
android:color | 描边的颜色 |
android:dashWidth | 虚线的宽度 |
android:dashGap | 虚线的空隙的间隔 |
注:如果 android:dashWidth 和 android:dashGap 两者有任意一个为0,那么虚线效果就无法显示。
-
<padding>
不是shape的空白,而是包含它的View的空白
-
<size>
shape没有宽/高的概念,总结来说,标签设置的宽高就是ShapeDrawable的固有宽高(这时调用getIntrinsicWidth获得的就不是-1了),但是作为View的背景时,它还是会拉伸或缩小自适应View的大小。
三、示例代码
3.1 搜索框渐变背景:
xml代码:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:startColor="@color/color_fed952"
android:endColor="#ff9b00"
/>
</shape>
实际效果:
渐变实际效果.png3.2 搜索框文字背景:
xml代码:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<corners android:radius="6dp"/>
<solid android:color="@color/white"/>
</shape>
其实就是个editText的背景是白色的圆角矩形,配合上渐变背景,最后搜索框整体效果图:
整体效果图.png3.3 搜索框布局文件代码
xml代码:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_home_search"
android:padding="8dp"
>
<TextView
android:id="@+id/qrcode_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="@drawable/bar_code_scan_icon"
/>
<TextView
android:id="@+id/category_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="@drawable/category"
/>
<TextView
android:id="@+id/search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_toLeftOf="@id/category_view"
android:layout_toRightOf="@id/qrcode_view"
android:background="@drawable/bg_home_edittext"
android:gravity="center"
android:padding="6dp"
android:text="@string/home_edittext_hint"
android:textColor="@color/color_cdcdcd"
android:textSize="16sp"
/>
</RelativeLayout>
网友评论