2.4.9 ListView Data Update Issues

❮ Php Session Login Php Different Include And Require ❯

2.4.9 ListView Data Update Issues

Category Android Basic Tutorial

Introduction:

We have already learned some basic usage of ListView, but you might have noticed that our data is static and predefined. In real-world development, data is often dynamic and changes, such as adding, deleting, or modifying entries. The list should update accordingly. This section will discuss how to update ListView data, including full updates and updating individual items. Let's get started!

1. First, let's write a normal demo

Alright, let's start with a normal demo and then we'll adjust it gradually:

Entity class: Data.java:

/**
 * Created by Jay on 2015/9/21 0021.
 */
public class Data {
    private int imgId;
    private String content;

    public Data() {}

    public Data(int imgId, String content) {
        this.imgId = imgId;
        this.content = content;
    }

    public int getImgId() {
        return imgId;
    }

    public String getContent() {
        return content;
    }

    public void setImgId(int imgId) {
        this.imgId = imgId;
    }

    public void setContent(String content) {
        this.content = content;
    }
}

Activity layout and list item layout:

activity_main.xml:

<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"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/list_one"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

item_list.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:orientation="horizontal">

    <ImageView
        android:id="@+id/img_icon"
        android:layout_width="56dp"
        android:layout_height="56dp"/>

    <TextView
        android:id="@+id/txt_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="10dp"
        android:textSize="18sp" />

</LinearLayout>

Custom BaseAdapter implementation: MyAdapter.java:

/**
 * Created by Jay on 2015/9/21 0021.
 */
public class MyAdapter extends BaseAdapter {

    private Context mContext;
    private LinkedList<Data> mData;

    public MyAdapter() {}

    public MyAdapter(LinkedList<Data> mData, Context mContext) {
        this.mData = mData;
        this.mContext = mContext;
    }

    @Override
    public int getCount() {
        return mData.size();
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder = null;
        if(convertView == null){
            convertView = LayoutInflater.from(mContext).inflate(R.layout.item_list,parent,false);
            holder = new ViewHolder();
            holder.img_icon = (ImageView) convertView.findViewById(R.id.img_icon);
            holder.txt_content = (TextView) convertView.findViewById(R.id.txt_content);
            convertView.setTag(holder);
        }else{
            holder = (ViewHolder) convertView.getTag();
        }
        holder.img_icon.setImageResource(mData.get(position).getImgId());
        holder.txt_content.setText(mData.get(position).getContent());
        return convertView;
    }

    private class ViewHolder{
        ImageView img_icon;
        TextView txt_content;
    }

}

MainActivity.java implementation:

public class MainActivity extends AppCompatActivity {

    private ListView list_one;
    private MyAdapter mAdapter = null;
    private List<Data> mData = null;
    private Context mContext = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext = MainActivity.this;
        bindViews();
        mData = new LinkedList<Data>();
        mAdapter = new MyAdapter((LinkedList<Data>) mData,mContext);
        list_one.setAdapter(mAdapter);
    }

    private void bindViews(){
        list_one = (ListView) findViewById(R.id.list_one);
    }

}

When you run it, you'll notice that the page has no data, just a blank screen, which isn't a good user experience. You can use the setEmptyView(View) method of ListView to display a view when there's no data. Note that dynamically added views don't work with this method; the view must be added in the layout file where the ListView is. Also, the view set by setEmptyView doesn't show up initially. For example, to display a "No data" TextView when there's no data, use the following code:

<TextView
        android:id="@+id/txt_empty"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="15pt"
        android:textColor="#000000"/>

txt_empty = (TextView) findViewById(R.id.txt_empty);    
txt_empty.setText("No data available~");
list_one.setEmptyView(txt_empty);

Alternatively, you can define a layout the same size and position as the ListView, set android:visibility="gone", and in the Java code, check the size of the mData collection. If it's zero, show the layout; hide it when there's data.

2. Adding a Record

Let's add a button to add a record each time it's pressed.

Running effect:

Code implementation

Define a method in our custom BaseAdapter:

public void add(Data data) {
    if (mData == null) {
        mData = new LinkedList<>();
    }
    mData.add(data);
    notifyDataSetChanged();
}

mData.add(data);
notifyDataSetChanged();

Then add a button to the layout and set up the event, the code is as follows:

private Button btn_add;
btn_add = (Button) findViewById(R.id.btn_add);
btn_add.setOnClickListener(this);

@Override
public void onClick(View v) {
    switch (v.getId()){
        case R.id.btn_add:
            mAdapter.add(new Data(R.mipmap.ic_icon_qitao,"给猪哥跪了~~~ x " + flag));
            flag++;
            break;
    }
}

Hehe, it's done, adding data is that simple~ If you want to insert into a specific position, you can do that too. We'll add another method in our Adapter class:

// Add an element at a specific position
public void add(int position, Data data){
    if (mData == null) {
        mData = new LinkedList<>();
    }
    mData.add(position, data);
    notifyDataSetChanged();
}

Then add a button and write an event:

private Button btn_add2;
btn_add2 = (Button) findViewById(R.id.btn_add2);
btn_add2.setOnClickListener(this);

case R.id.btn_add2:
// Position starts from 0
mAdapter.add(4, new Data(R.mipmap.ic_icon_qitao,"给猪哥跪了~~~ x " + flag));
break;

Running Effect Diagram:

You can see that our ninth item has been inserted into the fifth position~

3. Deleting an Item

Similarly, we write two methods, one to delete an object directly and one to delete based on the cursor:

public void remove(Data data) {
    if(mData != null) {
        mData.remove(data);
    }
    notifyDataSetChanged();
}

public void remove(int position) {
    if(mData != null) {
        mData.remove(position);
    }
    notifyDataSetChanged();
}

Then add two Buttons and call these two methods:

case R.id.btn_remove:
    mAdapter.remove(mData_5);
    break;
case R.id.btn_remove2:
    mAdapter.remove(2);
    break;

Running Effect Diagram:

From the diagram, we can see that the fifth item has been removed, and clicking the cursor to delete data always removes the third item!

4. Removing All Records:

This is even simpler, just call the clear method! The method code is as follows:

public void clear() {
    if(mData != null) {
        mData.clear();
    }
    notifyDataSetChanged();
}

5. Updating a Record

You might have noticed that after modifying the data, the notifyDataSetChanged() method is called. Initially, I thought:

notifyDataSetChanged() would redraw all items displayed on the interface, which would affect UI performance, especially if the data volume is large. But changing one item would redraw all items, which is definitely not reasonable. So, I used a naive method to modify the value of a control in an Item. I wrote this code in Java:

private void updateListItem(int position, Data mData){
    int visiblePosition = list_one.getFirstVisiblePosition();
    View v = list_one.getChildAt(position - visiblePosition);
    ImageView img = (ImageView) v.findViewById(R.id.img_icon);
    TextView tv = (TextView) v.findViewById(R.id.txt_content);
    img.setImageResource(mData.getImgId());
    tv.setText(mData.getContent());
}

Later, after discussing with friends in the group, I realized I was wrong:

The notifyDataSetChanged() method checks whether a redraw is necessary. If the current item does not need to be redrawn, it won't be. If the state of an Item changes, it will cause the View to be redrawn, but not all Items, just the one whose state has changed! So we can directly use the notifyDataSetChange() method, and knowing an extra method like the above is fine too~

Code Download:

ListViewDemo3.zip

Summary:

Good, this section has covered the implementation of data updates in ListView. Of course, not just ListView, other Adapter-based controls can also call these methods to update data. That's all for now, thank you.

-1.0 Android Basic Entry Tutorial

-1.0.1 2015 Latest Android Basic Entry Tutorial Table of Contents

-1.1 Background and System Architecture Analysis

-1.2 Development Environment Setup

-1.2.1 Using Eclipse + ADT + SDK to Develop Android APP

-1.2.2 Using Android Studio to Develop Android APP

-1.3 Solving SDK Update Issues

-1.4 Genymotion Emulator Installation

-1.5.1 Git Tutorial for Basic Local Repository Operations

-1.5.2 Git: Using GitHub to Build Remote Repository

-1.6 How to Play with the 9(Nine Sisters) Image

-1.7 Interface Prototype Design