ListView in android studio

byNguyễn Viết Thông -
1

Để bạn dễ hình dung ra listview là cái gì thì mình định nghĩa nó đơn giản là một danh sách để bạn hiển thị dữ liệu trên ứng dụng của mình. Xem hình bên dưới nhé.


Sơ đồ nguyên lý hoạt động của ListView


Step 1: Tạo layout trên như sau: (item_view.xml)

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

    <!--Avatar-->
    <ImageView
        android:id="@+id/img_ite_avatar"
        android:layout_width="90dp"
        android:layout_height="90dp"/>

    <!--Họ và Tên, Chức vụ, số điện thoại, trạng thái làm việc-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="8dp"
        android:orientation="vertical">

        <!--Họ và Tên-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Họ Và Tên"
            android:textSize="20sp"
            android:textColor="#111111"
            android:textStyle="bold"
            android:fontFamily="sans-serif"
            android:id="@+id/txt_ite_name"/>

        <!--Chức vụ, số điện thoại, trạng thái làm việc-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_marginTop="5dp">

            <!--Chức vụ, số điện thoại-->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_weight="6"
                android:layout_marginTop="0dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Chức vụ"
                    android:textSize="16sp"
                    android:layout_weight="1"
                    android:textColor="#111111"
                    android:fontFamily="sans-serif-black"
                    android:id="@+id/txt_ite_position"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="+84 975 111 355"
                    android:textSize="16sp"
                    android:textColor="#090909"
                    android:id="@+id/txt_ite_phone_number"/>

            </LinearLayout>

            <!--Trạng thái làm việc-->
            <TextView
                android:layout_width="0dp"
                android:layout_weight="4"
                android:layout_height="match_parent"
                android:text="Working"
                android:gravity="center"
                android:textSize="12sp"
                android:textColor="#00aa00"
                android:textStyle="bold"
                android:fontFamily="sans-serif"
                android:id="@+id/txt_ite_isWorking"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>


Step 2: Tạo một adapter để load dữ liệu lên listview đồng thời hứng các sự kiện trong listview đưa ra Activity để thực hiện các xử lý. Trước khi tạo adapter ta cần tạo một Model để binding dữ liệu vào view. Class Model như sau:

package com.tnv.thongcodelab_listview;

import android.os.Parcel;
import android.os.Parcelable;

/**
 Avatar, Họ và Tên, Chức vụ, số điện thoại, trạng thái làm việc
 */
public class ItemModel implements Parcelable {
    // lấy hình drawable
    private int avatar;

    // Họ và tên
    private String hoVaTen;

    // chức vụ
    private String position;

    // số điện thoại
    private String phoneNumber;

    //trạng thái làm việc
    private String isWorking;

    // Struct
    public ItemModel() {
        this.avatar = 0;
        this.hoVaTen = "";
        this.phoneNumber = "";
        this.isWorking = "";
        this.position = "";
    }

    // khởi tạo từ tham số
    public ItemModel(int avatar, String hoVaTen, String position, String phoneNumber, String isWorking) {
        this.avatar = avatar;
        this.hoVaTen = hoVaTen;
        this.position = position;
        this.phoneNumber = phoneNumber;
        this.isWorking = isWorking;
    }

    // phần này đừng quan tâm sẽ có bài viết dành riêng cho nó :))
    protected ItemModel(Parcel in) {
        avatar = in.readInt();
        hoVaTen = in.readString();
        position = in.readString();
        phoneNumber = in.readString();
        isWorking = in.readString();
    }

    // phần này đừng quan tâm sẽ có bài viết dành riêng cho nó :))
    public static final Creator<ItemModel> CREATOR = new Creator<ItemModel>() {
        @Override
        public ItemModel createFromParcel(Parcel in) {
            return new ItemModel(in);
        }

        @Override
        public ItemModel[] newArray(int size) {
            return new ItemModel[size];
        }
    };

    public int getAvatar() {
        return avatar;
    }

    public String getHoVaTen() {
        return hoVaTen;
    }

    public String getPosition() {
        return position;
    }

    public String getPhoneNumber() {
        return phoneNumber;
    }

    public String getIsWorking() {
        return isWorking;
    }

    public void setAvatar(int avatar) {
        this.avatar = avatar;
    }

    public void setHoVaTen(String hoVaTen) {
        this.hoVaTen = hoVaTen;
    }

    public void setPosition(String position) {
        this.position = position;
    }

    public void setPhoneNumber(String phoneNumber) {
        this.phoneNumber = phoneNumber;
    }

    public void setIsWorking(String isWorking) {
        this.isWorking = isWorking;
    }

    @Override
    public String toString() {
        return "ItemModel{" +
                "avatar=" + avatar +
                ", hoVaTen='" + hoVaTen + '\'' +
                ", position='" + position + '\'' +
                ", phoneNumber='" + phoneNumber + '\'' +
                ", isWorking='" + isWorking + '\'' +
                '}';
    }

    // phần này đừng quan tâm sẽ có bài viết dành riêng cho nó :))
    @Override
    public int describeContents() {
        return 0;
    }

    // phần này đừng quan tâm sẽ có bài viết dành riêng cho nó :))
    @Override
    public void writeToParcel(Parcel dest, int flags) {

        dest.writeInt(avatar);
        dest.writeString(hoVaTen);
        dest.writeString(position);
        dest.writeString(phoneNumber);
        dest.writeString(isWorking);
    }
}


Đây là Class Adapter:

package com.tnv.thongcodelab_listview;

import android.app.Activity;
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;

import androidx.annotation.NonNull;
import java.util.Collections;
import java.util.List;

public class ListviewAdapter extends ArrayAdapter<ItemModel> {

    private final List<ItemModel> list;
    private final Activity context;

    public ListviewAdapter(Activity context, List<ItemModel> list) {
        super(context, R.layout.view_item, list);
        this.context = context;
        this.list = list;
    }

    // đây là class giữ lại giá trị của item view khi hoạt động scroll Listview xảy ra
    static class ViewHolder {
        // image avatar
        protected ImageView imgAvatar;

        // họ và tên
        protected TextView txtName;

        // chức vụ
        protected TextView txtPosition;

        // số điện thoại
        protected TextView txtPhoneNumber;

        // trạng thái làm việc
        protected TextView txtIsWorking;
    }

    // phương thức binding data vào view
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View view = null;
        if (convertView == null) {
            LayoutInflater inflator = context.getLayoutInflater();
            view = inflator.inflate(R.layout.view_item, null);
            final ViewHolder viewHolder = new ViewHolder();

            viewHolder.imgAvatar = view.findViewById(R.id.img_ite_avatar);
            viewHolder.txtName = view.findViewById(R.id.txt_ite_name);
            viewHolder.txtPosition = view.findViewById(R.id.txt_ite_position);
            viewHolder.txtPhoneNumber = view.findViewById(R.id.txt_ite_phone_number);
            viewHolder.txtIsWorking = view.findViewById(R.id.txt_ite_isWorking);

            view.setTag(viewHolder);
        } else {
            view = convertView;
        }

        ViewHolder holder = (ViewHolder) view.getTag();
        holder.imgAvatar.setImageResource(list.get(position).getAvatar());
        holder.txtName.setText(list.get(position).getHoVaTen());
        holder.txtPosition.setText(list.get(position).getPosition());
        holder.txtPhoneNumber.setText(list.get(position).getPhoneNumber());
        holder.txtIsWorking.setText(list.get(position).getIsWorking());

        return view;
    }
}


Step 3: Thiết kế giao diện màn hình chính


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:divider="#000000"
        android:dividerHeight="1dp"
        android:padding="8dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>


Step 4: Code trong MainActivity:


package com.tnv.thongcodelab_listview;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;

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

public class MainActivity extends AppCompatActivity {
    // adapter
    private ListviewAdapter adapter;
    private List<ItemModel> listData;
    private ListView listView;

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

        // khai báo view cho màn hình chính, listview
        listView = findViewById(R.id.list_view);

        // load data vaof listData trước
        loadData();

        // khởi tạo adapter
        adapter = new ListviewAdapter(this, listData);

        // set adapter vào listview
        listView.setAdapter(adapter);
    }

    // hàm này gán data vào list để nạp vào listview và load trên giao diện
    private void loadData(){

        listData = new ArrayList<>();

        // tạo ra 14 đối tượng nhân viên,
        // ở đây mình demo cho các bạn mới bắt đầu làm quen với data
        // nên mới có cách làm thủ công này, chứ thực tế
        // load dữ liệu từ webservice là xong
        ItemModel itemModel1 = new ItemModel();
        itemModel1.setAvatar(R.drawable.img1);
        itemModel1.setHoVaTen("Nguyễn Văn ABB");
        itemModel1.setPosition("Thư ký");
        itemModel1.setPhoneNumber("0124 210 124");
        itemModel1.setIsWorking("Nghỉ phép");
        listData.add(itemModel1);

        ItemModel itemModel2 = new ItemModel();
        itemModel2.setAvatar(R.drawable.img2);
        itemModel2.setHoVaTen("Nguyễn Văn Schneider");
        itemModel2.setPosition("Nhân viên IT");
        itemModel2.setPhoneNumber("0124 210 124");
        itemModel2.setIsWorking("Đang làm việc");
        listData.add(itemModel2);

        ItemModel itemModel3 = new ItemModel();
        itemModel3.setAvatar(R.drawable.img3);
        itemModel3.setHoVaTen("Nguyễn Văn Mitsubishi");
        itemModel3.setPosition("Chăm sóc khách hàng");
        itemModel3.setPhoneNumber("0796 111 247");
        itemModel3.setIsWorking("Đang làm việc");
        listData.add(itemModel3);

        ItemModel itemModel4 = new ItemModel();
        itemModel4.setAvatar(R.drawable.img4);
        itemModel4.setHoVaTen("Nguyễn Văn LS");
        itemModel4.setPosition("CEO");
        itemModel4.setPhoneNumber("0975 111 355");
        itemModel4.setIsWorking("Đang làm việc");
        listData.add(itemModel4);

        ItemModel itemModel5 = new ItemModel();
        itemModel5.setAvatar(R.drawable.img5);
        itemModel5.setHoVaTen("Nguyễn Văn Panasonic");
        itemModel5.setPosition("Nhân viên kho");
        itemModel5.setPhoneNumber("0542 552 333");
        itemModel5.setIsWorking("Đang làm việc");
        listData.add(itemModel5);

        ItemModel itemModel6 = new ItemModel();
        itemModel6.setAvatar(R.drawable.img6);
        itemModel6.setHoVaTen("Nguyễn Văn Toshiba");
        itemModel6.setPosition("Nhân viên kho");
        itemModel6.setPhoneNumber("0111 222 333");
        itemModel6.setIsWorking("Đang làm việc");
        listData.add(itemModel6);

        ItemModel itemModel7 = new ItemModel();
        itemModel7.setAvatar(R.drawable.img7);
        itemModel7.setHoVaTen("Nguyễn Văn Omron");
        itemModel7.setPosition("Thủ kho");
        itemModel7.setPhoneNumber("0654 889 554");
        itemModel7.setIsWorking("Đang làm việc");
        listData.add(itemModel7);

        ItemModel itemModel8 = new ItemModel();
        itemModel8.setAvatar(R.drawable.img8);
        itemModel8.setHoVaTen("Nguyễn Văn Meanwell");
        itemModel8.setPosition("Kế toán");
        itemModel8.setPhoneNumber("0995 44 55 77");
        itemModel8.setIsWorking("Đang làm việc");
        listData.add(itemModel8);

        ItemModel itemModel9 = new ItemModel();
        itemModel9.setAvatar(R.drawable.img9);
        itemModel9.setHoVaTen("Nguyễn Văn Phonix Contact");
        itemModel9.setPosition("Bán hàng");
        itemModel9.setPhoneNumber("0548 22 22 23");
        itemModel9.setIsWorking("Đang làm việc");
        listData.add(itemModel9);

        ItemModel itemModel10 = new ItemModel();
        itemModel10.setAvatar(R.drawable.img10);
        itemModel10.setHoVaTen("Nguyễn Văn Wago");
        itemModel10.setPosition("Kỹ sư");
        itemModel10.setPhoneNumber("0223 254 889");
        itemModel10.setIsWorking("Onsite");
        listData.add(itemModel10);

        ItemModel itemModel11 = new ItemModel();
        itemModel11.setAvatar(R.drawable.img11);
        itemModel11.setHoVaTen("Nguyễn Văn Klemsan");
        itemModel11.setPosition("SEO");
        itemModel11.setPhoneNumber("0945 888 883");
        itemModel11.setIsWorking("Đang làm việc");
        listData.add(itemModel11);

        ItemModel itemModel12 = new ItemModel();
        itemModel12.setAvatar(R.drawable.img12);
        itemModel12.setHoVaTen("Nguyễn Văn Pentax");
        itemModel12.setPosition("SEO");
        itemModel12.setPhoneNumber("0139 554 124");
        itemModel12.setIsWorking("Thực địa");
        listData.add(itemModel12);

        ItemModel itemModel13 = new ItemModel();
        itemModel13.setAvatar(R.drawable.img13);
        itemModel13.setHoVaTen("Nguyễn Văn Ebara");
        itemModel13.setPosition("Kỹ sư");
        itemModel13.setPhoneNumber("0124 578 966");
        itemModel13.setIsWorking("Làm dự án");
        listData.add(itemModel13);

        ItemModel itemModel14 = new ItemModel();
        itemModel14.setAvatar(R.drawable.img14);
        itemModel14.setHoVaTen("Nguyễn Văn Hasaki");
        itemModel14.setPosition("Bán hàng");
        itemModel14.setPhoneNumber("0124 458 887");
        itemModel14.setIsWorking("Đang làm việc");
        listData.add(itemModel14);
    }
}

Step 5: Kết quả




Tags

Bạn có thể thích những bài đăng này

1 Nhận xét

  1. Anonymouslúc 07:56 1 tháng 6, 2021

    Cám ơn thầy ạ
    Em đã làm được nhờ hướng dẫn của thầy

    Trả lờiXóa
Mới hơn Cũ hơn