UI組件之ImageView及其子類（二）ImageButton ,ZoomButton

UI組件之ImageView及其子類（二）ImageButton ,ZoomButton

從ImageButton這個字面意思上來看，它是一個圖片按鈕，那麼我們就可以使用它做一個我們想要的圖片按鈕了，但是我們在實際使用的過程當中，就會發現該按鈕的使用並沒有想像中的那麼簡單，需要再增加一些代碼或再配置XML才能實現圖片按鈕按下的效果

ImageButton 還直接派生了ZoomButton組件，只是Android默認提供了btn_minus，btn_plus兩個Drawable資源，只要為ZoomButton的android:src屬性分別指著兩個android提供的資源，即可實現“放大”，“縮小”按鈕，ZoomButton組件僅僅是android:src屬性默認使用的是android的資源，添加了一些方法可實現放大縮小。

android還提供了一個ZoomControls組件，該組件繼承了是LeanerLayout布局組件，把兩個放大縮小的按鈕水平線性的組合在一起，並允許分別為兩個按鈕綁定不同的事件監聽器

圖片按鈕正常狀態的效果：

第二個按鈕按下是的效果

實現圖片按鈕按下的效果有兩種方式可以實現：一是增加代碼，二配置XML。

一、在java中為圖片按鈕增加觸摸監聽的函數來實現圖片切換

1. ImageButton btn = (ImageButton)findViewById(R.id.imageButton1);    
2.        //在java代碼中修改按下按鈕時不同的狀態  
3.        btn.setOnTouchListener(new View.OnTouchListener(){    
4.         @Override  
5.         public boolean onTouch(View v, MotionEvent event) {  
6.              if(event.getAction() == MotionEvent.ACTION_DOWN){         
7.                     //重新設置按下時的背景圖片    
8.                     ((ImageButton)v).setImageDrawable(getResources().getDrawable(R.drawable.red));                                
9.                  }else if(event.getAction() == MotionEvent.ACTION_UP){         
10.                      //再修改為抬起時的正常圖片    
11.                      ((ImageButton)v).setImageDrawable(getResources().getDrawable(R.drawable.purple));       
12.                  }    
13.             // TODO Auto-generated method stub  
14.             return false;  
15.         }         
16.        });    

代碼比較簡單，就是當圖片按下時，修改按鈕的背景圖片，當抬起時再修改為正常的圖片顯示
二、通過給按鈕配置XML文件來實現圖片按鈕的背景切換效果
 

1.   
2.   
3.        
4.     
5.         android:drawable="@drawable/red"  
6.     />  
7.           
8.     
9.         android:drawable="@drawable/purple"  
10.     />  
11.   

main.xml

1.   
2.  
3.     android:id="@+id/root"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     android:orientation="vertical" >  
7.       
8.     
9.         android:id="@+id/imageButton1"  
10.         android:layout_width="wrap_content"  
11.         android:layout_height="wrap_content"  
12.         android:background="@drawable/blue" />  
13.   
14.     
15.         android:id="@+id/imageButton2"  
16.         android:layout_width="wrap_content"  
17.         android:layout_height="wrap_content"  
18.         android:background="@drawable/button_selector" />  
19.   
20.     
21.         android:layout_width="wrap_content"  
22.         android:layout_height="wrap_content"  
23.         android:layout_gravity="center_horizontal"  
24.         android:layout_margin="10dp"  
25.         android:orientation="horizontal" >  
26.        
27.   
28.         
29.             android:id="@+id/zoomButton1"  
30.             android:layout_width="wrap_content"  
31.             android:layout_height="wrap_content"  
32.             android:src="@android:drawable/btn_plus" />  
33.   
34.         
35.             android:id="@+id/zoomButton2"  
36.             android:layout_width="wrap_content"  
37.             android:layout_height="wrap_content"  
38.             android:src="@android:drawable/btn_minus" />  
39.   
40.       
41.      
42.   
43.     
44.         android:id="@+id/zoomControls1"  
45.         android:layout_width="wrap_content"  
46.         android:layout_height="wrap_content"  
47.         android:layout_gravity="center_horizontal"  
48.         android:orientation="horizontal" />  
49.   
50.