android基礎入門GridView視圖(12)

一.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;
	}

}

運行圖片:



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章