0%

Android UI设计 GridView显示图片

2011年05月13日修正:GridView并非图片列表,而是一个表格控件,相当于HTML的Table,之前给各位新手朋友造成的误解,请见谅。本文的例子是用GridView显示图片。以下文字中的错误没有修改,请注意。 GridView展示的是一个图片浏览器(或者叫图片列表),一般用来显示多张图片的缩略图,可能我说得不够明白,看效果图吧! 因为是为FWVGA(MS/DROID)设计的,所以在HVGA的模拟器上显示有点挤。 布局XML:

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<GridView
    android:id="@+id/grid_view"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:numColumns="3" 
    android:verticalSpacing="5dp"
    android:horizontalSpacing="5dp"
    android:columnWidth="20dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
/>
</AbsoluteLayout>

程序代码:

package com.pocketdigi;
 
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
 
import android.widget.BaseAdapter;
 
 
import android.widget.GridView;
 
import android.widget.ImageView;
 
 
public class main  extends Activity  {
 
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.grid_view);
        setTitle("GridViewActivity");
        GridView gridview = (GridView) findViewById(R.id.grid_view);
        gridview.setAdapter(new ImageAdapter(this));
    }
 
 
    public class ImageAdapter extends BaseAdapter {
        private Context mContext;
 
        public ImageAdapter(Context c) {
            mContext = c;
        }
 
        public int getCount() {
            return mThumbIds.length;
        }
 
        public Object getItem(int position) {
            return null;
        }
 
        public long getItemId(int position) {
            return 0;
        }
 
        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView imageView;
            if (convertView == null) {  
                imageView = new ImageView(mContext);
                imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                imageView.setPadding(8, 8, 8, 8);
            } else {
                imageView = (ImageView) convertView;
            }
 
            imageView.setImageResource(mThumbIds[position]);
            return imageView;
        }
 
        // references to our images
        private Integer[] mThumbIds = {
                R.drawable.grid_view_01, R.drawable.grid_view_02,
                R.drawable.grid_view_03, R.drawable.grid_view_04,
                R.drawable.grid_view_05, R.drawable.grid_view_06,
                R.drawable.grid_view_07, R.drawable.grid_view_08,
                R.drawable.grid_view_09, R.drawable.grid_view_10,
                R.drawable.grid_view_11, R.drawable.grid_view_12,
                R.drawable.grid_view_13, R.drawable.grid_view_14,
                R.drawable.grid_view_15, R.drawable.sample_1,
                R.drawable.sample_2, R.drawable.sample_3,
                R.drawable.sample_4, R.drawable.sample_5,
                R.drawable.sample_6, R.drawable.sample_7
        };
    }
 
 
 
}