您的位置:首页 > 产品设计 > UI/UE

18 UI美化状态集合的位图selector

2016-09-14 22:34 281 查看
当我们某个控件 想在不同状态下显示不同的背景图的需求

如我们需要按钮在正常状态显示一种图 按下显示另一背景图

或者单选框被选中时是一种显示图片 没选中是另一种背景图

例子 按钮在不同状态显示不同的背景图:

在工程目录下res/drawable/新建一个 selector.xml文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- state_pressed按下就状态ture 就显示@drawable/pressed这张图  -->
<item android:state_pressed="true" android:drawable="@drawable/pressed"></item>
<!-- state_pressed没有按下就是false 就显示@drawable/pressed这张图  -->
<item android:state_pressed="false" android:drawable="@drawable/normal"></item>
</selector>


使用 在布局文件使用

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮一"
android:background="@drawable/my_selector_button"/>


例子 单选框选中状态下和不非选中状态下:

在工程目录下res/drawable/新建一个 selector.xml文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

<item android:state_checked="true" android:drawable="@drawable/home_active"></item>
<item android:state_checked="false" android:drawable="@drawable/home_unactive"></item>
</selector>


使用 在布局文件使用

<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<RadioButton
android:id="@+id/rb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="男"
android:checked="true"
android:button="@null"
android:drawableLeft="@drawable/my_selector_radiobutton"
/>

<RadioButton
android:id="@+id/rb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="女"
android:button="@null"
android:drawableLeft="@drawable/my_selector_radiobutton"
/>

</RadioGroup>


例子 获取焦点 和失去焦点:

在工程目录下res/drawable/新建一个 selector.xml文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

<item android:state_focused="true" android:drawable="@drawable/blue"></item>

<item android:state_focused="false" android:drawable="@drawable/white"></item>
</selector>


使用 在布局文件使用

<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:background="@drawable/my_seletor_edittext">

<requestFocus />
</EditText>

<EditText
android:id="@+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:background="@drawable/my_seletor_edittext"/>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: