29: Android GridView - 使用 BaseAdapter 建立和更新

在建立方面：

以下方法取自Kelvin Chan，使用BaseAdapter建立一個gridview，
並對gridview中每一格作出仔細的處理，藉此達成顯示不同的效果，
此方法雖然比較複雜，但可以套用在不同的控件上，例如ListView和
Spinner等等，可以說是萬能！

<-- 目標

Step 1 : 建立XML文件

按上圖可見，在Project的res->layout 下有兩個xml文件，
1. activity_main.xml : 這個xml檔是用來規劃MainActivity.java
在建立android project時已經預設建立好，無需再自行建立。
2. listitem.xml : 這個xml檔需要自行建立，
    方法是先R-click layout -> New -> Android XML file
    在 file : 打上listitem，其他設定default就好了。
這個xml作用是用於規畫GridView中每個格仔的佈局。

Step 2 : 修改兩個 XML文件

1.在 activity_main.xml 中,

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:paddingBottom="@dimen/activity_vertical_margin"
      android:paddingLeft="@dimen/activity_horizontal_margin"
      android:paddingRight="@dimen/activity_horizontal_margin"
      android:paddingTop="@dimen/activity_vertical_margin"
      tools:context=".MainActivity" >

    

    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#DCDCDC"
        android:gravity="center"
        android:horizontalSpacing="1dp"
        android:verticalSpacing="1dp"
        android:numColumns="7"
        android:stretchMode="columnWidth"

     >
    </GridView>



</RelativeLayout>

- 灰色部份已經在建立Project時預設了，可以忽略，主要是增設黃色部份。
- horizontalSpacing : 定義列之間的間距
- verticalSpacing ：定義欄之間的間距
- stretchMode：格子拉伸模式
( none：不要伸縮 /
   spacingWidth：拉伸每列的間距 /
   columnWidth：拉伸每格 /
   spacingWidthUniform：均勻拉伸間距)

2. 在listitem.xml中,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >


    <TextView
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:background="#ffffff"
        android:textSize="20sp"
        android:id="@+id/tv"></TextView>

</LinearLayout>

註：TextView 將會題示數目字

Step 3 : 建立兩個自設類別及修改主程序

package wtf.kyl.blog;
import java.util.ArrayList;
import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.TextView;
public class MainActivity extends Activity {
// 宣告所需元件
GridView gv;
Adapter adapter; // 將會繼承baseadapter
Item item; // 一個自設的class object, 指的是每個格仔, 待會需要create 42個 Item 物件
ArrayList <Item> ary_items; // 就像一個容器裝載全部的 Item 物件
int total = 42; // 共需建立的格仔總數，預設就42吧
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
GridView gv = (GridView) findViewById(R.id.gridview);
ary_items = new ArrayList<Item>(); // 建立一個容器
addItems(total); // 自設類別方法處理建立Item物件, 日後在更新GridView時將會大派用場。
adapter = new Adapter(this, ary_items); // 建立適調器，並傳入兩個Arguments，
// this指當前activity，ary_items就是容器，執行
// addItems()後，容器已經裝住了42個Item物件
gv.setAdapter(adapter); // 告訴Gridview知道它的適調器是adapter
}
public void addItems(int total){ // 自設方法
for(int i=1; i<=total; i++){ // loop total=42 times
item = new Item(); // 每次建立一個item物件
item.day = i; // 告訴 item 物件中 day 這個變量的值是 i
if(i%2==0) item.isEvenNumber = true; // odd and even checking
else item.isEvenNumber = false;
ary_items.add(item); // 把item物件扔進容器ary_items
}
}
}
class Item { // 自設item類別
int day;
boolean isEvenNumber;
}
class Adapter extends BaseAdapter{
Context context; // context 會指向mainactivity
ArrayList<Item> ary_items; // 容器，已經裝滿42個item物件
// 自設Default Constructor，用以接收activity和容器
public Adapter(Context context, ArrayList<Item> ary_items){
this.context = context;
this.ary_items = ary_items;
}
// Overriding BaseAdapter中的內建方法
@Override
public int getCount() { // item總數量
// TODO Auto-generated method stub
return ary_items.size();
}
@Override
public Object getItem(int arg0) { // 無須理會，在處理點擊事件時才會調用
// TODO Auto-generated method stub
return 0;
}
@Override
public long getItemId(int arg0) { // 無須理會，在處理點擊事件時才會調用
// TODO Auto-generated method stub
return 0;
}
@Override
public View getView(int arg0, View arg1, ViewGroup arg2) { // arg0 = 每格的ID
if(arg1==null){
LayoutInflater a = LayoutInflater.from(context); // LayoutInflater可以幫助我們把
arg1 = a.inflate(R.layout.listitem, null); // listitem中的佈局FIT返每一格的SIZE
}
TextView tv = (TextView) arg1.findViewById(R.id.tv);
tv.setText(""+ary_items.get(arg0).day);
if(ary_items.get(arg0).isEvenNumber==true) tv.setTextColor(Color.RED);
if(ary_items.get(arg0).day == 26) tv.setBackgroundColor(Color.GREEN);
if(ary_items.get(arg0).day == 17) tv.setBackgroundColor(Color.YELLOW);
return arg1; // arg1 指該格仔，android中視每一格為一個view
}
}

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

在更新方面：

增加兩個Button作測試，並利用adapter告知GridView需要更新

＜﹣﹣最終目標

Step 1 : 在activity_main.xml檔加設Button控件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >


    

    <GridView
        android:id="@+id/gridview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#DCDCDC"
        android:gravity="center"
        android:horizontalSpacing="1dp"
        android:numColumns="7"
        android:stretchMode="columnWidth"
        android:verticalSpacing="1dp"
     >
    </GridView>


    

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">


      <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">

     </Button>
     <Button
         android:id="@+id/button2"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:layout_weight="1"></Button>

     </LinearLayout> </RelativeLayout>

Step 2 : 修改MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
GridView gv = (GridView) findViewById(R.id.gridview);
ary_items = new ArrayList<Item>();
addItems(total);
adapter = new Adapter(this, ary_items);
gv.setAdapter(adapter);
// 增設兩個Button
Button btn_add = (Button) findViewById(R.id.button1);
btn_add.setText("add one");
Button btn_del = (Button) findViewById(R.id.button2);
btn_del.setText("delete one");
// 建立點擊事件，需要import android.view.View.OnClickListener;
btn_del.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View arg0) {
total--;
ary_items.clear(); // 把容器中的Item全部清除
addItems(total); // 重新加入Item
adapter.notifyDataSetChanged(); // 利用Adapter告知GridView需要更新Item
}
});
btn_add.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
total++;
ary_items.clear();
addItems(total);
adapter.notifyDataSetChanged();
}
});
}

完成：D

29

2015年1月27日星期二

Android GridView - 使用 BaseAdapter 建立和更新

沒有留言:

張貼留言

2015年1月27日 星期二

Android GridView - 使用 BaseAdapter 建立 和 更新

沒有留言:

張貼留言

2015年1月27日星期二

Android GridView - 使用 BaseAdapter 建立和更新