其实一开始我是反感这种需求的,因为市面上也没这样的例子吧(当时对比过马蜂窝、飞猪、美团,他们都没采用这种方式)?一般后面的标签都会另起一行单独给位置,不会拼接到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暴露给外部,分别设置这俩的文本即可。通过该方式还能拓展出长文本的查看更多及收起
到现在看这个需求,其实也还挺好的,没那么恶心了,算是造了个小轮子。
//都看到这儿了,给个赞再走呗~
网友评论