android中的布局（二）Button 和ImageButton的简单用法

我们在 布局中  很多时候会用到Button和ImageButton 

但是系统自带的样式给我们的感觉就是没有多样性 而且很多的都是个千篇一律的格式和样式 

那么怎么实现这两种控件的多元化呢

在这里先简单的介绍一下用法

 

一般的 普通按钮是可以添加背景图   布局是这样的

<Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/b"
            android:text="Button按钮" 
            android:textColor="#ff0000"/>

                            上面代码中 “b”是在drawable-dpi中的png图片

具体效果就是这样的

   

 

这样的情况下 我们使用的按钮在点击的时候是没有点击效果的  就是说 点击的时候  图片还是这样的 就想是没有点一样

 

 

那么  怎么样才能实现 既能给按钮添加图片背景  又能实现点击的效果呢 

          这个时候我们需要准备两张图一张是没有点击的时候显示效果 另外一张是点击的时候要显示的效果

                   具体的布局中的代码是这样的

<Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/buttonxml"
            android:text="带图片的文字按钮" />

在这里呢 background的属性就不是直接显示图片了   上面的代码中  buttonxml是一个xml的文件  这个文件是放在drawable目录下 具体代码是这样的：

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

    <item android:drawable="@drawable/a" android:state_pressed="true"/>
    <item android:drawable="@drawable/b" android:state_pressed="false"/>

</selector>

上面的代码中  a是点击前的显示图片  b  是点击后的图片

            具体的效果是这样的 

                           点击前的图片                                                    

 

                                             

点击后的样式就是这样的了

                                              

 

看出不一样了吧

 

 

其实ImageButton 在这个方面的实现也是一样的  

                   下面我就只说一下布局 效果图就不展示了  麻烦 

一般的布局是这样的

<ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#000000"
            android:src="@drawable/blue" />

我要说的布局是这样的

<ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#000000"
            android:src="@drawable/buttonxml" />

上面的那个 blue还是一个图片文件 下面的那个buttonxml是我上面写了代码的那个xml文件  同样的  把xml文件添加到drawable中 就可以实现点击的效果

当然 我们有时候还需要另外一种点击效果 

那就是类似我们 在android中我们看到的 RadioButton的 样式  当我们点一次的时候 变成一种 再点击一次的时候 就变成另外一种  我现在做的效果是这样的 

不点击的时候是这样的  

当我们点击一次之后就变成这样 

在点击一次的时候 就在变成 这样  

其实这样的实现也是比较简单的

   我们也是要在布局的  drawable  文件中添加 一个XMl的文件 

这个文件的内容是这样的  

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">  
    <item  
          android:state_enabled="true" 
          android:state_checked="true"
          android:drawable="@drawable/alarm_check" />  
    <item               
          android:state_enabled="true"     
          android:state_checked="false"
          android:drawable="@drawable/alarm_uncheck" />  
</selector>

其中  alarm_check  就是 这个图 alarm_uncheck就是 这张图了   这两张图都是在PS中就能实现的  

在布局文件中 我们要实现的布局大概 就是这样的 

<RadioButton
        android:id="@+id/voiceradioButton1"
        android:layout_width="45dip"
        android:layout_height="45dip"
        android:layout_alignBottom="@+id/tongyin"
        android:layout_toRightOf="@id/tongyin"
        android:button="@drawable/radiobutton_xml" />

radiobutton就是上面的那个xml文件 

这样 效果就出来了