本文起源于今天和同事的一次讨论。很简单,但是还是有些小坑在里面,所以记录一下。
一般情况下,大家使用Selector的都是用作控件View的背景。为触摸点击、按下等事件提供一个反馈效果。
例如:设置 某个ImageView,普通状态下背景是一个齿轮按钮,按下后为 齿轮按钮有一个反馈色,变为蓝色。
可以直接在布局里为ImageVIew控件设置background 为一个@drawable/下的 selector xml文件。
一,为控件设置图片资源类型的Selector
如下实现:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#4646aa" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="mcxtzhang.selectordemo.MainActivity"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/selector_background_btn" android:clickable="true" /> </RelativeLayout>
selector_background_btn.xml 文件如下:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/btn_pressed" android:state_pressed="true" /> <item android:drawable="@drawable/btn_normal" /> </selector>
================================================================
二:为 文字设置Selector
以上为众所周知的做法,可是今天的同事问我 TextView Button 等能显示文字的控件,上面的TextColor能用Selector做么?我不假思索的回答,当然可以。做法如下:
<Button android:layout_marginTop="100dp" android:textColor="@drawable/selector_color_text" android:text="测试颜色变色不" android:layout_width="wrap_content" android:layout_height="wrap_content" />对应Selector文件如下:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!--<item android:color="@android:color/holo_blue_bright" android:state_pressed="true" /> <item android:color="@android:color/black" />--> <item android:color="#fdfffe" android:state_pressed="true" /> <item android:color="#1c1c1d" /> </selector>这里有个坑点是,一开始我用
<item android:color="#fdfffe" android:state_pressed="true" /> <item android:color="#1c1c1d" />这种把android:color 写成硬编码的形式,可是会报错无效果,反正出不来结果。
后来搜了一下资料,说是要把color的值也写在xml里(colos.xml),然后在Selector文件里引用,如 @color/xxx。
或者引用系统的,如
<item android:color="@android:color/holo_blue_bright" android:state_pressed="true" /> <item android:color="@android:color/black" />
采用@color/xxx引用形式完成效果后,我开始总结规律的时候,我再次尝试硬编码形式,发现依然也可以实现效果。原因未知,反正各位如果遇到使用硬编码如#123456 代表颜色值时无效时,可以尝试一下将其放入colors.xml里 试试。如:
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> </resources>===========================================================================================================
第三个问题来了,如果我想用color颜色值作为某个控件的背景,同时要有Selector效果,该如何做?
三:为控件设置color类型的Selector效果的 background,
一般情况下,我们为background属性设置背景色,直接用#99aaff 这种形式定义即可。 可是如果我们直接利用这种思维,采用和 第二步 一样的做法时,如:
<!--这样不行!不要问我为什么.亲测无用 报错 找不到drawable的attribute, 分析了一下,用如下的写法,其实是在<item>标签里定义了一个drawable,只不过这个drawable只由<color>组成--> <!-- <item android:color="@android:color/holo_green_dark" android:state_pressed="true" /> <item android:color="@android:color/white" />-->运行程序,会直接报错的,error如下:
03-16 22:19:14.925 23002-23002/mcxtzhang.selectordemo E/AndroidRuntime: FATAL EXCEPTION: main
Process: mcxtzhang.selectordemo, PID: 23002
java.lang.RuntimeException: Unable to start activity ComponentInfo{mcxtzhang.selectordemo/mcxtzhang.selectordemo.MainActivity}: android.view.InflateException: Binary XML file line #19: Error inflating class Button
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2581)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2656)
at android.app.ActivityThread.access$800(ActivityThread.java:178)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1512)
at android.os.Handler.dispatchMessage(Handler.java:111)
at android.os.Looper.loop(Looper.java:194)
at android.app.ActivityThread.main(ActivityThread.java:5691)
at java.lang.reflect.Method.invoke(Native Method)
at java.lang.reflect.Method.invoke(Method.java:372)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:959)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:754)
Caused by: android.view.InflateException: Binary XML file line #19: Error inflating class Button
at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:763)
at android.view.LayoutInflater.rInflate(LayoutInflater.java:806)
at android.view.LayoutInflater.inflate(LayoutInflater.java:504)
at android.view.LayoutInflater.inflate(LayoutInflater.java:414)
at android.view.LayoutInflater.inflate(LayoutInflater.java:365)
at android.support.v7.app.AppCompatDelegateImplV7.setContentView(AppCompatDelegateImplV7.java:267)
at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:129)
at mcxtzhang.selectordemo.MainActivity.onCreate(MainActivity.java:11)
at android.app.Activity.performCreate(Activity.java:6142)
at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1115)
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2528)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2656)
at android.app.ActivityThread.access$800(ActivityThread.java:178)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1512)
at android.os.Handler.dispatchMessage(Handler.java:111)
at android.os.Looper.loop(Looper.java:194)
at android.app.ActivityThread.main(ActivityThread.java:5691)
at java.lang.reflect.Method.invoke(Native Method)
at java.lang.reflect.Method.invoke(Method.java:372)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:959)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:754)
Caused by: android.content.res.Resources$NotFoundException: File res/drawable/selector_color_bg.xml from drawable resource ID #0x7f02004e
at android.content.res.Resources.loadDrawableForCookie(Resources.java:2767)
at android.content.res.Resources.loadDrawable(Resources.java:2645)
at android.content.res.TypedArray.getDrawable(TypedArray.java:749)
at android.view.View.<init>(View.java:3837)
at android.widget.TextView.<init>(TextView.java:680)
at android.widget.Button.<init>(Button.java:111)
at android.widget.Button.<init>(Button.java:107)
at android.support.v7.widget.AppCompatButton.<init>(AppCompatButton.java:62)
at android.support.v7.widget.AppCompatButton.<init>(AppCompatButton.java:58)
at android.support.v7.app.AppCompatViewInflater.createView(AppCompatViewInflater.java:109)
at android.support.v7.app.AppCompatDelegateImplV7.createView(AppCompatDelegateImplV7.java:963)
at android.support.v7.app.AppCompatDelegateImplV7.onCreateView(AppCompatDelegateImplV7.java:1022)
at android.support.v4.view.LayoutInflaterCompatHC$FactoryWrapperHC.onCreateView(LayoutInflaterCompatHC.java:44)
at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:725)
at android.view.LayoutInflater.rInflate(LayoutInflater.java:806)
at android.view.LayoutInflater.inflate(LayoutInflater.java:504)
at android.view.LayoutInflater.inflate(LayoutInflater.java:414)
at android.view.LayoutInflater.inflate(LayoutInflater.java:365)
at android.support.v7.app.AppCompatDelegateImplV7.setContentView(AppCompatDelegateImplV7.java:267)
at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:129)
at mcxtzhang.selectordemo.MainActivity.onCreate(MainActivity.java:11)
at android.app.Activity.performCreate(Activity.java:6142)
at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1115)
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2528)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2656)
at android.app.ActivityThread.access$800(ActivityThread.java:178)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1512)
at android.os.Handler.dispatchMessage(Handler.java:111)
at android.os.Looper.loop(Looper.java:194)
at android.app.ActivityThread.main(ActivityThread.java:5691)
at java.lang.reflect.Method.invoke(Native Method)
at java.lang.reflect.Method.invoke(Method.java:372)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:959)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:754)
Caused by: org.xmlpull.v1.XmlPullParserException: Binary XML file line #5: <item> tag requires a 'drawable' attribute or child tag defining a drawable
at android.graphics.drawable.StateListDrawable.inflateChildElements(StateListDrawable.java:194)
at android.graphics.drawable.StateListDrawable.inflate(StateListDrawable.java:127)
at android.graphics.drawable.Drawable.createFromXmlInner(Drawable.java:1133)
at android.graphics.drawable.Drawable.createFromXml(Drawable.java:1037)
at android.content.res.Resources.loadDrawableForCookie(Resources.java:2749)
at android.content.res.Resources.loadDrawable(Resources.java:2645)
at android.content.res.TypedArray.getDrawable(TypedArray.java:749)
at android.view.View.<init>(View.java:3837)
at android.widget.TextView.<init>(TextView.java:680)
at android.widget.Button.<init>(Button.java:111)
at android.widget.Button.<init>(Button.java:107)
at android.support.v7.widget.AppCompatButton.<init>(AppCompatButton.java:62)
at android.support.v7.widget.AppCompatButton.<init>(AppCompatButton.java:58)
at android.support.v7.app.AppCompatViewInflater.createView(AppCompatViewInflater.java:109)
at android.support.v7.app.AppCompatDelegateImplV7.createView(AppCompatDelegateImplV7.java:963)
at android.support.v7.app.AppCompatDelegateImplV7.onCreateView(AppCompatDelegateImplV7.java:1022)
at android.support.v4.view.LayoutInflaterCompatHC$FactoryWrapperHC.onCreateView(LayoutInflaterCompatHC.java:44)
at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:725)
at android.view.LayoutInflater.rInflate(LayoutInflater.java:806)
at android.view.LayoutInflater.inflate(LayoutInflater.java:504)
at android.view.LayoutInflater.inflate(LayoutInflater.java:414)
at android.view.LayoutInflater.inflate(LayoutInflater.java:365)
at android.support.v7.app.AppCompatDelegateImplV7.setContentView(AppCompatDelegateImplV7.java:267)
at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:129)
at mcxtzhang.selectordemo.MainActivity.onCreate(MainActivity.java:11)
at android.app.Activity.performCreate(Activity.java:6142)
at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1115)
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2528)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2656)
at android.app.ActivityThread.access$800(ActivityThread.java:178)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1512)
at android.os.Handler.dispatchMessage(Handler.java:111)
at android.os.Looper.loop(Looper.java:194)
at android.app.ActivityThread.main(ActivityThread.java:5691)
at java.lang.reflect.Method.invoke(Native Method)
at java.lang.reflect.Method.invoke(Method.java:372)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:959)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:754)
重点标红,可以看到,这里说<item>标签需要有一个drawable定义出来,或者子标签里定义一个drawable。
我们这样使用,没有和 【第一步】 一样,使用到了drawable标签,同时也没有在<item>标签的子标签里定义一个drawable资源,所以会出错。
Selector的xml正确写法如下:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!--这样不行!不要问我为什么.亲测无用 报错 找不到drawable的attribute, 分析了一下,用如下的写法,其实是在<item>标签里定义了一个drawable,只不过这个drawable只由<color>组成--> <!-- <item android:color="@android:color/holo_green_dark" android:state_pressed="true" /> <item android:color="@android:color/white" />--> <!-- 选中 --> <item android:state_selected="true"> <color android:color="@android:color/black" /> </item> <!-- 触摸按下时 --> <item android:state_pressed="true"> <!-- 以下的东西 可以用硬编码 但是textcolor的selector 就不能用 不要问我为什么?不过后来好像又可以了,但是还是建议大家按照正确规范的写法,将所有color资源定义在colors.xml里。--> <!--<color android:color="@android:color/holo_green_dark" />--> <color android:color="#45646a" /> </item> <!-- 正常默认状态时 --> <item> <!--<color android:color="@android:color/white" />--> <color android:color="@color/colorAccent" /> </item> </selector>
如上定义了,这个view的背景,在选中时,触摸按下时,正常默认状态时的样子。
原因分析:
其实我们直接在<item >标签内部使用android:color时,并没有定义一个drawable对象,应当只是一个color元素,而【一】里直接明确定义了一个android:drawable 所以自然而然会有一个drawable对象生产,作为控件的背景。
那为什么我们使用<item> </item>在<item>标签的子标签里 使用<color >标签 却能利用颜色值作为背景呢,其实此时我们定义的不再是一个color元素了,应当类似于一个ShapeDrawable的东西,具体是什么我也不是很确定,不过通过Android Studio 的代码提示出的元素来推断看,我们此时实际上是用xml定义了一个Drawable,只不过我们这个Drawable的构成很简单,就是一个 <color>元素。
类似ShapeDrawable有很多元素,<solid> <cornors>等等。
如:(以下内容来自网上的直接摘抄)
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <gradient
- android:startColor="#FFFF0000"
- android:endColor="#80FF00FF"
- android:angle="45"/>
- <padding android:left="7dp"
- android:top="7dp"
- android:right="7dp"
- android:bottom="7dp" />
- <corners android:radius="8dp" />
- </shape>
-
文件:
-
res/drawable/filename.xml
文件名即资源ID
编译资源类型:
-
指向
GradientDrawable
.
资源引用
-
In Java:
R.drawable.filename
In XML:@[package:]drawable/filename
语法
-
<span class="pun"><?</span><span class="pln">xml version</span><span class="pun">=</span><span class="str">"1.0"</span><span class="pln"> encoding</span><span class="pun">=</span><span class="str">"utf-8"</span><span class="pun">?></span><span class="pln"> </span><span class="tag"><</span><a target=_blank style="color: rgb(202, 0, 0);">shape</a><span class="pln"> </span><span class="atn">xmlns:android</span><span class="pun">=</span><span class="atv">"http://schemas.android.com/apk/res/android"</span><span class="pln"> </span><span class="atn">android:shape</span><span class="pun">=</span><span class="atv">["rectangle"</span><span class="pln"> | </span><span class="atv">"oval"</span><span class="pln"> | </span><span class="atv">"line"</span><span class="pln"> | </span><span class="atv">"ring"</span><span class="pln">] </span><span class="tag">></span><span class="pln"> </span><span class="tag"><</span><a target=_blank style="color: rgb(202, 0, 0);">corners</a><span class="pln"> </span><span class="atn">android:radius</span><span class="pun">=</span><span class="atv">"</span><em>integer</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:topLeftRadius</span><span class="pun">=</span><span class="atv">"</span><em>integer</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:topRightRadius</span><span class="pun">=</span><span class="atv">"</span><em>integer</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:bottomLeftRadius</span><span class="pun">=</span><span class="atv">"</span><em>integer</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:bottomRightRadius</span><span class="pun">=</span><span class="atv">"</span><em>integer</em><span class="atv">"</span><span class="pln"> </span><span class="tag">/></span><span class="pln"> </span><span class="tag"><</span><a target=_blank style="color: rgb(202, 0, 0);">gradient</a><span class="pln"> </span><span class="atn">android:angle</span><span class="pun">=</span><span class="atv">"</span><em>integer</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:centerX</span><span class="pun">=</span><span class="atv">"</span><em>integer</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:centerY</span><span class="pun">=</span><span class="atv">"</span><em>integer</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:centerColor</span><span class="pun">=</span><span class="atv">"</span><em>integer</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:endColor</span><span class="pun">=</span><span class="atv">"</span><em>color</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:gradientRadius</span><span class="pun">=</span><span class="atv">"</span><em>integer</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:startColor</span><span class="pun">=</span><span class="atv">"</span><em>color</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:type</span><span class="pun">=</span><span class="atv">["linear"</span><span class="pln"> | </span><span class="atv">"radial"</span><span class="pln"> | </span><span class="atv">"sweep"</span><span class="pln">] </span><span class="atn">android:useLevel</span><span class="pun">=</span><span class="atv">["true"</span><span class="pln"> | </span><span class="atv">"false"</span><span class="pln">] </span><span class="tag">/></span><span class="pln"> </span><span class="tag"><</span><a target=_blank style="color: rgb(202, 0, 0);">padding</a><span class="pln"> </span><span class="atn">android:left</span><span class="pun">=</span><span class="atv">"</span><em>integer</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:top</span><span class="pun">=</span><span class="atv">"</span><em>integer</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:right</span><span class="pun">=</span><span class="atv">"</span><em>integer</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:bottom</span><span class="pun">=</span><span class="atv">"</span><em>integer</em><span class="atv">"</span><span class="pln"> </span><span class="tag">/></span><span class="pln"> </span><span class="tag"><</span><a target=_blank style="color: rgb(202, 0, 0);">size</a><span class="pln"> </span><span class="atn">android:width</span><span class="pun">=</span><span class="atv">"</span><em>integer</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:height</span><span class="pun">=</span><span class="atv">"</span><em>integer</em><span class="atv">"</span><span class="pln"> </span><span class="tag">/></span><span class="pln"> </span><span class="tag"><</span><a target=_blank style="color: rgb(202, 0, 0);">solid</a><span class="pln"> </span><span class="atn">android:color</span><span class="pun">=</span><span class="atv">"</span><em>color</em><span class="atv">"</span><span class="pln"> </span><span class="tag">/></span><span class="pln"> </span><span class="tag"><</span><a target=_blank style="color: rgb(202, 0, 0);">stroke</a><span class="pln"> </span><span class="atn">android:width</span><span class="pun">=</span><span class="atv">"</span><em>integer</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:color</span><span class="pun">=</span><span class="atv">"</span><em>color</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:dashWidth</span><span class="pun">=</span><span class="atv">"</span><em>integer</em><span class="atv">"</span><span class="pln"> </span><span class="atn">android:dashGap</span><span class="pun">=</span><span class="atv">"</span><em>integer</em><span class="atv">"</span><span class="pln"> </span><span class="tag">/></span><span class="pln"> </span><span class="tag"></shape></span>
========================================================================
四,一些有关无关的注意事项:
1 值得一提的是,Selector的xml在定义时,一定要将 没有任何状态的默认的<item>标签放在最后一个。
因为系统匹配状态时。是从上到下匹配的,如果有state和控件的现在状态匹配,则返回。所以若将默认<item>放在前面,则其后面的<item state=xxx>一定不会再执行了。
2 有时会有这么一个需求,点击父控件时,子控件同时被点击。(用于增大子控件的点击范围等等。。。)即子控件能感知父控件的点击事件:
可以使用如下属性:
在父控件中添加android:clickable=“true” android:focusable=“true”,而在子控件中添加android:duplicateParentState=“true”
3 有人会问了,如【三】中提到,可以为View设置在selecter pressed 和normal(默认)状态下的背景色,文字颜色等等。 那么普通的View又不是checkbox或者radiubutton。怎么让selected属性生效呢?其实很简单:代码如下:
findViewById(R.id.btn_test_color).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { v.setSelected(true); } });就是这么简单 = = 可以手动设置它的selected为true,
或者干脆设置一个变量,用于代表当前控件View的状态。
代码如下:
public class MainActivity extends AppCompatActivity { private boolean mBtnSelected; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mBtnSelected = false; findViewById(R.id.btn_test_color).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mBtnSelected = !mBtnSelected; v.setSelected(mBtnSelected); } }); } }
=================================================================================================
本篇很基础简单,但是【三】 【四】还是有一部分同学不太清楚滴,所以记录一下,归纳自己,方便以后。
完整demo代码如下:
http://download.csdn.net/detail/zxt0601/9463764