Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone



Clound SSD Virtual Server

Android ListView Display ImageView from SQLite Database and SD Card

Android ListView Display ImageView from SQLite Database and SD Card ตัวอย่างการใช้ ListView แสดงข้อมูลจาก SQLite Database ที่จัดเก็บรายชื่อ contact ของสมาชิกที่เราสร้างขึ้นมาเอง โดยในตาราง contact ประกอบด้วยฟิวด์ ContactID, Name , Email , Photo โดยทีรูปภาพ Photo จัดเก็บเพียงเฉพาะชื่อไฟล์ ส่วนรูปภาพจริง ๆ จะอยู่ใน SD Card ซึ่งตอนที่แสดงผลจริง ๆ ใน ListView เราจะใช้การอ่านข้อมูลจาก SQLite มาเฉพาะชื่อ จากนั้นเรียบเรียง Path ให้ถูกต้องก่อนที่จะแปลงเป็น Bitmap และ setImageBitmap ให้กับ ImageView ต่อไป

Android ListView ImageView SQLite SD Card

Screenshot : Image SD Card / SOLite Database / ListView


จากภาห Screenshot จะเห็นว่าใน SQLite Database จัดเก็บเพียงชื่อไฟล์เท่านั้น ส่วนไฟล์ที่เป็น Photo จริง ๆ จะถูกจัดเก็บไว้ในโฟเดอร์ /mnt/sdcard/contact/ ของ SD Card

โครงสร้างของ Image

Android ListView ImageView SQLite SD Card

จัดเก็บไว้ใน SD Card อยู่ที่ /mnt/sdcard/contact/ ดังภาพ

Android ListView ImageView SQLite SD Card

รูปที่จัดเก็บ








โครงสร้างของ SQLite Database

Android ListView ImageView SQLite SD Card

ชื่อตารางว่า contact ประกอบด้วยฟิวด์ ContactID, Name , Email , Photo

Android ListView ImageView SQLite SD Card

โดยใน SQLite จะเก็บเพียงชื่อไฟล์เท่านั้น ส่วนรูปภาพจะจัดเก็บไว้ใน SD Card ตามชื่อและโครงสร้างที่กำหนด ตอนที่เรียกใช้ใน ImageView จะใช้การแปลงรุปให้เป็น Bitmap แล้วค่อย setImageBitmap()

ImageView imgPhoto = (ImageView) lstView.findViewById(R.id.ColPhoto);
String strPath = "/mnt/sdcard/contact/MR_Win.jpg"
Bitmap bm = BitmapFactory.decodeFile(strPath);
imgPhoto.setImageBitmap(bm);


การแปลง Path ของรุปภาพให้อยู่ในรูปแบบของ Bitmap ก่อนที่จะนำไปใช้กับ ImageView

สำหรับรายละเอียดเพิ่มเติมอยากให้ลองอ่านบทความนี้ดู



Example

โครงสร้างของไฟล์ประกอบด้วย 4 ไฟล์คือ MainActivity.java, activity_main.xml , myDBClass.java และ activity_column.xml

Android ListView ImageView SQLite SD Card

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:id="@+id/tableRow1"
      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 Example : "
        android:layout_span="1"
        android:textAppearance="?android:attr/textAppearanceLarge" />
  	        
 	</TableRow>

	<View
		android:layout_height="1dip"
		android:background="#CCCCCC" />
 
  <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>

	<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>

ไฟล์ XML Layout ของ Activity หลัก

Android ListView ImageView SQLite SD Card

activity_column.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ImageView
        android:id="@+id/ColPhoto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
    />
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Name: "
            />
            <TextView android:id="@+id/ColName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
            />
        </LinearLayout>
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Email: "
            />
            <TextView android:id="@+id/ColEmail"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
            />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

ไฟล์ XML Layout สำหรับ Custom Layout ของ ListView

myDBClass.java
package com.myapp;


import android.content.ContentValues;
import android.content.Context;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteOpenHelper;
import android.util.Log;

public class myDBClass extends SQLiteOpenHelper {
	

    // Database Version
    private static final int DATABASE_VERSION = 1;
 
    // Database Name
    private static final String DATABASE_NAME = "mydatabase";
 
    // Table Name
    private static final String TABLE_CONTACT = "contact";

	public myDBClass(Context context) {
		super(context, DATABASE_NAME, null, DATABASE_VERSION);
		// TODO Auto-generated constructor stub
	}

	@Override
	public void onCreate(SQLiteDatabase db) {
		// TODO Auto-generated method stub
		// Create Table Name
	    db.execSQL("CREATE TABLE " + TABLE_CONTACT + 
		          "(ContactID INTEGER PRIMARY KEY AUTOINCREMENT," +
		          " Name TEXT(100)," +
		          " Email TEXT(100)," +
		          " Photo TEXT(100));");
	   
	    Log.d("CREATE TABLE","Create Table Successfully.");
	}	
	
	
	// Insert Data
	public long InsertData(String strContactID, String strName
			, String strEmail, String strPhoto) {
		// TODO Auto-generated method stub
		
		 try {
			SQLiteDatabase db;
     		db = this.getWritableDatabase(); // Write Data
     		
     		/**
     		 *  for API 11 and above
			SQLiteStatement insertCmd;
			String strSQL = "INSERT INTO " + TABLE_CONTACT
					+ "(ContactID,Name,Email,Photo) VALUES (?,?,?,?)";
			
			insertCmd = db.compileStatement(strSQL);
			insertCmd.bindString(1, strContactID);
			insertCmd.bindString(2, strName);
			insertCmd.bindString(3, strEmail);
			insertCmd.bindString(3, strPhoto);
			return insertCmd.executeInsert();
			*/
			
     	   ContentValues Val = new ContentValues();
     	   Val.put("ContactID", strContactID); 
     	   Val.put("Name", strName);
     	   Val.put("Email", strEmail);
     	   Val.put("Photo", strPhoto);
    
			long rows = db.insert(TABLE_CONTACT, null, Val);

			db.close();
			return rows; // return rows inserted.
           
		 } catch (Exception e) {
		    return -1;
		 }

	}
	
	// Select All Data
	public String[][] SelectAllData() {
		// TODO Auto-generated method stub
		
		 try {
			String arrData[][] = null;	
			 SQLiteDatabase db;
			 db = this.getReadableDatabase(); // Read Data
				
			 String strSQL = "SELECT  * FROM " + TABLE_CONTACT;
			 Cursor cursor = db.rawQuery(strSQL, null);
			 
			 	if(cursor != null)
			 	{
					if (cursor.moveToFirst()) {
						arrData = new String[cursor.getCount()][cursor.getColumnCount()];
						/***
						 *  [x][0] = ContactID
						 *  [x][1] = Name
						 *  [x][2] = Email
						 *  [x][3] = Photo
						 */
						int i= 0;
						do {				
							arrData[i][0] = cursor.getString(0);
							arrData[i][1] = cursor.getString(1);
							arrData[i][2] = cursor.getString(2);
							arrData[i][3] = cursor.getString(3);
							i++;
						} while (cursor.moveToNext());						

					}
			 	}
			 	cursor.close();
				
				return arrData;
				
		 } catch (Exception e) {
		    return null;
		 }

	}
	
	
	@Override
	public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {
		// TODO Auto-generated method stub
        db.execSQL("DROP TABLE IF EXISTS " + TABLE_CONTACT);
        
        // Re Create on method  onCreate
        onCreate(db);
	}

}

ไฟล์ Java สำหรับติดต่อกับฐานข้อมูลของ SQLite








MainActivity.java
package com.myapp;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
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;
    String arrData[][];
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
		// get Data from SQLite
		final myDBClass myDb = new myDBClass(this);
		/*
		 * for insert statement
		myDb.InsertData("1","Deawx","[email protected]","Deawx.jpg");
		myDb.InsertData("2","Dragons_first","[email protected]","Dragons_first.jpg");
		myDb.InsertData("3","Mr_V","[email protected]","Mr_V.jpg");
		myDb.InsertData("4","MR_Win","[email protected]","MR_Win.jpg");
		myDb.InsertData("5","Nico","[email protected]","Nico.jpg");
		myDb.InsertData("6","Th@iDev","[email protected]","[email protected]");
		*/
		arrData = myDb.SelectAllData();  
		/***
		 *  [x][0] = ContactID
		 *  [x][1] = Name
		 *  [x][2] = Email
		 *  [x][3] = Photo
		 */
		
        // listView1
        final ListView lView1 = (ListView)findViewById(R.id.listView1); 
        	
        lView1.setAdapter(new ImageAdapter(this,arrData));
        
        // OnClick
        lView1.setOnItemClickListener(new OnItemClickListener() {
			public void onItemClick(AdapterView<?> parent, View v,
				int position, long id) {
				
				   Toast.makeText(getApplicationContext(),
					"Your selected : " + arrData[position][1].toString(), Toast.LENGTH_SHORT).show();
		    	
			}
		});
      
    }

    public class ImageAdapter extends BaseAdapter 
    {
        private Context context;
        private String[][] lis;
        
        public ImageAdapter(Context c, String[][] li) 
        {
        	// TODO Auto-generated method stub
            context = c;
            lis = li;
        }
 
        public int getCount() {
        	// TODO Auto-generated method stub
            return lis.length;
        }
 
        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.activity_column, null); 
			}
					
			// ColPhoto
			String strPath = "/mnt/sdcard/contact/"+lis[position][3].toString();
			ImageView imgPhoto = (ImageView) convertView.findViewById(R.id.ColPhoto);
			imgPhoto.setPadding(5, 5, 5, 5);
			Bitmap bm = BitmapFactory.decodeFile(strPath);
			int width=100;
		    int height=100;
		    Bitmap resizedbitmap = Bitmap.createScaledBitmap(bm, width, height, true);
		    imgPhoto.setImageBitmap(resizedbitmap);
			
			// ColName
			TextView txtName = (TextView) convertView.findViewById(R.id.ColName);
			txtName.setPadding(10, 0, 0, 0);
			txtName.setText(lis[position][1].toString());
			
			// ColEmail
			TextView txtEmail = (TextView) convertView.findViewById(R.id.ColEmail);
			txtEmail.setText(lis[position][2].toString());
		 

			return convertView;

		
		}
    } 
    
    
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

}


Screenshot

Android ListView ImageView SQLite SD Card

แสดง ListView ที่ดึง ImageView มาจาก SD Card และ SQLite



ListView - Android Widgets Example

Android ListView and SQLite Database (Android SQLite)

Android ListView แบบ Custom Layout แสดงข้อมูล ListView หลายคอลัมบ์ Multiple Column

Android Populate ListView ImageView get Image Resource from SD Card


   
Share


ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท


ลองใช้ค้นหาข้อมูล


   


Bookmark.   
       
  By : ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
  Score Rating :  
  Create/Update Date : 2012-07-28 12:42:22 / 2017-03-26 21:33:29
  Download : No files
 Sponsored Links / Related

 
Android ทำการ Copy ไฟล์ไปยัง SD Card ของ Emulator การเรียกใช้งานไฟล์บน SD Card
Rating :

 
Android File and Directory in SD Card (java.io)
Rating :

 
Android กับ SQLite Database การเขียนแอนดรอยด์เพื่อติดต่อกับฐานข้อมูลของ SQLite
Rating :

 
Android อ่านไฟล์ Image จาก SD Card แสดงแบบ Column บน ImageView กับ GridView
Rating :

 
Android SD Card ImageView SQLite แสดงรูปภาพจาก SQLite และ Path ใน SD Card
Rating :

 
Android กับ ListView แสดงข้อมูลจาก Database ของ SQLite
Rating :

 
Android Populate ListView ImageView get Image Resource from SD Card
Rating :

 
Android กับ Spinner (DropDownList) แสดงข้อมูลจาก Database ของ SQLite
Rating :

 
Android กับ AutoCompleteTextView แสดงข้อมูลจาก Database ของ SQLite
Rating :


ThaiCreate.Com Forum


Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว


Hit Link
   







Load balance : Server 05
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่