查看: 1041|回复: 0

[手机开发] Android仿微信朋友圈全文收起功能示例(附源码)

发表于 2017-8-1 08:00:04

在众多的社交类软件中,朋友圈是必不可少的,可以与好友、同学等分享自己的日常和有意思的事情,在开发社交类App时,朋友圈发表的内容你不可能让他全部显示,全部显示的话用户体验度会非常不好,这时就要用到全文、收缩的功能,朋友如果想要看你发的动态,只要点一下全文就可以查看所有的全部的内容了,如果不想看,也没有必要把这一篇文章全部都滑到底部,才能看下一条内容。

下边将源码贴出来供大家参考:(代码不是最简便的,但是功能是可以的)

首先写一个布局,这个布局是每个子项的布局 item_text_list.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="wrap_content"
  5. android:orientation="vertical"
  6. android:paddingBottom="@dimen/activity_vertical_margin"
  7. android:paddingLeft="@dimen/activity_horizontal_margin"
  8. android:paddingRight="@dimen/activity_horizontal_margin"
  9. android:paddingTop="@dimen/activity_vertical_margin">
  10. <LinearLayout
  11. android:layout_width="match_parent"
  12. android:layout_height="wrap_content"
  13. android:layout_gravity="center_vertical"
  14. android:orientation="horizontal">
  15. <TextView
  16. android:id="@+id/tv_hend"
  17. android:layout_width="40dp"
  18. android:layout_height="40dp"
  19. android:layout_marginRight="16dp"
  20. android:background="@drawable/circle"
  21. android:gravity="center"
  22. android:text="1"
  23. android:textColor="@android:color/white"
  24. android:textSize="14sp" />
  25. <TextView
  26. android:id="@+id/tv_name"
  27. android:layout_width="wrap_content"
  28. android:layout_height="wrap_content"
  29. android:alpha="0.87"
  30. android:text="丁先森"
  31. android:textColor="@android:color/black"
  32. android:textSize="14sp" />
  33. </LinearLayout>
  34. <LinearLayout
  35. android:layout_width="match_parent"
  36. android:layout_height="wrap_content"
  37. android:layout_marginLeft="56dp"
  38. android:orientation="vertical"
  39. android:paddingBottom="8dp">
  40. <TextView
  41. android:id="@+id/tv_content"
  42. android:layout_width="wrap_content"
  43. android:layout_height="wrap_content"
  44. android:layout_marginBottom="8dp"
  45. android:alpha="0.85"
  46. android:ellipsize="end"
  47. android:text=""
  48. android:textColor="@android:color/black"
  49. android:textSize="14sp" />
  50. <TextView
  51. android:id="@+id/tv_expand_or_collapse"
  52. android:layout_width="wrap_content"
  53. android:layout_height="wrap_content"
  54. android:text="全文"
  55. android:textColor="@color/colorPrimaryDark"
  56. android:textSize="14sp" />
  57. </LinearLayout>
  58. <View
  59. android:layout_width="match_parent"
  60. android:layout_height="0.5dp"
  61. android:layout_marginLeft="56dp"
  62. android:alpha="0.12"
  63. android:background="@android:color/black" />
  64. </LinearLayout>
复制代码

写一个Util类,其实是存放的数据,也可以读取数据库,获取JSON字符串,这里为了实现功能就是用固定的数据

Util.class

  1. package com.example.friendzhanshou;
  2. /**
  3. * @author DingChao
  4. * 2017/2/10
  5. */
  6. public class Util {
  7. private static String[] nameArray = new String[]{
  8. "Windows", "Mac", "Linux"
  9. };
  10. private static String[] contentArray = new String[]{
  11. "在动作类影片中,只要发生混乱,那么绝对就有木仓战。现在的技术越来越发达,电影或电视中的特效也做的越来越逼真,演员们被木仓打中的效果也很形象,我们经常能看到被木仓打中的伤口血淋林的暴露在大屏幕中,从演员的表演中我们能看到木仓击是很痛的,那么你们有想过被木仓打中到底会有多痛?什么感觉吗?网站有网友为我们分享被子弹打中的感觉\n" +
  12. "1、“老实说,比我想象中的感觉要轻很多。本来我以为很痛,可是被打中后就像是被棒球击中的感觉一样,刚开始的几秒钟没什么知觉,过会才感到痛\n" +
  13. "2、“被子弹打到的感觉就像是一直有人拿针扎你一样,刺痛刺痛的。”\n" +
  14. "3、“我当初大腿被木仓击中,子弹直接从我的大腿中传过去,连带着我的肌腱也被击中,那种感觉我觉得用疼痛两个字已经不足以形容了\n" +
  15. "4、“在我十七岁的时候,脚被木仓击中,当时我以为是被蜜蜂蛰了,因为仿佛听到了蜜蜂的声音,没过几秒钟,脚上就传来灼热感,这才知道原来是被木仓击中了。\n" +
  16. "5、“我只是听到的木仓声,却没有意识到自己中木仓了。直到血流出来才意识到。所以,对我来讲,被子弹击中没什么感觉。"
  17. ,
  18. "GNOME or KDE desktop\n" +
  19. " processor with support for AMD Virtualization? (AMD-V?)"
  20. };
  21. /**
  22. * 获取文本内容根据下标
  23. *
  24. * @param position
  25. * @return
  26. */
  27. public static String getContent(int position) {
  28. return contentArray[position % contentArray.length];
  29. }
  30. /**
  31. * 获取名称根据下标
  32. *
  33. * @param position
  34. * @return
  35. */
  36. public static String getName(int position) {
  37. return nameArray[position % contentArray.length];
  38. }
  39. }
复制代码

设置适配器

TextListAdapter.class

  1. package com.example.friendzhanshou;
  2. import android.app.Activity;
  3. import android.support.v7.widget.RecyclerView;
  4. import android.util.SparseArray;
  5. import android.view.View;
  6. import android.view.ViewGroup;
  7. import android.view.ViewTreeObserver;
  8. import android.widget.Adapter;
  9. import android.widget.TextView;
  10. /**
  11. * @author DingChao
  12. * 2017/2/10
  13. */
  14. public class TextListAdapter extends RecyclerView.Adapter<TextListAdapter.TextHolder> {
  15. private Activity mContent;
  16. private final int MAX_LINE_COUNT = 3;
  17. private final int STATE_UNKNOW = -1;
  18. private final int STATE_NOT_OVERFLOW = 1;//文本行数不能超过限定行数
  19. private final int STATE_COLLAPSED = 2;//文本行数超过限定行数,进行折叠
  20. private final int STATE_EXPANDED = 3;//文本超过限定行数,被点击全文展开
  21. private SparseArray<Integer> mTextStateList;
  22. public TextListAdapter(Activity context) {
  23. mContent = context;
  24. mTextStateList = new SparseArray<>();
  25. }
  26. @Override
  27. public TextHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  28. return new TextHolder(mContent.getLayoutInflater().inflate(R.layout.item_test_list, parent, false));
  29. }
  30. @Override
  31. public void onBindViewHolder(final TextHolder holder,final int position) {
  32. holder.hend.setText(position+1+"");//设置头部的文字
  33. holder.name.setText(Util.getName(position));//设置名称
  34. int state=mTextStateList.get(position,STATE_UNKNOW);
  35. // 如果该itme是第一次初始化,则取获取文本的行数
  36. if (state==STATE_UNKNOW){
  37. holder.content.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
  38. @Override
  39. public boolean onPreDraw() {
  40. // 这个回掉会调用多次,获取玩行数后记得注销监听
  41. holder.content.getViewTreeObserver().removeOnPreDrawListener(this);
  42. // holder.content.getViewTreeObserver().addOnPreDrawListener(null);
  43. // 如果内容显示的行数大于限定显示行数
  44. if (holder.content.getLineCount()>MAX_LINE_COUNT) {
  45. holder.content.setMaxLines(MAX_LINE_COUNT);//设置最大显示行数
  46. holder.expandOrCollapse.setVisibility(View.VISIBLE);//让其显示全文的文本框状态为显示
  47. holder.expandOrCollapse.setText("全文");//设置其文字为全文
  48. mTextStateList.put(position, STATE_COLLAPSED);
  49. }else{
  50. holder.expandOrCollapse.setVisibility(View.GONE);//显示全文隐藏
  51. mTextStateList.put(position,STATE_NOT_OVERFLOW);//让其不能超过限定的行数
  52. }
  53. return true;
  54. }
  55. });
  56. holder.content.setMaxLines(Integer.MAX_VALUE);//设置文本的最大行数,为整数的最大数值
  57. holder.content.setText(Util.getContent(position));//用Util中的getContent方法获取内容
  58. }else{
  59. // 如果之前已经初始化过了,则使用保存的状态,无需在获取一次
  60. switch (state){
  61. case STATE_NOT_OVERFLOW:
  62. holder.expandOrCollapse.setVisibility(View.GONE);
  63. break;
  64. case STATE_COLLAPSED:
  65. holder.content.setMaxLines(MAX_LINE_COUNT);
  66. holder.expandOrCollapse.setVisibility(View.VISIBLE);
  67. holder.expandOrCollapse.setText("全文");
  68. break;
  69. case STATE_EXPANDED:
  70. holder.content.setMaxLines(Integer.MAX_VALUE);
  71. holder.expandOrCollapse.setVisibility(View.VISIBLE);
  72. holder.expandOrCollapse.setText("收起");
  73. break;
  74. }
  75. holder.content.setText(Util.getContent(position));
  76. }
  77. // 设置显示和收起的点击事件
  78. holder.expandOrCollapse.setOnClickListener(new View.OnClickListener() {
  79. @Override
  80. public void onClick(View v) {
  81. int state=mTextStateList.get(position,STATE_UNKNOW);
  82. if (state==STATE_COLLAPSED){
  83. holder.content.setMaxLines(Integer.MAX_VALUE);
  84. holder.expandOrCollapse.setText("收起");
  85. mTextStateList.put(position,STATE_EXPANDED);
  86. }else if (state==STATE_EXPANDED){
  87. holder.content.setMaxLines(MAX_LINE_COUNT);
  88. holder.expandOrCollapse.setText("全文");
  89. mTextStateList.put(position,STATE_COLLAPSED);
  90. }
  91. }
  92. });
  93. }
  94. @Override
  95. public int getItemCount() {
  96. return 15;
  97. }
  98. public class TextHolder extends RecyclerView.ViewHolder {
  99. public TextView hend;
  100. public TextView name;
  101. public TextView content;
  102. public TextView expandOrCollapse;
  103. public TextHolder(View itemView) {
  104. super(itemView);
  105. // 绑定xml布局中的控件
  106. hend = (TextView) itemView.findViewById(R.id.tv_hend);
  107. name = (TextView) itemView.findViewById(R.id.tv_name);
  108. content = (TextView) itemView.findViewById(R.id.tv_content);
  109. expandOrCollapse = (TextView) itemView.findViewById(R.id.tv_expand_or_collapse);
  110. }
  111. }
  112. }
复制代码

主布局的内容:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:tools="http://schemas.android.com/tools"
  4. android:id="@+id/activity_main"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"
  7. android:paddingBottom="@dimen/activity_vertical_margin"
  8. android:paddingLeft="@dimen/activity_horizontal_margin"
  9. android:paddingRight="@dimen/activity_horizontal_margin"
  10. android:paddingTop="@dimen/activity_vertical_margin"
  11. tools:context="com.example.friendzhanshou.MainActivity">
  12. <android.support.v7.widget.RecyclerView
  13. android:id="@+id/rv_text_list"
  14. android:layout_width="match_parent"
  15. android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
  16. </RelativeLayout>
复制代码

MainActivity中的代码也很简单,获取空间,绑定数据源:

  1. package com.example.friendzhanshou;
  2. import android.support.v7.app.AppCompatActivity;
  3. import android.os.Bundle;
  4. import android.support.v7.widget.LinearLayoutManager;
  5. import android.support.v7.widget.RecyclerView;
  6. public class MainActivity extends AppCompatActivity {
  7. private RecyclerView mRvTextList;
  8. @Override
  9. protected void onCreate(Bundle savedInstanceState) {
  10. super.onCreate(savedInstanceState);
  11. setContentView(R.layout.activity_main);
  12. mRvTextList= (RecyclerView) findViewById(R.id.rv_text_list);
  13. mRvTextList.setLayoutManager(new LinearLayoutManager(this,LinearLayoutManager.VERTICAL,false));
  14. mRvTextList.setAdapter(new TextListAdapter(this));
  15. }
  16. }
复制代码

demo下载地址:friendzhanshou_jb51.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。



回复

使用道具 举报

关闭

站长推荐上一条 /1 下一条