Android GridView and Checkbox |
Android GridView and Checkbox ตัวอย่างการเขียน Android เพื่อสร้าง Checkbox ใน GridView และการอ่านรายการ Checkbox ที่ได้จากทำการคลิกเลือกในแต่ล่ะรายการ ในตัวอย่างนี้จะอ่านข้อมูลรูปภาพที่อยู่ใน SD Card ใช้การอ่านรายชื่อไฟล์จัดเก็บลงใน Array จากนั้นคำ Array ที่ได้ setAdapter เพื่อแสดงผลบน GridView แบบแบ่ง Column โดยแสดงรูปภาพ และชื่อไฟล์ของรูปภาพ
จาก Screenshot ของ GridView กับ Checkbox จะเห็นว่าจะมีปุ่ม Check All , Clear All และ Get Item Checked เพื่อจะแสดงรายการ Item ที่ได้ทำการคลิกเลือกใน Checkbox ของแต่ล่ะรายการ
รายชื่อไฟล์ที่อยู่ใน SD Card ถูกจัดเก็บไว้ที่ /mnt/sdcard/mypicture/
Example
โครงสร้างของไฟล์ประกอบด้วย 3 ไฟล์คือ MainActivity.java, activity_main.xml และ showimage.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="GridView 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">
<GridView
android:id="@+id/gridView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:numColumns="2" >
</GridView>
</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>
showimage.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:padding="5dp" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="50px"
android:layout_height="50px"
android:layout_marginRight="10px" >
</ImageView>
<CheckBox
android:id="@+id/checkBox1"
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:layout_marginTop="5px"
android:textSize="15px" >
</TextView>
</LinearLayout>
MainActivity.java
package com.myapp;
import java.io.File;
import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
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.GridView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
public class MainActivity extends Activity {
List <String> ImageList;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
/*** Get Images from SDCard ***/
ImageList = getSD();
// gridView1
final GridView gView1 = (GridView)findViewById(R.id.gridView1);
gView1.setAdapter(new ImageAdapter(this,ImageList));
// Check All
Button btnCheckAll = (Button) findViewById(R.id.btnCheckAll);
btnCheckAll.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
int count = gView1.getAdapter().getCount();
for (int i = 0; i < count; i++) {
LinearLayout itemLayout = (LinearLayout)gView1.getChildAt(i); // Find by under LinearLayout
CheckBox checkbox = (CheckBox)itemLayout.findViewById(R.id.checkBox1);
checkbox.setChecked(true);
}
}
});
// Clear All
Button btnClearAll = (Button) findViewById(R.id.btnClearAll);
btnClearAll.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
int count = gView1.getAdapter().getCount();
for (int i = 0; i < count; i++) {
LinearLayout itemLayout = (LinearLayout)gView1.getChildAt(i); // Find by under LinearLayout
CheckBox checkbox = (CheckBox)itemLayout.findViewById(R.id.checkBox1);
checkbox.setChecked(false);
}
}
});
// Get Item Checked
Button btnGetItem = (Button) findViewById(R.id.btnGetItem);
btnGetItem.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
int count = gView1.getAdapter().getCount();
for (int i = 0; i < count; i++) {
LinearLayout itemLayout = (LinearLayout)gView1.getChildAt(i); // Find by under LinearLayout
CheckBox checkbox = (CheckBox)itemLayout.findViewById(R.id.checkBox1);
if(checkbox.isChecked())
{
Log.d("Item "+String.valueOf(i), checkbox.getTag().toString());
Toast.makeText(MainActivity.this,checkbox.getTag().toString() ,Toast.LENGTH_LONG).show();
}
}
}
});
}
private List <String> getSD()
{
List <String> it = new ArrayList <String>();
File f = new File ("/mnt/sdcard/picture");
File[] files = f.listFiles ();
for (int i = 0; i <files.length; i++)
{
File file = files[i];
Log.d("Count",file.getPath());
it.add (file.getPath());
}
return it;
}
public class ImageAdapter extends BaseAdapter
{
private Context context;
private List <String> lis;
public ImageAdapter(Context c, List <String> li)
{
// TODO Auto-generated method stub
context = c;
lis = li;
}
public int getCount() {
// TODO Auto-generated method stub
return lis.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(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.showimage, null);
}
TextView textView = (TextView) convertView.findViewById(R.id.textView1);
String strPath = lis.get(position).toString();
// Get File Name
String fileName = strPath.substring( strPath.lastIndexOf('/')+1, strPath.length() );
textView.setText(fileName);
// Image Resource
ImageView imageView = (ImageView) convertView.findViewById(R.id.imageView1);
Bitmap bm = BitmapFactory.decodeFile(strPath);
imageView.setImageBitmap(bm);
// CheckBox
CheckBox Chkbox = (CheckBox) convertView.findViewById(R.id.checkBox1);
Chkbox.setTag(fileName);
return convertView;
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
คำอธิบาย
ในการอ้างถึง Widgets ของ Checkbox ที่อยุ่ใน GridView จะเห็นว่าใน XML Layout จะมี GridView อยู่ภายใต้ LinearLayout ดังนั้นเราสามารถทำการ Loop เพื่ออ้างถึง Checkbox จาก LinearLayout ได้ดังนี้
int count = gView1.getAdapter().getCount();
for (int i = 0; i < count; i++) {
LinearLayout itemLayout = (LinearLayout)gView1.getChildAt(i); // Find by under LinearLayout
CheckBox checkbox = (CheckBox)itemLayout.findViewById(R.id.checkBox1);
}
Screenshot
แสดงรูปภาพบน GridView และมี Checkbox ในแต่ล่ะรายการ
เมื่อคลิกที่ Check All ใน Checkbox ทั้งหมดจะถูก Checked
เมื่อคลิกที่ปุ่ม Clear All
คลิกที่ Get Item Checked จะแสดงรายการทีได้เลือกไว้
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 = gView1.getAdapter().getCount();
for (int i = 0; i < count; i++) {
LinearLayout itemLayout = (LinearLayout)gView1.getChildAt(i); // Find by under LinearLayout
CheckBox checkbox = (CheckBox)itemLayout.findViewById(R.id.checkBox1);
if(checkbox.isChecked())
{
Log.d("Item "+String.valueOf(i), checkbox.getTag().toString());
Toast.makeText(MainActivity.this,checkbox.getTag().toString() ,Toast.LENGTH_LONG).show();
}
}
}
});
.
|
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท
|
|
|
By : |
ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ) |
|
Score Rating : |
|
|
|
Create/Update Date : |
2012-08-11 10:12:12 /
2017-03-26 22:14:22 |
|
Download : |
No files |
|
Sponsored Links / Related |
|
|
|
|
|
|
|