ในการเขียนโปรแกรม Android ทั้ง GridView และ ListView เป็นเลย์เอาต์แบบควบคุมหลายตัวที่ใช้กันทั่วไป และ GridView เป็นตัวเลือกแรกในการใช้ Nine Palaces Diagram! บทความนี้จะแนะนำวิธีใช้ GridView เพื่อนำ Nine Palaces Diagram ไปใช้ GridView มีประโยชน์หลายอย่าง วิธีที่แนะนำกันมากที่สุดบนอินเทอร์เน็ตคือการใช้ ImageAdapter เพื่อสืบทอด BaseAdapter แล้วใช้สำหรับ GridView วิธีการเช่นนี้จะไม่เกิดขึ้นซ้ำในบทความนี้ กับ ListView ที่แนะนำก่อนหน้านี้
ก่อนอื่นเรามาดูผลลัพธ์ของการรันโค้ดของบทความนี้กันก่อน:
บทความนี้จำเป็นต้องเพิ่ม/แก้ไข 3 ไฟล์: main.xml, night_item.xml และซอร์สโค้ด JAVA
ซอร์สโค้ด main.xml มีดังต่อไปนี้ เป็น GirdView ที่ใช้ในการโหลดรายการ:
<?xml version="1.0" encoding="utf-8"?><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:numColumns="auto_fit" android:verticalSpacing="10dp" android:horizontalSpacing="10dp" android:columnWidth="90dp" android:stretchMode="columnWidth" android:gravity="center"/>
ต่อไปนี้เป็นการแนะนำโดยย่อเกี่ยวกับคุณสมบัติบางส่วน:
android:numColumns="auto_fit" จำนวนคอลัมน์ของ GridView ถูกตั้งค่าเป็นอัตโนมัติ
android:columnWidth="90dp" คือความกว้างของแต่ละคอลัมน์ซึ่งเป็นความกว้างของ Item
android:stretchMode="columnWidth" การปรับขนาดจะซิงโครไนซ์กับขนาดความกว้างของคอลัมน์
android:verticalSpacing="10dp" ระยะขอบระหว่างสองแถว เช่น ระยะห่างระหว่างแถวที่หนึ่ง (NO.0~NO.2) และแถวที่สอง (NO.3~NO.5) คือ 10dp
android:horizontalSpacing="10dp" ระยะขอบระหว่างสองคอลัมน์
ต่อไป เราจะแนะนำ night_item.xml XML นี้คล้ายกับ ImageItem.xml ของ ListView ก่อนหน้านี้มาก:
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:paddingBottom ="4dip" android:layout_width="fill_parent"> <ImageView android:layout_height="wrap_content" android:id="@+id/ItemImage" android:layout_width="wrap_content" android:layout_centerHorizontal="true"> </ImageView> <TextView android:layout_width="wrap_content" android:layout_below="@+id/ItemImage" android:layout_height="wrap_content" android:text="TextView01" android:layout_centerHorizontal="true" android:id="@+id/ItemText"> </TextView></RelativeLayout>
ในที่สุดก็มีซอร์สโค้ด JAVA ซึ่งคล้ายกับซอร์สโค้ด ListView JAVA ก่อนหน้ามาก แต่มีการจัดการเหตุการณ์ "ที่เลือก" มากกว่า:
โมฆะสาธารณะ onCreate (Bundle saveInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.main); GridView gridview = (GridView) findViewById (R.id.gridview); // สร้างอาร์เรย์แบบไดนามิกและถ่ายโอนไปยัง ข้อมูล ArrayList <HashMap<String, Object>> lstImageItem = new ArrayList<HashMap<String, Object>>();for(int i=0;i<10;i++){ HashMap<String, Object> map = new HashMap<String, Object>(); map.put("ItemImage", R.drawable. ไอคอน);//เพิ่ม ID ของทรัพยากรรูปภาพ map.put("ItemText", "NO."+String.valueOf(i));//สร้าง ItemText ตามหมายเลขซีเรียล lstImageItem.add(map);}//สร้างองค์ประกอบ ImageItem <====> ของอแด็ปเตอร์ของอาร์เรย์ไดนามิก ทั้งสองสอดคล้องกัน SimpleAdapter แบบหนึ่งต่อหนึ่ง saImageItems = new SimpleAdapter(นี่, //ไม่มีคำอธิบาย lstImageItem,// แหล่งข้อมูล R.layout.night_item,//การใช้ XML ของ night_item//อาร์เรย์ไดนามิกและรายการย่อยที่สอดคล้องกับ ImageItem สตริงใหม่[] {"ItemImage", "ItemText"}, // ImageView หนึ่งรายการและ TextView ID สองรายการในไฟล์ ImageItem XML new int[] {R.id.ItemImage,R.id.ItemText});//เพิ่มและแสดง gridview setAdapter(saImageItems);//เพิ่มการประมวลผลข้อความ gridview.setOnItemClickListener(new ItemClickListener());}//เมื่อ AdapterView ถูกคลิก (หน้าจอสัมผัสหรือแป้นพิมพ์) คลาสเหตุการณ์การคลิก Item ที่ส่งคืน ItemClickListener จะใช้ OnItemClickListener{ public void onItemClick(AdapterView<?> arg0,//The AdapterView ที่การคลิกเกิดขึ้น View arg1 ,//มุมมองภายใน AdapterView ที่ถูกคลิก int arg2,//ตำแหน่งของมุมมองในอะแดปเตอร์แบบยาว arg3//รหัสแถวของรายการที่ถูกคลิก ) { //ในกรณีนี้ arg2=arg3 HashMap<String, Object> item=(HashMap<String, Object>) arg0.getItemAtPosition(arg2); //แสดงทั้งหมด เลือก ItemText setTitle((String)item.get("ItemText")); }}