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

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

思路:

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容