【Android基础入门〖19〗】ExpandableListView酷我音乐界面的下拉菜单

[+]

/**************************************************************************************************

 *  本博客为CSDN博主【MK】原创，博客地址：http://blog.csdn.net/mkrcpp/article/details/13170649

 **********************************************************************************************************************/

研究了一夜，终于完毕，有一种成就感，虽然没什么成就......

• 本以为那种下拉菜单方式是通过嵌套 ExpandableListView 搞定，甚是麻烦，最后因为子 ExpandableListView  的布局总是莫名其妙的多一点而止步。无奈之下，突然意识到我钻了牛角尖，这是好事 :)
• 非常珍惜这些自己研究出来的东西，但是想想这点不过沧海一粟，重在分享，避免后来人再慢慢的研究，熬夜。

点睛之笔：

• 用一个 ExpandableListView ，在其 Child 布局中设置好功能布局，事先隐藏，当我点击右侧的更多按钮时，在显示出来。
• 事实证明这是多么正确，省事，省时的思想，哈哈。

靓照：

• 
• 
  

详细步骤：

这里就已上面第二张图为例吧，PlayList（播放列表）

功能描述：

• 点击播放列表时，出现该列表下的所有歌曲
• 每一首歌曲都可以点击右侧的“更多”按钮，出现下面的功能菜单（有“喜欢”，“添加到”...的那一个）

NO.1 主布局文件

playlist_fragment.xml

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:orientation="vertical"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"   
5.     android:background="#191c1f"  
6.     xmlns:tools="http://schemas.android.com/tools" >  
7.       
8.     <ExpandableListView  
9.         android:id="@+id/playlist_list"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="wrap_content"  
12.         android:cacheColorHint="#00000000"  
13.         android:childDivider="#00000000"  
14.         android:dividerHeight="1dp"  
15.         android:groupIndicator="@null"  
16.         android:fastScrollEnabled="true"/>  
17. </LinearLayout>  

NO.2  ExpandableListView的父布局文件

playlist_listitem_parent.xml

1. <span style="font-weight:normal"><?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:tools="http://schemas.android.com/tools"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="40dp"  
6.     android:background="@drawable/playlist_listitem_selector"  
7.     tools:ignore="HardcodedText" >  
8.     <TextView  
9.         android:id="@+id/playlist_parent_text"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="40dp"  
12.         android:paddingLeft="3dp"  
13.         android:gravity="left|center_vertical"  
14.         android:layout_gravity="left|center_vertical"  
15.         android:text="M"  
16.         android:textColor="@color/whitesmoke"  
17.         android:textSize="15sp"  
18.         android:textStyle="bold"  
19.         tools:ignore="HardcodedText" />  
20. </LinearLayout>  
21. </span>  

NO.3  ExpandableListView的子布局文件

default_listitem_child.xml

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:tools="http://schemas.android.com/tools"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="50dp"  
6.     android:orientation="vertical"  
7.     android:background="#00000000"  
8.     android:paddingLeft="3dp"  
9.     tools:ignore="HardcodedText" >  
10.   
11.     <LinearLayout  
12.         android:layout_width="match_parent"  
13.         android:layout_height="wrap_content"  
14.         android:orientation="horizontal"  
15.         android:background="@drawable/default_listitem_selector"  
16.         android:paddingLeft="10dp"  
17.         android:paddingTop="10dp"  
18.         android:paddingBottom="10dp">  
19.         <LinearLayout  
20.             android:layout_width="wrap_content"  
21.             android:layout_height="wrap_content"  
22.             android:orientation="vertical" >  
23.       
24.             <TextView  
25.                 android:id="@+id/default_music_name"  
26.                 android:layout_width="match_parent"  
27.                 android:layout_height="wrap_content"  
28.                 android:layout_weight="1"  
29.                 android:text="大城小爱"  
30.                 android:textSize="15sp"  
31.                 android:textStyle="bold"  
32.                 android:gravity="center_vertical|left"  
33.                 android:textColor="@color/whitesmoke" />  
34.               
35.             <TextView  
36.                 android:id="@+id/default_singer_name"  
37.                 android:layout_width="match_parent"  
38.                 android:layout_height="wrap_content"  
39.                 android:layout_weight="1"  
40.                 android:text="王力宏"  
41.                 android:textSize="12sp"  
42.                 android:gravity="center_vertical|left"  
43.                 android:textColor="#8d8d8d" />  
44.         </LinearLayout>  
45.         <View android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="1"/>  
46.         <ImageView  
47.             android:id="@+id/default_more"  
48.             android:layout_width="wrap_content"  
49.             android:layout_height="wrap_content"  
50.             android:layout_gravity="right|center_vertical"  
51.             android:contentDescription="rightbtn"  
52.             android:scaleType="fitCenter"  
53.             android:focusable="false"  
54.             android:clickable="true"  
55.             android:src="@drawable/default_item_more_selector"/>  
56.     </LinearLayout>  
57.     <LinearLayout  
58.         android:id="@+id/settings_layout"  
59.         android:layout_width="match_parent"  
60.         android:layout_height="wrap_content"  
61.         android:visibility="gone"  
62.         android:background="@color/black"  
63.         android:orientation="horizontal">  
64.         <TextView  
65.             android:drawableTop="@drawable/settings_love_selector"  
66.             android:layout_width="wrap_content"  
67.             android:layout_height="wrap_content"  
68.             android:layout_weight="1"  
69.             android:clickable="true"  
70.             android:focusable="false"  
71.             android:textColor="@color/whitesmoke"  
72.             android:gravity="center"  
73.             android:text="喜欢"/>  
74.         <TextView  
75.             android:layout_marginLeft="10dp"  
76.             android:drawableTop="@drawable/settings_add_selector"  
77.             android:layout_width="wrap_content"  
78.             android:layout_height="wrap_content"  
79.             android:clickable="true"  
80.             android:focusable="false"  
81.             android:layout_weight="1"  
82.             android:textColor="@color/whitesmoke"  
83.             android:gravity="center"  
84.             android:text="添加到"/>  
85.         <TextView  
86.             android:layout_marginLeft="10dp"  
87.             android:drawableTop="@drawable/settings_del_selector"  
88.             android:layout_width="wrap_content"  
89.             android:layout_height="wrap_content"  
90.             android:layout_weight="1"  
91.             android:clickable="true"  
92.             android:focusable="false"  
93.             android:textColor="@color/whitesmoke"  
94.             android:gravity="center"  
95.             android:text="删除"/>  
96.         <TextView  
97.             android:layout_marginLeft="10dp"  
98.             android:drawableTop="@drawable/settings_info_selector"  
99.             android:layout_width="wrap_content"  
100.             android:layout_height="wrap_content"  
101.             android:layout_weight="1"  
102.             android:textColor="@color/whitesmoke"  
103.             android:clickable="true"  
104.             android:focusable="false"  
105.             android:gravity="center"  
106.             android:text="信息"/>  
107.         <TextView  
108.             android:layout_marginLeft="10dp"  
109.             android:drawableTop="@drawable/settings_set_selector"  
110.             android:layout_width="wrap_content"  
111.             android:layout_height="wrap_content"  
112.             android:layout_weight="1"  
113.             android:textColor="@color/whitesmoke"  
114.             android:gravity="center"  
115.             android:clickable="true"  
116.             android:focusable="false"  
117.             android:text="设置"/>  
118.     </LinearLayout>  
119. </LinearLayout>  

NO.4  自定义BaseExpandableListAdapter

1. package com.supermusic.adapter;  
2.   
3. import java.util.ArrayList;  
4. import java.util.HashMap;  
5.   
6. import com.supermusic.R;  
7. import com.supermusic.util.Music;  
8.   
9. import android.content.Context;  
10. import android.view.LayoutInflater;  
11. import android.view.View;  
12. import android.view.ViewGroup;  
13. import android.view.View.OnClickListener;  
14. import android.widget.BaseExpandableListAdapter;  
15. import android.widget.ImageView;  
16. import android.widget.LinearLayout;  
17. import android.widget.TextView;  
18.   
19. @SuppressWarnings("unchecked")  
20. public class Playlist_ExListAdapter extends BaseExpandableListAdapter {  
21.   
22.     private Context context=null;  
23.     private ArrayList<HashMap<String,Object>>allData=null;  
24.       
25.     public Playlist_ExListAdapter(Context context, ArrayList<HashMap<String,Object>>allData)  
26.     {  
27.         this.context=context;  
28.         this.allData=allData;  
29.           
30.     }  
31.       
32.     @Override  
33.     public int getGroupCount() {  
34.         // 返回组的数量  
35.         return allData.size();  
36.     }  
37.   
38.   
39.     @Override  
40.     public int getChildrenCount(int groupPosition) {  
41.         // 返回指定组的 Child 数量  
42.         HashMap<String,Object>oneData=(HashMap<String,Object>)allData.get(groupPosition);  
43.         ArrayList<Music>childData=(ArrayList<Music>)oneData.get("childData");  
44.         return childData.size();  
45.     }  
46.   
47.     @Override  
48.     public Object getGroup(int groupPosition) {  
49.         // 返回指定组的数据  
50.         HashMap<String,Object>oneData=(HashMap<String,Object>)allData.get(groupPosition);  
51.         String parentData=(String)oneData.get("parentData");  
52.         return parentData;  
53.     }  
54.   
55.     @Override  
56.     public Object getChild(int groupPosition, int childPosition) {  
57.         // 返回指定组之指定 Child 的数据  
58.         HashMap<String,Object>oneData=(HashMap<String,Object>)allData.get(groupPosition);  
59.         ArrayList<Music>childData=(ArrayList<Music>)oneData.get("childData");  
60.         return childData.get(childPosition);  
61.     }  
62.   
63.     @Override  
64.     public long getGroupId(int groupPosition) {  
65.         // 返回指定组的ID  
66.         return groupPosition;  
67.     }  
68.   
69.     @Override  
70.     public long getChildId(int groupPosition, int childPosition) {  
71.         // 返回指定组之指定 Child 的ID  
72.         return childPosition;  
73.     }  
74.   
75.     @Override  
76.     public boolean hasStableIds() {  
77.         // 组以及 Child 的ID是否是固定不变的？  
78.         return false;  
79.     }  
80.   
81.     @Override  
82.     public View getGroupView(int groupPosition, boolean isExpanded,  
83.             View convertView, ViewGroup parent) {  
84.         // 返回组的布局  
85.         convertView=LayoutInflater.from(context).inflate(R.layout.playlist_listitem_parent, null);  
86.           
87.         HashMap<String,Object>oneData=(HashMap<String,Object>)allData.get(groupPosition);  
88.         String parentData=(String)oneData.get("parentData");  
89.         TextView textview=(TextView)convertView.findViewById(R.id.playlist_parent_text);  
90.         textview.setText(parentData);  
91.   
92.         return convertView;  
93.     }  
94.   
95.     @Override  
96.     public View getChildView(int groupPosition, final int childPosition,  
97.             boolean isLastChild, View convertView, ViewGroup parent) {  
98.         // 返回 Child 的布局  
99.         convertView=LayoutInflater.from(context).inflate(R.layout.default_listitem_child, null);  
100.           
101.         HashMap<String,Object>oneData=(HashMap<String,Object>)allData.get(groupPosition);  
102.         ArrayList<Music>childData=(ArrayList<Music>)oneData.get("childData");  
103.         Music music = childData.get(childPosition);  
104.         TextView music_name=(TextView)convertView.findViewById(R.id.default_music_name);  
105.         TextView singer_name=(TextView)convertView.findViewById(R.id.default_singer_name);  
106.         ImageView btn_more=(ImageView)convertView.findViewById(R.id.default_more);  
107.         final LinearLayout settings_layout=(LinearLayout)convertView.findViewById(R.id.settings_layout);  
108.           
109.         music_name.setText(music.music_name);  
110.         singer_name.setText(music.singer_name);  
111.         btn_more.setOnClickListener(new OnClickListener() {  
112.             @Override  
113.             public void onClick(View v) {  
114.                 settings_layout.setVisibility(  
115.                         settings_layout.getVisibility()==View.GONE ? View.VISIBLE : View.GONE );  
116.             }  
117.         });  
118.         return convertView;  
119.     }  
120.   
121.     @Override  
122.     public boolean isChildSelectable(int groupPosition, int childPosition) {  
123.         // 指定的 Child 是否是可选择的  
124.         return true;  
125.     }  
126. }  

NO.5  绑定数据

1. ExpandableListView listview=(ExpandableListView)view.findViewById(R.id.playlist_list);  
2.   
3. ArrayList<HashMap<String,Object>>allData = new ArrayList<HashMap<String,Object>>();//所有数据  
4. HashMap<String,Object>oneData = new HashMap<String,Object>();  
5. ArrayList<Music>childData = new ArrayList<Music>();  
6.   
7. //模拟数据 start  
8. oneData = new HashMap<String,Object>();  
9. childData   = new ArrayList<Music>();  
10. oneData.put("parentData", "夜的钢琴曲");  
11. for(int j=0;j<4;j++)  
12. {  
13.     Music music=new Music();  
14.     music.music_name="夜的钢琴曲第"+String.valueOf(j)+"首";  
15.     music.singer_name="石进";  
16.     childData.add(music);  
17. }  
18. oneData.put("childData", childData);  
19. allData.add(oneData);  
20. for(int i=1;i<7;i++)  
21. {  
22.     oneData = new HashMap<String,Object>();  
23.     childData   = new ArrayList<Music>();  
24.     oneData.put("parentData", "playlist:"+String.valueOf(i));  
25.     for(int j=0;j<4;j++)  
26.     {  
27.         Music music=new Music();  
28.         music.music_name="music:"+String.valueOf(j);  
29.         music.singer_name="singer:"+String.valueOf(j);  
30.         childData.add(music);  
31.     }  
32.     oneData.put("childData", childData);  
33.     allData.add(oneData);  
34. }  
35. //模拟数据 end  
36.   
37. Playlist_ExListAdapter adapter =new Playlist_ExListAdapter(getActivity(),allData);  
38. listview.setAdapter(adapter);  
39.   
40. for (int i = 0; i < adapter.getGroupCount(); i++)//关闭所有  
41.     listview.collapseGroup(i);//listview.collapseGroup(i);//展开所有  

/**************************************************************************************************

 *  本博客为CSDN博主【MK】原创，博客地址：http://blog.csdn.net/mkrcpp/article/details/13170649

 **********************************************************************************************************************/