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