android 状态选择器和shape的运用
在Android开发中,会去用到状态选择器和Shape这个东东去实现一些特殊的功能,比如按钮按下状态,按钮的背景颜色渐变,图形变形化等。
一、状态选择器
按钮被按下的背景变化,一般需要写一个bg_selector.xml来实现此功能
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/bg_pressed" android:state_pressed="true"/>
<!-- pressed -->
<item android:drawable="@drawable/bg_pressed" android:state_focused="true"/>
<!-- focused -->
<item android:drawable="@drawable/bg_normal"/>
<!-- 默认 -->
</selector>
当然,背景不一定是图片,也可以是颜色值
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/gray" android:state_pressed="true"/>
<!-- pressed -->
<item android:drawable="@color/gray" android:state_focused="true"/>
<!-- focused -->
<item android:drawable="@android:color/transparent"/>
<!-- 默认 -->
</selector>
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="gray">#33000000</color>
</resources>
这里注意,要把背景颜色值抽取到color的公共管理xml文件里,别问为什么。如何使用呢,这时候,可以给控件ImageView或者LinearLayout设置背景属性
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:background="@drawable/home_item_selector"
android:orientation="vertical" >
</LinearLayout>
如此,就可以了。如果是给listview设置item的条目点击效果,记得要把listview布局的android:listSelector="@android:color/transparent" 属性设置为透明背景颜色,这样效果更好。
二、shape的更重属性及使用
用的最多的估计就是圆角功能了,仿ios自定义一个圆角的背景颜色,
corners:圆角
android:radius为角的弧度,值越大角越圆。
我们还可以把四个角设定成不同的角度,
同时设置五个属性,则Radius属性无效
android:Radius="10dp" 设置四个角的半径
android:topLeftRadius="10dp" 设置左上角的半径
android:topRightRadius="10dp" 设置右上角的半径
android:bottomLeftRadius="10dp" 设置右下角的半径
android:bottomRightRadius="10dp" 设置左下角的半径
背景渐变色,
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="270"
android:centerColor="#77333333"
android:centerX="0.5"
android:centerY="0.5"
android:endColor="#ff666666"
android:startColor="#ff666666"
android:type="linear" />
</shape>
解释一下里面的属性的意思:
shape的值有四种,也就是背景的形状,rectangle-矩形;oval-椭圆;line-线;ring-环。
angle的值:从左到右为0;然后逆时针旋转,90为从下到上,180为从右到左,270为从上到下。
centerx和centery的值取0-1;表示中间点的位置。这个和动画的中间点很想,以此为中心的颜色变化。中间点为0,渐变的中间色的位置在最上面;中间点为0.5,则在屏幕中间;中间点为1,在屏幕下部。
startcolor、centercolor、endcolor为渐变色的开始、中间、最后的颜色值。
type的值:linear-线性;radial-径向;sweep-3D效果。一般选择第一个就行了。
描边 stroke
android:width="1dp" 表示描边的宽度,android:color 表示描边的颜色。
还可以把描边弄成虚线的形式,需要设置方式为:
android:dashWidth="5dp"
android:dashGap="3dp"
android:dashWidth属性表示'-'这样一个个横线的宽度,android:dashGap属性表示'-'和'-'之间隔开的距离,像撕邮票的边一样。
solid用以指定内部填充色
只有一个属性:<solid android:color="color" /> 用xml写的纯背景色的图。
padding:用来定义内部边距,和view的padding属性一样。
在Android开发中,会去用到状态选择器和Shape这个东东去实现一些特殊的功能,比如按钮按下状态,按钮的背景颜色渐变,图形变形化等。
一、状态选择器
按钮被按下的背景变化,一般需要写一个bg_selector.xml来实现此功能
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/bg_pressed" android:state_pressed="true"/>
<!-- pressed -->
<item android:drawable="@drawable/bg_pressed" android:state_focused="true"/>
<!-- focused -->
<item android:drawable="@drawable/bg_normal"/>
<!-- 默认 -->
</selector>
当然,背景不一定是图片,也可以是颜色值
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/gray" android:state_pressed="true"/>
<!-- pressed -->
<item android:drawable="@color/gray" android:state_focused="true"/>
<!-- focused -->
<item android:drawable="@android:color/transparent"/>
<!-- 默认 -->
</selector>
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="gray">#33000000</color>
</resources>
这里注意,要把背景颜色值抽取到color的公共管理xml文件里,别问为什么。如何使用呢,这时候,可以给控件ImageView或者LinearLayout设置背景属性
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:background="@drawable/home_item_selector"
android:orientation="vertical" >
</LinearLayout>
如此,就可以了。如果是给listview设置item的条目点击效果,记得要把listview布局的android:listSelector="@android:color/transparent" 属性设置为透明背景颜色,这样效果更好。
二、shape的更重属性及使用
用的最多的估计就是圆角功能了,仿ios自定义一个圆角的背景颜色,
corners:圆角
android:radius为角的弧度,值越大角越圆。
我们还可以把四个角设定成不同的角度,
同时设置五个属性,则Radius属性无效
android:Radius="10dp" 设置四个角的半径
android:topLeftRadius="10dp" 设置左上角的半径
android:topRightRadius="10dp" 设置右上角的半径
android:bottomLeftRadius="10dp" 设置右下角的半径
android:bottomRightRadius="10dp" 设置左下角的半径
背景渐变色,
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="270"
android:centerColor="#77333333"
android:centerX="0.5"
android:centerY="0.5"
android:endColor="#ff666666"
android:startColor="#ff666666"
android:type="linear" />
</shape>
解释一下里面的属性的意思:
shape的值有四种,也就是背景的形状,rectangle-矩形;oval-椭圆;line-线;ring-环。
angle的值:从左到右为0;然后逆时针旋转,90为从下到上,180为从右到左,270为从上到下。
centerx和centery的值取0-1;表示中间点的位置。这个和动画的中间点很想,以此为中心的颜色变化。中间点为0,渐变的中间色的位置在最上面;中间点为0.5,则在屏幕中间;中间点为1,在屏幕下部。
startcolor、centercolor、endcolor为渐变色的开始、中间、最后的颜色值。
type的值:linear-线性;radial-径向;sweep-3D效果。一般选择第一个就行了。
描边 stroke
android:width="1dp" 表示描边的宽度,android:color 表示描边的颜色。
还可以把描边弄成虚线的形式,需要设置方式为:
android:dashWidth="5dp"
android:dashGap="3dp"
android:dashWidth属性表示'-'这样一个个横线的宽度,android:dashGap属性表示'-'和'-'之间隔开的距离,像撕邮票的边一样。
solid用以指定内部填充色
只有一个属性:<solid android:color="color" /> 用xml写的纯背景色的图。
padding:用来定义内部边距,和view的padding属性一样。