ListView and Custom ListView on Android Development [Thai]

Introduction to

SOMKIAT KHITWONGWATTANA (AKE)

List View

SimpleList View

What’s List View?

• View Group แบบหนงทใชส ำหรบแสดงขอมล• แสดงขอมลบำงอยำงทมจ ำนวนหลำยๆชด• สำมำรถเลอนขน-ลงได เพอดขอมลทมทงหมด

List View

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

taSe

t

List V

iewData 1 + Layout = Row 1Data 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!!


LayoutLayout

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 Codeimport 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 Sourceimport android.widget.ArrayAdapter;...




Declare Adapterimport android.widget.ArrayAdapter;...




Add Data Source to Adapterimport android.widget.ArrayAdapter;...




Declare List Viewimport android.widget.ArrayAdapter;...




Add Adapter to List Viewimport android.widget.ArrayAdapter;...




Check the Result

Redesign Text on List Viewimport android.widget.ArrayAdapter;...




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)import android.widget.ArrayAdapter;...




Code (After)import android.widget.ArrayAdapter;...


ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.textview, data);


Result (Before)

Result (After)

List ViewListener

Listener

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

Example of Listenerlv.setOnItemClickListener(new OnItemClickListener() {

public void onItemClick(AdapterView<?> parent, View view, int position, long id) {// Do Something

}});

Example of Listener

List View ทเกด EventView ทเกด Eventแถวทเกด EventID ของ Item ทเกด Event

parentview

positionId

lv.setOnItemClickListener(new OnItemClickListener() {public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

// Do Something}

});

Example of Listener

CustomList View


LayoutLayout

Layout

Layout

Layout

Be Better

Custom Your Adapter

public class MyCustomAdapter extends BaseAdapter {

...

}

Custom Your Adapter

public class MyCustomAdapter extends BaseAdapter {

}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 Adapterpublic class MyCustomAdapter extends BaseAdapter {

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 ในแถวนนๆถกแสดง

What is the getView?

Create Your Layout

Text ViewImageView

Create Your Layout

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_width="match_parent"android:layout_height="wrap_content“android:padding="10dp"android:orientation="horizontal“ >

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:padding="10dp"android:background="#FFFFFF" >

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:gravity="center_vertical"android:padding="10dp"android:background="#4BACC6" >

Layout XML<ImageView

android:id="@+id/imageView"android:layout_width="60dp"android:layout_height="60dp“android:src="@drawable/ic_launcher" />

<TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:text="Text View"android:textColor="#FFFFFF"android:textSize="20sp" />

</LinearLayout></LinearLayout>

</LinearLayout>


public MyCustomAdapter(Context context, String[] strName, int[] resImage) {

}

...

...

...

}


LayoutInflater inflater;String[] strName;int[] resImage;

public MyCustomAdapter(Context context, String[] strName, int[] resImage) {

}

...

...

...

}



public MyCustomAdapter(Context context, String[] strName, int[] resImage) {this.inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

}

...

...

...

}



public MyCustomAdapter(Context context, String[] strName, int[] resImage) {this.inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);this.strName = strName;

}

...

...

...

}



public MyCustomAdapter(Context context, String[] strName, int[] resImage) {this.inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);this.strName = strName;this.resImage = resImage;

}

...

...

...

}



...

public int getCount() {return 0;

}

...

}



...

public int getCount() {return this.strName.lenght;

}

...

}



...

public Object getItem(int position) {return null;

}

...

}



...

public Object getItem(int position) {return this.strName[position];

}

...

}



...

public View getView(int position, View convertView, ViewGroup parent) {

}

...

}



...

public View getView(int position, View convertView, ViewGroup parent) {if(convertView == null) {

convertView = this.inflater.inflate(R.layout.listview_layout, parent, false);}

}

...

}


...



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

....

}}


...




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

...

}}


...





return convertView;}

}



public MyCustomAdapter(Context context, String[] strName, int[] resImage) {inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);this.strName = strName;this.resImage = resImage;

}

public int getCount() {return this.strName.length;

}

public Object getItem(int position) {return this.strName[position];

}

public long getItemId(int position) {return 0;

}

public View getView(int position, View convertView, ViewGroup parent) {if(convertView == null)

convertView = this.inflater.inflate(R.layout.listview_layout, parent, false);



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_width="match_parent"android:layout_height="match_parent"android:background="#DDDDDD"tools:context="${relativePackage}.${activityClass}" >

<ListViewandroid:id="@+id/listView"android:layout_width="match_parent"android:layout_height="wrap_content"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 Activitypublic class MainActivity extends Activity {

protected void onCreate(Bundle savedInstanceState) {...

}}


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


}}



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


}}





}}





MyCustomAdapter adapter = new MyCustomAdapter(this, data, resId);}

}





MyCustomAdapter adapter = new MyCustomAdapter(this, data, resId);ListView lv = (ListView)findViewById(R.id.listView);

}}





MyCustomAdapter adapter = new MyCustomAdapter(this, data, resId);ListView lv = (ListView)findViewById(R.id.listView);lv.setAdapter(adapter);

}}

Check Your Result

Assignment1. แสดงขอมลอะไรกไดใหอยในรปดงกลำว เชน อำหำร เสอผำ ฯลฯ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

Education

ListView and Custom ListView on Android Development [Thai]