直达机票
Android xml代码绘制图形一 Shape 详解
Android xml代码绘制图形二 Layer-list 详解
Android xml代码绘制图形三 Vector 详解
引言
手机APP开发离不开图标,图标具有释义、美化、引导的作用,android开发提供了xml绘制简单图形的方法,可不必依赖UI工程师切图,而且图片能随意的更改,既方便又节省空间,使用起来非常便捷。具体可以分为 shape、layer-list、vector三种方法,本文将详细介绍shape的使用方法
Shape使用方法
- 在'res/drawable'下创建xml资源文件,编辑属性
- 使用该资源文件的方式和图片资源一样
Shape根节点属性介绍
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"] <!--共有4种类型:矩形(默认)、椭圆、直线、环形-->
<!--以下4个属性只有当类型为环形时才有效-->
android:innerRadius="dimension" <!--内环半径-->
android:innerRadiusRatio="float" <!--内环半径相对于环的宽度的比例,比如环的宽度为100,比例为2.0,那么内环半径为50-->
android:thickness="dimension" <!--环的厚度-->
android:thicknessRatio="float" <!--环的厚度相对于环的宽度的比例-->
android:useLevel="boolean"> <!--如果当做是LevelListDrawable使用时值为true,否则为false-->
</shape>
Corners 圆角节点属性介绍
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"]> <!--共有4种类型:矩形(默认)、椭圆、直线、环形-->
<corners <!--圆角节点,非必须-->
android:radius="dimen" <!--全部的圆角半径-->
android:topLeftRadius="dimen" <!--左上角的圆角半径-->
android:topRightRadius="dimen" <!--右上角的圆角半径-->
android:bottomLeftRadius="dimen" <!--左下角的圆角半径-->
android:bottomRightRadius="dimen" /> <!--右下角的圆角半径-->
</shape>
Gradient 渐变色节点属性介绍
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"]> <!--共有4种类型:矩形(默认)、椭圆、直线、环形-->
<gradient <!--渐变色节点,非必须-->
android:type=["linear" | "radial" | "sweep"] <!--共有3钟渐变类型:线性(默认)、放射式、扫描式-->
android:angle="integer" <!--渐变角度,必须为45的倍数,0为从左到右,90为从上到下-->
android:centerX="float" <!--渐变中心 X 的相当位置,范围为 0 ~ 1-->
android:centerY="float" <!--渐变中心 Y 的相当位置,范围为 0 ~ 1-->
android:startColor="color" <!--渐变开始点的颜色-->
android:centerColor="color" <!--渐变中间点的颜色,在开始与结束点之间-->
android:endColor="color" <!--渐变结束点的颜色-->
android:gradientRadius="float" <!--渐变的半径,只有当渐变类型为 radial 时才能使用-->
android:useLevel=["true" | "false"] /> <!--使用LevelListDrawable时就要设置为true。设为false时才有渐变效果-->
</shape>
Stroke 描边(边框)节点属性介绍
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"]> <!--共有4种类型:矩形(默认)、椭圆、直线、环形-->
<stroke <!--描边(边框)节点、非必须-->
android:width="dimen" <!--描边的宽度-->
android:color="color" <!--描边的颜色-->
<!--以下两个属性设置虚线-->
android:dashWidth="dimen" <!--虚线的宽度,值为0时是实线-->
android:dashGap="dimen" /> <!--虚线的间隔-->
</shape>
Size 图形尺寸节点属性介绍
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"]> <!--共有4种类型:矩形(默认)、椭圆、直线、环形-->
<size <!--图形尺寸节点-->
android:width="dimen"
android:height="dimen" />
</shape>
Solid 图形填充色节点属性介绍
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"]> <!--共有4种类型:矩形(默认)、椭圆、直线、环形-->
<solid <!--图形填充色节点-->
android:color="color" />
</shape>
Padding 内部边距节点属性介绍
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"]> <!--共有4种类型:矩形(默认)、椭圆、直线、环形-->
<padding <!--内部边距节点-->
android:left="dimen"
android:top="dimen"
android:right="dimen"
android:bottom="dimen" />
</shape>
总结
以上是shape所有节点属性介绍,本文并无详解具体的实例代码,实践见真知!大家最好还是自己动手码起来看看效果,对学习本文内容很有帮助!
Shape的使用就是通过以上节点的组合得到想要的图形,android studio在编辑shape xml文件时支持实时预览,所见即所得!非常方便!