12.3.1 照片墻效果 實現照片墻效果需要用到GridView，下面先準備好GridView所需的布局文件以及item的布局文件，如下所示。 // GridView的布局文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="5dp" > <GridView android:id="@+id/gridView1" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:horizontalSpacing="5dp" android:verticalSpacing="5dp" android:listSelector="@android:color/transparent" android:numColumns="3" android:stretchMode="columnWidth" > </GridView> </LinearLayout> // GridView的item的布局文件 <? xml version="1.0" encoding="utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical" > <com.ryg.chapter_12.ui.SquareImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="wrap_content" android:scaleType="centerCrop" android:src="@drawable/image_default" /> </LinearLayout> 也許讀者已經注意到，GridView的item的布局文件中并沒有采用ImageView，而是采用了一個叫SquareImageView的自定義控件。顧名思義，它的作用就是打造一個正方形的ImageView，這樣整個照片墻看起來會比較整齊美觀。要實現一個寬、高相等的ImageView是非常簡單的一件事，只需要在它的onMeasure方法中稍微做一下處理，如下所示。 public class SquareImageView extends ImageView { public SquareImageView(Context context) { super(context); } public SquareImageView(Context context, AttributeSet attrs) { super(context, attrs); } public SquareImageView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, widthMeasureSpec); } } 可以看出，我們在SquareImageView的onMeasure方法中很巧妙地將heightMeasureSpec替換為widthMeasureSpec，這樣什么都不用做就可以一個寬、高相等的ImageView了。關于View的測量等過程的介紹，請讀者參看第4章的有關內容，這里不再贅述了。 接著需要實現一個BaseAdapter給GridView使用，下面的代碼展示了ImageAdapter的實現細節，其中mUrList中存儲的是圖片的url： private class ImageAdapter extends BaseAdapter { ... @Override public int getCount() { return mUrList.size(); } @Override public String getItem(int position) { return mUrList.get(position); } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent){ ViewHolder holder = null; if (convertView == null) { convertView = mInflater.inflate(R.layout.image_list_item, parent, false); holder = new ViewHolder(); holder.imageView = (ImageView) convertView.findViewById(R. id.image); convertView.setTag(holder); } else { holder = (ViewHolder) convertView.getTag(); } ImageView imageView = holder.imageView; final String tag = (String)imageView.getTag(); final String uri = getItem(position); if (! uri.equals(tag)) { imageView.setImageDrawable(mDefaultBitmapDrawable); } if (mIsGridViewIdle && mCanGetBitmapFromNetWork) { imageView.setTag(uri); mImageLoader.bindBitmap(uri, imageView, mImageWidth, mImage- Width); } return convertView; } } 從上述代碼來看，ImageAdapter的實現過程非常簡捷，這幾乎是最簡潔的BaseAdapter的實現了。但是簡潔并不等于簡單，getView方法中核心代碼只有一句話，那就是：mImageLoader.bindBitmap(uri, imageView, mImageWidth, mImageWidth)。通過bindBitmap方法很輕松地將復雜的圖片加載過程交給了ImageLoader, ImageLoader加載圖片以后會把圖片自動設置給imageView，而整個過程，包括內存緩存、磁盤緩存以及圖片壓縮等工作過程對ImageAdapter來說都是透明的。在這種設計思想下，ImageAdapter什么也不需要知道，因此這是一個極其輕量級的ImageAdapter。 接著將ImageAdapter設置給GridView，如下所示。到此為止一個絢麗的圖片墻就大功告成了，是不是驚嘆于如此簡捷而又優美的實現過程呢？ mImageGridView = (GridView) findViewById(R.id.gridView1); mImageAdapter = new ImageAdapter(this); mImageGridView.setAdapter(mImageAdapter); 最后，看一下我們親手打造的圖片墻的效果圖，如圖12-1所示。是不是看起來很優美呢？ :-:  圖12-1 采用ImageLoader實現的照片墻 另外，本節中的照片墻應用首次運行時會從網絡中加載大量圖片，這會消耗若干MB的流量，因此建議首次運行時選擇WiFi環境，同時程序啟動時也會有相應的提示，在非WiFi環境下，打開應用時會彈出如下提示，請讀者運行時注意一下，避免消耗過多的流量。 if (! mIsWifi) { AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setMessage("初次使用會從網絡中下載大概5MB的圖片，確認要下載嗎？"); builder.setTitle("注意"); builder.setPositiveButton("是", new OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { mCanGetBitmapFromNetWork = true; mImageAdapter.notifyDataSetChanged(); } }); builder.setNegativeButton("否", null); builder.show(); }