使用RecyclerView 简单实现QQ好友列表展开效果

最近自己想捣鼓个社交类的app，所以想了解一下QQ列表的实现。对于这样的展开效果，我们很容易想到使用ExpandableListView类，当然我也是，但是我在网上看到有人用ListView套用listView的方法，本着学习的态度，我去研究了一下。思路明确，就是在ListView中的Item布局类再放一个ListView，然后通过对分组栏目的点击效果进行判别，分别展示和隐藏子ListView，实现该效果。

效果图如下：

思路就不说了，和ListView是一样的，都是两个控件的套用，代码也简单，相信都可以看得懂，直接上代码。

这里需要两个实体类：Group和GroupItem，分别用于存分组的信息以及其组员的信息。

package henry.com.friendlist.bean;import java.util.List;/*** Date: 2016/10/25. 14:46* Creator: henry* Email: heneymark@gmail.com* Description:分组*/
public class Group {//分组名称private String mGroupName;//分组项目private List<GroupItem> mGroupItems;public Group(String GroupName, List<GroupItem> GroupItems) {this.mGroupName = GroupName;this.mGroupItems = GroupItems;}public String getGroupName() {return mGroupName;}public void setGroupName(String mGroupName) {this.mGroupName = mGroupName;}public List<GroupItem> getGroupItems() {return mGroupItems;}public void setGroupItems(List<GroupItem> mItems) {this.mGroupItems = mItems;}@Overridepublic String toString() {String string = "GroupName=" + mGroupName + ";GroupItem=" + mGroupItems.toString();return string;}
}

package henry.com.friendlist.bean;/*** Date: 2016/10/25. 14:47* Creator: henry* Email: heneymark@gmail.com* Description: 组员描述*/
public class GroupItem {private String Title;private String Content;public GroupItem(String mTitle, String mContent) {this.Title = mTitle;this.Content = mContent;}public String getTitle() {return Title;}public void setTitle(String title) {Title = title;}public String getContent() {return Content;}public void setContent(String content) {Content = content;}@Overridepublic String toString() {String string = "Title=" + Title + ";Content=" + Content;return string;}
}

两个Item布局如下：

1. layout_group:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><RelativeLayoutandroid:id="@+id/group_layout"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@android:color/darker_gray"android:padding="8dp"><ImageViewandroid:id="@+id/image"android:layout_width="23dp"android:layout_height="23dp"android:layout_marginLeft="10dp"android:src="@mipmap/icon_open"/><TextViewandroid:id="@+id/name"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_toRightOf="@+id/image"android:layout_marginLeft="10dp"android:text="分组"android:textSize="16sp"android:gravity="center"/><TextViewandroid:id="@+id/count"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:layout_centerVertical="true"android:text="5"android:textSize="14sp" /></RelativeLayout><android.support.v7.widget.RecyclerViewandroid:id="@+id/rl_group"android:layout_width="match_parent"android:layout_height="wrap_content"></android.support.v7.widget.RecyclerView></LinearLayout>

2. item_group:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><TextViewandroid:id="@+id/title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:paddingLeft="10dp"android:paddingTop="8dp"android:text="title"android:textSize="18sp" /><TextViewandroid:id="@+id/content"android:layout_width="wrap_content"android:layout_height="wrap_content"android:paddingBottom="8dp"android:paddingLeft="10dp"android:paddingTop="8dp"android:text="content"android:textSize="14sp" /></LinearLayout>

两个适配器：GroupAdapter和GroupItemAdapter：

package henry.com.friendlist.adapter;import android.content.Context;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;import java.util.List;import henry.com.friendlist.DividerItemDecoration;
import henry.com.friendlist.R;
import henry.com.friendlist.bean.Group;/*** Date: 2016/10/25. 15:17* Creator: henry* Email: heneymark@gmail.com* Description:*/
public class GroupAdapter extends RecyclerView.Adapter<GroupAdapter.ViewHolder> {private List<Group> list;private Context mContext;private boolean isShowGroupItem = false;public GroupAdapter(Context context, List<Group> list) {this.list = list;mContext = context;}@Overridepublic ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.layout_group, parent, false);ViewHolder vh = new ViewHolder(view);return vh;}@Overridepublic void onBindViewHolder(final ViewHolder holder, int position) {holder.mName.setText(list.get(position).getGroupName());holder.mCount.setText(list.get(position).getGroupItems().size() + "");//创建默认的线性LayoutManagerLinearLayoutManager mLayoutManager = new LinearLayoutManager(mContext);//显示底部位置mLayoutManager.setStackFromEnd(true);holder.mGroup.setLayoutManager(mLayoutManager);//如果可以确定每个item的高度是固定的，设置这个选项可以提高性能holder.mGroup.setHasFixedSize(true);GroupItemAdapter groupItemAdapter = new GroupItemAdapter(list.get(position).getGroupItems());//列表添加分割线holder.mGroup.addItemDecoration(new DividerItemDecoration(mContext, DividerItemDecoration.HORIZONTAL_LIST));holder.mGroup.setAdapter(groupItemAdapter);//初始化列表形式holder.mGroup.setVisibility(View.GONE);holder.mImg.setImageResource(R.mipmap.icon_open);isShowGroupItem = false;groupItemAdapter.addOnItemClickListener(new GroupItemAdapter.OnRecyclerItemClickListener() {@Overridepublic void onItemClick(View view, List data, int position) {Toast.makeText(mContext, "Item " + position + " Click！", Toast.LENGTH_LONG).show();}});//给分组添加Click事件holder.mGroupLayout.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {if (!isShowGroupItem) {holder.mGroup.setVisibility(View.VISIBLE);holder.mImg.setImageResource(R.mipmap.icon_close);isShowGroupItem = true;} else {holder.mGroup.setVisibility(View.GONE);holder.mImg.setImageResource(R.mipmap.icon_open);isShowGroupItem = false;}}});}@Overridepublic int getItemCount() {return list.isEmpty() ? 0 : list.size();}public static class ViewHolder extends RecyclerView.ViewHolder {public TextView mName;public TextView mCount;public RecyclerView mGroup;public RelativeLayout mGroupLayout;public ImageView mImg;public ViewHolder(View view) {super(view);mName = (TextView) view.findViewById(R.id.name);mCount = (TextView) view.findViewById(R.id.count);mGroup = (RecyclerView) view.findViewById(R.id.rl_group);mGroupLayout = (RelativeLayout) view.findViewById(R.id.group_layout);mImg = (ImageView) view.findViewById(R.id.image);}}
}

package henry.com.friendlist.adapter;import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;import java.util.List;import henry.com.friendlist.bean.GroupItem;
import henry.com.friendlist.R;/*** Date: 2016/10/25. 15:02* Creator: henry* Email: heneymark@gmail.com* Description:*/
public class GroupItemAdapter extends RecyclerView.Adapter<GroupItemAdapter.ViewHolder> implements View.OnClickListener {private List<GroupItem> list;private OnRecyclerItemClickListener mOnItemClickListener;public GroupItemAdapter(List<GroupItem> list) {this.list = list;}@Overridepublic ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_group, parent, false);view.setOnClickListener(this);ViewHolder vh = new ViewHolder(view);return vh;}@Overridepublic void onBindViewHolder(ViewHolder holder, int position) {holder.mTitle.setText(list.get(position).getTitle());holder.mContent.setText(list.get(position).getContent());holder.itemView.setTag(position);}@Overridepublic int getItemCount() {return list.isEmpty() ? 0 : list.size();}@Overridepublic void onClick(View view) {//使用getTag方法获取数据if (mOnItemClickListener != null)mOnItemClickListener.onItemClick(view, list, (Integer) view.getTag());}/*** item点击事件** @param listener*/public void addOnItemClickListener(OnRecyclerItemClickListener listener) {this.mOnItemClickListener = listener;}public static class ViewHolder extends RecyclerView.ViewHolder {public TextView mTitle;public TextView mContent;public ViewHolder(View view) {super(view);mTitle = (TextView) view.findViewById(R.id.title);mContent = (TextView) view.findViewById(R.id.content);}}public interface OnRecyclerItemClickListener {void onItemClick(View view, List data, int position);}
}

值得注意的是，RecyclerView自身没有点击事件和分割线，需要直接添加，这里已经添加好了，当然这是我的方法，可能大神们还有更好的方法，还请大神分享。

代码地址：http://download.csdn.net/detail/henry__mark/9667703；

使用RecyclerView 简单实现QQ好友列表展开效果相关推荐

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表（一）
iOS开发UI篇-使用UItableview完成一个简单的QQ好友列表(一) 一.项目结构和plist文件二.实现代码 1.说明: 主控制器直接继承UITableViewController // ...
iOS之仿QQ好友列表展开收缩效果的实现
使用UICollectionView实现思路很明显整体它是一个列表,它的分组是一个列表,它里面的好友列表也是一个列表,所以就可以使用组头来设置分组列表,使用cell设置好友列表: 当点击组头的时候 ...
html仿qq最小化怎么实现,JS仿QQ好友列表展开、收缩功能(第一篇)
JS仿QQ好友列表展开.收缩功能(第一篇) 发布时间:2020-10-17 14:20:03 来源:脚本之家阅读:96 作者:erdouzhang 效果图如下所示: html: 我的好友张三李四 ...
qq列表展开多个html代码,JS仿QQ好友列表展开、收缩功能(第二篇)
在上篇的基础上继续完善,点击一个li元素,其他li元素上的类名清除掉. 效果图如下所示: js: window.onload = function(){ var list = document.get ...
14_自定义ItemDecoration实现qq好友列表分组效果
14_自定义ItemDecoration实现qq好友列表分组效果一.先上效果二.RecyclerView实现简单分组 RecyclerView比较常规的用法,显示多item布局,直接上代码: pu ...
Android中实现类似qq好友列表展开收起的效果
最近两天学习实现了一个功能,感觉很好,一定要记录下来. 在网上找了一些资料,林林总总,总是不那么齐全,有的代码做成小Demo还会报错,需要自己调试半天.也幸好如此,我将此功能涉及到的一些知识点理解的更 ...
基于Qt的类似QQ好友列表抽屉效果的实现
转载地址: http://blog.csdn.net/shuideyidi/article/details/30619167 前段时间在忙毕业设计,所以一直没有更新博客.今天答辩完以后,将对我的毕业设 ...
android 仿qq好友列表分组效果及联系人分组效果
历史记录仿QQ好友列表的动态效果以及联系人的分组效果 QQ朋友分组的功能做的不错,大家都很认可,那么到底他的分组并且滑动的时候,标题能停留在顶部是如何实现的呢?今天从网上搜索了一下资料,自己运行了 ...
iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表（二）
一.实现效果二.实现代码 1.数据模型部分 YYQQGroupModel.h文件 1 // 2 // YYQQGroupModel.h 3 // 02-QQ好友列表(基本数据 ...

使用RecyclerView 简单实现QQ好友列表展开效果

使用RecyclerView 简单实现QQ好友列表展开效果相关推荐

最新文章

热门文章