Android 程式開發：（十四）顯示圖像 —— 14.3 GridView

 1. 創建一個工程，Grid。
 
2. 在res/drawable-mdpi下面放一些圖片。
 
3. main.xml中的代碼。
 
[html]
<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:orientation="vertical" > 
 
<GridView  
    android:id="@+id/gridview" 
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent" 
    android:numColumns="auto_fit" 
    android:verticalSpacing="10dp" 
    android:horizontalSpacing="10dp" 
    android:columnWidth="90dp" 
    android:stretchMode="columnWidth" 
    android:gravity="center" /> 
 
</LinearLayout> 
4. GridActivity.java中的代碼。
[java]
public class GridActivity extends Activity { 
    //—the images to display— 
    Integer[] imageIDs = { 
            R.drawable.pic1, 
            R.drawable.pic2, 
            R.drawable.pic3, 
            R.drawable.pic4, 
            R.drawable.pic5, 
            R.drawable.pic6, 
            R.drawable.pic7 
    }; 
 
    /** Called when the activity is first created. */ 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.main); 
         
        GridView gridView = (GridView) findViewById(R.id.gridview); 
        gridView.setAdapter(new ImageAdapter(this)); 
 
        gridView.setOnItemClickListener(new OnItemClickListener() 
        { 
            public void onItemClick(AdapterView<?> parent, 
            View v, int position, long id) 
            { 
                Toast.makeText(getBaseContext(), 
                        "pic" + (position + 1) + " selected", 
                        Toast.LENGTH_SHORT).show(); 
            } 
        }); 
 
    } 
     
    public class ImageAdapter extends BaseAdapter  
    { 
        private Context context; 
 
        public ImageAdapter(Context c) 
        { 
            context = c; 
        } 
 
        //—returns the number of images— 
        public int getCount() { 
            return imageIDs.length; 
        } 
 
        //—returns the item— 
        public Object getItem(int position) { 
            return position; 
        } 
 
        //—returns the ID of an item— 
        public long getItemId(int position) { 
            return position; 
        } 
 
        //—returns an ImageView view— 
        public View getView(int position, View convertView, 
        ViewGroup parent) 
        { 
            ImageView imageView; 
            if (convertView == null) { 
                imageView = new ImageView(context); 
                imageView.setLayoutParams(new 
                    GridView.LayoutParams(85, 85)); 
                imageView.setScaleType( 
                    ImageView.ScaleType.CENTER_CROP); 
                imageView.setPadding(5, 5, 5, 5); 
            } else { 
                imageView = (ImageView) convertView; 
            } 
            imageView.setImageResource(imageIDs[position]); 
            return imageView; 
        } 
    } 
 
} 
5. 按F11在模擬器上面調試。
 
 
 
 
就像Gallery和ImageSwitcher一樣，在這裡，也需要實現ImageAdapter類，然後把它和GridView綁定：
 
[java]  
gridView.setAdapter(new ImageAdapter(this)); 
 
        gridView.setOnItemClickListener(new OnItemClickListener() 
        { 
            public void onItemClick(AdapterView<?> parent, 
            View v, int position, long id) 
            { 
                Toast.makeText(getBaseContext(), 
                        "pic" + (position + 1) + " selected", 
                        Toast.LENGTH_SHORT).show(); 
            } 
        }); 
當圖片被選擇，就是彈出一個Toast通知。
在getView()方法中，指定瞭圖片的大小，同時，也設置瞭圖片之間的空隙尺寸。
 
[java] 
    //—returns an ImageView view— 
    public View getView(int position, View convertView, 
    ViewGroup parent) 
    { 
        ImageView imageView; 
        if (convertView == null) { 
            imageView = new ImageView(context); 
            imageView.setLayoutParams(new 
                GridView.LayoutParams(85, 85)); 
            imageView.setScaleType( 
                ImageView.ScaleType.CENTER_CROP); 
            imageView.setPadding(5, 5, 5, 5); 
        } else { 
            imageView = (ImageView) convertView; 
        } 
        imageView.setImageResource(imageIDs[position]); 
        return imageView; 
    } 
}