美文网首页Android进阶之路Android自定义控件
android 添加浮动标签在textView最尾端,自动换行

android 添加浮动标签在textView最尾端,自动换行

作者: Kael_祈求者 | 来源:发表于2020-09-22 18:33 被阅读0次

    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>
    
    整体就说完了,这种场景在做需求中还是很多场景的,所以这边就记录下来,分享给更多人!同时自己也对ViewGroup的 计算宽高,和重新定位某个子View的位置 复习了下!!

    相关文章

      网友评论

        本文标题:android 添加浮动标签在textView最尾端,自动换行

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