Android Activity-GridView使用學習
我們將通過兩個例子學習GridView。Grid和Table有一點點類似。我們將在例子中逐步描繪如何編寫一個Grid的Activity
例子一:繼承ArrayAdapter作為自定義adapter
1、編寫Android XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:id="@+id/selection4"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<GridView android:id="@+id/grid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:verticalSpacing="35px" <!-- grid元素之間的豎直間隔 -->
android:horizontalSpacing="5px" <!--grid元素之間的水平間隔 -->
android:numColumns="auto_fit" <!--表示有多少列,如果設置為auto_fit,將根據columnWidth和Spacing來自動計算 -->
android:columnWidth="100px" <!-- 一般建議采用有像素密度無關的dip或者dp來表示-->
android:stretchMode="columnWidth" <!--如何填滿空余的位置,模擬器采用WVGA800*480,每排4列,有4*100+5*3=415,還余65px的空間,如果是 columnWidth,則這剩余的65將分攤給4列,每列增加16/17px。如果采用SpacingWidth,則分攤給3個間隔空隙 -->
android:gravity="center" />
</LinearLayout>
2、編寫代碼。和其他selected widget,我們之前學習的ListView和Spinner的方式,通過setAdapter()來提供數據和子View顯示風格,通過觸發 setOnItemSelectedListener()注冊選擇listner。在這里處理選擇之外,我們增加一個Click的觸發,可以比較一下此兩 的差異。此次我們不再使用Android自帶的格式,而設置我們自己的UI風格。
public class Chapter7Test4 extends Activity implements OnItemSelectedListener,OnItemClickListener{
private TextView selection = null;
private String[] items={"lorem", "ipsum", "dolor", "sit", "amet", "hello", "me", "elit", "morbi", "vel", "ligula", "vitae", "arcu", "aliquet", "mollis", "etiam", "vel", "erat", "placerat", "ante","hi", "sodales", "test", "augue", "purus"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.chapter_7_test4);
selection = (TextView)findViewById(R.id.selection4);
GridView grid= (GridView)findViewById(R.id.grid);
//步驟1:設置ArrayAdapter,可以采用android自帶的格式,也可以自定義,這里我們將自己定義。
grid.setAdapter( new FunnyLookingAdapter(this, android.R.layout.simple_list_item_1,items));
//grid.setAdapter(new ArrayAdapter(this,android.R.layout.simple_list_item_1,items));
//步驟2:設置元素被選擇以及被點擊的回調觸發處理
grid.setOnItemSelectedListener(this);
grid.setOnItemClickListener(this);
}
//步驟3:編寫CallBack觸發函數
@Override /* 這是OnItemSelectedListener接口*/
public void onItemSelected(AdapterView arg0, View arg1, int arg2, long arg3) {
selection.setText(items[arg2]);
}
@Override /* 這是OnItemSelectedListener接口*/
public void onNothingSelected(AdapterView arg0) {
selection.setText("");
}
@Override /* 這是OnItemClickListener接口*/
public void onItemClick(AdapterView arg0, View arg1, int arg2, long arg3) {
selection.setText("Clicked: " + items[arg2]);
}
//步驟4:編寫自定義的adapter,繼承ArrayAdapter
private class FunnyLookingAdapter extends ArrayAdapter{
private Context context;
private String[] theItems;
//步驟4.1:編寫adapter的構造函數
FunnyLookingAdapter( Context context, int resource, String[] items){
super(context,resource,items);
this.context = context;
theItems = items;
}
//步驟4.2:重寫getView(),對每個單元的內容以及UI格式進行描述
/*如果我們不使用TextView,則我們必須通過getView()對每一個gridview單元進行描述。這些單元可以是Button,ImageView,在這里我們使用Button和TextView分別作測試 重寫override getView(int, View, ViewGroup),返回任何我們所希望的view。*/
public View getView (int position, View convertView, ViewGroup parent){
TextView label = (TextView)convertView;
//我們測試發現,除第一個convertView外,其余的都是NULL,因此如果沒有view,我們需要創建
if(convertView == null){
convertView = new TextView(context);
label = (TextView)convertView;
}
label.setText(position + ": " + theItems[position]);
return convertView;
}
}// End of class FunnyLookingAdapter
}
左圖是使用android自帶的粗體格式,即被注釋掉的setAdapter,圖二為例子源代碼示例,圖右將 FunnyLookingAdapter中的getView()用Button代替TextView,這是發現有一個有趣的現象,Button是檢測 Click動作,而我們在類中通過setItemClickListener中設置了對GridView中的item檢測Click的動作,這兩個是重疊 的,而將優先監聽Button的Click,即我們定制的GridView中將得不到觸發,這需特別注意。
例子二:繼承BaseAdapter作為自定義adapter
這是來自Totorial的例子。在這里GridView里面的元素是ImageView。Android XML的文件很簡單:
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center" >
我們在來看看Java code。
1)我們將圖片,copy至res/drawable-hdpi/中。
2)設置GridView的adapter,并設置點擊觸發函數,點擊后采用Toast顯示點擊的序號。
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.chapter_7_test5);
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(this, ""+position, Toast.LENGTH_SHORT).show();
}
});
}
3)設置我們自子的ImageAdapter,繼承BasAdapter。
public class ImageAdapter extends BaseAdapter{
private Context context = null;
// references to our images
private Integer[] mThumbIds = {R.drawable.sample_2, R.drawable.sample_3,R.drawable.sample_4, R.drawable.sample_5,R.drawable.sample_6,...// 這里是文件的對應的Id,不在具體列出};
//步驟1: 構造函數
public ImageAdapter(Context context){
this.context = context;
}
//步驟2:BaseAdapter需要重構四個方法getCount(),getItem(),getItemId(int position),getView()
//步驟2.1:getCount() 表示How many items are in the data set represented by this Adapter.
public int getCount() {
return mThumbIds.length;
}
//步驟2.2:getItem()根據需要position獲得布放在GridView的對象。在這個例子中,我們不需要處理里面的對象,可以設為null
public Object getItem(int position) {
return null;
}
//步驟2.3:getItemId()獲得row id(Get the row id associated with the specified position in the list),由于我們也不需要,簡單的設為0
public long getItemId(int position) {
return 0;
}
//步驟2.4:獲得GridView里面的View,Get a View that displays the data at the specified position in the data set. 和第一個例子一樣,傳遞的第二個函數可能為null,必須進行處理。
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView = null;
if(convertView == null){
imageView = new ImageView(context);
// 設置View的height和width:這樣保證無論image原來的尺寸,每個圖像將重新適合這個指定的尺寸。
imageView.setLayoutParams(new GridView.LayoutParams(85,85));
/* ImageView.ScaleType.CENTER 但不執行縮放比例
* ImageView.ScaleType.CENTER_CROP 按比例統一縮放圖片(保持圖片的尺寸比例)便于圖片的兩維(寬度和高度)等于或大于相應的視圖維度
* ImageView.ScaleType.CENTER_INSIDE 按比例統一縮放圖片(保持圖片的尺寸比例)便于圖片的兩維(寬度和高度)等于或小于相應的視圖維度 */
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8,8,8,8);
}else{
imageView = (ImageView)convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
}
我們設置了幾種scaleType,下面左圖是ImageView.ScaleType.CENTER_CROP,中圖是ImageView.ScaleType.CENTER_INSIDE,右圖是ImageView.ScaleType.CENTER