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中為圖片按鈕增加觸摸監聽的函數來實現圖片切換
[java] view plaincopy
- ImageButton btn = (ImageButton)findViewById(R.id.imageButton1);
- //在java代碼中修改按下按鈕時不同的狀態
- btn.setOnTouchListener(new View.OnTouchListener(){
- @Override
- public boolean onTouch(View v, MotionEvent event) {
- if(event.getAction() == MotionEvent.ACTION_DOWN){
- //重新設置按下時的背景圖片
- ((ImageButton)v).setImageDrawable(getResources().getDrawable(R.drawable.red));
- }else if(event.getAction() == MotionEvent.ACTION_UP){
- //再修改為抬起時的正常圖片
- ((ImageButton)v).setImageDrawable(getResources().getDrawable(R.drawable.purple));
- }
- // TODO Auto-generated method stub
- return false;
- }
- });
代碼比較簡單,就是當圖片按下時,修改按鈕的背景圖片,當抬起時再修改為正常的圖片顯示
二、通過給按鈕配置XML文件來實現圖片按鈕的背景切換效果
-
-
-
-
- android:drawable="@drawable/red"
- />
-
-
- android:drawable="@drawable/purple"
- />
-
main.xml
-
-
- android:id="@+id/root"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical" >
-
-
- android:id="@+id/imageButton1"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:background="@drawable/blue" />
-
-
- android:id="@+id/imageButton2"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:background="@drawable/button_selector" />
-
-
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center_horizontal"
- android:layout_margin="10dp"
- android:orientation="horizontal" >
-
-
-
- android:id="@+id/zoomButton1"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:src="@android:drawable/btn_plus" />
-
-
- android:id="@+id/zoomButton2"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:src="@android:drawable/btn_minus" />
-
-
-
-
-
- android:id="@+id/zoomControls1"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center_horizontal"
- android:orientation="horizontal" />
-
-
需要特別注意的是:在ImageButton中,如果使用XML配置文件來設置圖片的效果的話,就不要再指定它的android:src=""屬性值了,否則圖片的按下效果就出不來了。
這兩種方法各有各的好處,在實際運用過種當種可以根據自己的需要進行選擇。