written in front of the words:
See the title so long may be a little crazy, yes, I just learned this article when there are some do not understand, what is the layout of the pump? Edit each template then what is a custom adapter? Below we begin to learn the content of this article
Preferred previous picture to achieve effect:
Logical parsing:
First of all, the above diagram is the final implementation of the effect, a bit like our contacts contact person's layout style, say the layout. It's very simple, it's actually a ListView component. But the adapter of this ListView component is a little different. We have defined a adapter ourselves and edited and typeset each entry through the GetView method. And then we put our custom adapter into our ListView to show this effect, and I'll give you an important snippet of the implementation, and then analyze it.
Code Analysis:
First step: Understanding Global Variables
Copy Code code as follows:
/****
* Where Listtag is a sort of split tag, the head of each group
*/
Private list<string> List = null; List that holds contact data
Private list<string> Listtag = null; List of data that holds letters
Private Grouplistadapter adapter = null; Custom Adapter Objects
Private ListView ListView = null; The ListView used in the main layout
Step two: Mainactivity's OnCreate method processing
Copy Code code as follows:
@Override
protected void OnCreate (Bundle savedinstancestate) {
Super.oncreate (savedinstancestate);
Setcontentview (R.layout.activity_main);
SetData (); Initializing contact and first-letter data
adapter = new Grouplistadapter (this, list, listtag); [Important], rewrite the layout and edit each item to get 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: Written in the note is very clear, we have done a total of these several logical processing, see here is not clear enough, with our doubts to look at a step-by-step on the clear.
Step three: Initialize the list data (relatively simple)
Copy Code code as follows:
Insert the data you want to display. Listtag is the group ABCD above the contact person. List is a contact person's data
public void SetData () {
List = new arraylist<string> ();
Listtag = new arraylist<string> ();
List.add ("A");
Listtag.add ("A");
for (int i = 0; i < 4; i++) {
List.add ("po times" + 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);
}
}
Fourth Step: Custom Adapter (important)
Copy Code code as follows:
Custom listadapter, using layout pumps to define each ListView entry
private static class Grouplistadapter extends Arrayadapter<string> {
Private list<string> Listtag = null;
Public Grouplistadapter, list<string> objects,
List<string> tags) {
Super (context, 0, objects);
This.listtag = tags;
}
Disable selection events for label items
@Override
public boolean isenabled (int position) {
if (Listtag.contains (GetItem (position)) {
return false;
}
return super.isenabled (position);
}
The method is iterative, the iteration object is the second object of the construction method, and then each list entry is fetched, (the override executes)
@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;
}
}
Description
OK, step fourth can be said to be the core of our entire function, notice that we inherited a arrayadapter and rewrite two methods. First of all pay attention to the role of these two methods, the comment on the very clear, if you can not understand how to delete the method and then run a program to deepen understanding. You know what these two methods are. Note: Once overridden, the method is definitely executed,
Tell me the GetView method alone. You can imagine putting a method in the For loop iteration of our defined list object and then there's the following relationship
Position = I;
View = every ViewItem applied in ListView
So I think it's easy for us all to understand. Compare the current position with the corresponding item and Listtag object at the same time as the iteration. If there is a header row in this one, then use the layout pump to get the view in the corresponding layout of the header row and edit the view to the corresponding way. No one is a normal contact line. So you know what I mean?
After the above processing we put each row view into the adapter. And then form our ultimate effect.
Layout file:
Main layout:
1, Activity_main.xml documents
Copy Code code 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 person layout template]
Copy Code code 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 row Layout template
Copy Code code 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" >
<!--pictures and text-->
<!--casually put a picture, a little landscaping-->
<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>
The final note:
The following 2 templates only correspond to each item of the ListView. I hope you understand.
SOURCE download
