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

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

思路:

在写程序的时候,最需要的是思路,好的思路是成功的一半,我们来看看我们的最基本的需求效果: 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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏jianhuicode

学问Chat UI(1)

前言 由于项目需要,最近开始借鉴学习下开源的Android即时通信聊天UI框架,为此结合市面上加上本项目需求列了ChatUI要实现的基本功能与扩展功能。 ? 融...

26490
来自专栏积累沉淀

Java SWT事件

什么是事件?点击鼠标是一个事件,按下一个按钮也一个事件,关闭一个窗口也是一个事件。 什么是监听器?监听器就是监听事件什么时候发生的,用来控制事件发生的具体动...

30850
来自专栏向治洪

android GifView分享

gif图动画在android中还是比较常用的,比如像新浪微博中,有很多gif图片,而且展示非常好,所以我也想弄一个。经过我多方的搜索资料和整理,终于弄出来了,...

36690
来自专栏Sorrower的专栏

Android弹窗二则: PopupWindow和AlertDialog

android.support.v7.app.AlertDialog.Builder builder = new android.support.v7.app....

22850
来自专栏向治洪

仿支付宝手势密码

这篇来分享一下绘制手势密码的实现(主要是设置手势密码、校验手势密码): 一、大致界面介绍: ? ?                        图1  ...

30470
来自专栏james大数据架构

Android网格视图(GridView)

GridView的一些属性: 1.android:numColumns=”auto_fit”   //GridView的列数设置为自动,也可以设置成2、3、4…...

28680
来自专栏ml

扫雷游戏制作学习过程

1. 扫雷游戏的构思:   设计为初级,中级,高级三个级别。      因此不妨设置为如下规格: 9x9 16x15和30x16 (行,列)规格不同地雷的数量也...

41780
来自专栏李蔚蓬的专栏

实战 | 使用揭露动画(Reveal Effect)做一个丝滑的Activity转场动画

最近跟几个小伙伴在实践一个项目,考虑到界面效果,我们决定使用揭露动画作为Activity的转场动画。

31830
来自专栏李蔚蓬的专栏

Material Design 实战 之第四弹 —— 卡片布局

首先这里准备用CardView来填充主题内容, CardView是用于实现卡片式布局效果的重要控件,由appcompat-v7库提供。 实际上,CardVi...

16310
来自专栏懒人开发

CoordinatorLayout使用(四):和Toolbar的简单使用

这篇也就简单使用,和前面关系不大 就暂时不复习了 这篇可能有点啰嗦,并且只是使用,没有难度 熟悉的同学略过前面,或者整篇略过

20530

扫码关注云+社区

领取腾讯云代金券