前言
本篇主要是介绍如何在drawable 文件夹中,通过xml代码的模式,定义各种形状图像。
同时也介绍一下相关的标签。结合实际情况进行介绍
1.绘制 只显示上,下,左,右 边框线条的方式
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 边框线颜色 -->
<item>
<shape>
<solid android:color="#ff0000" />
</shape>
</item>
<!-- 主体背景颜色值 需要显示哪条边,就让哪个方向偏移1px
android:left="1px" android:top="1px" android:right="1px"-->
<item android:bottom="2dp">
<shape>
<solid android:color="@android:color/white" />
</shape>
</item>
</layer-list>
效果:
示例只是给了底部的一条横向的绘制方法。如果要其他的或调整绘制线段的高度,可以根据需要自己进行修改。
2. 设置图片平铺
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/ico_bg"
android:tileMode="repeat"<!--平铺模式:repeat 单纯重复,mirror镜面反射,clamp图片四周像素扩散-->
android:mipMap = "false" <!-- 纹理映射 默认false 关闭状态-->
android:antialias="true" <!--开启图片抗锯齿, 清晰度会降低-->
android:dither="true"<!--开启抖动效果, 用于高质量图片在低质量屏幕上优化显示效果(不会失真)-->
android:filter="true" <!--开启过滤,在图片尺寸拉屎和压缩时保持较稳定的显示效果-->
android:gravity="center"<!-- 图片小于容器尺寸时,对图片进行定位-->
/>
其中的 android:src
就是我们需要平铺的图片素材。
3. 绘制虚线框
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp">
<shape>
<stroke
android:dashGap="4dp"
android:dashWidth="4dp"
android:width="1.5dp"
android:color="#1E90FF" />
<solid android:color="#00000000" />
<corners android:radius="1dp" />
</shape>
</item>
</layer-list>
效果图:
4. 设置RadioBtn按钮的选中和未选中
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ico_rb_not" android:state_checked="false" /> //没有选中时
<item android:drawable="@drawable/ico_rb_select" /> //选中时
</selector>
5. 设置按钮图片的点击与未点击
有图片资源的时候:
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ico_xxx_pressed" android:state_pressed="true"/> //按下时的图片
<item android:drawable="@drawable/ico_xxx_normal" /> //没有操作时的图片
</selector>
需要重新绘制图片资源的时候:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape>
<solid android:color="@color/dialog_btn_bg_pressed" />
<corners android:radius="4dp" />
</shape>
</item>
<item android:state_pressed="true">
<shape>
<solid android:color="@color/dialog_btn_bg" />
<corners android:radius="4dp" />
</shape>
</item>
</selector>
6. 绘制半圆矩形
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size
android:width="50dp"
android:height="30dp" />
<stroke android:color="#ff0000"
android:width="1dp"/>
<solid android:color="#fffff8" />
<!-- 圆角半径是高度的一般就是一个圆弧了 -->
<corners android:radius="100dp" />
</shape>
效果图:
7. 绘制正圆形图案
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="false">
<size android:height="30dp"
android:width="30dp"/>
<solid android:color="#ff0000" />
</shape>
效果图:
8. 绘制圆角矩形边框线
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--圆角矩形-->
<corners android:radius="1dp" />
<!--大小-->
<size
android:width="20dp"
android:height="20dp" />
<stroke
android:width="1dp"
android:color="#fff" />
</shape>
效果图:
我们如果想要直角的矩形,可以去掉 <corners android:radius="1dp" />
就可以得到一个直角的矩形了。
9. 绘制 自定义矩形背景框,决定指定角有弧度。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/white" />
<!--边框线段-->
<stroke
android:width="1dp"
android:color="#ff0000" />
<!-- 如果需要哪个角度 不要圆角,去掉该角度的配置,就会是直角了-->
<corners
android:bottomLeftRadius="4dp"
android:bottomRightRadius="4dp"
android:topLeftRadius="4dp"
android:topRightRadius="4dp" />
</shape>
全绘制的效果:
总结
selector
的基本属性:
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checkable=""></item> //是否可以选择
<item android:state_checked=""></item> // 是否被选中
<item android:state_selected=""></item> //Spinner的item是否被选中
<item android:state_pressed=""></item> //是否被按下
<item android:state_focused="false></item>" //是否获取了焦点
<item android:state_window_focused=""></item> //窗体是否处于最前端
</selector>
shape
的基本属性:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"] //shape的形状,默认为矩形,可以设置为矩形(rectangle)、椭圆形(oval)、线性形状(line)、环形(ring)
android:innerRadius="integer" // 内环的半径;
android:innerRadiusRatio="integer" // 浮点型,以环的宽度比率来表示内环的半径;
android:thickness="integer" // 环的厚度;
android:thicknessRatio="integer" // 浮点型,以环的宽度比率来表示环的厚度;
android:useLevel="boolean"> // 如果当做是LevelListDrawable使用时值为true,否则为false。
>
<corners //圆角属性
android:radius="integer"
android:topLeftRadius="integer"
android:topRightRadius="integer"
android:bottomLeftRadius="integer"
android:bottomRightRadius="integer" />
<gradient //渐变属性
android:angle="integer" //渐变角度,必须为45的倍数,0为从左到右,90为从上到下;
android:centerX="integer"//渐变中心X的相当位置,范围为0~1;
android:centerY="integer"//渐变中心Y的相当位置,范围为0~1;
android:startColor="color" //渐变开始点的
android:centerColor="integer" //渐变中间点的颜色,在开始与结束点之间;
android:endColor="color"//渐变结束点的颜色
android:gradientRadius="integer" //渐变的半径,只有当渐变类型为radial时才能使用;
android:type=["linear" | "radial" | "sweep"] //共有3中渐变类型,线性渐变(默认)/放射渐变/扫描式渐变;
android:useLevel=["true" | "false"] />//使用LevelListDrawable时就要设置为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"//虚线的宽度,值为0时是实线
android:dashGap="integer" />//虚线的间隔
</shape>
评论区