Customize the Adapter and capture the layout template using the LayoutInflater to edit each item.

Preface:
You may be crazy when you see the title so long. Yes, when I was just learning this article, I had some incomprehension. What is the layout pump? Edit each template and then what is a custom Adapter? Next we will start to learn about this article.

First, use the previous graph to achieve the following results:

Logic Analysis:
First, the figure above shows the final implementation effect. It is a bit like the layout of our contacts in the address book. Let's talk about layout. It is actually a ListView component. However, the ListView component uses a different Adapter. We define an adapter and use the getview method to edit and typeset each entry. Then, we finally put our custom Adapter into our ListView to demonstrate this effect. Below I will give an important code snippet of this implementation, and then analyze it.

Code Analysis:
Step 1: Understand global variablesCopy codeThe Code is as follows :/****
* Listtag is the split tag of classification, and the head of each group
*/
Private List <String> list = null; // list for storing contact data
Private List <String> listtag = null; // list of letters stored in Data
Private GroupListAdapter adapter = null; // custom Adapter object
Private ListView listView = null; // listview used in the main layout

Step 2: process the onCreate method of MainActivityCopy codeThe Code is as follows: @ Override
Protected void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. activity_main );
SetData (); // initialize the contact and initial data
Adapter = new GroupListAdapter (this, list, listtag); // [important]. Rewrite and edit each item to get the information view and put it in the adapter.
// Put our custom adapter in the listview
ListView = (ListView) findViewById (R. id. listView1 );
ListView. setAdapter (adapter );
}

Note: The comments are clearly written. We have done these logic processing in total. We can see that this is not clear enough. Let's look at this step by step with our questions.

Step 3: Initialize list data (relatively simple)Copy codeThe Code is as follows: // Insert the data to be displayed. Listtag is the group ABCD on the contact. List is the contact data
Public void setData (){
List = new ArrayList <String> ();
Listtag = new ArrayList <String> ();
List. add ("");
Listtag. add ("");
For (int I = 0; I <4; I ++ ){
List. add ("Apo's" + I );
}
List. add ("B ");
Listtag. add ("B ");
For (int I = 0; I <4; I ++ ){
List. add ("Boston" + I );
}
List. add ("C ");
Listtag. add ("C ");
For (int I = 0; I <4; I ++ ){
List. add ("Rut" + I );
}
}

Step 4: Custom Adapter (important)Copy codeThe Code is as follows: // custom listAdapter, using the layout pump to define each listview entry
Private static class GroupListAdapter extends ArrayAdapter <String> {
Private List <String> listTag = null;

Public GroupListAdapter (Context context, List <String> objects,
List <String> tags ){
Super (context, 0, objects );
This. listTag = tags;
}

// Disable the tag selection event
@ Override
Public boolean isEnabled (int position ){
If (listTag. contains (getItem (position ))){
Return false;
}
Return super. isEnabled (position );
}

// This method is iterative. The iteration object is the second object of the constructor method, and each list entry is retrieved in sequence (rewriting will be executed)
@ Override
Public View getView (int position, View convertView, ViewGroup parent ){
View view = convertView;
If (listTag. contains (getItem (position ))){
View = LayoutInflater. from (getContext (). inflate (
R. layout. group_list_item_tag, null );
} Else {
View = LayoutInflater. from (getContext (). inflate (
R. layout. group_list_item, null );
}
TextView textView = (TextView) view
. FindViewById (R. id. group_list_item_text );
TextView. setText (getItem (position ));
Return view;
}
}

Note:
OK. Step 4 is the core part of our entire function. Note that we inherit an ArrayAdapter and then rewrite the two methods. First of all, pay attention to the functions of the two methods. The comments give us a clear explanation. If you cannot understand them, you can delete the methods and run the program to further understand them. You will understand what these two methods do. Note: The rewrite method will be executed once it is overwritten,
Let's talk about the getview method separately. You can imagine putting a method in the for loop iteration of the list object we define, and then there is the following relationship.
Position = I;
View = Every viewitem applied in listview
In this case, I think it is easy for everyone to understand. The item and listTag objects corresponding to the current position are used for comparison during iteration. If this parameter exists, it indicates the title line. Then, use the layout pump to get the view in layout corresponding to the title line and edit the view as the corresponding method. A common contact line does not exist. Do you understand this?
After the above processing, we put each row view in the adapter. Then we formed our final effect.
Layout file:
Master layout:
1. activity_main.xml FileCopy codeThe Code is as follows: <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"
Xmlns: tools = "http://schemas.android.com/tools"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: orientation = "vertical"
Tools: context = ". MainActivity">
<ListView
Android: id = "@ + id/listView1"
Android: layout_width = "match_parent"
Android: layout_height = "wrap_content"
Android: cacheColorHint = "#00000000"
>
</ListView>
</LinearLayout>

Template layout file:
1. group_list_item_tag.xml file [contact layout TEMPLATE]Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<! -- Contact layout template -->
<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: background = "#555555"
Android: paddingLeft = "10dip">
<TextView
Android: id = "@ + id/group_list_item_text"
Android: layout_width = "wrap_content"
Android: layout_height = "20dip"
Android: textColor = "# ffffff"
Android: gravity = "center_vertical"/>
</LinearLayout>

2. group_list_item.xml file header line layout TemplateCopy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"
Android: orientation = "horizontal"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: padding = "5dip">
<! -- Image and text -->
<! -- Just put an image and beautify it a little. -->
<ImageView
Android: src = "@ drawable/ic_launcher"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"/>
<TextView
Android: id = "@ + id/group_list_item_text"
Android: layout_width = "wrap_content"
Android: layout_height = "fill_parent"
Android: paddingLeft = "5dip"
Android: gravity = "center_vertical"/>
</LinearLayout>

Note:
The following two templates correspond only to each item in the listview. I hope you can understand it.
Source code download