ListView and Custom ListView on Android Development [Thai]

Introduction to
SOMKIAT KHITWONGWATTANA (AKE)
List View

What’s List View?
• View Group แบบหนึ่งที่ใช้สำหรับแสดงข้อมูล
• แสดงข้อมูลบำงอย่ำงที่มีจำนวนหลำยๆชุด
• สำมำรถเลื่อนขึ้น-ลงได้ เพื่อดูข้อมูลที่มีทั้งหมด

How It Works?
Data Adapter ListView

What is Adapter?
• ตัวกลำงที่จะทำให้ข้อมูลแสดงบน List View หรือ Spinner
• จัดข้อมูลลง Layout เพื่อแสดงใน List View หรือ Spinner
• Adapter พื้นฐำน : ArrayAdapter, BaseAdapter,
CursorAdapter, ListAdapter, SimpleAdapter และอื่นๆ

How It Works?DataSet
ListView
Data 1 + Layout = Row 1
Data 2 + Layout = Row 2
...
Data X + Layout = Row X
Adapter

How It Works?
String[] data = { “Samsung”, “LG”, “Sony”,
“Acer”, “Asus”, “Motorola”,
“Lenovo”, “Xiaomi”, “OPPO” };
Adapter

It’s Just a Layout!!
Layout
Layout
Layout
Layout
Layout

Layout Design
<ListView
android:id="@+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent“ />

Necessary Properties
• Margin
• Padding
• Draw Selector On Top
• Cache Color Hint
• Divider
• Divider Height
• Header Dividers Enabled
• Footer Dividers Enabled
• Choice Mode
• Over Scroll Header
• Over Scroll Footer
• Scrollbars
• Scrollbars Style
• Scrollbars Always Draw Vertical Track
• Duplicate Parent State
• Over Scroll Mode
• List Selector
• ETC

Prepare Your Code
import android.widget.ArrayAdapter;
...
String[] data = { “Item 1”, “Item 2”, “Item 3” };
ArrayAdapter<String> adapter =
new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, data);
ListView lv = (ListView)findViewById(R.id.listView);
lv.setAdapter(adapter);

Declare Data Source
...

Declare Adapter
...

Add Data Source to Adapter
...

Declare List View
...

Add Adapter to List View
...

Redesign Text on List View
...

Create Your Own Text
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Text View"
android:textSize="20sp"
android:textColor="#009999" />

Code (Before)
...

Code (After)
...
R.layout.textview, data);

Listener
setOnItemClickListener(listener);
setOnItemLongClickListener(listener);
setOnItemSelectedListener(listener);
setOnScrollListener(listener);

Example of Listener
lv.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
// Do Something
}
});

Example of Listener
List View ที่เกิด Event
View ที่เกิด Event
แถวที่เกิด Event
ID ของ Item ที่เกิด Event
parent
view
position
Id
lv.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
// Do Something
}
});

Custom Your Adapter
public class MyCustomAdapter extends BaseAdapter {
...
}

Custom Your Adapter
}
The type MyCustomAdapter must implement the inherited abstract method Adapter.getCount()
2 quick fixed available:
Add unimplemented methods
Make type ‘MyCostomAdapter’ abstract
Press ‘F2’ for focus

Custom Your Adapter
public int getCount() {
return 0;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
public View getView(int position, View convertView, ViewGroup parent) {
return null;
}
}

Main Methods
getCount จำนวนข้อมูลที่มีทั้งหมด
getItem ดึง Item ในแถวที่ต้องกำร (Item ขึ้นอยู่ประเภทของ Adapter)
getItemId ดึง ID ของ Item ในแถวที่ต้องกำร (ขึ้นอยู่กับ Adapter เช่นกัน)
getView เมื่อ View ในแถวนั้นๆถูกแสดง

Create Your Layout
Text ViewImage
View

Prepare Your Image
Letter A Letter B Letter C Letter D Letter E
Letter F Letter G Letter H Letter I

Layout XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content“
android:orientation="horizontal“ >
<LinearLayout
android:orientation="horizontal"
android:background="#FFFFFF" >
<LinearLayout
android:orientation="horizontal"
android:gravity="center_vertical"
android:background="#4BACC6" >

Layout XML
<ImageView
android:id="@+id/imageView"
android:layout_width="60dp"
android:layout_height="60dp“
android:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_marginLeft="10dp"
android:text="Text View"
android:textColor="#FFFFFF"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

Custom Your Adapter
public MyCustomAdapter(Context context, String[] strName, int[] resImage) {
}
...
...
...
}

Custom Your Adapter
LayoutInflater inflater;
String[] strName;
int[] resImage;
}
...
...
...
}

Custom Your Adapter
String[] strName;
int[] resImage;
this.inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
...
...
...
}

Custom Your Adapter
String[] strName;
int[] resImage;
this.strName = strName;
}
...
...
...
}

Custom Your Adapter
String[] strName;
int[] resImage;
this.resImage = resImage;
}
...
...
...
}

Custom Your Adapter
String[] strName;
int[] resImage;
...
return 0;
}
...
}

Custom Your Adapter
String[] strName;
int[] resImage;
...
return this.strName.lenght;
}
...
}

Custom Your Adapter
String[] strName;
int[] resImage;
...
return null;
}
...
}

Custom Your Adapter
String[] strName;
int[] resImage;
...
return this.strName[position];
}
...
}

Custom Your Adapter
String[] strName;
int[] resImage;
...
}
...
}

Custom Your Adapter
String[] strName;
int[] resImage;
...
if(convertView == null) {
convertView = this.inflater.inflate(R.layout.listview_layout, parent, false);
}
}
...
}

Custom Your Adapter
...
}
TextView textView = (TextView)convertView.findViewById(R.id.textView);
textView.setText(this.strName[position]);
....
}
}

Custom Your Adapter
...
}
ImageView imageView = (ImageView)convertView.findViewById(R.id.imageView);
imageView.setImageResource(this.resImage[position]);
...
}
}

Custom Your Adapter
...
}
return convertView;
}
}

Custom Your Adapter
String[] strName;
int[] resImage;
inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
this.resImage = resImage;
}
return this.strName.length;
}
return this.strName[position];
}
public long getItemId(int position) {
return 0;
}
if(convertView == null)
return convertView;
}
}

Get Back to Your Activity
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="match_parent"
android:background="#DDDDDD"
tools:context="${relativePackage}.${activityClass}" >
<ListView
android:id="@+id/listView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:divider="@null"
android:scrollbars="none"
android:scrollingCache="true"
tools:listitem="@layout/listview_layout" />
</RelativeLayout>

Code on Activity
public class MainActivity extends Activity {
protected void onCreate(Bundle savedInstanceState) {
...
}
}

Code on Activity
String[] data = { "Letter A", "Letter B", "Letter C", "Letter D",
"Letter E", "Letter F", "Letter G", "Letter H", "Letter I"};
...
}
}

Code on Activity
int[] resId = { R.drawable.image_001, R.drawable.image_002, R.drawable.image_003,
R.drawable.image_004, R.drawable.image_005, R.drawable.image_006,
R.drawable.image_007, R.drawable.image_008, R.drawable.image_009};
...
}
}

Code on Activity
...
MyCustomAdapter adapter = new MyCustomAdapter(this, data, resId);
}
}

Code on Activity
...
}
}

Assignment
1. แสดงข้อมูลอะไรก็ได้ให้อยู่ในรูปดังกล่ำว เช่น อำหำร เสื้อผ้ำ ฯลฯ
2. ข้อมูลอย่ำงน้อย 15 แถว
3. ประกอบไปด้วยภำพอย่ำงน้อยหนึ่งภำพ (ไม่ต้องใหญ่มำก)
ตัวหนังสือสองตำแหน่งที่แสดงข้อควำมต่ำงกันในแต่ละแถว
4. เก็บข้อมูลไว้ในโค๊ดแบบที่ผ่ำนมำทั้งหมดก็ได้
5. ถ้ำทำได้ ให้ลองเปลี่ยนไปเก็บข้อมูลไว้ในฐำนข้อมูล
ส่วนไฟล์ภำพเก็บไว้ในโฟลเดอร์ assets
แล้วเก็บ Path ของภำพลงในฐำนข้อมูลแทน

Hint
Image View (ScaleType CenterCrop)
Relative Layout
Horizontal Linear Layout (Background #3F000000)
Text View (Weight 1, Width 0dp) Text View

ListView and Custom ListView on Android Development [Thai]

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to ListView and Custom ListView on Android Development [Thai] (20)

More from Somkiat Khitwongwattana (14)

Recently uploaded (20)

ListView and Custom ListView on Android Development [Thai]