美文网首页自定义控件前端开发那些事儿
Android在TextView的最后一行后面拼接view(类似

Android在TextView的最后一行后面拼接view(类似

作者: 码仔时光 | 来源:发表于2020-07-06 15:35 被阅读0次

其实一开始我是反感这种需求的,因为市面上也没这样的例子吧(当时对比过马蜂窝、飞猪、美团,他们都没采用这种方式)?一般后面的标签都会另起一行单独给位置,不会拼接到TextView后面。但是在这之前已经实现了类似的需求(见android在TextView后添加view实现展开收起查看更多),我也就没纠结太多,直接开干,反正也费不了多少时间。效果如下:

单行效果
多行的效果:
多行的效果
先说一下思路吧,这个景区标题是一个TextView,拼在后面的标签也是一个TextView,这两个TextView被安排在一个frameLayout中。问题的关键点就是后面这个标签的位置问题,也就是通过正确设置后面标签TextView的左上右下margin即可实现拼接在文本后面。具体实现请看代码:
import android.content.Context;
import android.graphics.Color;
import android.text.Layout;
import android.util.AttributeSet;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.widget.FrameLayout;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.core.content.ContextCompat;

/**
 * 在文本后面拼接一个view
 *
 * @author ly
 * date 2020/3/9 10:22
 */
public class AppendViewAfterTextView extends FrameLayout implements ViewTreeObserver.OnGlobalLayoutListener {

    private BoldTextView tv;
    private TextView tvSpecial;
    private String text;
    private FrameLayout.LayoutParams paramsSpecial;
    private int space;

    public AppendViewAfterTextView(@NonNull Context context) {
        super(context);
        init();
    }

    public AppendViewAfterTextView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public AppendViewAfterTextView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        space = PixelUtil.dp2px(5);

        tv = new BoldTextView(getContext());
        tv.setTextSize(21);
        tv.setLineSpacing(1.0f, 1.2f);
        tv.setIncludeFontPadding(false);
        setTextColor(ContextCompat.getColor(getContext(), R.color.black_text1));

        tvSpecial = new TextView(getContext());
        tvSpecial.setBackgroundResource(R.drawable.scenic_level_shape);
        tvSpecial.setTextSize(12);
        tvSpecial.setSingleLine();
        tvSpecial.setTextColor(Color.WHITE);

        paramsSpecial = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        tvSpecial.setLayoutParams(paramsSpecial);

        addView(tv, new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
        addView(tvSpecial);
    }

    @Override
    public void onGlobalLayout() {
        //为保证TextView.getLayout()!=null,在这里再执行相关逻辑
        setMoreViewPosition();
        //记得移除,不然会一直回调
        tv.getViewTreeObserver().removeOnGlobalLayoutListener(this);
    }

    private void setMoreViewPosition() {
        Layout layout = tv.getLayout();
        if (layout == null)
            return;
        int lineCount = layout.getLineCount();
        float lineWidth = layout.getLineWidth(lineCount - 1);

        //获取最后行最后一个字符的下标
        int lineEnd = layout.getLineEnd(lineCount - 1);
        if (lineWidth + tvSpecial.getMeasuredWidth() + space - (getWidth() - getPaddingRight() - getPaddingLeft()) > 0) {//最后一行显示不下,将最后一行换行
            if (text.length() > 2) {
                //分两个字符到tvSpecial那一行,更协调
                text = text.subSequence(0, text.length() - 2) + "\n" + text.subSequence(text.length() - 2, text.length());
                setText(text);
                return;//setText会重新触发onGlobalLayout
            }
        }
//        int lineH = layout.getLineBottom(lineCount - 1) - layout.getLineTop(lineCount - 1);
        int lineH = layout.getHeight() / layout.getLineCount();
        int lastLineRight = (int) layout.getSecondaryHorizontal(lineEnd);
        paramsSpecial.leftMargin = lastLineRight + space;
        //tvSpecial的中间和tv最后一行的中间上下对齐
        paramsSpecial.topMargin = layout.getHeight() - tv.getPaddingBottom() - lineH / 2 - tvSpecial.getHeight() / 2;
        tvSpecial.setLayoutParams(paramsSpecial);
    }

    public void setText(final String text) {
        this.text = text;
        tv.setText(this.text);
        tv.getViewTreeObserver().addOnGlobalLayoutListener(this);
    }

    public void setSpecialViewText(String text) {
        tvSpecial.setText(text);
    }

    public void setTextColor(int color) {
        tv.setTextColor(color);
    }
}

上述代码的关键呢就是通过获取文本TextView的最后一个字符的x坐标来得到leftMargin以及通过高度差来得到topMargin。获取leftMargin的时候用到一个方法:getSecondaryHorizontal,它是指获取TextView的某个字符右边的x坐标。通过setText和setSpecialViewText暴露给外部,分别设置这俩的文本即可。通过该方式还能拓展出长文本的查看更多及收起
到现在看这个需求,其实也还挺好的,没那么恶心了,算是造了个小轮子。

//都看到这儿了,给个赞再走呗~

相关文章

网友评论

    本文标题:Android在TextView的最后一行后面拼接view(类似

    本文链接:https://www.haomeiwen.com/subject/doawqktx.html