2.4.5 Simple and Practical ListView

Category Android Basic Tutorial

Introduction to This Section:

In this section, we will continue to learn about the UI controls that were not covered in the previous section. Recalling the last section, we introduced the concept of the Adapter adapter, and then learned how to use the three simplest adapters:

1. Custom BaseAdapter, then the simplest example of binding to ListView

Let's first look at the effect diagram we want to achieve:

A very simple ListView, write your own Item, and then load some data like this~ Below is the key code:

Animal.java:

/**
 * Created by Jay on 2015/9/18 0018.
 */
public class Animal {
    private String aName;
    private String aSpeak;
    private int aIcon;

    public Animal() {
    }

    public Animal(String aName, String aSpeak, int aIcon) {
        this.aName = aName;
        this.aSpeak = aSpeak;
        this.aIcon = aIcon;
    }

    public String getaName() {
        return aName;
    }

    public String getaSpeak() {
        return aSpeak;
    }

    public int getaIcon() {
        return aIcon;
    }

    public void setaName(String aName) {
        this.aName = aName;
    }

    public void setaSpeak(String aSpeak) {
        this.aSpeak = aSpeak;
    }

    public void setaIcon(int aIcon) {
        this.aIcon = aIcon;
    }
}

AnimalAdapter.java: Custom BaseAdapter:

/**
 * Created by Jay on 2015/9/18 0018.
 */
public class AnimalAdapter extends BaseAdapter {

    private LinkedList<Animal> mData;
    private Context mContext;

    public AnimalAdapter(LinkedList<Animal> 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) {
        convertView = LayoutInflater.from(mContext).inflate(R.layout.item_list_animal,parent,false);
        ImageView img_icon = (ImageView) convertView.findViewById(R.id.img_icon);
        TextView txt_aName = (TextView) convertView.findViewById(R.id.txt_aName);
        TextView txt_aSpeak = (TextView) convertView.findViewById(R.id.txt_aSpeak);
        img_icon.setBackgroundResource(mData.get(position).getaIcon());
        txt_aName.setText(mData.get(position).getaName());
        txt_aSpeak.setText(mData.get(position).getaSpeak());
        return convertView;
    }
}

Finally, MainActivity.java:

public class MainActivity extends AppCompatActivity {

    private List<Animal> mData = null;
    private Context mContext;
    private AnimalAdapter mAdapter = null;
    private ListView list_animal;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext = MainActivity.this;
        list_animal = (ListView) findViewById(R.id.list_animal);
        mData = new LinkedList<Animal>();
        mData.add(new Animal("Dog says", "Are you a dog?", R.mipmap.ic_icon_dog));
        mData.add(new Animal("Cow says", "Are you a cow?", R.mipmap.ic_icon_cow));
        mData.add(new Animal("Duck says", "Are you a duck?", R.mipmap.ic_icon_duck));
        mData.add(new Animal("Fish says", "Are you a fish?", R.mipmap.ic_icon_fish));
        mData.add(new Animal("Horse says", "Are you a horse?", R.mipmap.ic_icon_horse));
        mAdapter = new AnimalAdapter((LinkedList<Animal>) mData, mContext);
        list_animal.setAdapter(mAdapter);
    }

}

Well, customizing BaseAdapter and completing data binding is just that simple~

2. Setting of Header, Footer, and Dividers:

As a list control, ListView, like a regular list, can have its own header and footer set: as well as dividers. The properties available for us to set are as follows:

-footerDividersEnabled: Whether to draw a divider before the footerView (footer), default is true

-headerDividersEnabled: Whether to draw a divider before the headerView (header), default is true

-divider: Set the divider // Dynamically load the top View and bottom View final LayoutInflater inflater = LayoutInflater.from(this); View headView = inflater.inflate(R.layout.view_header, null, false); View footView = inflater.inflate(R.layout.view_footer, null, false);

    mData = new LinkedList<Animal>();
    mData.add(new Animal("Dog says", "Are you a dog?", R.mipmap.ic_icon_dog));
    mData.add(new Animal("Cow says", "Are you a cow?", R.mipmap.ic_icon_cow));
    mData.add(new Animal("Duck says", "Are you a duck?", R.mipmap.ic_icon_duck));
    mData.add(new Animal("Fish says", "Are you a fish?", R.mipmap.ic_icon_fish));
    mData.add(new Animal("Horse says", "Are you a horse?", R.mipmap.ic_icon_horse));
    mAdapter = new AnimalAdapter((LinkedList<Animal>) mData, mContext);
    // Add header and footer before calling setAdapter method!
    list_animal.addHeaderView(headView);
    list_animal.addFooterView(footView);

    list_animal.setAdapter(mAdapter);
    list_animal.setOnItemClickListener(this);
}

@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
    Toast.makeText(mContext, "You clicked on the " + position + " item", Toast.LENGTH_SHORT).show();
}

}

```

Well, the code is relatively simple. From the above, we can see an issue to note:

After adding the header and footer, we find that the position is counted from the header, meaning the original position of the first data item was 0, but now it has become 1, because the header is also counted!!

3. List starts from the bottom: stackFromBottom

If you want the list to display from the bottom of your list, you can use this attribute by setting the stackFromBottom attribute to true. The effect after setting it is as follows:

4. Set click color cacheColorHint

If you set a picture as the Background for ListView, when you drag or click on the blank area of listView, you will find that the items all turn black. At this time, we can set the color to transparent through this cacheColorHint: #00000000

5. Hide the scrollbar

We can solve this problem by setting: android:scrollbars="none" or setVerticalScrollBarEnabled(true);

Summary of this section:

Well, the basic usage of ListView is roughly these, of course, in addition to the above attributes, there are others, just look it up when you encounter it in reality ~ Here, just know how to override BaseAdapter and complete data binding, and in the next section, we will teach you how to optimize the writing of this BaseAdapter~

-1.0 Android Basic Tutorial Introduction

-1.0.1 Latest Android Basic Tutorial Catalog for 2015

-1.1 Background and System Architecture Analysis

-1.2 Development Environment Setup

-1.2.1 Developing Android APP with Eclipse + ADT + SDK

-1.2.2 Developing Android APP with Android Studio

-1.3 SDK Update Problem Solution

-1.4 Genymotion Emulator Installation

-1.5.1 Git Tutorial on Basic Operations of Local Repository

-1.5.2 Git on Using GitHub to Set Up a Remote Repository

-1.6 How to Play with 9 (Nine Sister) Images

-1.7 Interface Prototype Design