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;
    }
}

使用：
在布局中：

<com.haodou.recipe.widget.ViewFollowTextViewLayout
        android:id="@+id/followTvLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tvDes"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:lineSpacingExtra="2dp"
            android:textColor="@color/white"
            android:textSize="13sp"
            tools:text="我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/tvArrowDesc"
                android:textSize="13sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="2dp"
                android:drawableRight="@drawable/arrow_down"
                android:gravity="center_vertical" />

            <TextView
                android:id="@+id/tvMaterial"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:background="@drawable/more_cooking_shape"
                android:drawableLeft="@drawable/full_screen_ingredient_icon"
                android:drawablePadding="2dp"
                android:drawableRight="@drawable/full_screen_little_arrow"
                android:paddingBottom="1dp"
                android:paddingLeft="4dp"
                android:paddingRight="4dp"
                android:paddingTop="1dp"
                android:text="食材，食材等"
                android:textColor="@color/v333333"
                android:textSize="10sp" />

        </LinearLayout>
    </com.haodou.recipe.widget.ViewFollowTextViewLayout>

在代码中：

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

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