Custom ListView trong Android làm app Todo

Bài trước chúng ta đã biết cách thêm dữ liệu vào SQLite, bài hôm nay chúng ta sẽ làm thêm chức năng hiển thị danh sách todo trên ListView, chúng ta sẽ Custom ListView giúp giao diện sẽ được tùy biến và đẹp hơn.

ListView thường thì nó chỉ có thể hiện thị Text lên khi chúng ta thao tác với nó cũng rất dễ hiểu, nhưng khi custom ListView thì nhiều bạn lại thấy bị vướng mắc rất khó hiểu.

Như chúng ta đã biết trong listview thành phần cơ bản của nó là các Cell hay còn gọi là các Item mỗi item mặc định nó là một TextView, mục đích của chúng ta là Custom listview có nghĩa là chúng ta muốn thay đổi các xắp xếp bố trí hiển thị lại bố cục của Cell trong listview.

Đơn giản là chúng ta sẽ tạo một cái layout: item_to_do_list.xml để mô tả bố cục cảu các Cell trong listview, vì các cell sau khi hiển thị giống nhau về bố cục, chỉ khác nhau về dữ liệu hiển thị lên chúng ta chỉ cần tạo một file layout là đủ, sau khi có dữ liệu là một danh sách chúng ta chỉ cần hiển thị ra nhiều cái Cell xong gán dữ liệu vào là xong.

Các bạn để ý trên hình vẽ item là layout mà chúng muốn custom là một layout thông thường chúng ta có thể thêm các component như TextView, Editext, ImageView, ... tùy thích.
Nhìn trên hình chúng ta sẽ thấy Custom ListView gồm hai phần một là giao diện của phần chứa listview phần còn lại là giao diện chứa phần custom.

Bây giờ chúng ta sẽ xây dựng phần custom:

layout/item_to_do_list_view.xml

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

<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginTop="15dp"
android:text="Title"
android:textSize="20sp"
android:textStyle="bold" />

<TextView
android:id="@+id/tvContent"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_alignParentEnd="true"
android:layout_alignStart="@+id/tvTitle"
android:layout_below="@+id/tvTitle"
android:layout_marginTop="12dp"
android:text="Content"
android:textSize="13sp"
android:textStyle="italic" />

<TextView
android:id="@+id/tvDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_below="@+id/tvContent"
android:layout_marginBottom="5dp"
android:layout_marginEnd="5dp"
android:layout_marginTop="5dp"
android:text="Date" />

</RelativeLayout>

Xây dựng xong phần giao diệ custom chúng ta cần viết code để kết nối giữa itemCustom với phâng lisview, chúng ta sẽ tạo một lớp kế thừa ArrayAdapter<Object>
Object là dữ liệu truyền vào trong các cell kiểu gì.

src/todoapp/view/main/ new File ToDoAdapter



package com.jundat95.todoapp.view.main;

import android.content.Context;
import android.support.annotation.LayoutRes;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.BaseAdapter;
import android.widget.TextView;

import com.jundat95.todoapp.R;
import com.jundat95.todoapp.model.ToDo;

import java.util.List;

/**
 * Created by tinhngo on 19/10/2017.
 */

public class ToDoAdapter extends ArrayAdapter {

    private List toDoList;
    private Context context;

    public ToDoAdapter(@NonNull Context context, @LayoutRes int resource, @NonNull List toDos) {
        super(context, resource, toDos);
        this.context = context;
        this.toDoList = toDos;

    }

    // Hàm lấy ra số phần tử của danh sách
    @Override
    public int getCount() {
        return toDoList.size();
    }

    @NonNull
    @Override
    public View getView(int position, @Nullable View view, @NonNull ViewGroup parent) {

        // Ánh xạ đến layout item_to_do để xử dụng các component nằm trong đó
        View v =  LayoutInflater.from(context).inflate(R.layout.item_to_do_list_view,parent,false);

        // ánh xạ các component
        TextView tvTitle = v.findViewById(R.id.tvTitle);
        TextView tvContent = v.findViewById(R.id.tvContent);
        TextView tvDate = v.findViewById(R.id.tvDate);

        // Set dữ liệu cho các compoent
        tvDate.setText(toDoList.get(position).getDate());
        tvContent.setText(toDoList.get(position).getContent());
        tvTitle.setText(toDoList.get(position).getTitle());

        return v;
    }
}

Tiếp theo ta sẽ sang main_activity.xml thêm ListView vào giao diện

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.jundat95.todoapp.view.main.MainActivity">

<Button
android:id="@+id/btnAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="Add" />

<ListView
android:id="@+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/btnAdd"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />

</RelativeLayout>

Sau đó chúng ta sẽ vào MainActivity để thực hiện các công việc sau:

- Ánh xạ button Add, ánh xạ listview
- Lấy dữ liệu từ SQLite -> lấy danh sách List Todo
- Khởi tạo Adapter sau đó chuyền dữ liệu vào và setAdapter cho listView



package com.jundat95.todoapp.view.main;

import android.content.ContentValues;
import android.content.Intent;
import android.database.Cursor;
import android.provider.Settings;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import com.jundat95.todoapp.R;
import com.jundat95.todoapp.model.ToDo;
import com.jundat95.todoapp.sqlite.SQLiteHelper;
import com.jundat95.todoapp.view.add.AddActivity;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private SQLiteHelper sqLiteHelper = new SQLiteHelper(this, 2);
    private ToDoAdapter toDoAdapter;

    private ListView listView;
    private Button btnAdd;

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

        init();
        //addToDo();
        List toDos = getToDo();

        toDoAdapter = new ToDoAdapter(this, R.layout.item_to_do_list_view, toDos);
        listView.setAdapter(toDoAdapter);

    }

    // Ánh xạ các thuộc tính từ bên giao diện sang
    private void init() {

        listView = (ListView) findViewById(R.id.listView);
        btnAdd = (Button) findViewById(R.id.btnAdd);
        btnAdd.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(MainActivity.this, AddActivity.class);
                startActivity(intent);
            }
        });

    }

    private void addToDo() {
        ContentValues contentValues = new ContentValues();

        String time = new Date().getTime() + "";
        String date = new Date() +  "";

        contentValues.put(SQLiteHelper.Id, time);
        contentValues.put(SQLiteHelper.Title, "Hello "+ time);
        contentValues.put(SQLiteHelper.Date, date);
        contentValues.put(SQLiteHelper.Content, "Xin chao ba con " + time);

        long n = sqLiteHelper.addToDo(contentValues);
        Toast.makeText(this, "Add complete: " + n, Toast.LENGTH_SHORT).show();
    }

    /***
     * Lấy ra toàn bộ danh sách Todo
     * @return List
     */
    private List getToDo() {
        List toDoList = new ArrayList<>();
        Cursor cursor = sqLiteHelper.getTodos();
        String data = "";
        while (cursor.moveToNext()){
            ToDo toDo = new ToDo(
                    cursor.getString(0),
                    cursor.getString(1),
                    cursor.getString(2),
                    cursor.getString(3)
            );

            toDoList.add(toDo);

        }
        return toDoList;
    }

}

Class ToDo trong /model



package com.jundat95.todoapp.model;

/**
 * Created by tinhngo on 12/10/2017.
 */

public class ToDo {

    private String Id;
    private String Title;
    private String Date;
    private String Content;

    public ToDo(String id, String title, String date, String content) {
        Id = id;
        Title = title;
        Date = date;
        Content = content;
    }

    public String getId() {
        return Id;
    }

    public void setId(String id) {
        Id = id;
    }

    public String getTitle() {
        return Title;
    }

    public void setTitle(String title) {
        Title = title;
    }

    public String getDate() {
        return Date;
    }

    public void setDate(String date) {
        Date = date;
    }

    public String getContent() {
        return Content;
    }

    public void setContent(String content) {
        Content = content;
    }
}

Jundat95

Header Ads

Custom ListView trong Android làm app Todo