Android ListView and Checkbox |
Android ListView and Checkbox ตัวอย่างการเขียน Android เพื่อสร้าง Checkbox ใน ListView โดยแสดงข้อมูลจาก Array ใน ListView พร้อมกับแสดงรายการ Checkbox ในรายการแถว นั้น ๆ วัตถุประสงค์ก็คือ เมื่อคลิกที่ Checkbox ในแต่ล่ะ Item จะแสดงรายการที่เลือกไว้
แสดง Checkbox บน ListView รวมทั้งปุ่ม Check All (เลือกรายการทั้งหมด) , Clear All (ยกเลิกเลือกรายการทั้งหมด) และ Get Item Checked แสดงรายการที่ได้เลอืกไว้
Example
โครงสร้างของไฟล์ประกอบด้วย 3 ไฟล์คือ MainActivity.java, activity_main.xml และ activity_column.xml
activity_main.xml
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="ListView and Checkbox : "
android:layout_span="1"
android:textAppearance="?android:attr/textAppearanceMedium" />
</TableRow>
<View
android:layout_height="1dip"
android:background="#CCCCCC" />
<RelativeLayout
android:layout_gravity="center_vertical|center_horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="@+id/btnCheckAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="49dp"
android:text="Check All" />
<Button
android:id="@+id/btnClearAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="36dp"
android:layout_toRightOf="@+id/btnCheckAll"
android:text="Clear All" />
</RelativeLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1">
<ListView
android:id="@+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</ListView>
</LinearLayout>
<RelativeLayout
android:layout_gravity="center_vertical|center_horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="@+id/btnGetItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="Get Item Checked" />
</RelativeLayout>
<View
android:layout_height="1dip"
android:background="#CCCCCC" />
<LinearLayout
android:id="@+id/LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="By.. ThaiCreate.Com" />
</LinearLayout>
</TableLayout>
activity_column.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="@+id/ColID"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="ID"/>
<TextView
android:id="@+id/ColCode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Code"/>
<TextView
android:id="@+id/ColCountry"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Country" />
<CheckBox
android:id="@+id/ColChk"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
MainActivity.java
package com.myapp;
import java.util.ArrayList;
import java.util.HashMap;
import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends Activity {
ArrayList<HashMap<String, String>> MyArrList;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// listView1
final ListView lisView1 = (ListView)findViewById(R.id.listView1);
MyArrList = new ArrayList<HashMap<String, String>>();
HashMap<String, String> map;
/*** Rows 1 ***/
map = new HashMap<String, String>();
map.put("ID", "1");
map.put("Code", "TH");
map.put("Country", "Thailand");
MyArrList.add(map);
/*** Rows 2 ***/
map = new HashMap<String, String>();
map.put("ID", "2");
map.put("Code", "VN");
map.put("Country", "Vietnam");
MyArrList.add(map);
/*** Rows 3 ***/
map = new HashMap<String, String>();
map.put("ID", "3");
map.put("Code", "ID");
map.put("Country", "Indonesia");
MyArrList.add(map);
/*** Rows 4 ***/
map = new HashMap<String, String>();
map.put("ID", "4");
map.put("Code", "LA");
map.put("Country", "Laos");
MyArrList.add(map);
/*** Rows 5 ***/
map = new HashMap<String, String>();
map.put("ID", "5");
map.put("Code", "MY");
map.put("Country", "Malaysia");
MyArrList.add(map);
lisView1.setAdapter(new CountryAdapter(this));
// Check All
Button btnCheckAll = (Button) findViewById(R.id.btnCheckAll);
btnCheckAll.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
int count = lisView1.getAdapter().getCount();
for (int i = 0; i < count; i++) {
LinearLayout itemLayout = (LinearLayout)lisView1.getChildAt(i); // Find by under LinearLayout
CheckBox checkbox = (CheckBox)itemLayout.findViewById(R.id.ColChk);
checkbox.setChecked(true);
}
}
});
// Clear All
Button btnClearAll = (Button) findViewById(R.id.btnClearAll);
btnClearAll.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
int count = lisView1.getAdapter().getCount();
for (int i = 0; i < count; i++) {
LinearLayout itemLayout = (LinearLayout)lisView1.getChildAt(i); // Find by under LinearLayout
CheckBox checkbox = (CheckBox)itemLayout.findViewById(R.id.ColChk);
checkbox.setChecked(false);
}
}
});
// Get Item Checked
Button btnGetItem = (Button) findViewById(R.id.btnGetItem);
btnGetItem.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
int count = lisView1.getAdapter().getCount();
for (int i = 0; i < count; i++) {
LinearLayout itemLayout = (LinearLayout)lisView1.getChildAt(i); // Find by under LinearLayout
CheckBox checkbox = (CheckBox)itemLayout.findViewById(R.id.ColChk);
if(checkbox.isChecked())
{
Log.d("Item "+String.valueOf(i), checkbox.getTag().toString());
Toast.makeText(MainActivity.this,checkbox.getTag().toString() ,Toast.LENGTH_LONG).show();
}
}
}
});
}
public class CountryAdapter extends BaseAdapter
{
private Context context;
public CountryAdapter(Context c)
{
//super( c, R.layout.activity_column, R.id.rowTextView, );
// TODO Auto-generated method stub
context = c;
}
public int getCount() {
// TODO Auto-generated method stub
return MyArrList.size();
}
public Object getItem(int position) {
// TODO Auto-generated method stub
return position;
}
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}
public View getView(final int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
if (convertView == null) {
convertView = inflater.inflate(R.layout.activity_column, null);
}
// ColID
TextView txtID = (TextView) convertView.findViewById(R.id.ColID);
txtID.setText(MyArrList.get(position).get("ID") +".");
// ColCode
TextView txtCode = (TextView) convertView.findViewById(R.id.ColCode);
txtCode.setText(MyArrList.get(position).get("Code"));
// ColCountry
TextView txtCountry = (TextView) convertView.findViewById(R.id.ColCountry);
txtCountry.setText(MyArrList.get(position).get("Country"));
// ColChk
CheckBox Chk = (CheckBox) convertView.findViewById(R.id.ColChk);
Chk.setTag(MyArrList.get(position).get("Code"));
return convertView;
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
คำอธิบาย
ในการอ้างถึง Widgets ของ Checkbox ที่อยุ่ใน GridView จะเห็นว่าใน XML Layout จะมี ListView อยู่ภายใต้ LinearLayout ดังนั้นเราสามารถทำการ Loop เพื่ออ้างถึง Checkbox จาก LinearLayout ได้ดังนี้
int count = lisView1.getAdapter().getCount();
for (int i = 0; i < count; i++) {
LinearLayout itemLayout = (LinearLayout)lisView1.getChildAt(i); // Find by under LinearLayout
CheckBox checkbox = (CheckBox)itemLayout.findViewById(R.id.checkBox1);
}
Screenshot
แสดงรายการ ListView กับ Checkbox
เมื่อคลิกที่ปุ่ม Check All (เลือกรายการทั้งหมด)
เมื่อคลิกที่ปุ่ม Clear All (ยกเลือกเลือกรายการทั้งหมด)
เมื่อคลิกที่ Get Item Checked จะแสดงรายการ Item ที่ได้เลือกไว้
Log.d("Item "+String.valueOf(i), checkbox.getTag().toString());
เมื่อดูใน LogCat จะเห็นว่ารายการถูกแสดง
ทั้งนี้ถ้าต้องการเขียนเงื่อนไขอื่น ๆ สามารถแทรกคำสั่งต่าง ๆ ได้จาก Event ของ btnGetItem.setOnClickListener()
// Get Item Checked
Button btnGetItem = (Button) findViewById(R.id.btnGetItem);
btnGetItem.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
int count = lisView1.getAdapter().getCount();
for (int i = 0; i < count; i++) {
LinearLayout itemLayout = (LinearLayout)lisView1.getChildAt(i); // Find by under LinearLayout
CheckBox checkbox = (CheckBox)itemLayout.findViewById(R.id.ColChk);
if(checkbox.isChecked())
{
Log.d("Item "+String.valueOf(i), checkbox.getTag().toString());
Toast.makeText(MainActivity.this,checkbox.getTag().toString() ,Toast.LENGTH_LONG).show();
}
}
}
});
.
|
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน 
Load balance : Server 00
