android基础入门GridView视图(12)

浏览数：25 / 时间：2015年06月11日

一.GridView（网格视图）:

我们可以将GridView和一个ImageView配合使用来显示一系列的图像。

GridView属性介绍：

android:columnWidth 设置列的宽度。

android:verticalSpacing 设置两行之间的间距。

android:horizontalSpacing 设置两列之间的间距。

android:stretchMode 设置缩放模式。

android:numColumns 设置显示的列数。

android:gravity 设置此组件中的内容在组件中的位置。可选的值有：top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical可以多选，用“|”分开。

实例演示：

布局文件：

<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/gridView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:verticalSpacing="10dp"
        android:horizontalSpacing="10dp"
        android:stretchMode="columnWidth"
        android:gravity="center"
        android:numColumns="3" >
    </GridView>
    <ImageView 
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</LinearLayout>

实现代码：

public class MainActivity extends Activity {
         //可以自己设置图片，图片大小不宜过大。
	Integer[] img = {
			R.drawable.img1,
			R.drawable.img2,R.drawable.img3,
			R.drawable.img4,R.drawable.img5,			
			R.drawable.img8,R.drawable.img9,
	};
    private ImageView imgView;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		imgView = (ImageView)findViewById(R.id.img);
		GridView gird = (GridView)findViewById(R.id.gridView1);
		
		gird.setAdapter(new ImageAdapter(this));
		
		gird.setOnItemClickListener(new  OnItemClickListener() {
			@Override
			public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
					long arg3) {
				imgView.setBackgroundResource(img[arg2]);
				Toast.makeText(getApplicationContext(), "点击了"+arg2, Toast.LENGTH_SHORT).show();
			}
		});
		
	}
	
	public class ImageAdapter extends BaseAdapter{

		public Context context;
		
		public ImageAdapter(Context context){
			this.context = context;
		}
		
		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return img.length;
		}

		@Override
		public Object getItem(int position) {
			// TODO Auto-generated method stub
			return position;
		}

		@Override
		public long getItemId(int position) {
			// TODO Auto-generated method stub
			return position;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			// TODO Auto-generated method stub
			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(img[position]);
			return imageView;
		
		}
		
		
	}
	

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

运行效果：

第二种实现方式：

主界面布局(activity_main.xml)：

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

显示布局(main.xml)：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="wrap_content"  
    android:layout_height="fill_parent"
    android:paddingBottom="6dip"
    >
    <ImageView  
       android:id="@+id/image_item"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerHorizontal="true"
       />
    <TextView  
       android:id="@+id/text_item"
       android:layout_below="@+id/image_item"
       android:layout_height="wrap_content"
       android:layout_width="wrap_content"
       android:layout_centerHorizontal="true"    
       />
 </RelativeLayout>

主要代码：

public class MainActivity extends Activity {

	 private GridView gv; 
     @Override
     protected void onCreate(Bundle savedInstanceState) { 
        // TODO Auto-generated method stub 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_main); 

        //准备要添加的数据条目 
        List<Map<String, Object>> items = new ArrayList<Map<String,Object>>(); 
        
        for (int i = 0; i < 9; i++) { 
          Map<String, Object> item = new HashMap<String, Object>(); 
          item.put("imageItem", R.drawable.ic_launcher);//使用系统默认图标  
          item.put("textItem", "icon" + i);//按序号添加ItemText   
          items.add(item); 
        } 

       //实例化一个适配器，第二个参数是需要绑定的数据，第三个参数是实现的布局方式，第四和第五个参数是实现组件与数据的绑定。
        SimpleAdapter adapter = new SimpleAdapter(this,  
                                                    items,  
                                                    R.layout.main,  
                                                    new String[]{"imageItem", "textItem"},  
                                                    new int[]{R.id.image_item, R.id.text_item}); 

        //获得GridView实例 
        gv = (GridView)findViewById(R.id.gridView1); 
        //为GridView设置适配器 
        gv.setAdapter(adapter); 
     }

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

运行图片：