在AndroidUI开发中,经常会自定义一些圆角背景,点击Button按钮变化等,这样<layer-list>,<shape>,<selector>就会在设计中经常被用到。在自定义控件美化方面有着至关重要的左右。
本文会介绍标签的定义,作用,并会写一个最近工作中需要写的一个小例子。
一、<shape>
作用:XML文件中定义几何形状
XML文件位置:res/drawable/文件名称.xml
使用方法:1、在java代码中动态加载:R.drawable.文件名称
2、XML布局文件中:Android:background="@drawable/文件名称"
属性:
<shape> Android:shape=["rectangle" | "oval" | "line" | "ring"];rectagle矩形,oval椭圆,line水平直线,ring环形
<shape>中子节点常用属性:
<gradient>渐变色
android:startColor 颜色值 起始颜色
android:endColor 颜色值 结束颜色
android:centerColor 整型 渐变中间颜色,即开始颜色与结束颜色之间的颜色
android:angle 整型 渐变角度(PS:当angle=0时,渐变色是从左向右。 然后逆时针方向转,当angle=90时为从下往上。angle必须为45的整数倍)
android:type ["linear" | "radial" | "sweep"] 渐变类型(取值:linear、radial、sweep)
linear 线性渐变,这是默认设置
radial 放射性渐变,以开始色为中心。
sweep 扫描线式的渐变。
android:useLevel ["true" | "false"] 如果要使用LevelListDrawable对象,就要设置为true。设置为true无渐变。false有渐变色
android:gradientRadius 整型 渐变色半径.当 android:type="radial" 时才使用。单独使用 android:type="radial"会报错。
android:centerX 整型 渐变中心X点坐标的相对位置
android:centerY 整型 渐变中心Y点坐标的相对位置
<solid>内部填充 android:color 颜色值 填充颜色
<stroke>描边
android:width 整型 描边的宽度
android:color 颜色值 描边的颜色
android:dashWidth 整型 表示描边的样式是虚线的宽度, 值为0时,表示为实线。值大于0则为虚线。
android:dashGap 整型 表示描边为虚线时,虚线之间的间隔 即“ - - - - ”
<corners>圆角
android:radius 整型 半径
android:topLeftRadius 整型 右下角半径
android:topRightRadius 整型 左上角半径
android:bottomLeftRadius 整型 右下角半径
android:bottomRightRadius 整型 左下角半径
<padding>内边距,即内容与边的距离
android:left 整型 左内边距
android:top 整型 上内边距
android:right 整型 右内边距
android:bottom 整型 下内边距
二、<selector>
作用:根据不同选定状态定义不同的样式显示效果;主要四个属性:
android:state_selected 是选中
android:state_focused 是获得焦点
android:state_pressed 是点击
android:state_enabled 是设置是否响应事件,指所有事件XML文件位置:res/drawable/文件名称.xml
使用方法:1、在java代码中动态加载:R.drawable.文件名称
2、XML布局文件中:Android:background="@drawable/文件名称"
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/home_page_mine" android:state_pressed="true"/>
<item android:drawable="@drawable/home_page_mine" android:state_checked="true"/>
<item android:drawable="@drawable/home_page_mine" android:state_selected="true"/>
<item android:drawable="@drawable/home_page_mine_un" android:state_checked="false"/>
<item android:drawable="@drawable/home_page_mine_un"/>
</selector>
三、<layer-list>
效果图:部分圆角;四边只有三边
两部分代码
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="@color/c4"/>
<!--圆角度数-->
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="0dp"
android:topRightRadius="0dp"
/>
</shape>
</item>
<!-- 连框颜色值 -->
<item
android:left="0.5dp"
android:right="0.5dp"
android:bottom="0.5dp">
<shape >
<solid android:color="@color/c5"/>
<!--圆角度数-->
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="0dp"
android:topRightRadius="0dp"
/>
</shape>
</item>
</layer-list>
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="@color/c4"/>
<!--圆角度数-->
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
/>
</shape>
</item>
<!-- 连框颜色值 -->
<item
android:left="0.5dp"
android:right="0.5dp"
android:top="0.5dp">
<shape >
<solid android:color="@color/color_common_white"/>
<!--圆角度数-->
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
/>
</shape>
</item>
</layer-list>