PENGEMBANGAN APLIKASIPERANGKAT BERGERAK

(MOBILE)

K Candra Brata

Mobille App Lab 2015-2016

“ListView, Collection, Adapter

andra.course@gmail.com

http://developer.android.com/guide/topics/ui/layout/listview.htmlListView

A specific view that shows items in a vertically scrolling list. An ordered collection of selectable choices. Uses adapter to populate listView items with data.

ListView

key attributes in XML:

2 kind of ListView : Static List. Dynamic List.

ListView

static list: Content is fixed and known before the app runs.– Declare the list elements in the strings.xml resource file.

<!-- res/values/strings.xml --><resources><string-array name="oses"><item>Android</item><item>iPhone</item>...<item>Max OS X</item></string-array></resources>

<!-- res/layout/activity_main.xml --><ListView ... android:id="@+id/mylist"android:entries="@array/oses" />

Static ListView

Dynamic list: Content is read or generated as the program runs. Content comes from a data file, or from the internet (WS), etc. Must be set in the Java code.Uses adapter to populate listView items with data.

Dynamic ListView

adapter: Helps turn list data into list view items.– common adapters: ArrayAdapter, ListAdapter, BaseAdapter.

Syntax for creating an adapter:ArrayAdapter<String> name =new ArrayAdapter<String>(activity, layout, array);

● the activity is usually (this).● the default layout for lists is (android.R.layout.simple_list_item_1)● get the array by reading your file or data source of choice(it can be an array like String[], or a list like ArrayList<String>)

– Once you have an adapter, you can attach it to your list by calling thesetAdapter method of the ListView object in the Java code.

Dynamic ListView (adapter)

listactivity.XML<?xml version="1.0" encoding="utf-8"?><LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent" >

<TextViewandroid:id="@+id/selection"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#F44333"android:gravity="center_horizontal"android:text="List Sitem Operasi"android:textSize="20dp"/>

<ListViewandroid:id="@+id/listView"android:layout_width="match_parent"android:layout_height="match_parent"android:drawSelectorOnTop="false"/>

</LinearLayout>

MainList.Javapublic class MainList extends Activity {

private String[] menu ={"Android","iPhone","windowsMobile","BlackBerry","WebOS","Ubuntu","windows7","Mac OS X"};

@Overrideprotected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.listactivity);ListView listsisop = (ListView) findViewById(R.id.listView);

ArrayAdapter<String> myadapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,menu);listsisop.setAdapter(myadapter);

}

........

}

How to handle List event??

Unfortunately lists don't use a simple onClick event. Several fancier GUI widgets use other kinds of events. The event listeners must be attached in the Java code, not in the XML. Understanding how to attach these event listeners requires the use of

Java anonymous inner classes.

anonymous inner class: A shorthand syntax for declaring a small classwithout giving it an explicit name. The class can be made to extend a given super class or implement a

given interface. Typically the class is declared and a single object of it is constructed

and used all at once.

Dynamic ListView (Event)

List views respond to the following events: setOnItemClickListener(AdapterView.OnItemClickListener)

Listener for when an item in the list has been clicked.

setOnItemLongClickListener(AdapterView.OnItemLongClickListener)Listener for when an item in the list has been clicked and held.

setOnItemSelectedListener(AdapterView.OnItemSelectedListener)Listener for when an item in the list has been selected.

Others:– onDrag, onFocusChanged, onHover,onKey, onScroll, onTouch, ...

Dynamic ListView (Event)

ListView list = (ListView) findViewById(R.id.id);

list.setOnItemClickListener(

new AdapterView.OnItemClickListener() {

@Overridepublic void onItemClick(AdapterView<?> list,View row,int index,long rowID) {// code to run when user clicks that item...}

});

Dynamic ListView (Event)

MainList.Javapublic class MainList extends Activity implements AdapterView.OnItemClickListener {private String[] menu = {"Android","iPhone","windowsMobile","BlackBerry","WebOS","Ubuntu","windows7","Mac OS X"};

@Overrideprotected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.listactivity);ListView listsisop = (ListView) findViewById(R.id.listView);

ArrayAdapter<String> myadapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,menu);listsisop.setAdapter(myadapter);listsisop.setOnItemClickListener(this);

}

@Overridepublic void onItemClick(AdapterView<?> parent, View v, int position, long id) {

Toast.makeText(this,menu[position], Toast.LENGTH_SHORT).show();}

Custom List Layout

If you want your list to look different than the default appearance (of just a text string for each line), you must: Write a short layout XML file describing the layout for each

row. Write a custom subclass of ArrayAdapter that overrides the

getView() method to describe what view must be returned for each row.

Fancy List

The true power of the ListView and Adapter combination is the ability to define your ownAdapter to best suit you application.Adapter is simply an interface that needs to be implemented.

Custom Adapter

Collection (Data Set)

Adapter

ListView Item ViewXML file

ArrayList<Object>

rowView.xmllistView widgetin Activity's UI

LayoutInflater

ContextObject

rowview.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:background="#FFFFFF"android:orientation="horizontal">

<ImageViewandroid:id="@+id/logo"android:layout_width="40dp"android:layout_height="40dp"android:layout_gravity="center"android:layout_marginLeft="16dp"android:layout_marginRight="16dp"android:src="@mipmap/ic_launcher" />

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="center_vertical|left"android:layout_weight="1"android:orientation="vertical">

<TextViewandroid:id="@+id/namaos"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingTop="8dp"android:text="dummy text"android:textAppearance="?android:attr/textAppearanceMedium"android:textSize="16dp" />

</LinearLayout></LinearLayout>

Sisop.Javapublic class Sisop {

public String nama;

public Sisop (String nama) {this.nama = nama;

}}

CustomAdapter.Javapublic class CustomAdapter extends ArrayAdapter<Sisop> {

public Context context;public ArrayList<Sisop> listos = null;

public CustomAdapter(Context context, ArrayList<Sisop> listos) { // Constructor adaptersuper(context, R.layout.rowview, listos);this.context = context;this.listos = listos;

}

@Overridepublic View getView(int position, View convertView, ViewGroup parent) { // modify getView()

LayoutInflater inflater =(LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

View rowView = inflater.inflate(R.layout.rowview, parent, false);

TextView nama = (TextView) rowView.findViewById(R.id.namaos);

nama.setText(listos.get(position).nama);

return (rowView);}

MainList.Javapublic class MainList extends Activity implements AdapterView.OnItemClickListener{private ArrayList<Sisop> listOs = new ArrayList<Sisop>();

@Overrideprotected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.listactivity);

ListView listsisop = (ListView) findViewById(R.id.listView);

listOs.add(new Sisop("Android”));listOs.add(new Sisop("iPhone"));listOs.add(new Sisop("windowsMobile"));listOs.add(new Sisop("BlackBerry"));listOs.add(new Sisop("WebOS"));listOs.add(new Sisop("Ubuntu"));listOs.add(new Sisop("Windows7"));listOs.add(new Sisop("Mac OS x"));

CustomAdapter myadapter = new CustomAdapter(this,listOs);listsisop.setAdapter(myadapter);listsisop.setOnItemClickListener(this);

}@Override

public void onItemClick(AdapterView<?> parent, View v, int position, long id) {

Toast.makeText(this, listOs.get(position).nama, Toast.LENGTH_SHORT).show();}

Thanks!QUESTIONS?

https://groups.google.com/d/forum/papb_tif_C

JOIN !!