Android中使用Expandablelistview實(shí)現(xiàn)微信通訊錄界面
之前的博文《Android 中使用ExpandableListView 實(shí)現(xiàn)分組的實(shí)例》我簡(jiǎn)單介紹了使用ExpandableListView實(shí)現(xiàn)簡(jiǎn)單的好友分組功能,今天我們針對(duì)之前的所做的仿微信APP來(lái)對(duì)ExpandableListView做一個(gè)擴(kuò)展介紹,實(shí)現(xiàn)效果如下(通訊里使用ExpandableListView實(shí)現(xiàn)):
相關(guān)知識(shí)點(diǎn)博文鏈接:
Android 中使用ExpandableListView 實(shí)現(xiàn)分組的實(shí)例
詳解Android中fragment和viewpager的那點(diǎn)事兒
詳解Android中ListView實(shí)現(xiàn)圖文并列并且自定義分割線(完善仿微信APP)
正常使用ExpandableListView的思路如下:
(1)要給ExpandableListView 設(shè)置適配器,那么必須先設(shè)置數(shù)據(jù)源。
(2)數(shù)據(jù)源,就是此處的適配器類ExpandableAdapter,此方法繼承了BaseExpandableListAdapter ,它是ExpandableListView的一個(gè)子類。需要重寫里面的多個(gè)方法。方法的意思,代碼中都有詳細(xì)的注釋。數(shù)據(jù)源中,用到了自定義的View布局,此時(shí)根據(jù)自己的需求,來(lái)設(shè)置組和子項(xiàng)的布局樣式。getChildView()和getGroupView()方法設(shè)置自定義布局。
(3)數(shù)據(jù)源設(shè)置好,直接給 ExpandableListView.setAdapter()即可實(shí)現(xiàn)此收縮功能。
但本次實(shí)現(xiàn)除以上實(shí)現(xiàn)步驟之外,還需要注意的有以下幾點(diǎn):
(1)首次加載ExpandableListView需要默認(rèn)全部展開(kāi),使用以下方法:
在給ExpandableListView 設(shè)置適配器后,添加以下代碼:
//Group.size()為組名個(gè)數(shù),如果為數(shù)組存儲(chǔ)則為group、length for (int i = 0; i < Group.size(); i++) { expandableListView.expandGroup(i); }
提醒:加載前別忘了判斷adapter是否為空和有沒(méi)有Group數(shù)據(jù)哦
(2)保持ExpandableListView始終展開(kāi)無(wú)法收縮
expandableListView.setOnGroupClickListener(new OnGroupClickListener() { @Override public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) { return true;//返回true則表示無(wú)法收縮 } });
(3)取消通訊錄上方的groupName空間
微信通訊錄中“新的朋友”,“群聊”,“標(biāo)簽”,“公眾號(hào)”,作為一個(gè)整體自定義布局添加到ExpandableListView中,詳情見(jiàn)以下代碼實(shí)現(xiàn)
(4)修改ExpandableListView的分割線
大概思路就是這樣,現(xiàn)在開(kāi)始整體實(shí)現(xiàn)代碼的演示:
第一步:layout中通訊錄整體布局contactfragment.xml:
其實(shí)就是一個(gè)ExpandableListView,添加android:divider ="#FFFFFF"取消自帶分割線
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/fragmentback"> <ExpandableListView android:id="@+id/contact_list" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentTop="true" android:layout_alignParentStart="true" android:divider ="#FFFFFF"/> </LinearLayout>
第二步:layout中組名(groupName)的布局文件contact_list_group_item.xml:
注意設(shè)置間距,保證美觀且盡量與微信一致
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/fragmentback"> <TextView android:text="TextView" android:textSize="20sp" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:gravity="center_vertical" android:id="@+id/group_tv" /> </LinearLayout>
第三步:layout中ExpandableListView中每個(gè)item的布局文件contact_list_item.xml:
這里添加了自定義分割線
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:background="@color/colorwhite" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:paddingLeft="10dp" android:paddingTop="5dp" android:paddingBottom="5dp" android:gravity="center_vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:id="@+id/contact_item_iv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/default_fmessage" android:adjustViewBounds="true" android:maxWidth="35dp"/> <TextView android:id="@+id/contact_item_tv" android:layout_margin="10dp" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="新的朋友"/> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:background="@color/fragmentback"/> </LinearLayout> </LinearLayout>
第四步:layout中ExpandableListView中的頭布局contact_list_title.xml(不需要groupName)
我們觀察微信通訊錄布局中“新的朋友”,“群聊”,“標(biāo)簽”,“公眾號(hào)”上方直接為微信的頂部導(dǎo)航,不存在ExpandableListView一貫的組名布局,這里我們將“新的朋友”,“群聊”,“標(biāo)簽”的布局單獨(dú)實(shí)現(xiàn):
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:background="@color/colorwhite" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:paddingLeft="10dp" android:paddingTop="5dp" android:paddingBottom="5dp" android:gravity="center_vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/default_fmessage" android:adjustViewBounds="true" android:maxWidth="35dp"/> <TextView android:layout_margin="10dp" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="新的朋友"/> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:background="@color/fragmentback"/> <LinearLayout android:paddingLeft="10dp" android:paddingTop="5dp" android:paddingBottom="5dp" android:gravity="center_vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/default_chatroom" android:adjustViewBounds="true" android:maxWidth="35dp"/> <TextView android:layout_margin="10dp" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="群聊"/> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:background="@color/fragmentback"/> <LinearLayout android:paddingLeft="10dp" android:paddingTop="5dp" android:paddingBottom="5dp" android:gravity="center_vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/default_contactlabel" android:adjustViewBounds="true" android:maxWidth="35dp"/> <TextView android:layout_margin="10dp" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="標(biāo)簽"/> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:background="@color/fragmentback"/> <LinearLayout android:paddingLeft="10dp" android:paddingTop="5dp" android:paddingBottom="5dp" android:gravity="center_vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/default_servicebrand_contact" android:adjustViewBounds="true" android:maxWidth="35dp"/> <TextView android:layout_margin="10dp" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="公眾號(hào)"/> </LinearLayout> </LinearLayout> </LinearLayout>
第五步:java中定義繼承BaseExpandableListAdapter類(自定義適配器)
(1)這里模仿實(shí)際項(xiàng)目,將自定義適配器定義定義在外部同意管理,所以需要設(shè)置相關(guān)構(gòu)造方法供expandableListView調(diào)用
(2)為了實(shí)現(xiàn)頭文件的布局,需要在getGroupView與getChildView方法中判斷頭文件的位置,從而調(diào)整布局,這里我們將頭文件定義在數(shù)據(jù)首位
import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseExpandableListAdapter; import android.widget.ImageView; import android.widget.TextView; import com.mly.panhouye.wechat.R; /** * Created by panchengjia on 2016/12/28 0028. */ public class MyExpandableListAdapter extends BaseExpandableListAdapter { Context context; String[] group; String[][] itemName; int[][] itemIcon; public MyExpandableListAdapter(Context context, String[] group, String[][] itemName, int[][] itemIcon) { this.context = context; this.group = group; this.itemName = itemName; this.itemIcon = itemIcon; } @Override public int getGroupCount() { return group.length; } @Override public int getChildrenCount(int groupPosition) { return itemName[groupPosition].length; } @Override public Object getGroup(int groupPosition) { return group[groupPosition]; } @Override public Object getChild(int groupPosition, int childPosition) { return itemName[groupPosition][childPosition]; } @Override public long getGroupId(int groupPosition) { return groupPosition; } @Override public long getChildId(int groupPosition, int childPosition) { return childPosition; } @Override public boolean hasStableIds() { return false; } @Override public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) { ViewHolder vh; //ExpandableList的第一個(gè)分組沒(méi)有組名,這里需要自定義布局 if(groupPosition==0){ convertView =LayoutInflater.from(context).inflate(R.layout.contact_list_title,null); }else{ if(convertView==null){ convertView= LayoutInflater.from(context).inflate(R.layout.contact_list_group_item,null); vh = new ViewHolder(); vh.tv = (TextView) convertView.findViewById(R.id.group_tv); convertView.setTag(vh); } vh = (ViewHolder) convertView.getTag(); vh.tv.setText(group[groupPosition]); } return convertView; } @Override public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) { ViewHolder vh; //ExpandableList的第一個(gè)分組沒(méi)有組名,這里需要自定義布局 if (groupPosition==0){ convertView =LayoutInflater.from(context).inflate(R.layout.contact_list_title,null); }else{ if(convertView==null){ convertView= LayoutInflater.from(context).inflate(R.layout.contact_list_item,null); vh = new ViewHolder(); vh.tv = (TextView) convertView.findViewById(R.id.contact_item_tv); vh.iv= (ImageView) convertView.findViewById(R.id.contact_item_iv); convertView.setTag(vh); } vh = (ViewHolder) convertView.getTag(); vh.tv.setText(itemName[groupPosition][childPosition]); vh.iv.setImageResource(itemIcon[groupPosition][childPosition]); } return convertView; } @Override public boolean isChildSelectable(int groupPosition, int childPosition) { return true; } class ViewHolder{ TextView tv; ImageView iv; } }
第六步:java中重寫之前的與contactfragment.xml布局對(duì)應(yīng)的ContactFragment.java類
import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ExpandableListView; import com.mly.panhouye.wechat.R; import com.mly.panhouye.wechat.adapter.MyExpandableListAdapter; /** * Created by panchengjia on 2016/12/28 0028. */ public class ContactFragment extends Fragment { private ExpandableListView contact_list; //定義分組以及組內(nèi)成員(設(shè)置頭文件位置為空) String[] group ={"","好友列表"}; String[][] itemName={{},{"郭嘉", "黃月英", "華佗", "劉備", "陸遜", "呂布", "呂蒙", "馬超", "司馬懿", "孫權(quán)", "孫尚香", "夏侯惇", "許褚", "楊修", "張飛", "趙云", "甄姬", "周瑜", "諸葛亮"}}; int[][] itemIcon={{},{R.mipmap.guojia, R.mipmap.huangyueying, R.mipmap.huatuo, R.mipmap.liubei, R.mipmap.luxun, R.mipmap.lvbu, R.mipmap.lvmeng, R.mipmap.machao, R.mipmap.simayi, R.mipmap.sunquan, R.mipmap.sunshangxiang, R.mipmap.xiahoudun, R.mipmap.xuchu, R.mipmap.yangxiu, R.mipmap.zhangfei, R.mipmap.zhaoyun, R.mipmap.zhenji, R.mipmap.zhouyu, R.mipmap.zhugeliang}}; @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.contact_fragment,container,false); contact_list = (ExpandableListView) view.findViewById(R.id.contact_list); //實(shí)例化適配器 MyExpandableListAdapter myExpandableListAdapter=new MyExpandableListAdapter(getContext(),group,itemName,itemIcon); //配置適配器 contact_list.setAdapter(myExpandableListAdapter); //去掉ExpandableListView 默認(rèn)的箭頭 contact_list.setGroupIndicator(null); //設(shè)置ExpandableListView默認(rèn)展開(kāi) for (int i = 0; i <group.length; i++) { contact_list.expandGroup(i); } //設(shè)置ExpandableListView不可點(diǎn)擊收回 contact_list.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() { @Override public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) { return true; } }); return view; } }
實(shí)現(xiàn)方法很多大家開(kāi)動(dòng)吧(建議使用recyclerView)。
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
- Android ExpandableListView雙層嵌套實(shí)現(xiàn)三級(jí)樹(shù)形菜單
- Android ExpandableListView實(shí)現(xiàn)下拉刷新和加載更多效果
- Android ExpandableListView單選以及多選實(shí)現(xiàn)代碼
- Android中ExpandableListView使用示例詳解
- Android ScrollView嵌套ExpandableListView顯示不正常的問(wèn)題的解決辦法
- Android listview ExpandableListView實(shí)現(xiàn)多選,單選,全選,edittext實(shí)現(xiàn)批量輸入的實(shí)例代碼
- Android 關(guān)于ExpandableListView刷新問(wèn)題的解決方法
- Android ExpandableListView使用方法案例詳解
相關(guān)文章
Android開(kāi)發(fā)兩個(gè)activity之間傳值示例詳解
這篇文章主要為大家介紹了Android開(kāi)發(fā)兩個(gè)activity之間傳值示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07Android中實(shí)現(xiàn)用命令行同步網(wǎng)絡(luò)時(shí)間
這篇文章主要介紹了Android中實(shí)現(xiàn)用命令行同步網(wǎng)絡(luò)時(shí)間,本文講解使用BusyBox實(shí)現(xiàn)同步網(wǎng)絡(luò)時(shí)間,并給出了詳細(xì)操作步驟,需要的朋友可以參考下2015-07-07Android實(shí)現(xiàn)底部導(dǎo)航欄效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)底部導(dǎo)航欄效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01android實(shí)現(xiàn)簡(jiǎn)單圓弧效果
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)簡(jiǎn)單圓弧效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08Android利用Intent實(shí)現(xiàn)記事本功能(NotePad)
這篇文章主要為大家詳細(xì)介紹了Android利用Intent實(shí)現(xiàn)簡(jiǎn)單記事本功能(NotePad)的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06Android購(gòu)物分類效果實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Android購(gòu)物分類效果的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11Android?Flutter使用本地?cái)?shù)據(jù)庫(kù)編寫備忘錄應(yīng)用
這篇文章主要為大家詳細(xì)介紹了Android?Flutter如何使用本地?cái)?shù)據(jù)庫(kù)實(shí)現(xiàn)編寫簡(jiǎn)單的備忘錄應(yīng)用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-03-03Android編程基于重力傳感器實(shí)現(xiàn)橫豎屏放向切換功能
這篇文章主要介紹了Android編程基于重力傳感器實(shí)現(xiàn)橫豎屏放向切換功能,結(jié)合具體實(shí)例形式分析了Android基于重力傳感器實(shí)現(xiàn)橫豎屏切換的相關(guān)操作技巧,需要的朋友可以參考下2018-01-01