Android GridView九宮圖

openkk 13年前發布 | 66K 次閱讀 Android Android開發移動開發

屬性名稱	描述
android:columnWidth	設置列的寬度。
android:gravity	設置此組件中的內容在組件中的位置。可選的值有：top、bottom、left、right、center_vertical、 fill_vertical、center_horizontal、fill_horizontal、center、fill、 clip_vertical可以多選，用“\|”分開。
android:horizontalSpacing	兩列之間的間距。
android:numColumns	設置列數。
android:stretchMode	縮放模式。
android:verticalSpacing	兩行之間的間距。

案例一：

1.定義一個布局文件：gridview.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">
    <GridView
        android:id="@+id/gridview_main"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:numColumns="auto_fit"
        android:verticalSpacing="1dp"
        android:horizontalSpacing="1dp"
        android:columnWidth="90dp"
        android:stretchMode="columnWidth"
        android:gravity="center"
        >
    </GridView>
</LinearLayout>

android:numColumns="auto_fit"--列數設置為自動；

android:columnWidth="90dp"--每列的列寬，也就是item的寬度

android:verticalSpacing="1dp"--兩行之間的邊距

android:horizontalSpacing="1dp"--兩列之間的邊距

android:stretchMode="columnWidth"--縮放與列寬大小同步

2。接下來定義gridview_item.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"
    >
    <ImageView
        android:id="@+id/gridview_imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
     >
    </ImageView>
    <TextView 
        android:id="@+id/gridview_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView01"
        android:gravity="center"
      />
</LinearLayout>

3.最后定義Java的源代碼了，GridViewDemo.java

package com.test;
import java.util.ArrayList;
import java.util.HashMap;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.SimpleAdapter;
public class GridViewDemo extends Activity {
    int [] image={R.drawable.android,R.drawable.blackberry,R.drawable.windowshone,R.drawable.windowshone,R.drawable.blackberry,R.drawable.android,R.drawable.windowshone,R.drawable.ios,R.drawable.blackberry};
    private GridView gridView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);

        setContentView(R.layout.gridview_main);

        gridView = (GridView)findViewById(R.id.gridview_main);
        //生成動態數組，并且轉入數據 
        ArrayList<HashMap<String, Object>>  list=new ArrayList<HashMap<String,Object>>();

        for(int i=0;i<9;i++)
        {
            HashMap<String, Object>  map = new HashMap<String, Object>();

               map.put("ItemImage", image[i]);//添加圖像資源的ID  
               map.put("itemtext","Amigos_pop-"+String.valueOf(i));
               list.add(map);
        }
         //生成適配器的ImageItem <====> 動態數組的元素，兩者一一對應  
        SimpleAdapter   adapter=new SimpleAdapter(this, //數據來源 
                list,R.layout.gridview_item,//XML實現  
                new String[]{"ItemImage","itemtext"}, //動態數組與ImageItem對應的子項          
                new int[]{R.id.gridview_imageview,R.id.gridview_textview}//  //ImageItem的XML文件里面的一個ImageView,兩個TextView ID  
               );
         //添加并且顯示  
        gridView.setAdapter(adapter);
        //添加消息處理
        gridView.setOnItemClickListener(clickListener);
    }
      //當AdapterView被單擊(觸摸屏或者鍵盤)，則返回的Item單擊事件  
    private  OnItemClickListener  clickListener=new OnItemClickListener() {

        @Override
        public void onItemClick(AdapterView<?> arg0,//The AdapterView where the click happened   
                View arg1,//The view within the AdapterView that was clicked  
                int arg2,//The position of the view in the adapter  
                long arg3//The row id of the item that was clicked  
                ) 
        {

            HashMap<String, Object>  item=(HashMap<String, Object>)arg0.getItemAtPosition(arg2);

            setTitle((String)item.get("itemtext"));
        }
    };
}

4：執行效果：

Android GridView九宮圖

===============================================================================

案例二：同樣的效果：

布局文件使用上面一樣的：

定義一個ImageAdapter類，此類繼承BaseAdapter如下：

package com.test;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class GridViewAdapter extends BaseAdapter {

    //定義Context
    private Context  mContext;

    //定義整形數組 （圖片資源）
    private  int []  mimages=
    {
     R.drawable.android,R.drawable.blackberry,R.drawable.windowshone,
     R.drawable.windowshone,R.drawable.blackberry,R.drawable.android,
     R.drawable.windowshone,R.drawable.ios,R.drawable.blackberry

    };

    public GridViewAdapter(Context  c) 
    {
        mContext=c;
    }

    //獲取圖片的個數
    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return mimages.length;
    }
   // 獲取圖片在庫中的位置
    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return position;
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) 
    {
       ImageView mimageView;
       if(convertView==null)
       {
           //給Imageview設置資源
           mimageView = new ImageView(mContext);
           //設置布局圖片120*120顯示

           mimageView.setLayoutParams(new GridView.LayoutParams(85, 85));

           mimageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

           mimageView.setPadding(8, 8, 8, 8);
       }else
       {
           mimageView=(ImageView) convertView; 
       }
       mimageView.setImageResource(mimages[position]);
       return mimageView;
    }
}

package com.test;
import java.util.ArrayList;
import java.util.HashMap;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.SimpleAdapter;
import android.widget.Toast;
public class GridViewDemo_2 extends Activity {
    private GridView  gridView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.gridview_main);

        gridView = (GridView)findViewById(R.id.gridview_main);

        gridView.setAdapter(new GridViewAdapter(this));//調用GridViewAdapter

        gridView.setOnItemClickListener(clickListener);
    }

    private  OnItemClickListener  clickListener =new OnItemClickListener() {

        @Override
        public void onItemClick(AdapterView<?> arg0, View arg1, int position,
                long id) {
            Toast.makeText(GridViewDemo_2.this, ""+position,Toast.LENGTH_SHORT).show();//顯示信息; 

        }
    };
}

效果：

Android GridView九宮圖

本文由用戶 openkk 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1339638204912.html

Android Android開發移動開發

Android GridView九宮圖

相關經驗

相關資訊

相關文檔

目錄