Decompress the android list and expand the QQ-like friend list (very detailed, with source code ).

Decompress the android list and expand the QQ-like friend list (very detailed, with source code ).

Original works of Lin bingwen Evankaka. Reprinted please indicate the source http://blog.csdn.net/evankaka

ExpandableListView is a view that shows two levels of list items vertically. Unlike ListView, ExpandableListView can have two layers: each layer can be expanded independently and its subitems are displayed.

Friend QQ list, which can be expanded and collapsed. In android, listview is used in most cases. Although list display can be realized, in some cases, we still want to use a list that can be grouped and scaled down, so we need to use android's ExpandableListView. Today we have studied this usage and made a small demo by referring to a lot of materials, the basic functions are implemented. The source code is directly listed below ~!

Effect:

Effect 1 source code download (resource swallowed up, come back tomorrow)

Result 2 source code download (resource swallowed up, coming back tomorrow)

Directory:

I. Implementation Principle

Ii. layout and code

3. custom icons

4. Place the icon on the right

 

I. Implementation Principle

1. You must first define an ExpandableListView in the layout file.

2. Create the layout file group corresponding to the first-level entry.

3. Create the layout file child corresponding to the second-level entry

4. The Activity that loads the ExpandableListView component must inherit from ExpandableListActivity.

Ii. layout and code

1. First, activity_main.xml in the main layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <ExpandableListView        android:id="@id/android:list"        android:layout_width="fill_parent"        android:layout_height="fill_parent" /></LinearLayout>

2. Define the layout level-1 List groups. xml in the drawable folder.

<LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent">    <TextView        android:id="@+id/textGroup"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:paddingLeft="40px"        android:paddingTop="6px"        android:paddingBottom="6px"        android:textSize="25sp"        android:text="No data"    /></LinearLayout>

3. Define the layout level-2 list childs. xml in the drawable folder.

<LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"  android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent">　　  <TextView         android:id="@+id/textChild"   android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:paddingLeft="60px"        android:paddingTop="10px"        android:paddingBottom="10px"        android:textSize="20sp"   android:text="No Data"/></LinearLayout>

4. Initialization and use

Package com. example. expandablelistview; import java. util. arrayList; import java. util. hashMap; import java. util. list; import java. util. map; import android. OS. bundle; import android. app. expandableListActivity; import android. util. displayMetrics; import android. view. view; import android. widget. expandableListView; import android. widget. simpleExpandableListAdapter; import android. widget. toast; public class MainActivity extends ExpandableListActivity {/*** create a level-1 entry container */List <Map <String, String> gruops = new ArrayList <Map <String, string >>();/*** stores the content to display it in the List */List <Map <String, string >>> childs = new ArrayList <List <Map <String, String >>> (); @ Overridepublic void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); setListData ();}/*** set the list content */public void setListData () {// create two Map Level 1 entries <String, string> title_1 = new HashMap <String, String> (); Map <String, String> title_2 = new HashMap <String, String> (); Map <String, string> title_3 = new HashMap <String, String> (); title_1.put ("group", "Lin bingwen"); title_2.put ("group", "Wen binglin"); gruops. add (title_1); gruops. add (title_2); // create level 2 entry content // content 1 Map <String, String> title_1_content_1 = new HashMap <String, String> (); Map <String, string> title_1_content_2 = new HashMap <String, String> (); Map <String, String> title_1_content_3 = new HashMap <String, String> (); title_1_content_1.put ("child ", "worker"); title_1_content_2.put ("child", "student"); title_1_content_3.put ("child", "farmer"); List <Map <String, string> childs_1 = new ArrayList <Map <String, String> (); childs_1.add (title_1_content_1); childs_1.add (title_1_content_2); childs_1.add (title_1_content_3 ); // content 2 Map <String, String> title_2_content_1 = new HashMap <String, String> (); Map <String, String> title_2_content_2 = new HashMap <String, String> (); map <String, String> title_2_content_3 = new HashMap <String, String> (); title_2_content_1.put ("child", "Orangutan"); title_2_content_2.put ("child", "Tiger "); title_2_content_3.put ("child", ""); List <Map <String, String> childs_2 = new ArrayList <Map <String, String> (); childs_2.add (title_2_content_1 ); childs_2.add (title_2_content_2); childs_2.add (title_2_content_3); childs. add (childs_1); childs. add (childs_2);/*** create the Adapter container parameters of ExpandableList: 1. context 2. level 1 Set 3. level 1 Style File 4. key Value of level 1 entry * 5. level 1 Display Control name 6. level 2 set 7. level 2 style 8. level 2 key value 9. second-level display control name **/SimpleExpandableListAdapter sela = new SimpleExpandableListAdapter (this, gruops, R. drawable. groups, new String [] {"group"}, new int [] {R. id. textGroup}, childs, R. drawable. childs, new String [] {"child"}, new int [] {R. id. textChild}); // Add to the list setListAdapter (sela);}/*** press the list content */@ Overridepublic boolean onChildClick (ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {Toast. makeText (MainActivity. this, "you selected" + gruops. get (groupPosition ). toString () + "sub-number" + childs. get (groupPosition ). get (childPosition ). toString (), Toast. LENGTH_SHORT ). show (); return super. onChildClick (parent, v, groupPosition, childPosition, id);}/*** press the Level 2 Title */@ Overridepublic boolean setSelectedChild (int groupPosition, int childPosition, boolean shouldExpandGroup) {return super. setSelectedChild (groupPosition, childPosition, shouldExpandGroup);}/*** press the first-level title */@ Overridepublic void setSelectedGroup (int groupPosition) {super. setSelectedGroup (groupPosition );}}

5. Effect

This is the result on my mobile phone. Click a worker. When students wait for the second-level list, a prompt box will appear on my mobile phone, but I don't know why I recorded it.

 

Free source code download

3. Custom list icons

The above icons are generated by the system. We need to change them to our own

1. Change the custom icon

Create expandablelistview_change.xml in the drawable folder

<?xml version = "1.0"   encoding = "utf-8"?><selector   xmlns:android = "http://schemas.android.com/apk/res/android" >           <item android:state_expanded = "true"   android:drawable = "@drawable/w2"/>           <item android:drawable = "@drawable/w1"/>      </selector > 

2. Modify the above layout Activity. main. xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <ExpandableListView        android:id="@id/android:list"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="#f5f5f5"        android:cacheColorHint="#f5f5f5"        android:groupIndicator="@drawable/expandablelistview_change" /></LinearLayout>

In fact, I added a sentence.

android:groupIndicator="@drawable/expandablelistview_change"

Next let's take a look at the effect:

Free source code download

4. Place the icon on the right

Add the following content to the setListData () function of MainActivity. java:

// Obtain the screen size DisplayMetrics dm = new DisplayMetrics (); getWindowManager (). getdefadisplay display (). getMetrics (dm); // the icon is set to getExpandableListView () on the right (). setIndicatorBounds (dm. widthPixels-60, dm. widthPixels); // you can specify the icon position.

Effect:

Free source code download: