ListView is simple and practical

Introduction to this section:

In this section we will continue to study the unfinished part of UI controls. Looking back at the previous section, we introduced the concept of Adapter adapter, and then learned the use of the three simplest adapters:
ArrayAdapter, SimpleAdapter and SimpleCursorAdapter, and this section will explain to you the first one The UI control that needs to be used with the Adapter: ListView, but it was replaced by the new control RecyclerView in the version!
As one of the most commonly used controls, list is still necessary to learn well. This section will be learned from the perspective of a beginner. ListView, ListView's properties, and BaseAdapter are simply defined. As for ListView's optimization of these, Let’s take it step by step~ Don’t rush!

1. The simplest example of customizing BaseAdapter and then binding ListView

Let’s first look at the renderings we want to achieve:

A very simple ListView, write down the Item yourself, and then load some data like this~ Paste the key code below:

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：自定义的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("狗说", "Are you a dog?", R.mipmap.ic_icon_dog));
mData.add(new Animal("Cow said", "Are you a cow?") ", R.mipmap.ic_icon_cow));
mData.add(new Animal("Duck said", "Are you a duck?", R.mipmap.ic_icon_duck));
mData.add(new Animal ("Fish said", "Are you a fish?", R.mipmap.ic_icon_fish));
mData.add(new Animal("Horse said", "Are you a horse?", R.mipmap.ic_icon_horse ));
mAdapter = new AnimalAdapter((LinkedList<Animal>) mData, mContext);
list_animal.setAdapter(mAdapter);
}

}

Okay, customizing the BaseAdapter and completing data binding is that simple~
Don’t ask me for sample codes. You will write these codes when you first start learning. I am just demonstrating the process so that everyone can become familiar with it. Just familiar with it~ In addition, it is also preparing for the following attribute verification~

2. Setting the dividing line at the header and foot of the table:

#listview is a list control. Just like an ordinary list, you can set the header and footer yourself: As well as the dividing line, the properties that we can set are as follows:
footerDividersEnabled: Whether to draw a dividing bar in front of the footerView (table end), the default is true
headerDividersEnabled: Whether to draw a divider bar in front of the headerView (table tail), the default is true
divider: Set the divider bar, you can use color to separate it, or you can Divide with drawable resources
dividerHeight: Set the height of the divider
I searched through the API and found that there is no way to directly set the header or footer of the ListView. Properties, can only be coded in Java After setting, the methods available for us to call are as follows:
addHeaderView(View v): Add headView (header), the parameter in brackets is a View object
addFooterView(View v): Add footerView (footer), the parameter in brackets is a View object
addHeaderView(headView, null, false): Difference from the previous one: Set whether the Header can be selected
addFooterView(View, view, false): Same as above
By the way, use this addHeaderView The method must be placed in front of listview.setAdapter, otherwise an error will be reported.

Usage example:

Running renderings:

##Code implementation:

First write the layout of the header and footer:

view_header.xml(header), the footer is the same, just Not posted anymore:

<?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="vertical"
    android:gravity="center">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:textSize="18sp"
        android:text="表头"
        android:gravity="center"
        android:background="../style/images/android-tutorial-listview.html"
        android:textColor="#FFFFFF"/>
</LinearLayout>

MainActivty.java:

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener{

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

    @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);
        //动态加载顶部View和底部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("狗说", "你是狗么?", R.mipmap.ic_icon_dog));
        mData.add(new Animal("牛说", "你是牛么?", R.mipmap.ic_icon_cow));
        mData.add(new Animal("鸭说", "你是鸭么?", R.mipmap.ic_icon_duck));
        mData.add(new Animal("鱼说", "你是鱼么?", R.mipmap.ic_icon_fish));
        mData.add(new Animal("马说", "你是马么?", R.mipmap.ic_icon_horse));
        mAdapter = new AnimalAdapter((LinkedList<Animal>) mData, mContext);
        //添加表头和表尾需要写在setAdapter方法调用之前！！！
        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();
}
}

Okay, the code is relatively simple. From the above we can see a problem that needs to be paid attention to, which is:

After adding the header and footer, we found that positon is calculated from the header. That is, the original postion of the first data you added is 0, but at this time it became 0, because the header also counts! !

3. The list is displayed from the bottom: stackFromBottom

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

4. Set the click color cacheColorHint

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

5. Hide the slider

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

Summary of this section:

Okay, these are the basic usage of ListView. Of course, in addition to the above properties, there are others. Check it out if you actually encounter it~ Just know how to rewrite BaseAdapter and complete data binding. Let’s do it in the next section. Teach you how to optimize the writing of this BaseAdapter~