Android 有趣味的GridView

標籤：

工作這麼久以來，都是以解決需求為目標。漸漸發現這種學習方式不好，學到的知識能馬上解決問題，但沒有經過梳理歸納。故想系統總結下一些有趣味的知識點。在這篇部落格中想以一個例子系統講解下GridView控制項涉及到的方方面面，比如監聽，背景圖的設定等。

　　1.控制項屬性介紹

 

android:listSelector="@drawable/bg"

 

  //該屬性很重要，如果不設定的話，GridView控制項會內建自己的選中樣式(黃色邊框)，：

  做項目一般是不需要這個的。所以解決辦法是將GridView的android:listSelector屬性設定為和Activity背景相同即可。
　　　　android:verticalSpacing="10dp"  //行寬
　　　　android:horizontalSpacing="10dip"  //列寬
　　　　android:numColumns="3"  //列數

　　　　android:stretchMode="columnWidth"  //列可擴充
　　　   以上列數為3，若想在高解析度中列數設定為4怎麼辦呢。

　　　　首先，需要在屬性中設定列為可擴充android:stretchMode="columnWidth"。然後在代碼中做個判斷：

　　　　if(Metrics.heightPixels == 1280 && Metrics.widthPixels == 800){
             　　gridview.setNumColumns(4);
        　　}這樣GridView的列數是可以隨解析度不同而做更多的設定。

2.例子一：設定個邊框，並且右上方設定個CheckBox來美化選中狀態(左圖→右圖)。

到

這個Item的xml設計中，我是用兩個ImageView控制項來實現的.　　 第一個ImageView 要設定一個屬性：android:layout_margin="4dip"。上下左右留出4dip的具體來顯示邊框的效果。並且在相應的Adapter中做個判斷，選中的話背景圖片顏色為#87CEFA，未選中時為3FFFFFF：　　if(bSelect){ //bSelect表示是否選中     　　 arg1.setBackgroundColor(Color.parseColor("#87CEFA")); 　  }else{   　　   arg1.setBackgroundColor(Color.parseColor("#FFFFFF"));　　右上方的看起來像複選框，其實我也是用ImageView控制項來實現的。介面設計很重要，距離要對好。我設定的該控制項離上邊距和右邊距分別為2dip的距離。同樣的只需要修改該ImageView所綁定的圖片就可以。　　if(bSelect){   　　viewclass.checkboxImage.setImageBitmap(bmpwater_sel); //bmpwater_sel表示左圖右上方的圖片 　  }else{   　　viewclass.checkboxImage.setImageBitmap(bmpwater_unsel); //bmpwater_unsel表示右圖右上方的圖片      }

　3.例子二：開啟一個GridView控制項的Activity時，如果開啟的圖片過多，如何讓圖片非同步載入。：

到

首先在介面定義中要定義一個全螢幕顯示的載入圈效果，叫做mLoading。程式剛啟動時顯示圖片載入結束後調用函數mLoading.setVisibility(View.GONE);讓它不顯示。我是用一個函數來調用它，這樣更好的體現了封裝性，如下：

　　 private void showLoading(boolean bShow){
 　　　　 if(mLoading == null) return;
  　　　　mLoading.setVisibility(bShow ? View.VISIBLE : View.GONE);
　　 }

xml中該載入框的設計如下：

 

<span style="font-size: 13px;"><RelativeLayout android:id="@+id/video_tip_layout"    android:layout_width="fill_parent" android:layout_height="fill_parent"><ProgressBar style="?android:attr/progressBarStyleLarge"    android:layout_width="wrap_content" android:id="@+id/video_tip_progressbar"    android:layout_height="wrap_content" android:layout_centerVertical="true"    android:layout_centerHorizontal="true" /><TextView android:textAppearance="?android:attr/textAppearanceMedium"    android:id="@+id/video_tip_text" android:text="載入中..."    android:layout_width="wrap_content" android:layout_height="wrap_content"    android:layout_below="@+id/video_tip_progressbar"    android:textColor="#808080"    android:layout_centerHorizontal="true"></TextView></span>

 

　　①為了不卡主線程，實現這一的效果要多開一個線程。在該線程中調用函數 InitList(),在該函數中將圖片載入到ArrayList中去(花時間最多的就是對多圖片的處理，這個放在子線程中可以不卡主線程，如果直接在主 線程中做，會讓畫面出現2-3秒的黑屏停頓)。

　　像這樣，在onCreate方法中開一個子線程：

　　new Thread(new Runnable() {
   　　@Override
  　　 public void run() {
   　　　　 InitList();
  　　 }
 　　 }).start();

　　②方法InitList()中要做兩件事情。一是載入圖片，二是通知Handler圖片載入完成(因為子線程不可以操作UI控制項，只能通過Handler的方式)。

　　private void InitList()
　　{

　　　 XXXX; //載入圖片代碼
    　　mMainHandler.sendMessage(MainHandler.MSG_FINISH); //發送訊息
 　  }

　　③當收到InitList發送的訊息時就讓上面所提的mLoading不顯示。同時GridView綁定adapter的代碼也在這個裡面寫。因為圖片載入完成後再綁定adapter,這樣圖片才能全部顯示，否則只能顯示一部分。

　    case MSG_FINISH:
    　　　 showLoading(false); //讓載入框不再顯示
    　　　 gridview.setAdapter(ia); //綁定資料
     　　break;
    　default:
     　　break;

　　提供幾張我們專業設計師做的美圖，大家可以下載素材嘗試一下，做個demo。地址:http://www.kuaipan.cn/file/id_37676161790126914.html

　　

 

Android 有趣味的GridView