愛悠閑 > android中的布局(二)Button 和ImageButton的簡單用法

android中的布局(二)Button 和ImageButton的簡單用法

分類: android  |  標簽: android,button,layout,radiobutton,encoding,xml  |  作者: engandend 相關  |  發布日期 : 2012-03-23  |  熱度 : 982°

我們在 布局中  很多時候會用到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文件 

這樣 效果就出來了



快乐彩中奖说明