自定义view-标签自动换行

自定义view-标签自动换行

CustomView2Fragment类

package com.example.androidkotlindemo2.customview2

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.view.ViewGroup.MarginLayoutParams
import android.widget.TextView
import androidx.appcompat.widget.AppCompatTextView
import androidx.fragment.app.Fragment
import com.example.androidkotlindemo2.R
import com.example.androidkotlindemo2.databinding.CustomView2MainBinding

/**
 * Author : wn
 * Email : maoning20080809@163.com
 * Date : 2024/9/22 12:43
 * Description :
 */
class CustomView2Fragment : Fragment(), View.OnClickListener {

    private lateinit var binding : CustomView2MainBinding

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = CustomView2MainBinding.inflate(inflater, container, false)
        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        binding.customView2Btn1.setOnClickListener(this)
        binding.customView2Btn2.setOnClickListener(this)
    }

    override fun onClick(v: View?) {
        v?:return
        if(v.id == R.id.custom_view2_btn1){
            processPie()
        } else if (v.id == R.id.custom_view2_btn2){
            processTag()
        }
    }

    /**
     * 自定义view自动换行标签
     */
    private fun processTag(){
        //var tagTextView = LayoutInflater.from(requireActivity()).inflate(R.layout.tag_textview_layout, null, false)

        //添加单个
        /*var tagBean = TagBean()
        tagBean.setName("测试0")
        tagBean.setBackgroundColor(resources.getColor(R.color.red))
        tagBean.setMarginWidth(60)
        tagBean.setPaddingWidth(60)
        var tagTextView = TagUtils.createTagTextView(tagBean)
        binding.customView2Layout.addView(tagTextView)*/

        var tagLayout = TagLayout(requireActivity())
        var tagList = TagUtils.getTagTextViewList()
        for (i in 0 until tagList.size) {
            tagLayout.addView(tagList[i])
        }
        binding.customView2Layout.removeAllViews()
        binding.customView2Layout.addView(tagLayout)

    }



    /**
     * 绘制饼图
     */
    private fun processPie(){
        var pieView = PieView(requireActivity())
        var datas = ArrayList<Float>()
        datas.add(1f)
        datas.add(6f)
        datas.add(12f)
        datas.add(4f)
        var colors = ArrayList<Int>()
        colors.add(resources.getColor(R.color.red))
        colors.add(resources.getColor(R.color.green))
        colors.add(resources.getColor(R.color.blue))
        colors.add(resources.getColor(R.color.yellow))
        pieView.setData(datas, colors)
        binding.customView2Layout.removeAllViews()
        binding.customView2Layout.addView(pieView)
    }

}

TagLayout类：

package com.example.androidkotlindemo2.customview2

import android.content.Context
import android.graphics.Rect
import android.util.AttributeSet
import android.view.ViewGroup
import androidx.core.view.marginLeft
import androidx.core.view.marginRight

/**
 * Author : wn
 * Email : maoning20080809@163.com
 * Date : 2024/9/22 15:32
 * Description : 自定义view实现标签摆放
 */
class TagLayout : ViewGroup{

    constructor(context: Context) : this(context, null)
    constructor(context: Context, attributeSet: AttributeSet?) : this(context, attributeSet, 0)
    constructor(context: Context, attributeSet: AttributeSet?, defStyleAttr : Int) : super(context, attributeSet, defStyleAttr)

    private var mChildRectList = mutableListOf<Rect>()

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        var lineHeightUsed = 0
        var lineWidthUsed = 0
        var widthUsed = 0
        var heightUsed = 0

        var widthSize = MeasureSpec.getSize(widthMeasureSpec)
        var widthMode = MeasureSpec.getMode(widthMeasureSpec)

        //第一个view
        if(childCount > 0){
            var childView = getChildAt(0)
            //加上左边距
            lineWidthUsed = + childView.marginLeft
        }

        for(i in 0 until childCount){
            //获取子view
            var childView = getChildAt(i)
            //测量子view尺寸，
            measureChildWithMargins(childView, widthMeasureSpec, 0, heightMeasureSpec, heightUsed)
            if(widthMode != MeasureSpec.UNSPECIFIED && lineWidthUsed + childView.measuredWidth > widthSize){
                //需要换行, 加上左边距
                lineWidthUsed = + childView.marginLeft
                heightUsed += lineHeightUsed
                measureChildWithMargins(childView, widthMeasureSpec, 0, heightMeasureSpec, heightUsed)
            }
            var childRect : Rect
            if(mChildRectList.size >= i){
                //不存在则创建
                childRect = Rect()
                mChildRectList.add(childRect)
            } else {
                childRect = mChildRectList[i]
            }
            //存储child位置信息
            childRect.set(lineWidthUsed, heightUsed, lineWidthUsed + childView.measuredWidth, heightUsed + childView.measuredHeight)
            //更新位置信息

            //一行的宽度，要加上左右边距
            lineWidthUsed += childView.measuredWidth + childView.marginLeft + childView.marginRight
            //获取一行中最大的尺寸
            lineHeightUsed = Math.max(lineHeightUsed, childView.measuredHeight)
            widthUsed = Math.max(lineWidthUsed, widthUsed)
        }

        //使用的宽度和高度就是TagLayout的宽高
        heightUsed += lineHeightUsed
        setMeasuredDimension(widthUsed , heightUsed)
    }

    override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
        if(mChildRectList.size < 1){
            return
        }

        for (i in 0 until childCount) {
            if(mChildRectList.size <= i){
                return
            }
            var childView = getChildAt(i)
            //保存好的位置，设置子view
            var rect = mChildRectList[i]
            childView.layout(rect.left, rect.top, rect.right, rect.bottom)
        }
    }

    override fun generateLayoutParams(attrs: AttributeSet?): LayoutParams {
        return MarginLayoutParams(context, attrs)
    }
}

TagUtils类：

package com.example.androidkotlindemo2.customview2

import android.view.ViewGroup
import android.view.ViewGroup.MarginLayoutParams
import androidx.appcompat.widget.AppCompatTextView
import com.example.androidkotlindemo2.MyApp
import com.example.androidkotlindemo2.R

/**
 * Author : wn
 * Email : maoning20080809@163.com
 * Date : 2024/9/22 16:16
 * Description : 创建多个TextView列表返回
 */
object TagUtils {

    /**
     * 创建多个标签列表
     */
    fun getTagTextViewList() : MutableList<AppCompatTextView>{
        var tagList = mutableListOf<AppCompatTextView>()
        var nameList = arrayListOf("推荐" , "发现12", "热榜1", "测试00", "测试888测试888", "视频")
        //var nameList = arrayListOf("推荐", "发现1234")
        var resources = MyApp.myApp.resources
        var colorList = arrayListOf(resources.getColor(R.color.red), resources.getColor(R.color.green),resources.getColor(R.color.blue),
            resources.getColor(R.color.yellow),resources.getColor(R.color.aqua), resources.getColor(R.color.brown))
        //var colorList = arrayListOf(resources.getColor(R.color.red),resources.getColor(R.color.green))
        for(i in 0 until nameList.size){
            var tagBean = TagBean()
            tagBean.setName(nameList[i])
            tagBean.setBackgroundColor(colorList[i])
            tagBean.setMarginWidth(resources.getDimensionPixelSize(R.dimen.dp_10))
            tagBean.setPaddingWidth(resources.getDimensionPixelSize(R.dimen.dp_14))

            var tagTextView = createTagTextView(tagBean)
            tagList.add(tagTextView)
        }

        return tagList
    }

    /**
     * 创建标签TextView
     */
    fun createTagTextView(tagBean: TagBean) : AppCompatTextView {
        var tagTextView = AppCompatTextView(MyApp.myApp)
        tagTextView.text = tagBean.getName()
        tagTextView.setBackgroundColor(tagBean.getBackgroundColor())
        tagTextView.textSize = 30f

        var layoutParams = MarginLayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)
        //设置左右边界
        layoutParams.leftMargin = tagBean.getMarginWidth()
        layoutParams.rightMargin = tagBean.getMarginWidth()
        tagTextView.layoutParams = layoutParams

        tagTextView.setPadding(tagBean.getPaddingWidth(), 0, tagBean.getPaddingWidth(), 0)
        return tagTextView
    }

}

TagBean类：

package com.example.androidkotlindemo2.customview2

/**
 * Author : wn
 * Email : maoning20080809@163.com
 * Date : 2024/9/22 16:11
 * Description :
 */
class TagBean {

    /**
     * 名称
     */
    private var name:String = ""

    /**
     * 背景颜色
     */
    private var backgroundColor = 0

    /**
     * 左右边距
     */
    private var marginWidth = 0

    /**
     * 左右内边距
     */
    private var paddingWidth = 0

    fun setName(name : String){
        this.name = name
    }
    fun getName() = this.name

    fun setBackgroundColor(backgroundColor : Int){
        this.backgroundColor = backgroundColor
    }
    fun getBackgroundColor() = this.backgroundColor

    fun setMarginWidth(marginWidth : Int){
        this.marginWidth = marginWidth
    }
    fun getMarginWidth() = this.marginWidth

    fun setPaddingWidth(paddingWidth : Int){
        this.paddingWidth = paddingWidth
    }
    fun getPaddingWidth() = this.paddingWidth

}

custom_view2_main.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="@color/red"
        android:textSize="30sp"
        android:layout_marginBottom="30dp"
        android:text="自定义view"/>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/custom_view2_btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="饼图"/>

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/custom_view2_btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="自动换行标签"/>
    </LinearLayout>


    <LinearLayout
        android:id="@+id/custom_view2_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="20dp"
        android:orientation="horizontal"/>


</LinearLayout>