Lesson (127) Basic သင္တန္းမွ

========

==========

Custom ListView တည္ေဆာက္ အသံုးျပဳနည္း
==========

ListView တခုမွာ List item ေတြဟာ စာသား text တခုစီပဲ ပါရင္ ListView သင္ခန္းစာမွာ ျပထားတဲ့အတိုင္း လုပ္တာနဲ႔ လုံေလာက္ပါတယ္။

တကယ္လို႔ List item ေတြမွာ စာသား text တခုမက ပါမယ္၊ Text color, text size ေတြကိုလဲ အမ်ိဳးမ်ိဳး သံုးခ်င္တယ္၊ ပံုလဲ ထည့္မယ္ ဆိုရင္ေတာ့ Custom ListView ေဆာက္ၿပီး အသံုးျပဳရတယ္။

စာသား text  ၂ခု နဲ႔ ပံုတခု ပါတဲ့ Custom ListView ေဆာက္ဖို႔ လုပ္ငန္း အဆင့္ဆင့္ကို ေအာက္မွာ ျပထားပါတယ္။

၁။ xml layout file မွာ ListView တခု ထည့္ပါ။ ID တခု ေပးခဲ့ ၿပီး အဲဒါကို Activity ထဲမွာ ရည္ညႊန္း ရယူထားပါ။

========
main.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="match_parent"
android:gravity="top|left">

<ListView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="@+id/lv"/>

</LinearLayout>

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

၂။ res/layout folder ထဲမွာ List item တခုခ်င္းကို ပံုေဖာ္ေပးဖို႔ ImageView တခု၊ TextView ၂ခု ပါတဲ့ layout တခု ေဆာက္ပါ။ ေနရာ၊ အရြယ္အစား၊ Text size, text color ေတြ သတ္မွတ္ေပးပါ။

========
res/layout/listitem.xml
========
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent">

<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="@+id/iv"/>

<TextView
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="wrap_content"
android:layout_toRightOf="@id/iv"
android:id="@+id/tv1"
android:layout_alignParentRight="true"
android:textColor="#920029"/>

<TextView
android:layout_height="wrap_content"
android:text="Text"
android:layout_width="wrap_content"
android:layout_below="@id/tv1"
android:layout_toEndOf="@id/iv"
android:id="@+id/tv2"
android:layout_alignParentRight="true"
android:textColor="#0C0189"/>

</RelativeLayout>

========

၃။ Activity ထဲမွာ List item ေတြအတြက္ အခ်က္အလက္ေတြ မွတ္သားေပးဖို႔ Array ေတြ ဖန္တီးရပါမယ္။ အခု ဥပမာမွာ image resource id ေတြ မွတ္ထားေပးမဲ့ int[] တခု၊ title စာသားေတြ မွတ္ထားေပးမဲ့ String[] တခု၊ description စာသားေတြ မွတ္ထားေပးမဲ့ String[] တခု လိုပါမယ္။ Image file ေတြကိုေတာ့ res/drawable folder ထဲမွာ ႀကိဳတင္ ထည့္ထားၿပီး ျဖစ္ရမယ္။

int[] resourceIds={
R.drawable.img1,
R.drawable.img2,
R.drawable.img3,
R.drawable.img4,
R.drawable.img5
};

String[] titles={
"Computers",
"Books",
"Phones",
"Cars",
"Money"
};

String[] descriptions={
"We use computers for data processing and storage.",
"We must read books to improve our knowledge.",
"Hand phones are very useful.",
"We need cars to go to different places.",
"Money makes everything."
};

၄။ BaseAdapter ကို extends လုပ္တဲ့ Custom adapter တခုေဆာက္ရတယ္။ သူ႔ပံုစံက ဒီလို။

public class MyAdapter extends BaseAdapter{}

{} ေအာက္မွာ မ်ဥ္းနီတား error ျပရင္ long click ႏွိပ္ၿပီး fix လုပ္ပါ။ method ေတြ auto ထည့္ေပးပါလိမ့္မယ္။

=========
public class MyAdapter extends BaseAdapter
{

@Override
public int getCount()
{
// TODO: Implement this method
return 0;
}

@Override
public Object getItem(int p1)
{
// TODO: Implement this method
return null;
}

@Override
public long getItemId(int p1)
{
// TODO: Implement this method
return 0;
}

@Override
public View getView(int p1, View p2, ViewGroup p3)
{
// TODO: Implement this method
return null;
}
}
=========

အဲဒီ method ေတြမွာ လိုက္ျပင္ေပးရမယ္။

getCount() မွာ List item အေရအတြက္ကို return ျပန္ေပးရတယ္။

return titles.length;

getView() မွာေတာ့ List item တခုခ်င္းအတြက္ layout ကို View တခုအျဖစ္ inflate လုပ္ၿပီး return ျပန္ေပးရတယ္။ View ရၿပီးရင္ ImageView အတြက္ resource id, Title TextView အတြက္ စာသား၊ description TextView အတြက္ စာသားေတြကို သက္ဆိုင္ရာ Array ေတြကေန ရယူၿပီး သတ္မွတ္ေပးလိုက္ရတယ္။ int p1 ဆိုတဲ့ parameter က List item position ျဖစ္ပါတယ္။ ဒီ position အရ array ေတြကေန data ထုတ္ယူရတယ္။

======
@Override
public View getView(int p1, View p2, ViewGroup p3)
{
View view=getLayoutInflater().inflate(R.layout.listitem,null);

ImageView iv=(ImageView)view.findViewById(R.id.iv);
iv. setBackgroundResource(resourceIds[p1]);

TextView tv1=(TextView)view.findViewById(R.id.tv1);
tv1.setText(titles[p1]);

TextView tv2=(TextView)view.findViewById(R.id.tv2);
tv2.setText(descriptions[p1]);

return view;
}
======

၅။ ListView lv ကို MyAdapter နဲ႔ ခ်ိတ္ေပးရတယ္။

lv.setAdapter(new MyAdapter());

ဒါဆိုရင္ ListView မွာ item ေတြ ေပၚလာမွာ ျဖစ္ပါတယ္။

၆။ List item ေတြကို click, long click ဖမ္းနည္းကေတာ့ အရင္ သင္ခန္းစာအတိုင္း ျဖစ္ပါတယ္။

==========

MainActivity.java
==========
package nnl.aide.lessons;

import android.app.*;
import android.os.*;
import android.widget.*;
import android.view.*;

public class MainActivity extends Activity
{ ListView lv;

int[] resourceIds={
R.drawable.ic_launcher,
R.drawable.ic_launcher,
R.drawable.ic_launcher,
R.drawable.ic_launcher,
R.drawable.ic_launcher
};

String[] titles={
"Computers",
"Books",
"Phones",
"Cars",
"Money"
};

String[] descriptions={
"We use computers for data processing and storage.",
"We must read books to improve our knowledge.",
"Hand phones are very useful.",
"We need cars to go to different places.",
"Money makes everything."
};

@Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
lv=(ListView)findViewById(R.id.lv);
lv.setAdapter(new MyAdapter());
    }

public class MyAdapter extends BaseAdapter
{

@Override
public int getCount()
{
return titles.length;
}

@Override
public Object getItem(int p1)
{
// TODO: Implement this method
return null;
}

@Override
public long getItemId(int p1)
{
// TODO: Implement this method
return 0;
}

@Override
public View getView(int p1, View p2, ViewGroup p3)
{
View view=getLayoutInflater().inflate(R.layout.listitem,null);

ImageView iv=(ImageView)view.findViewById(R.id.iv);
iv.setBackgroundResource(resourceIds[p1]);

TextView tv1=(TextView)view.findViewById(R.id.tv1);
tv1.setText(titles[p1]);

TextView tv2=(TextView)view.findViewById(R.id.tv2);
tv2.setText(descriptions[p1]);

return view;
}
}
}
==========

:)