CUSTOM LISTVIEW TRONG ANDROID

https://thangcoder.com/lap-trinh-android/huong-dan-custom-listview-trong-android

Bây giờ chúng ra sẽ đi custom lại cái listview mà mình đã giới thiệu ở bài 16 nhé, cái này cũng là ở mức dễ chứ không có gì khó, sau bài này mình sẽ có bài thực hành khó hơn tí nữa để mọi người làm quen làm việc với listview vì khi đi làm đụng đến nó rất là nhiều.

Chúng ta nhìn lại hình ảnh bên dưới trước khi bắt tay vào làm nhé, mình sẽ phân tích cụ thể các bước chúng ta cần làm là gì:

Bạn thấy ở trên có rất nhiều dòng đúng không nhưng bạn chỉ cần thiết kế layout một dòng và sau đó add vào ListView, bạn add bao nhiêu cái thì nó có bấy nhiêu dòng thôi.

Custom listview android

Công việc chúng ta bao gồm:

1. Tạo một file layout cho các dòng (item) trong listView.
2. Tạo 1 class tượng trung cho Contact
3. Tạo class CustomAdapter để custom listview cho layout đã tạo phía trên.
4. Gọi CustomAdapter để lấy dữ liệu.

1. File layout ở trên sẽ bao gồm 2 TextView và dưới đây là file layout đó:

row_listview.xml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

<?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:orientation="vertical">     <LinearLayout 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:orientation="vertical">           <LinearLayout             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:layout_margin="16dp"             android:orientation="horizontal">               <TextView                 android:id="@+id/tvAvatar"                 android:layout_width="70dp"                 android:layout_height="70dp"                 android:background="#18ade4"                 android:gravity="center"                 android:text="1"                 android:textColor="#ffffff"                 android:textSize="28sp"                 android:textStyle="bold" />               <LinearLayout                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:layout_gravity="center"                 android:layout_marginLeft="50dp"                 android:orientation="vertical">                   <TextView                     android:id="@+id/tvName"                     android:layout_width="wrap_content"                     android:layout_height="wrap_content"                     android:layout_gravity="center"                     android:text="Truong Dinh Chien"                     android:textSize="16sp"                     android:textStyle="bold" />                   <TextView                     android:id="@+id/tvPhoneNumber"                     android:layout_width="wrap_content"                     android:layout_height="wrap_content"                     android:layout_gravity="center"                     android:text="0988933xxx"                     android:textSize="16sp"                     android:textStyle="bold" />             </LinearLayout>         </LinearLayout>     </LinearLayout> </LinearLayout>

 2. Đây là class Contact bạn sẽ thiết kế để tạo ra một đối tượng lưu vào các item của listview, ở đây là các row.Cách tạo Constructer và getter(), setter() chắc mọi người đã biết rồi chứ đúng không nào, nó học ở Java căn bản đó.

Contact này sẽ có các thuộc tính như:

• Name: hiển thị tên ngườ dùng.
• PhoneNumber: hiển thị số điện thoại.
• Color: màu sắc avatar

Contact.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

package com.cheng.bai18customlistview.model;   /** * Created by Welcome on 8/27/2016. */ public class Contact {     private String name;     private String phoneNumber;     private int color;       public Contact(String name, String phoneNumber, int color) {         this.name = name;         this.phoneNumber = phoneNumber;         this.color = color;     }       public String getName() {         return name;     }       public void setName(String name) {         this.name = name;     }       public String getPhoneNumber() {         return phoneNumber;     }       public void setPhoneNumber(String phoneNumber) {         this.phoneNumber = phoneNumber;     }       public int getColor() {         return color;     }       public void setColor(int color) {         this.color = color;     } }

3.Như bài học về listview trước chúng ta không custom ArrdayAdapter mà là sử dụng luôn thư viện có sẵn mà Android đã có, thế nên listview chỉ hiển thị dữ liệu dạng 1 đoạn text ở trên 1 row, còn bây giờ trên một row chúng ta có tới tận 3 image view thì không dùng nó được mà chúng ta phải custom lại đễ dữ liệu có thể hiển thị được.

CustomAdapter.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

package com.cheng.bai18customlistview.adapter;   import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.TextView;   import com.cheng.bai18customlistview.R; import com.cheng.bai18customlistview.model.Contact;   import java.util.ArrayList; import java.util.List;   /** * Created by Welcome on 8/27/2016. */ public class CustomAdapter extends ArrayAdapter<Contact> {       private Context context;     private int resource;     private List<Contact> arrContact;       public CustomAdaper(Context context, int resource, ArrayList<Contact> arrContact) {         super(context, resource, arrContact);         this.context = context;         this.resource = resource;         this.arrContact = arrContact;     }       @Override     public View getView(int position, View convertView, ViewGroup parent) {         ViewHolder viewHolder;         if (convertView == null) {             convertView = LayoutInflater.from(context).inflate(R.layout.row_listview, parent, false);             viewHolder = new ViewHolder();             viewHolder.tvName = (TextView) convertView.findViewById(R.id.tvName);             viewHolder.tvNumberPhone = (TextView) convertView.findViewById(R.id.tvPhoneNumber);             viewHolder.tvAvatar = (TextView) convertView.findViewById(R.id.tvAvatar);               convertView.setTag(viewHolder);         } else {             viewHolder = (ViewHolder) convertView.getTag();         }         Contact contact = arrContact.get(position);         viewHolder.tvAvatar.setBackgroundColor(contact.getColor());         viewHolder.tvAvatar.setText(String.valueOf(position+1));         viewHolder.tvName.setText(contact.getName());         viewHolder.tvNumberPhone.setText(contact.getPhoneNumber());         return convertView;     }       public class ViewHolder {         TextView tvName, tvNumberPhone, tvAvatar;       } }

Ở thằng này sẽ có rất nhiều cái mới nên mình sẽ giải thích cặn kẽ, không hiểu bạn có thể xem thêm ở video bên dưới nhé:

Ở đây class CustomAdaper kế thừa lại thằng ArrayAdapter<> có kiểu Generic là Contact, nghĩa là nó chỉ nhận vào kiểu dữ liệu là Contact thôi.Khi bạn kế thừa thì bắt buộc bạn phải ghi đè @Override constructer là:

1 2 3 4 5 6

public CustomAdaper(Context context, int resource, ArrayList<Contact> arrContact) {         super(context, resource, arrContact);         this.context = context;         this.resource = resource;         this.arrContact = arrContact;     }

Ở đây bạn sẽ truyền vào các params như trên, nếu bạn có xem bài 18 thì sẽ còn nhớ dòng lênh này:

1	ArrayAdapter arrayAdapter = new ArrayAdapter(this,android.R.layout.simple_list_item_1,number);

Thì bạn custom lại Adapter thì  khi dùng bạn cũng sẽ gọi Adapter đó và truyền các tham số vào, ở đây bạn sẽ thay đổi thằng:

android.R.layout.simple_list_item thành layout bạn đã thiết kế ở trên row_listview.xml, và list number trên sẽ thay bằng 1 list Contact khác.

Tiếp đến là phương thức getView(), đây là phương thức để khởi tạo view để add nó vào Listview, ở đây nó sẽ tạo ra các row trên listview và set dữ liệu là các Contact lên các row đó, thực ra bạn cũng chẳng cần hiểu nó là cái gì bởi vì đây là cú pháp cứng chúng ta chỉ cần học thuộc rồi dùng, dùng nhiều lần dẫn đến quen và hiểu.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

@Override     public View getView(int position, View convertView, ViewGroup parent) {         ViewHolder viewHolder;         if (convertView == null) {             convertView = LayoutInflater.from(context).inflate(R.layout.row_listview, parent, false);             viewHolder = new ViewHolder();             viewHolder.tvName = (TextView) convertView.findViewById(R.id.tvName);             viewHolder.tvNumberPhone = (TextView) convertView.findViewById(R.id.tvPhoneNumber);             viewHolder.tvAvatar = (TextView) convertView.findViewById(R.id.tvAvatar);               convertView.setTag(viewHolder);         } else {             viewHolder = (ViewHolder) convertView.getTag();         }         Contact contact = arrContact.get(position);         viewHolder.tvAvatar.setBackgroundColor(contact.getColor());         viewHolder.tvAvatar.setText(String.valueOf(position+1));         viewHolder.tvName.setText(contact.getName());         viewHolder.tvNumberPhone.setText(contact.getPhoneNumber());         return convertView;     }

Ở đây mình sử dụng thằng ViewHolder để setTag() và getTag() khi khởi tạo view, các bạn biết tại sao lại sử dụng nó không? Thực ra listview nếu bạn chỉ có vài row thì khi vuốt lên xuống rất là mượt mà nhưng nếu bạn có đến 1000 row thì lại khác, nó sẽ rất lag đó( sau này mình sẽ giới thiệu Recyclerview dùng mượt hơn listview).

Chính vì thế thằng ViewHolder này ra đời để khắc phục, khi các bạn trượt listview lên xuống thì nếu các row này đã khởi tạo rồi thì nó sẽ lưu ở Tag và sẽ không khởi tạo lại bàng việc getTag ra, trong video mình giải thích rất rõ cái này nên bạn xem sẽ hiểu ngay.

1	Contact contact = arrContact.get(position);

Vì khi gọi class CustomAdaper ở MainActivity bạn sẽ truyền cho nó 1 list Contact nên dòng code trên sẽ có tác dụng là lấy ra từng Contact một tương tứng với từng view, khi lấy được contact nó sẽ có được dữ liệu của 1 Contact như: name, phonenumber, color… và dữ liệu này sẽ set lên trên row của listview.

Và cuối cùng là return lại converView chính là các row mà nãy giờ chúng ta đã tạo và set dữ liệu lên.

4.Như bài trước mình đã nói là Adapter có nhiệm vụ là trung gian để chứa data hiển thị lên listview, ở đây bạn cũng làm tương tự là gọi CustomAdapter rồi truyền mảng Contact vào cho nó xử lý đưa vào row thôi.

MainActivity.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

package com.cheng.bai18customlistview;   import android.graphics.Color; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.widget.ListView;   import com.cheng.bai18customlistview.adapter.CustomAdaper; import com.cheng.bai18customlistview.model.Contact;   import java.util.ArrayList;   public class MainActivity extends AppCompatActivity {     private ListView lvContact;     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         lvContact = (ListView) findViewById(R.id.lv_contact);         ArrayList<Contact> arrContact = new ArrayList<>();           Contact contact1 = new Contact("Trương Đình Chiến","0988 933 xxx", Color.RED);         Contact contact2 = new Contact("Võ Văn Tá","01667 585 545", Color.GREEN);         Contact contact3 = new Contact("Lê Tấn Dũng","0918 033 033", Color.GRAY);         Contact contact4 = new Contact("Trương Quang Lâm","0978 102 102", Color.YELLOW);         Contact contact5 = new Contact("Võ Duy Tính","01667 333 000", Color.BLACK);         Contact contact6 = new Contact("Trần Văn Toàn","08 999 321", Color.BLUE);         Contact contact7 = new Contact("Lại Thế Quang","01222 331 331", Color.CYAN);           arrContact.add(contact1);         arrContact.add(contact2);         arrContact.add(contact3);         arrContact.add(contact4);         arrContact.add(contact5);         arrContact.add(contact6);         arrContact.add(contact7);           CustomAdapter customAdaper = new CustomAdapter(this,R.layout.row_listview,arrContact);         lvContact.setAdapter(customAdaper);       } }

Còn đây là file layout của MainActivity:

activity_main.xml

1 2 3 4 5 6 7 8 9 10 11

<?xml version="1.0" encoding="utf-8"?> <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">       <ListView         android:id="@+id/lv_Contact"         android:layout_width="wrap_content"         android:layout_height="wrap_content"/> </RelativeLayout>

Ở MainActivity mình tạo ra 7 đối tượng contact rồi add nó vào Arraylist<Contact> là arrContact để  bỏ vào CustomAdapter , sau đó setAdapter đó lên listView để nó hiển thị là xong.Như ban đầu mình nói custom Listview khó nhưng tuy nhiên là đối với những người mới học thôi, vì nó hơi khó hiểu nhưng biết rồi thì thấy nó đơn giản thật.

Ngoài cách custom Adapter bằng việc kế thừa ArrayAdapter thì bạn còn cách kế thừa BaseAdapter và mình sẽ hướng dẫn trong chuyên mục android nâng cao các bạn có thể tìm xem.