android 添加浮动标签在textView最尾端，自动换行
2020-09-22 本文已影响0人
Kael_祈求者
1.文章背景
最近在做一个需求，效果图如下:先上张图
image
就是动态根据textView文本，追随一个标签在 最后面~
其实代码也很简单，就是动态计算textView文本的宽度 和 标签的宽度，
如何两个之和 大于父控件的宽度，这时候件需要把标签的位置改变，
这边我们可以使用自定义ViewGroup,然后通过layout(l,t,r,b) or 是通过topMargin 来控制~
下面我们来看看整体代码：
### MainActivity::
class FollowActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_follow)
text1.text = "您已经成功达到活动入仓数量，11-11-11"
text2.text = "您已经成功达到活动入仓数量，11-11-11出售制定活动"
text3.text = "您已经成功达到活动入仓数量，11-11-11出售制定活动商品可分享,11出售制定活动商品可分享"
}
}
### xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:orientation="vertical"
tools:context=".aes.FollowActivity">
<com.example.myapplication.widget.FollowView
android:id="@+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="200dp" />
<com.example.myapplication.widget.FollowView
android:id="@+id/text2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="100dp" />
<com.example.myapplication.widget.FollowView
android:id="@+id/text3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="100dp" />
</LinearLayout>
下面看看最关键的类，我们自己定义的ViewGroup
### FollowView.java
class FollowView @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : FrameLayout(context, attrs, defStyleAttr) {
companion object {
const val TAG = "FollowView"
}
private var IActivityRuleClick: (() -> Unit)? = null
init {
LayoutInflater.from(context).inflate(R.layout.layout_follow_view, this, true)
activityRules.setOnClickListener {
Log.e(TAG, "onclick rules")
IActivityRuleClick?.invoke()
}
}
var text: String?
get() = activityTitle.text.toString()
set(value) {
if (activityTitle.text != value) {
activityTitle.text = value
}
}
private fun getMaxTextHeight(layout: Layout, maxLine: Int): Int {
val fm = activityTitle.paint.fontMetrics
val lineBottom = if (maxLine > 1) {
layout.getLineBottom(maxLine - 2) + (fm.bottom - fm.top).toInt()
} else {
layout.getLineBottom(maxLine - 1)
}
return lineBottom + activityTitle.paddingTop + activityTitle.paddingBottom
}
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
val parentWidth = MeasureSpec.getSize(widthMeasureSpec);
val titleLayout = activityTitle.layout
val rulesLayout = activityRules.layout
if (titleLayout == null || rulesLayout == null) {
return
}
val lineCount = titleLayout.lineCount
val titleLayoutWidth = titleLayout.getLineWidth(0)
val rulesLayoutWidth = rulesLayout.getLineWidth(0)
if ((titleLayoutWidth + rulesLayoutWidth) >= parentWidth) {
Log.e(TAG, "textView Width > screen Width")
val contentWidthSpec = MeasureSpec.makeMeasureSpec(parentWidth, MeasureSpec.EXACTLY)
val contentHeightSpec = MeasureSpec.makeMeasureSpec(
getMaxTextHeight(
activityTitle.layout,
if (lineCount == 1) lineCount + 1 else lineCount
),
MeasureSpec.EXACTLY
)
activityTitle.measure(contentWidthSpec, contentHeightSpec)
val parentHeight = activityTitle.measuredHeight + paddingTop + paddingBottom
Log.e(
TAG,
"textWidth = " + activityTitle.measuredWidth + " textHeight = " + activityTitle.measuredHeight
)
/**
* action(1)
* 使用topMargin的方式来控制,追加的标签换行
*/
/*
val layoutParams = activityRules.layoutParams as LayoutParams
layoutParams.topMargin = parentHeight - activityRules.measuredHeight
activityRules.layoutParams = layoutParams
*/
setMeasuredDimension(parentWidth, parentHeight)
}
}
override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
super.onLayout(changed, l, t, r, b)
val left = activityTitle.measuredWidth - activityRules.measuredWidth
val top = activityTitle.measuredHeight - activityRules.measuredHeight
val right = activityTitle.measuredWidth
val bottom = activityTitle.measuredHeight
/**
* action(2)
* 使用layout的方式来控制,追加的标签换行
*/
activityRules.layout(left, top, right, bottom)
Log.e(TAG, "l = $l,t = $t, r = $r, b = $b")
}
override fun generateDefaultLayoutParams(): LayoutParams {
return super.generateDefaultLayoutParams()
}
override fun generateLayoutParams(lp: ViewGroup.LayoutParams?): ViewGroup.LayoutParams {
return super.generateLayoutParams(lp)
}
override fun generateLayoutParams(attrs: AttributeSet?): LayoutParams {
return super.generateLayoutParams(attrs)
}
### 我们这边使用了一个布局,(layout_follow_view)布局当中就是TextView的文本，和 标签view...方便用户改成图片或者其他的标签
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/activityTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:lineHeight="20dp"
android:textColor="#535365"
android:textSize="12dp"
tools:text="您已经成功达到活动入仓数量，11-11-11出售制定活动商品可分享" />
<TextView
android:id="@+id/activityRules"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="活动规则 > "
android:textColor="#FFAAAABB"
android:textSize="12dp"
android:textStyle="bold" />
</merge>
