TextView的展开收起、自定义ViewGroup使第二个子View紧跟第一个子TextView的内容显示

文本的展开收起常见，第二个View紧跟TextView后面显示也常见；但是，纵观全网好像没有找到比这个更复杂的需求了，此需求把两者糅合在一起了。

有如图需求：
1，话题加粗，可点击；
2，描述文字过多时，做展开、收起功能；
3，白底黑字的食材紧跟描述文本后显示（简称：食材布局）。

经过我不懈努力，终于实现了。

此中曲折不堪言，唯以code赠众农。

需要解决的问题：
1，给文本的部分内容设置超链接
2，计算文字能显示的行数是否超过最大行
3，如何设置展开、收起
4，食材布局如何紧跟TextView后面显示

下面围绕上面的问题来解决即可

1，与String类似有Spannable系列：Spannable、SpannableString、SpannableStringBuilder。

SpannableString.setSpan(Object what, int start, int end, int flags)
通过start和end来标记指定范围文本样式
what可以传一个ClickableSpan，有两个方法：onClick 点击回调，正好可以实现我们的超链接；updateDrawState 可以设置画笔样式。

2，这个问题我们使用到一个很少用到的类StaticLayout，我也是查阅大量博客才找到的，这是一个处理文字的类，其实TextView在绘制内容的时候就用到了它，所以这个类可以协助TextView绘制，那应该也能从TextView获取到一些我们需要的东西吧！

3，问题2解决了，这个就简单了，我们可以根据2来判断需不需要截取文本，末尾以展开/收起结束。

4，这个就需要我们自定义ViewGroup，第一个子View必须是TextView，我们通过计算TextView最后一行剩余可用区域是否可以显示的下食材布局，如果可以就在TextView最后一行来显示（紧跟在文字后面哦），如果不可以就换行显示。

首先前3个问题代码实现如下：

	public static final String doubleSpace = "\t\t";

    public interface OnTextClickListener {
        void onActiveClick();
        void onOpenClose(boolean canShow, boolean isOpen);
    }
    
/**
     * TextView超过maxLine行，设置展开/收起。
     * @param tv
     * @param maxLine
     * @param active
     * @param desc
     * @param onTextClickListener
     */
    public static void setLimitLineText(final TextView tv, int maxLine, String active, String desc, final OnTextClickListener onTextClickListener) {
        final SpannableStringBuilder elipseString = new SpannableStringBuilder();//收起的文字
        final SpannableStringBuilder notElipseString = new SpannableStringBuilder();//展开的文字
        String content;
        if (TextUtils.isEmpty(desc)) {
            desc = "";
        }
        if (TextUtils.isEmpty(active)) {
            content = desc;
        } else {
            content = String.format("#%1$s%2$s%3$s", active, doubleSpace, desc);
        }
        //获取TextView的画笔对象
        TextPaint paint = tv.getPaint();
        //每行文本的布局宽度
        int width = tv.getContext().getResources().getDisplayMetrics().widthPixels - PhoneInfoUtil.dip2px(tv.getContext(), 40);
        //实例化StaticLayout 传入相应参数
        StaticLayout staticLayout = new StaticLayout(content, paint, width, Layout.Alignment.ALIGN_NORMAL, 1, 0, false);

        // 活动添加超链接
        ClickableSpan activeClick = new ClickableSpan() {
            @Override
            public void onClick(View widget) {
                if (onTextClickListener != null) {
                    onTextClickListener.onActiveClick();
                }
            }

            @Override
            public void updateDrawState(TextPaint ds) {
                ds.setColor(tv.getContext().getResources().getColor(R.color.white));
                ds.setFakeBoldText(true);// 加粗
                ds.setUnderlineText(false);// 下划线
            }
        };

        //判断content是行数是否超过最大限制行数3行
        if (staticLayout.getLineCount() > maxLine) {
            //定义展开后的文本内容
            notElipseString.append(content).append(doubleSpace).append("收起");

            // 展开/收起
            ClickableSpan stateClick = new ClickableSpan() {
                @Override
                public void onClick(View widget) {
                    if (widget.isSelected()) {
                        //如果是收起的状态
                        tv.setText(notElipseString);
                        tv.setSelected(false);
                    } else {
                        //如果是展开的状态
                        tv.setText(elipseString);
                        tv.setSelected(true);
                    }
                    if (onTextClickListener != null) {
                        onTextClickListener.onOpenClose(false, widget.isSelected());
                    }
                }

                @Override
                public void updateDrawState(TextPaint ds) {
                    ds.setColor(tv.getContext().getResources().getColor(R.color.white));
                }
            };

            //给收起两个字设置样式
            notElipseString.setSpan(stateClick, notElipseString.length() - 2, notElipseString.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            // 活动样式
            notElipseString.setSpan(activeClick, 0, active.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

            //获取到最后一行最后一个文字的下标
            int index = staticLayout.getLineStart(maxLine) - 1;
            //定义收起后的文本内容
            elipseString.append(content.substring(0, index - 4)).append("...").append(" 展开");
            // 活动样式
            elipseString.setSpan(activeClick, 0, active.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            //给查看全部设置样式
            elipseString.setSpan(stateClick, elipseString.length() - 2, elipseString.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            //设置收起后的文本内容
            tv.setText(elipseString);
            //将textview设成选中状态 true用来表示文本未展示完全的状态,false表示完全展示状态，用于点击时的判断
            tv.setSelected(true);
            // 不设置没有点击效果
            tv.setMovementMethod(LinkMovementMethod.getInstance());
            // 设置点击后背景为透明
            tv.setHighlightColor(tv.getContext().getResources().getColor(R.color.transparent));
        } else {
            //没有超过 直接设置文本
            SpannableString spannableString = new SpannableString(content);
            spannableString.setSpan(activeClick, 0, active.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            tv.setText(spannableString);
            // 不设置没有点击效果
            tv.setMovementMethod(LinkMovementMethod.getInstance());
            // 设置点击后背景为透明
            tv.setHighlightColor(tv.getContext().getResources().getColor(R.color.transparent));
            if (onTextClickListener != null) {
                onTextClickListener.onOpenClose(true, true);
            }
        }
    }

然后自定义ViewGroup：

/**
 * Created by chen.yingjie on 2019/7/23
 * description 第一个子控件是TextView，第二个子控件紧跟这TextView后面显示。
 * 使用小技巧：给TextView设置lineSpacingExtra来增加行间距，以免第二个子控件显示时遮住TextView。
 */
public class ViewFollowTextViewLayout extends ViewGroup {

    private static final int CHILD_COUNT = 2;//目前支持包含两个子控件，左边必须是TextView，右边是任意的View或ViewGroup

    public ViewFollowTextViewLayout(Context context) {
        this(context, null);
    }

    public ViewFollowTextViewLayout(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new MarginLayoutParams(getContext(), attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int maxWidth = MeasureSpec.getSize(widthMeasureSpec);
        int maxHeight = MeasureSpec.getSize(heightMeasureSpec);

        if (getChildCount() == CHILD_COUNT && getChildAt(0) instanceof TextView) {
            TextView child0 = (TextView) getChildAt(0);
            measureChild(child0, widthMeasureSpec, heightMeasureSpec);

            int child0MeasuredWidth = child0.getMeasuredWidth();
            int child0MeasuredHeight = child0.getMeasuredHeight();

            View child1 = getChildAt(1);
            measureChild(child1, widthMeasureSpec, heightMeasureSpec);

            int child1MeasuredWidth = child1.getMeasuredWidth();
            MarginLayoutParams mlp = (MarginLayoutParams) child1.getLayoutParams();
            int child1MeasuredHeight = child1.getMeasuredHeight();

            int contentWidth = child0MeasuredWidth + child1MeasuredWidth + mlp.leftMargin;
            int contentHeight = 0;

            if (contentWidth > maxWidth) {// 一行显示不下
                contentWidth = maxWidth;
                // 主要为了确定内部子View的总宽高
                int child0LineCount = child0.getLineCount();
                int child0LastLineWidth = getLineWidth(child0, child0LineCount - 1);// child0最后一行宽
                int contentLastLineWidth = child0LastLineWidth + child1MeasuredWidth + mlp.leftMargin;

                if (contentLastLineWidth > maxWidth) {// 最后一行显示不下child1
                    contentHeight = child0MeasuredHeight + child1MeasuredHeight + mlp.topMargin;
                } else {// 最后一行能显示的下child1
                    contentHeight = child0MeasuredHeight;
                }
            } else {// 一行显示完整
                contentHeight = child0MeasuredHeight;
            }
            setMeasuredDimension(contentWidth, contentHeight);
        } else {
            setMeasuredDimension(maxWidth, maxHeight);
        }
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        if (getChildCount() == CHILD_COUNT && getChildAt(0) instanceof TextView) {
            int maxWidth = r - l;

            TextView child0 = (TextView) getChildAt(0);
            int child0MeasuredWidth = child0.getMeasuredWidth();
            int child0MeasuredHeight = child0.getMeasuredHeight();

            // 布局child0，这个没什么可说的，位置确定。
            child0.layout(0, 0, child0MeasuredWidth, child0MeasuredHeight);

            View child1 = getChildAt(1);
            int child1MeasuredWidth = child1.getMeasuredWidth();
            MarginLayoutParams mlp = (MarginLayoutParams) child1.getLayoutParams();
            int child1MeasuredHeight = child1.getMeasuredHeight();

            int contentWidth = child0MeasuredWidth + child1MeasuredWidth + mlp.leftMargin;
            // ★★★ 主要为了布局child1 ★★★
            if (contentWidth > maxWidth) {// 一行显示不下
                int child0LineCount = child0.getLineCount();
                int child0LastLineWidth = getLineWidth(child0, child0LineCount - 1);// child0最后一行宽
                int contentLastLineWidth = child0LastLineWidth + child1MeasuredWidth + mlp.leftMargin;

                int left;
                int top;
                if (contentLastLineWidth > maxWidth) {// 最后一行显示不下child1
                    left = 0;
                    top = child0MeasuredHeight;
                } else {// 最后一行显示的下child1
                    left = child0LastLineWidth + mlp.leftMargin;
                    top = child0MeasuredHeight - child1MeasuredHeight;
                }
                child1.layout(left, top, left + child1MeasuredWidth, top + child1MeasuredHeight);
            } else {// 一行能显示完整
                int left = child0MeasuredWidth + mlp.leftMargin;
                int top = (child0MeasuredHeight - child1MeasuredHeight) / 2;
                child1.layout(left, top, left + child1MeasuredWidth, top + child1MeasuredHeight);
            }
        }
    }

    /**
     * 获取TextView第lineNum行的宽
     *
     * @param textView
     * @param lineNum
     * @return
     */
    private int getLineWidth(TextView textView, int lineNum) {
        Layout layout = textView.getLayout();
        int lineCount = textView.getLineCount();
        if (layout != null && lineNum >= 0 && lineNum < lineCount) {
            return (int) (layout.getLineWidth(lineNum) + 0.5);
        }
        return 0;
    }
}

使用：
在布局中：

在代码中：

ViewUtil.setLimitLineText(holder.tvDes, 2, activeTxt, item.desc, new ViewUtil.OnTextClickListener() {
            @Override
            public void onActiveClick() {
                	// 超链接点击
                }
            }

            @Override
            public void onOpenClose(boolean canShow, boolean isOpen) {
               
            }
        });