android背景选择器selector用法、自定义Button按钮样式

  



                       android背景选择器selector用法、自定义Button按钮样式
一:android背景选择器selector用法

1:创建xml文件,位置:drawable/xxx.xml,同目录下记得要放相关图片

< ?xml version="1.0" encoding="utf-8" ?>   
< selector xmlns:android="http://schemas.android.com/apk/res/android">
< !-- 默认时的背景图片-->  
  <item android:drawable="@drawable/pic1" />   
< !-- 没有焦点时的背景图片 -->  
  <item android:state_window_focused="false"   
        android:drawable="@drawable/pic1" />   
< !-- 非触摸模式下获得焦点并单击时的背景图片 -->  
  <item android:state_focused="true" android:state_pressed="true"   android:drawable= "@drawable/pic2" />

< !-- 触摸模式下单击时的背景图片-->  

< item android:state_focused="false" android:state_pressed="true"   android:drawable="@drawable/pic3" />  

< !--选中时的图片背景-->  

  <item android:state_selected="true"   android:drawable="@drawable/pic4" />   

< !--获得焦点时的图片背景-->  

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


2:使用xml文件

1.方法一:在listview中配置android:listSelector="@drawable/xxx
或者在listview的item中添加属性android:background="@drawable/xxx"

2.方法二:Drawable drawable = getResources().getDrawable(R.drawable.xxx);  
       ListView.setSelector(drawable);但是这样会出现列表有时候为黑的情况,需要加上:android:cacheColorHint="@android:color/transparent"使其透明。

相关属性:

android:state_selected是选中
android:state_focused是获得焦点
android:state_pressed是点击
android:state_enabled是设置是否响应事件,指所有事件

根据这些状态同样可以设置button的selector效果。也可以设置selector改变button中的文字状态。


以下是配置button中的文字效果:
drawable/button_font.xml
< ?xml version="1.0" encoding="utf-8"?>
< selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="#FFF" />
    <item android:state_focused="true" android:color="#FFF" />
    <item android:state_pressed="true" android:color="#FFF" />
    <item android:color="#000" />
< /selector>
Button还可以实现更复杂的效果,例如渐变
drawable/button_color.xml
< ?xml version="1.0" encoding="utf-8"?>
< selector xmlns:android="http://schemas.android.com/apk/res/android">        /
< item android:state_pressed="true">//定义当button 处于pressed 状态时的形态。
                <shape>

                <gradient  android:startColor="#8600ff" />

                      <stroke   android:width="2dp" android:color="#000000" />
                       <corners android:radius="5dp" />  
                       <padding android:left="10dp" android:top="10dp"
                                android:bottom="10dp" android:right="10dp"/>  
                 </shape>
< /item>
< item android:state_focused="true">//定义当button获得 focus时的形态
                 <shape>
                       <gradient android:startColor="#eac100"/>
                        <stroke android:width="2dp" android:color="#333333"  color="#ffffff"/>
                         <corners android:radius="8dp" />   
                         <padding android:left="10dp" android:top="10dp"
                                  android:bottom="10dp" android:right="10dp"/>                  
                </shape>
</item>
< /selector>
最后,需要在包含 button的xml文件里添加两项。例如main.xml 文件,需要在<Button />里加两项android:focusable="true" android:background="@drawable/button_color"

以下为网上摘抄

使用Button时为了让用户有“按下”的效果,有两种实现方式:
1.在代码里面
imageButton.setOnTouchListener(new OnTouchListener(){   
                        @Override  
                        public boolean onTouch(View v, MotionEvent event) {   
                                if(event.getAction() == MotionEvent.ACTION_DOWN){   
                                        //更改为按下时的背景图片   
                                        v.setBackgroundResource(R.drawable.pressed);   
                                }else if(event.getAction() == MotionEvent.ACTION_UP){   
                                        //改为抬起时的图片   
                                        v.setBackgroundResource(R.drawable.released);   
                                }   
                                return false;   
                        }   
                });  
imageButton.setOnTouchListener(new OnTouchListener(){
                        @Override
                        public boolean onTouch(View v, MotionEvent event) {
                                if(event.getAction() == MotionEvent.ACTION_DOWN){
                                        //更改为按下时的背景图片
                                        v.setBackgroundResource(R.drawable.pressed);
                                }else if(event.getAction() == MotionEvent.ACTION_UP){
                                        //改为抬起时的图片
                                        v.setBackgroundResource(R.drawable.released);
                                }
                                return false;
                        }
                });

2.用XML文件实现。
< ?xml version="1.0" encoding="UTF-8"?>  
< selector xmlns:android="http://schemas.android.com/apk/res/android">  
    <item           android:state_pressed="false"  android:drawable="@drawable/button_add" />  
    <item           android:state_pressed="true"   android:drawable="@drawable/button_add_pressed" />  
    <item           android:state_focused="true"    android:drawable="@drawable/button_add_pressed" />  
< item           android:drawable="@drawable/button_add" />  
< /selector>  

< ?xml version="1.0" encoding="UTF-8"?>
< selector xmlns:android="http://schemas.android.com/apk/res/android">
< item     android:state_pressed="false"  android:drawable="@drawable/button_add" />

    <item            android:state_pressed="true"  android:drawable="@drawable/button_add_pressed" />
    <item            android:state_focused="true"  android:drawable="@drawable/button_add_pressed" />
    <item         android:drawable="@drawable/button_add" />
< /selector>
这个文件放在drawable目录下面。命名为button_add_x.xml

使用的时候


< ImageButton  

                        android:id="@+id/ImageButton"  

                        android:layout_width="wrap_content"  

                        android:layout_height="wrap_content"  

                        android:background="#00000000"  

                        android:src="@drawable/button_add_x" >  

< /ImageButton>  

< ImageButton

                        android:id="@+id/ImageButton"

                        android:layout_width="wrap_content"

                        android:layout_height="wrap_content"

                        android:background="#00000000"

                        android:src="@drawable/button_add_x" >

< /ImageButton>

一个按钮实现效果需要多张图片甚至再加一个布局…


那一个游戏要是有几百个按钮怎么办呢?



于是:以下代码被酝酿出来了:

/**  

   * 按下这个按钮进行的颜色过滤  

   */  

  public final static float[] BT_SELECTED=new float[] {   

      2, 0, 0, 0, 2,   

      0, 2, 0, 0, 2,   

      0, 0, 2, 0, 2,   

      0, 0, 0, 1, 0 };   



  /**  

   * 按钮恢复原状的颜色过滤  

   */  

  public final static float[] BT_NOT_SELECTED=new float[] {   

      1, 0, 0, 0, 0,   

      0, 1, 0, 0, 0,   

      0, 0, 1, 0, 0,   

      0, 0, 0, 1, 0 };   



  /**  

   * 按钮焦点改变  

   */  

  public final static OnFocusChangeListener buttonOnFocusChangeListener=new OnFocusChangeListener() {   



  @Override  

  public void onFocusChange(View v, boolean hasFocus) {   

   if (hasFocus) {   

    v.getBackground().setColorFilter(new ColorMatrixColorFilter(BT_SELECTED));   

    v.setBackgroundDrawable(v.getBackground());   

   }   

   else  

   {   

    v.getBackground().setColorFilter(new ColorMatrixColorFilter(BT_NOT_SELECTED));   

     v.setBackgroundDrawable(v.getBackground());   

   }   

  }   

};   



  /**  

   * 按钮触碰按下效果  

   */  

public final static OnTouchListener buttonOnTouchListener=new OnTouchListener() {   

  @Override  

  public boolean onTouch(View v, MotionEvent event) {   

   if(event.getAction() == MotionEvent.ACTION_DOWN){   

    v.getBackground().setColorFilter(new ColorMatrixColorFilter(BT_SELECTED));   

    v.setBackgroundDrawable(v.getBackground());   

    }   

    else if(event.getAction() == MotionEvent.ACTION_UP){   

     v.getBackground().setColorFilter(new ColorMatrixColorFilter(BT_NOT_SELECTED));   

     v.setBackgroundDrawable(v.getBackground());   

    }   

   return false;   

  }   

};   



/**  

  * 设置图片按钮获取焦点改变状态  

  * @param inImageButton  

  */  

public final static void setButtonFocusChanged(View inView)   

{   

  inView.setOnTouchListener(buttonOnTouchListener);   

  inView.setOnFocusChangeListener(buttonOnFocusChangeListener);   

}  


使用时,调用方法

public final static void setButtonFocusChanged(View inView)

即可。



【原理】



利用Drawable类的setColorFilter方法对图片进行颜色偏移过滤处理。





以下为效果图,登陆按钮此时为获取焦点状态。








代码可以适当修改实现3个不同的状态:正常,获取焦点,点击。
转自http://blog.csdn.net/sytzz/article/details/5673662   


二:自定义Button按钮样式
Button样式修改的是Button的背景(Background)属性。
首先写一个定义Button样式的XML文件:
新建Android XML文件,类型选Drawable,根结点选selector,文件名就buton_style吧。
程序自动给我们刚刚建的文件里加了selector结点,我们只需要在selector结点里写上三种状态时显示的背景图片(按下、获取焦点,正常)。
代码如下:
Xml代码
< ?xml version="1.0" encoding="utf-8"?>
< selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/play_press" />
    <item android:state_focused="true" android:drawable="@drawable/play_press" />
    <item android:drawable="@drawable/play" />
< /selector>  

我这里获取焦点跟点击时显示的是同一张图片,必须严格照上面的顺序写,不可倒。
接下来只要在布局时写Button控件时应用到Button的Background属性即可。
Xml代码
< Button android:id="@+id/button1"
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:background="@drawable/button_style"
>< /Button>  

最终效果图:
再加上一种自定义样式方法,上面的是用图片,其实我们可以直接通过定义xml文件来实现不同的样式:
在上面的源代码基础上,只需要修改button_style文件,同样三种状态分开定义:
Xml代码
< ?xml version="1.0" encoding="utf-8"?>
< selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <gradient android:startColor="#0d76e1" android:endColor="#0d76e1"
                android:angle="270" />
            <stroke android:width="1dip" android:color="#f403c9" />
            <corners android:radius="2dp" />
            <padding android:left="10dp" android:top="10dp"
                android:right="10dp" android:bottom="10dp" />
        </shape>
    </item>

    <item android:state_focused="true">
        <shape>
            <gradient android:startColor="#ffc2b7" android:endColor="#ffc2b7"
                android:angle="270" />
            <stroke android:width="1dip" android:color="#f403c9" />
            <corners android:radius="2dp" />
            <padding android:left="10dp" android:top="10dp"
                android:right="10dp" android:bottom="10dp" />
        </shape>
    </item>

    <item>
        <shape>
            <gradient android:startColor="#000000" android:endColor="#ffffff"
                android:angle="180" />
            <stroke android:width="1dip" android:color="#f403c9" />
            <corners android:radius="5dip" />
            <padding android:left="10dp" android:top="10dp"
                android:right="10dp" android:bottom="10dp" />
        </shape>
    </item>
< /selector>  

gradient 主体渐变 startColor开始颜色,endColor结束颜色 ,angle开始渐变的角度(值只能为90的倍数,0时为左到右渐变,90时为下到上渐变,依次逆时针类推)
stroke 边框 width 边框宽度,color 边框颜色
corners 圆角 radius 半径,0为直角
padding text值的相对位置
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值