点击显示更多文本自定义控件

stormKid

发布于 2018-09-12 15:35:20

8580

发布于 2018-09-12 15:35:20

文章被收录于专栏：计算机编程

写在前面的话：在正常项目流程中，我们很多情况下会碰到点击显示更多文本，这样可以利于页面变化加载，点击显示更多可能会非常常用，现在博主利用自己的闲暇时间来一点一点完成一个自定义控件，这个控件可以满足大多数情况的需求。

思路：

在写程序的时候，最需要的是思路，好的思路是成功的一半，我们来看看我们的最基本的需求效果： 1、需要在文字特别多的情况下显示只有确定的行数 2、点击右侧图片将所有的文字显示出来 3、文字在左侧覆盖大部分布局，图标在右侧点击显示更多 4、显示的文本不会因为重用优化视图从而发生状态错位

实现需求:

1、继承LinearLayout： public class ExpandableContainer extends LinearLayout { //继承线性布局的好处是可以由系统将我们的两个view进行线性分配，可控制的图形大小以及可变化的view的填充情况 }

2、根据Textview的即textview.setEllipsize()与textview.setMaxLines两个方法重绘View达到显示更多的效果：

  /**  
  *进行重绘view
  */
private void onresfreshView() {
    if (isExpanded) {
        textView.setEllipsize(null);
        textView.setMaxLines(Integer.MAX_VALUE);
        initView();
    } else {
        textView.setEllipsize(TextUtils.TruncateAt.END);
        textView.setMaxLines(lines);
        initView();
    }
}

3、在多条目布局的情况下显示状态会让该布局的显示状态发生显示乱位，于是用自带内存的方式来解决这一问题

/**
 *在listview , gridview, recyclerview的条目中使用此方法，防止重绘布局
 * @param text 你所要填充的文本
 * @param position 当前控件所在的position
 */
public synchronized void setText(String text, int position) {
    this.position = position;
    this.text = text;
    initView();
    if (null!=map&&map.size()>0&&map.keySet().contains(position)){
        isExpanded = map.get(position);
    }else isExpanded=false;
    map.put(position,isExpanded);
    onresfreshView();
}

4、使用软引用来做防止内存泄漏，在view移除的时候做clear清理对象，重写view的最终销毁方法onDetachedFromWindow在里面进行清理静态对象防止内存泄漏

 /**
 * 用软引用避免内存泄露
 */
@Override
protected void onDetachedFromWindow() {
    super.onDetachedFromWindow();
    mapSoftReference.clear();
}

5、以上就是所有的view的最重要的几个方法，根据这些方法的自定义的使用，能够很好的完成我们的预期效果：

预览效果.gif

项目核心view的代码:

/**
 * Created by ke_li on 2017/1/13.
 * 自定义显示更多文本
 */
public class ExpandableContainer extends LinearLayout {
 
//默认的点击图标
private static final int IMAGE_RES = R.mipmap.explain;
// 默认图标的高度
private static final int IMAGE_HEIGHT = 0;
// 默认图标的宽度
private static final int IMAGE_WIDTH = 0;
// 默认显示文本的行数
private static final int EXPAND_LINE = 2;
// 控制默认显示文本的行数
private int lines;
// 判断是否展开
private boolean isExpanded;
// 变化的TextView
private TextView textView;
// 点击扩展的图标
private ImageView imageView;
// 显示文本
private String text ;
// 控制多少position
private int position;
/**
 * 将状态记录给缓存，下次取的时候进行修改
 */
private static Map<Integer,Boolean> map = new HashMap<>();

// 建立缓存机制
SoftReference<Map> mapSoftReference =  new SoftReference<Map>(map);
public ExpandableContainer(Context context) {
    this(context, null);
}

private void init(Context context, AttributeSet attrs) {
    //创建TextView
    textView = new TextView(context);

    //创建ImageView 负责点击imageview来展示更多
    imageView = new ImageView(context);

    TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.ExpandableContainer);

    String value = array.getString(R.styleable.ExpandableContainer_setText);
    int resourse = array.getInteger(R.styleable.ExpandableContainer_setImageResource, IMAGE_RES);
    int width = array.getDimensionPixelOffset(R.styleable.ExpandableContainer_image_width, IMAGE_WIDTH);
    int height = array.getDimensionPixelOffset(R.styleable.ExpandableContainer_image_height, IMAGE_HEIGHT);
    lines = array.getInteger(R.styleable.ExpandableContainer_expandableLine, EXPAND_LINE);

    final LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(context, attrs);
    layoutParams.gravity = Gravity.BOTTOM;
    LinearLayout.LayoutParams imageParams = new LinearLayout.LayoutParams(width, height);
    LinearLayout.LayoutParams TextParams = new LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT, 1);
    textView.setText(value);
    textView.setLayoutParams(TextParams);
    imageView.setImageResource(resourse);
    imageView.setLayoutParams(imageParams);
    textView.setMaxLines(lines);
    textView.setEllipsize(TextUtils.TruncateAt.END);
    this.setLayoutParams(layoutParams);

    imageView.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            if (!isExpanded) {
                textView.setEllipsize(null);
                isExpanded = true;
                textView.setMaxLines(Integer.MAX_VALUE);
                initView();
            } else {
                textView.setEllipsize(TextUtils.TruncateAt.END);
                isExpanded = false;
                textView.setMaxLines(lines);
                initView();
            }
            map.put(position,isExpanded);
        }
    });
}

/**
 * 普通填充控件
 * @param text
 */
public void setText(String text) {
    this.text = text;
    initView();
}

/**
 * 进行重绘view
 */
private void onresfreshView() {
    if (isExpanded) {
        textView.setEllipsize(null);
        textView.setMaxLines(Integer.MAX_VALUE);
        initView();
    } else {
        textView.setEllipsize(TextUtils.TruncateAt.END);
        textView.setMaxLines(lines);
        initView();
    }
}


@Override
public void requestLayout() {
    super.requestLayout();

}

private void initView() {
    textView.setText(text);
    this.removeAllViews();
    this.addView(textView);
    this.addView(imageView);
}


public ExpandableContainer(Context context, AttributeSet attrs) {
    super(context, attrs);
    init(context, attrs);
}

public ExpandableContainer(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context, attrs);
}

/**
 * 在listview , gridview, recyclerview的条目中使用此方法，防止重绘布局
 *
 * @param text 你所要填充的文本
 * @param position 当前控件所在的position
 */
public synchronized void setText(String text, int position) {
    this.position = position;
    this.text = text;
    initView();
    if (null!=map&&map.size()>0&&map.keySet().contains(position)){
        isExpanded = map.get(position);
    }else isExpanded=false;
    map.put(position,isExpanded);
    onresfreshView();
}

/**
 * 用软引用避免内存泄露
 */
@Override
protected void onDetachedFromWindow() {
    super.onDetachedFromWindow();
    mapSoftReference.clear();
}}

项目源码地址：https://github.com/StormKid/expandDemo

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017.01.16 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度