GIỚI THIỆU

Trong bài này bạn sẽ học cách Custom lại layout cho ListView trong ứng dụng Android của bạn. Tôi nghĩ bài tập này nó rất quan trọng và thực tế bởi vì trong các ứng dụng Android có liên quan tới ListView thì đa phần chúng ta phải custom lại cho đúng với yêu cầu của khách hàng.

Mỗi dòng trong ListView sẽ có  đối tượng: TextView và ImageView.

Bắt đầu code:

1: Tạo giao diện XML

• activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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:weightSum="1">

    <ListView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/lvBookList"
        android:layout_weight="1" />
</LinearLayout>

• item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:focusable="true"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:clickable="true"
    android:background="?android:attr/selectableItemBackground"
    android:orientation="vertical">

    <TextView
        android:id="@+id/title"
        android:textColor="@color/title"
        android:textSize="16dp"
        android:textStyle="bold"
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/author"
        android:layout_below="@id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/price"
        android:textColor="@color/year"
        android:layout_width="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/price"
        android:layout_alignEnd="@+id/price"
        android:layout_below="@+id/author">

        <ImageView
            android:layout_width="90px"
            android:layout_height="90px"
            app:srcCompat="@drawable/like"
            android:id="@+id/btnLike"
            android:layout_weight="1" />
    </LinearLayout>

</RelativeLayout>

2. Phần code java

2.1 Tạo Book model lưu dữ liệu

public class Book {
    private String title;
    private String  author;
    private String  price;

    public Book() {
    }

    public Book(String title, String author, String price) {
        this.title = title;
        this.author = author;
        this.price = price;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getAuthor() {
        return author;
    }

    public void setAuthor(String author) {
        this.author = author;
    }

    public String getPrice() {
        return price;
    }

    public void setPrice(String price) {
        this.price = price;
    }

    @Override
    public String toString() {
        return "Book{" +
                "title='" + title + '\'' +
                ", author='" + author + '\'' +
                ", price='" + price + '\'' +
                '}';
    }
}

2.2 Tạo custom adapter: BookAdapter.java

public class BookAdapter extends ArrayAdapter<Book> {

    Activity context; 
    int resource;     
    List<Book> objects; 
    /**
     * @param context
     * @param resource
     * @param objects
     * */
    public BookAdapter(Activity context, int resource, List<Book> objects) {
        super(context, resource, objects);
        this.context=context;
        this.resource=resource;
        this.objects=objects;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        LayoutInflater inflater= this.context.getLayoutInflater();
        View row = inflater.inflate(this.resource,null);

        TextView txtTitle = (TextView) row.findViewById(R.id.title);
        TextView txtAuthor = (TextView) row.findViewById(R.id.author);
        TextView txtPrice = (TextView) row.findViewById(R.id.price);
        ImageView btnLike = (ImageView) row.findViewById(R.id.btnLike);
        /** Set data to row*/
        final Book book = this.objects.get(position);
        txtTitle.setText(book.getTitle());
        txtAuthor.setText(book.getAuthor());
        txtPrice.setText(book.getPrice());

        /**Set Event Onclick*/
        btnLike.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showMessage(book);
            }
        });
        return row;
    }
    /** Show mesage*/
    private void showMessage(Book book) {
        Toast.makeText(this.context,book.toString(),Toast.LENGTH_LONG).show();
    }
}

2.3  Tại MainAcitivity.java

public class MainActivity extends AppCompatActivity {
    ListView lvDanhBa;
    ArrayList<Book> bookList;
    BookAdapter bookAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        addControls();
        addEvent();
    }

    private void addControls() {

        lvDanhBa = (ListView) findViewById(R.id.lvBookList);
        bookList = new ArrayList<>();
        /**
         * @param MainActivity.this
         * @param R.layout.item
         * @param bookList
         * */
        bookAdapter = new BookAdapter(MainActivity.this,R.layout.item,bookList);
        lvDanhBa.setAdapter(bookAdapter);
    }

    private void addEvent() {
        createData();
    }

    /** Add data to bookList*/
    public void createData() {
        Book book = new Book("Kỳ Án Ánh Trăng","Xác treo trong nhà gỗ","100.000");
        bookList.add(book);
        book = new Book("Tuyết Đoạt Hồn","Qủy Cổ Nữ","100.000");
        bookList.add(book);
        book = new Book("Tơ Đòng Rỏ Máu","Xác treo trong nhà gỗ","100.000");
        bookList.add(book);
        book = new Book("Hồ Tuyệt Mệnh","Qủy Cổ Nữ","100.000");
        bookList.add(book);
        book = new Book("Nỗi Đau Của Đom Đóm","Qủy Cổ Nữ","100.000");
        bookList.add(book);
        bookAdapter.notifyDataSetChanged();
    }
}

Tiến hành Run project! Chúc các bạn thành công!

Source git: https://github.com/nguyenlinhnttu/CustomListView