Android ListView

By Fanxtea | 1 Januari 2015

Dalam Android, ListView membenarkan kita untuk merancang susunan komponen dalam senarai vertical scrollable

Dalam tutorial ini, saya akan menunjukkan 2 jenis ListView:

1. Cara biasa untuk memaparkan komponen dalam ListView
2. Custom array adapter untuk customize paparan item dalam ListView

1. Normal ListView
Dalam contoh ini, saya akan menunjukkan bagaimana untuk memaparkan satu list nama buah via ListView, ia sepatotnya mudah dan mudah untuk difahami.

1.1 Fail Android Layout
Fail : res/layout/activity_main.xml


 <?xml version="1.0" encoding="utf-8"?>
 <TextView xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:padding="10dp"
  android:textSize="20sp" >
 </TextView>

 


1.2 ListView
Fail : MainActivity.java


 package com.fanxtea.helloworld;

import android.app.ListActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;

public class MainActivity extends ListActivity {

 static final String[] FRUITS = new String[] { "Apple", "Avocado", "Banana",
   "Blueberry", "Coconut", "Durian", "Guava", "Kiwifruit",
   "Jackfruit", "Mango", "Olive", "Pear", "Sugar-apple" };

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);

  // no more this
  // setContentView(R.layout.activity_main);

  setListAdapter(new ArrayAdapter(this, R.layout.activity_main,FRUITS));

  ListView listView = getListView();
  listView.setTextFilterEnabled(true);

  listView.setOnItemClickListener(new OnItemClickListener() {
   public void onItemClick(AdapterView parent, View view,
     int position, long id) {
       // When clicked, show a toast with the TextView text
       Toast.makeText(getApplicationContext(),
    ((TextView) view).getText(), Toast.LENGTH_SHORT).show();
   }
  });

 }

}

 


1.3 Demo
Run aplikasi.






2. Custom ArrayAdapter
Dalam contoh ini, saya akan menunjukkan bagaimana untuk create Empat items didalam ListView dan menggunakan custom "ArrayAdapter" untuk memaparkan perbezaan imej asas yang terdapat di dalam senarai.

2.1 Imej
Ambil beberapa imej untuk demo.




2.2 Fail Layout
Fail: res/layout/activity_main.xml


 
<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/logo"
        android:layout_width="50px"
        android:layout_height="50px"
        android:layout_marginLeft="5px"
        android:layout_marginRight="20px"
        android:layout_marginTop="5px"
        android:src="@drawable/ic_launcher" >
    </ImageView>

    <TextView
        android:id="@+id/label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@+id/label"
        android:textSize="30px" >
    </TextView>
 
</LinearLayout>

 



2.3 Custom ArrayAdapter
Create satu kelas extends ArrayAdapter dan customize item yang ingin dipaparkan di dalam kaedahgetView()

Fail: NewPage.java

 package com.fanxtea.helloworld;

import com.fanxtea.helloworld.R;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class NewPage extends ArrayAdapter {
 private final Context context;
 private final String[] values;

 public NewPage(Context context, String[] values) {
  super(context, R.layout.activity_main, values);
  this.context = context;
  this.values = values;
 }

 @Override
 public View getView(int position, View convertView, ViewGroup parent) {
  LayoutInflater inflater = (LayoutInflater) context
   .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

  View rowView = inflater.inflate(R.layout.activity_main, parent, false);
  TextView textView = (TextView) rowView.findViewById(R.id.label);
  ImageView imageView = (ImageView) rowView.findViewById(R.id.logo);
  textView.setText(values[position]);

  // Change icon based on name
  String s = values[position];

  System.out.println(s);

  if (s.equals("WindowsMobile")) {
   imageView.setImageResource(R.drawable.gambar1);
  } else if (s.equals("iOS")) {
   imageView.setImageResource(R.drawable.gambar2);
  } else if (s.equals("Blackberry")) {
   imageView.setImageResource(R.drawable.gambar3);
  } else {
   imageView.setImageResource(R.drawable.ic_launcher);
  }

  return rowView;
 }
}

 


2.4 ListView
Menggunakan custom adapter diatas untuk memaparkan ListView.

Fail: MainActivity.java


 package com.fanxtea.helloworld;

import com.fanxtea.helloworld.NewPage;
import android.app.ListActivity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.Toast;
import android.view.View;

public class MainActivity extends ListActivity {

 static final String[] MOBILE_OS = 
               new String[] { "Android", "iOS", "WindowsMobile", "Blackberry"};

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);

  setListAdapter(new NewPage(this, MOBILE_OS));

 }

 @Override
 protected void onListItemClick(ListView l, View v, int position, long id) {

  //get selected items
  String selectedValue = (String) getListAdapter().getItem(position);
  Toast.makeText(this, selectedValue, Toast.LENGTH_SHORT).show();

 }

}
 


2.5 Demo
Run aplikasi.