Introduction to this section:
In this section, we will continue to study the unfinished UI control part. 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 is for
you The explanation is the first UI control that needs to be used with Adapter: ListView, but it is replaced by the new control RecyclerView in the version!
List is one of the most commonly used controls, so it is necessary to study hard. This section will learn ListView, ListView properties, and the simple definition of BaseAdapter from a beginner's perspective. As for ListView optimization, let's take it step by step~ Don't worry!
1. The simplest example of customizing BaseAdapter and then binding ListView
Let's take a look at the rendering we want to achieve:
A very simple ListView, write down the Item by 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 : 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;
}
}
And 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("The dog said", "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("The fish said", "Are you a fish?", R.mipmap.ic_icon_fish));
mData.add(new Animal("The horse said", "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 as simple as that~
Don’t ask me to take the code of the example, I will write these codes at the beginning of learning, I just demonstrate the process to let everyone be familiar~ In addition, it is also for the following Get ready for attribute verification~
2. Setting of header and tail dividing line:
As a list control, listview, like a normal list, can set the header and footer by itself: as well as the dividing line, the properties that we can set are as follows:
- footerDividersEnabled : Whether to draw a divider before the footerView (table tail), the default is true
- headerDividersEnabled : Whether to draw a divider before the headerView (header), the default is true
- divider : Set the divider bar, which can be divided by color or by drawable resources
- dividerHeight : set the height of the divider
After searching the API, I found that there is no property that can directly set the header or tail of the ListView. We can only write code in Java to set it. The methods we can 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) : The difference from the previous one: set whether the Header can be selected
- addFooterView(View,view,false) : Same as above
By the way, using this addHeaderView method must be placed in front of listview.setAdapter, otherwise an error will be reported.
Example usage :
Running effect diagram :
Code implementation :
First write the layout of the header and tail of the table:
view_header.xml (table header), the same as the table tail, so it will not be pasted:
<?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="header"
android:gravity="center"
android:background="#43BBEB"
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);
//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("The dog said", "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("The fish said", "Are you a fish?", R.mipmap.ic_icon_fish));
mData.add(new Animal("The horse said", "Are you a horse?", R.mipmap.ic_icon_horse));
mAdapter = new AnimalAdapter((LinkedList<Animal>) mData, mContext);
// Adding header and footer needs to be written before calling the 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 first" + position + "item",Toast.LENGTH_SHORT).show();
}
}
Ok, the code is relatively simple. From the above we can see a problem to pay attention to, that is:
After adding the header and tail, we found that the positon is calculated from the header, that is, the original postion of the first data you added is 0, but now it becomes 1, because the header is also counted! !
3. The list is displayed from the bottom: stackFromBottom
If you want the list to display the bottom of your list, then you can use this attribute and set the stackFromBottom 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, when you drag or click the blank position of the listView, you will find that the items turn black. At this time, we can set the color to transparent through this cacheColorHint: # 00000000
5. Hide the slider
We can solve this problem by setting: android:scrollbars="none" or setVerticalScrollBarEnabled(true);