Android開發中view狀態變化樣式篇

1 首先是 定義 item的 selector drawablelistview_item_pressed.xml

3. android:state_pressed=true
4. android:drawable=@drawable/listview_item_selected_bg />
5. android:state_pressed=false
6. android:drawable=@drawable/listview_unseleceted />

7.  

   2 把selector 添加入 item ，這裡采用的是 添加進 item 采用的布局文件中

   [html] 
   1. android:layout_width=fill_parent
   2. android:background=@drawable/listview_item_pressed
   3. android:orientation=horizontal
   4. android:layout_height=56dp>...

      
      3 在 適配器中 getView 方法裡 添加 點擊事件，也可以在 listView 中的 onItemClick（）方法中處理

       

      [java] 
      1. convertView.setTag(position);
      2. convertView.setOnClickListener(new View.OnClickListener() {
      3.  
      4. @Override
      5. public void onClick(View v) {
      6. // TODO Auto-generated method stub
      7. if(oldView == null){
      8. //第一次點擊
      9. oldView = v;
      10. v.setBackgroundDrawable(mContext.getResources().getDrawable(R.drawable.listview_item_selected_bg));
      11. }else{
      12. //非第一次點擊
      13. //把上一次點擊的 變化
      14. oldView.setBackgroundDrawable(mContext.getResources().getDrawable(R.drawable.list_pressed));
      15. v.setBackgroundDrawable(mContext.getResources().getDrawable(R.drawable.listview_item_selected_bg));
      16. //保存oldView
      17. oldView = v;
      18. }
      19.  
      20. }
      21. });
      22.  
      23. if(oldView != null && (position == (Integer)oldView.getTag())){// 為點擊 item
      24. convertView.setBackgroundDrawable(mContext.getResources().getDrawable(R.drawable.listview_item_selected_bg));
      25. }else{
      26. convertView.setBackgroundDrawable(mContext.getResources().getDrawable(R.drawable.list_pressed));
      27. }

          ============================

           

          UI設計中，按鈕一般都會有多個狀態，比如：聚焦、點擊等，不同的狀態必須顯示不同的呈現形式（比如顏色、形狀的改變），這樣用戶才能感覺到按鈕被成功選中、點擊了，否則用戶體驗就會非常差了。

           

          本篇文章就簡單地描述一下Android開發中，如何動態改變Button狀態切換時的背景。

           

          Android的UI設計中，默認情況下，系統會為Button的點擊實現一個默認的背景切換。

           

          例如下面這樣的一個Button：

           

          1 2 3 <Button android:layout_width=wrap_content android:layout_height=wrap_content />

           

          用戶在點擊Button的時候，會有一個藍色外框顯示出來，表明Button被點擊了。如圖所示：

           

          

           

          但是，如果想為Button添加自定義的圖片背景，如：

           <喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHRhYmxlIGJvcmRlcj0="0" cellpadding="0" cellspacing="0"> 1 android:background=@drawable/upload

           

          那麼，當你點擊Button的時候會發現，Button啥反應都沒有，在用戶點擊的時候Button的背景沒有任何變化，用戶無法知道到底點擊成功了沒有，所以，這不是一個好的用戶體驗。

           

          當然，這種情況可以考慮使用ImageButton，如：

           

          1 2 3 4 <ImageButton android:layout_width=wrap_content android:layout_height=wrap_content android:src=@drawable/upload/>

           

          ImageButton會將src所指的圖片縮小放入Button的方框內中央顯示，Button點擊前後的顯示效果如圖所示：

          

          上面是采用系統默認的Button點擊效果，那麼，如果期望自己定義Button的點擊效果，該如何實現呢？下面，我將介紹兩種在Button被點擊時改變背景的方式，一種是采用多張背景圖片切換的方式，另一種是采用shape來定義Button狀態切換的背景顯示。

           

          1. 多張背景圖片切換

           

          首先，為Button准備兩張背景圖片，一張是Button未點擊時顯示的圖片，另一張是Button被點擊時顯示的圖片，如圖所示：

           

          

          然後，在工程的res/drawable目錄下創建一個 xml 文件，這裡命名為：button_selector.xml

           

          內容如下：

           

          1 2 3 4 5 6 7 8 9 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/up_pressed/> <item android:state_pressed=false android:drawable=@drawable/up/> selector>

           

          說明：這裡的selector標簽就相當與Button狀態的選擇器，每一個item子項代表著Button的一種狀態，這裡我只選取了兩種狀態做示例，一種是Button被點擊，另一種是Button未被點擊。全部的Button狀態可以參考Google Android Development相關網頁：StateListDrawable

           

          然後，在Button的標簽中，把 background 屬性的值改為 button_selector 即可：

           

          1 android:background=@drawable/button_selector

           

          可以運行程序試試，當點擊Button後，是不是Button的背景從左圖變化成為右圖了？

           

          這種方法是比較直觀簡單的方法，在實際的工程中也大量使用，但也有一個缺陷，必須為所有的Button准備多張背景圖片，為每一個狀態准備一張，加大了UI設計的工作量，也加大了程序的大小。

           

          2. 通過shape來自定義Button的UI顯示

           

          首先，定義兩個xml文件，分別為shape_normal.xml ，shape_pressed.xml

           

          文件中，定義shape的屬性，shape的原理參考Google Android官方文檔：

           

          （1）shape_normal.xml

           

          1 2 3 4 5 6 7 8 xml version=1.0 encoding=utf-8?> <shape xmlns:android=http://schemas.android.com/apk/res/android android:shape=rectangle> <gradient android:startColor=#808080 android:endColor=#808080 android:angle=-90/> shape>

           

          （2） shape_pressed.xml

           

          1 2 3 4 5 6 7 8 xml version=1.0 encoding=utf-8?> <shape xmlns:android=http://schemas.android.com/apk/res/android android:shape=rectangle> <gradient android:startColor=#FF7F00 android:endColor=#EE7600 android:angle=-90/> shape>

           

          然後，依然定義一個 button_selector.xml文件，只不過該selector的android:drawable所指的內容，由圖片改為shape文件。

           

          1 2 3 4 5 6 7 8 9 10 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/shape_pressed/> <item android:state_pressed=false android:drawable=@drawable/shape_normal/> selector>

           

          然後，將所需的Button的background依然指向該selector文件，即可實現自定義Button點擊的背景切換效果.

           

          采用這種方式的Button點擊前後的效果如圖所示：

          
          

           

          shape可以定義的內容很豐富，包括圓角的設置，線條的粗細等等，這裡不一一演示，可以自己修改後測試效果。

           

          ImageButton也可以采用這種方法來自定義Button點擊的背景顏色切換效果，不過要注意為ImageButton添加一個android:padding屬性，使得src的圖片與Button的邊界有一定的距離，這樣才能動態改變背景，因為ImageButton能改變的顏色只是src圖片以外的背景區域，圖片本身的顏色是不會變的。

           

          1 2 3 4 5 6 7 <ImageButton android:layout_width=wrap_content android:layout_height=wrap_content android:src=@drawable/upload_pressed android:padding=5dp android:layout_centerVertical=true android:background=@drawable/button_selector/>

           

          效果如圖：