此篇综合运用自定义ActionBar、ContextMenu、PopupWindow、Fragment、ViewPager 以及RecyclerView等实现微信页面效果。
同时这也是中国大学慕课移动终端应用开发的网课作业15，我会持续更新我的作业

说明

说明1

这个说小不小的作品花了我两天的时间，时间花费的颇多。如果我的作品对您有所帮助的话，您的关注或是赞，都是对我的莫大支持。如果引用我的作品，请注明出处。

我尽可能符合了作业的题目要求，但是有些内容由于作业要求的组件或是方法达不到微信的界面效果，我进行相应的替换，在此说明。

说明2

内容较多，我准备分成三篇博客进行叙述分别为：
安卓作业—-慕课移动应用开发作业15之模仿实现微信界面效果(一)

安卓作业—-慕课移动应用开发作业15之模仿实现微信界面效果(二)
安卓作业—-慕课移动应用开发作业15之模仿实现微信界面效果(三)

说明3

此篇是第三篇，主要写了fragment具体的实现部分，包括RecyclerView子布局的实现和一些效果。

效果图

废话说了那么多，先上效果图，如果各位看官还满意，那就继续读下去吧。

代码

1.微信RecyclerView的实现

布局子文件 chat_item.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="65dp"> <RelativeLayout android:layout_marginLeft="5dp" android:layout_width="65dp" android:layout_height="match_parent"> <ImageView android:id="@+id/image_chat" android:src="@drawable/girl" android:layout_width="50dp" android:layout_height="50dp" android:layout_centerInParent="true"/> </RelativeLayout> <RelativeLayout android:layout_marginLeft="5dp" android:layout_width="0dp" android:layout_height="60dp" android:layout_weight="1"> <TextView android:id="@+id/text_chat_title" android:layout_width="wrap_content" android:layout_marginTop="12dp" android:text="相亲相爱一家人" android:textSize="18dp" android:textColor="#333" android:layout_height="25dp"/> <TextView android:id="@+id/text_chat_content" android:layout_below="@id/text_chat_title" android:layout_width="wrap_content" android:layout_height="20dp" android:text="老妈:[好心情]" android:textSize="10dp" android:textColor="#ccc"/> <TextView android:id="@+id/text_chat_date" android:layout_alignParentRight="true" android:layout_marginTop="15dp" android:layout_marginRight="20dp" android:text="周日" android:textColor="#ccc" android:layout_width="30dp" android:layout_height="20dp" android:textSize="12dp"/> <View android:layout_alignParentBottom="true" android:layout_width="match_parent" android:layout_height="1dp" android:background="#eee"/> </RelativeLayout> </LinearLayout> 

对应的模型 ChatMsg.java

public class ChatMsg { private int imgId;//头像 private String title;//标题 private String content;//内容 private String date;//日期 /**      * 完全体构造方法      * */ public ChatMsg(int imgId, String title, String content, String date) { this.imgId = imgId; this.title = title; this.content = content; this.date = date; } /**      * 偷懒版      * */ public ChatMsg(String title, String content) { this.title = title; this.content = content; this.imgId = R.drawable.girl; this.date = "昨天"; } /**      * 无参构造方法      * */ public ChatMsg() { } public int getImgId() { return imgId; } public void setImgId(int imgId) { this.imgId = imgId; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getContent() { return content; } public void setContent(String content) { this.content = content; } public String getDate() { return date; } public void setDate(String date) { this.date = date; } } 

对应的适配器 ChatAdapter.java

/**  * 微信聊天界面的适配器  * */ public class ChatAdapter extends RecyclerView.Adapter<ChatAdapter.ViewHolder>{ private ArrayList<ChatMsg> mChatMsgs; private Context mContext;//上下文对象 private LayoutInflater mInflater; private int mPosition = -1;//记录当前位置 public int getPosition() { return mPosition; } public void setPosition(int position) {         mPosition = position; } public void deleteItem(int position){         mChatMsgs.remove(position); notifyDataSetChanged(); } public void toFirstItem(int position){         ChatMsg chatMsg = mChatMsgs.remove(position);         mChatMsgs.add(0,chatMsg); notifyDataSetChanged(); } public ChatAdapter(Context context, ArrayList<ChatMsg> chatMsgs) {         mContext = context;         mChatMsgs = chatMsgs;         mInflater = LayoutInflater.from(mContext); } @NonNull @Override public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {         View view = mInflater.inflate(R.layout.chat_item, parent, false);         ViewHolder holder = new ViewHolder(view); return holder; } @Override public void onBindViewHolder(@NonNull final ViewHolder holder, int position) {         ChatMsg chatMsg = mChatMsgs.get(position);         holder.mImageView.setImageResource(chatMsg.getImgId());         holder.mTextViewTitle.setText(chatMsg.getTitle());         holder.mTextViewContent.setText(chatMsg.getContent());         holder.mTextViewDate.setText(chatMsg.getDate());         holder.itemView.setOnLongClickListener(new View.OnLongClickListener() { @Override public boolean onLongClick(View v) {                 mPosition = holder.getAdapterPosition(); return false; } }); } @Override public int getItemCount() { return mChatMsgs.size(); } /**      * view holder,实现上下文菜单接口      * */ class ViewHolder extends RecyclerView.ViewHolder implements View.OnCreateContextMenuListener{ public ImageView mImageView; public TextView mTextViewTitle,mTextViewContent,mTextViewDate; public ViewHolder(@NonNull View itemView) { super(itemView);             mImageView = itemView.findViewById(R.id.image_chat);             mTextViewTitle = itemView.findViewById(R.id.text_chat_title);             mTextViewContent = itemView.findViewById(R.id.text_chat_content);             mTextViewDate = itemView.findViewById(R.id.text_chat_date);             itemView.setOnCreateContextMenuListener(this); } @Override public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) { new MenuInflater(mContext).inflate(R.menu.chat_item_menu, menu); } } } 

2.通讯录RecyclerView的实现

布局子文件 contact_item.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="50dp"> <RelativeLayout android:layout_width="50dp" android:layout_height="match_parent" android:layout_marginLeft="5dp"> <ImageView android:id="@+id/image_contact" android:src="@drawable/girl" android:layout_centerInParent="true" android:layout_width="40dp" android:layout_height="40dp"/> </RelativeLayout> <RelativeLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <TextView android:id="@+id/text_contact_name" android:layout_centerVertical="true" android:layout_marginLeft="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="新的朋友" android:textSize="15dp" android:textColor="#333"/> <View android:layout_alignParentBottom="true" android:layout_width="match_parent" android:layout_height="1dp" android:background="#eee"/> </RelativeLayout> </LinearLayout> 

对应的模型 ContactMsg.java

public class ContactMsg { private String groupName; //由于需要分组来给他们设置修饰需要一个组名 private int img; //图片资源 private String name; //名字 /**      * 构造方法      * */ public ContactMsg(String groupName, int img, String name) { this.groupName = groupName; this.img = img; this.name = name; } /**      * 偷懒的构造方法      * */ public ContactMsg(String groupName, String name) { this.groupName = groupName; this.name = name; this.img = R.drawable.girl; } public ContactMsg() { } public String getGroupName() { return groupName; } public void setGroupName(String groupName) { this.groupName = groupName; } public int getImg() { return img; } public void setImg(int img) { this.img = img; } public String getName() { return name; } public void setName(String name) { this.name = name; } } 

对应的适配器 ContactAdapter.java

/**  * 通讯录联系人的适配器  * */ public class ContactAdapter extends RecyclerView.Adapter<ContactAdapter.ViewHolder> { private Context mContext; private ArrayList<ContactMsg> mContactMsgs; private LayoutInflater mInflater; public ContactAdapter(Context context, ArrayList<ContactMsg> contactMsgs) {         mContext = context;         mContactMsgs = contactMsgs;         mInflater = LayoutInflater.from(mContext); } @NonNull @Override public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {         View view = mInflater.inflate(R.layout.contact_item, parent, false);         ViewHolder holder = new ViewHolder(view); return holder; } @Override public void onBindViewHolder(@NonNull ViewHolder holder, int position) {         ContactMsg contactMsg = mContactMsgs.get(position);         holder.mImageView.setImageResource(contactMsg.getImg());         holder.mTextView.setText(contactMsg.getName()); } @Override public int getItemCount() { return mContactMsgs.size(); } class ViewHolder extends RecyclerView.ViewHolder{ private ImageView mImageView; private TextView mTextView; public ViewHolder(@NonNull View itemView) { super(itemView);              mImageView = itemView.findViewById(R.id.image_contact);             mTextView = itemView.findViewById(R.id.text_contact_name); } } } 

对应的装饰ContactItemDecoration .java

public class ContactItemDecoration extends RecyclerView.ItemDecoration{ private ArrayList<ContactMsg> mContactMsgs;//设置数据 private Paint mPaint;//设置画悬浮栏的画笔 private Rect mRectBounds;//设置一个矩形，用于画文字 private int mTitleHeight;//设置悬浮栏的高度 private int mTextSize;//设置文字大小 private Context mContext;//设置上下文对象 public ContactItemDecoration(Context context, ArrayList<ContactMsg> contactMsgs) {         mContactMsgs = contactMsgs;         mContext = context; //设置悬浮栏高度以及文字大小,为了统一尺寸规格，转换为像素         mTitleHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 30, mContext.getResources().getDisplayMetrics());         mTextSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 10, mContext.getResources().getDisplayMetrics());          mRectBounds = new Rect();//初始化矩形 //初始化画笔         mPaint = new Paint();         mPaint.setAntiAlias(true);//抗锯齿         mPaint.setDither(true);//防抖动         mPaint.setTextSize(mTextSize); } @Override public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) { /**          * 这个方法负责绘制每一个标题，可以实现随着视图移动而移动          * */ super.onDraw(c, parent, state); //先画出带有背景颜色的矩形条悬浮栏，从哪个位置开始绘制到哪个位置结束，则需要先确定位置，再画文字（即：title） int left = parent.getPaddingLeft(); int right = parent.getWidth() - parent.getPaddingRight(); //父view（RecyclerView）有padding值，子view有margin值 int childCount = parent.getChildCount();//得到的数据其实是一屏可见的item数量并非总item数，再复用 for(int i = 0; i < childCount; i++){             View child = parent.getChildAt(i); //子view（即：item）有可能设置有margin值，所以需要parms来设置margin值             RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams(); //以及 获取 position 位置 int position = params.getViewLayoutPosition(); if(position > -1){ if (mContactMsgs.get(position).getGroupName().equals("0")){ //啥也不干 }else { if(position == 0){//肯定是要绘制一个悬浮栏 以及 悬浮栏内的文字 //画矩形悬浮条以及文字 drawRectAndText(c, left, right, child, params, position); }else{ if(mContactMsgs.get(position).getGroupName() != null && !mContactMsgs.get(position).getGroupName().equals(mContactMsgs.get(position - 1).getGroupName())){ //和上一个Tag不一样，说明是另一个新的分组 //画矩形悬浮条以及文字 drawRectAndText(c, left, right, child, params, position); }else{ //说明是一组的，什么也不画，共用同一个Tag } } } } } } @Override public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) { /**          * 这个方法设置预留空间          * */ super.getItemOffsets(outRect, view, parent, state); //获取position,由本方法的第三段注释可得 int position = parent.getChildAdapterPosition(view); if(position > -1){//界面中的所有子view if (mContactMsgs.get(position).getGroupName().equals("0")){ //啥也不干 }else { if(position == 0){//第一个位置，设置悬浮栏 //在top留出一段距离                     outRect.set(0, mTitleHeight, 0, 0);//里面参数表示：左上右下的内边距padding距离 }else{ //当滑动到某一个item时(position位置)得到首字母，与上一个item对应的首字母不一致( position-1 位置)，说明这是下一分组了 if(mContactMsgs.get(position).getGroupName() != null && !mContactMsgs.get(position).getGroupName().equals(mContactMsgs.get(position-1).getGroupName())){ //在top留出一段距离                         outRect.set(0, mTitleHeight, 0, 0); }else{ //首字母相同说明是同一组的数据，比如都是 A 组下面的数据，那么就不需要再留出空间绘制悬浮栏了，共用同一个 A 组即可                         outRect.set(0, 0, 0, 0); } } } } } /**      * 绘制文字和图形      * */ private void drawRectAndText(Canvas c, int left, int right, View child, RecyclerView.LayoutParams params, int position) { //1、画矩形悬浮栏 //item可以有margin值不设置就默认为0，其中child.getTop()表示item距离父recycler view的距离，params.topMargin表示item的外边距，悬浮栏在item上方，那么悬浮栏的bottom就是child.getTop() - params.topMargin         mPaint.setColor(Color.parseColor("#eeeeee"));         c.drawRect(left, child.getTop() - params.topMargin - mTitleHeight, right, child.getTop() - params.topMargin, mPaint); //2、画文字         mPaint.setColor(Color.parseColor("#888888"));         mPaint.getTextBounds(mContactMsgs.get(position).getGroupName(), 0, mContactMsgs.get(position).getGroupName().length(), mRectBounds);//将文字放到矩形中，得到Rect的宽高         c.drawText(mContactMsgs.get(position).getGroupName(), child.getPaddingLeft()+40, child.getTop() - params.topMargin - (mTitleHeight / 2 - mRectBounds.height() / 2), mPaint); } } 

3.发现RecyclerView的实现

布局子文件 find_item.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="50dp"> <RelativeLayout android:layout_width="50dp" android:layout_height="match_parent" android:layout_marginLeft="5dp"> <ImageView android:id="@+id/image_find" android:src="@drawable/find_img1" android:layout_centerInParent="true" android:layout_width="30dp" android:layout_height="30dp"/> </RelativeLayout> <RelativeLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <TextView android:id="@+id/text_find_name" android:layout_centerVertical="true" android:layout_marginLeft="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="朋友圈" android:textSize="14dp" android:textColor="#333"/> <View android:layout_alignParentBottom="true" android:layout_width="match_parent" android:layout_height="1dp" android:background="#eee"/> <ImageView android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="10dp" android:src="@drawable/right" android:layout_width="15dp" android:layout_height="15dp"/> </RelativeLayout> </LinearLayout> 

对应的模型 FindMsg.java

public class FindMsg { private int groupId; private int img; private String name; public FindMsg(int groupId, int img, String name) { this.groupId = groupId; this.img = img; this.name = name; } public FindMsg() { } public int getGroupId() { return groupId; } public void setGroupId(int groupId) { this.groupId = groupId; } public int getImg() { return img; } public void setImg(int img) { this.img = img; } public String getName() { return name; } public void setName(String name) { this.name = name; } } 

对应的适配器 FindAdapter.java

public class FindAdapter extends RecyclerView.Adapter<FindAdapter.ViewHolder> { private Context mContext; private ArrayList<FindMsg> mFindMsgs; private LayoutInflater mInflater; public FindAdapter(Context context, ArrayList<FindMsg> findMsgs) {         mContext = context;         mFindMsgs = findMsgs;         mInflater = LayoutInflater.from(mContext); } @NonNull @Override public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {         View view = mInflater.inflate(R.layout.find_item, parent, false);         ViewHolder holder = new ViewHolder(view); return holder; } @Override public void onBindViewHolder(@NonNull ViewHolder holder, int position) {         FindMsg msg = mFindMsgs.get(position);         holder.mImageView.setImageResource(msg.getImg());         holder.mTextViewName.setText(msg.getName()); } @Override public int getItemCount() { return mFindMsgs.size(); } class ViewHolder extends RecyclerView.ViewHolder{ private ImageView mImageView; private TextView mTextViewName; public ViewHolder(@NonNull View itemView) { super(itemView);             mImageView = itemView.findViewById(R.id.image_find);             mTextViewName = itemView.findViewById(R.id.text_find_name); } } } 

对应的装饰FindItemDecoration .java

public class FindItemDecoration extends RecyclerView.ItemDecoration{ private ArrayList<FindMsg> mFindMsgs;//设置数据 private Paint mPaint;//设置画悬浮栏的画笔 private int mTitleHeight;//设置悬浮栏的高度 private Context mContext;//设置上下文对象 public FindItemDecoration(Context context, ArrayList<FindMsg> findMsgs) {         mFindMsgs = findMsgs;         mContext = context; //设置悬浮栏高度,为了统一尺寸规格，转换为像素         mTitleHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10, mContext.getResources().getDisplayMetrics()); //初始化画笔         mPaint = new Paint();         mPaint.setAntiAlias(true);//抗锯齿         mPaint.setDither(true);//防抖动 } @Override public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) { /**          * 这个方法负责绘制每一个标题，可以实现随着视图移动而移动          * */ super.onDraw(c, parent, state); //先画出带有背景颜色的矩形条悬浮栏，从哪个位置开始绘制到哪个位置结束，则需要先确定位置，再画文字（即：title） int left = parent.getPaddingLeft(); int right = parent.getWidth() - parent.getPaddingRight(); //父view（RecyclerView）有padding值，子view有margin值 int childCount = parent.getChildCount();//得到的数据其实是一屏可见的item数量并非总item数，再复用 for(int i = 0; i < childCount; i++){             View child = parent.getChildAt(i); //子view（即：item）有可能设置有margin值，所以需要parms来设置margin值             RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams(); //以及 获取 position 位置 int position = params.getViewLayoutPosition(); if(position > -1){ if (mFindMsgs.get(position).getGroupId()==0){ //啥也不干 }else { if(position == 0){//肯定是要绘制一个悬浮栏 //画矩形悬浮条以及文字 drawRectAndText(c, left, right, child, params, position); }else{ if(mFindMsgs.get(position).getGroupId() != 0 && !(mFindMsgs.get(position).getGroupId()==mFindMsgs.get(position - 1).getGroupId())){ //和上一个Tag不一样，说明是另一个新的分组 //画矩形悬浮条以及文字 drawRectAndText(c, left, right, child, params, position); }else{ //说明是一组的，什么也不画，共用同一个Tag } } } } } } @Override public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) { /**          * 这个方法设置预留空间          * */ super.getItemOffsets(outRect, view, parent, state); //获取position,由本方法的第三段注释可得 int position = parent.getChildAdapterPosition(view); if(position > -1){//界面中的所有子view if (mFindMsgs.get(position).getGroupId()==0){ //啥也不干 }else { if(position == 0){//第一个位置，设置悬浮栏 //在top留出一段距离                     outRect.set(0, mTitleHeight, 0, 0);//里面参数表示：左上右下的内边距padding距离 }else{ //当滑动到某一个item时(position位置)得到首字母，与上一个item对应的首字母不一致( position-1 位置)，说明这是下一分组了 if(mFindMsgs.get(position).getGroupId() != 0 && !(mFindMsgs.get(position).getGroupId()==mFindMsgs.get(position - 1).getGroupId())){ //在top留出一段距离                         outRect.set(0, mTitleHeight, 0, 0); }else{ //首字母相同说明是同一组的数据，比如都是 A 组下面的数据，那么就不需要再留出空间绘制悬浮栏了，共用同一个 A 组即可                         outRect.set(0, 0, 0, 0); } } } } } /**      * 绘制文字和图形      * */ private void drawRectAndText(Canvas c, int left, int right, View child, RecyclerView.LayoutParams params, int position) { //1、画矩形悬浮栏 //item可以有margin值不设置就默认为0，其中child.getTop()表示item距离父recycler view的距离，params.topMargin表示item的外边距，悬浮栏在item上方，那么悬浮栏的bottom就是child.getTop() - params.topMargin         mPaint.setColor(Color.parseColor("#eeeeee"));         c.drawRect(left, child.getTop() - params.topMargin - mTitleHeight, right, child.getTop() - params.topMargin, mPaint); } } 

4.对遗漏的文件进行补充

菜单布局文件 chat_item_menu.xml

在res目录下新建menu目录，创建此文件

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="https://schemas.android.com/apk/res/android"> <item android:id="@+id/item1_toFirst" android:title="置顶"/> <item android:id="@+id/item2_delete" android:title="删除"/> </menu> 

values文件夹下修改colors.xml和styles.xml文件

colors.xml

<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#ddd</color> <color name="colorPrimaryDark">#ddd</color> <color name="colorAccent">#D81B60</color> </resources> 

styles.xml

<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">         <!-- Customize your theme here. -->         <item name="colorPrimary">@color/colorPrimary</item>         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>         <item name="colorAccent">@color/colorAccent</item>     </style> <style name="menu_layout1">         <item name="android:layout_width">120dp</item>         <item name="android:layout_height">26dp</item>         <item name="android:layout_marginBottom">5dp</item>     </style> <style name="menu_image">         <item name="android:layout_width">20dp</item>         <item name="android:layout_height">20dp</item>         <item name="android:layout_gravity">center</item>     </style> <style name="menu_text">         <item name="android:layout_width">wrap_content</item>         <item name="android:layout_height">wrap_content</item>         <item name="android:layout_marginLeft">8dp</item>         <item name="android:layout_gravity">center</item>         <item name="android:textSize">15dp</item>         <item name="android:textColor">#333</item>     </style> </resources> 

总结

如果有什么问题，请私信联系我或者在评论区留言
码字不易，若有帮助，给个关注和赞呗