美文网首页
自定义FlowLayout

自定义FlowLayout

作者: 涛涛123759 | 来源:发表于2021-05-24 14:43 被阅读0次

一、自定义FlowLayout

  • 1、自定义view
open class FlowLayout : ViewGroup {
    private val TAG = "FlowLayout"
    //每个item横向间距
    private val mHorizontalSpacing: Int = dp2px(16)
    //每个item横向间距
    private val mVerticalSpacing: Int = dp2px(8)
    // 记录所有的行,一行一行的存储,用于layout
    private val allLines: MutableList<List<View>> = ArrayList()

    // 记录每一行的行高,用于layout
    var lineHeights: MutableList<Int> = ArrayList()

    constructor(context: Context?) : super(context)
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    )
    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        //内存 抖动
        clearMeasureParams()

        val selfWidth = MeasureSpec.getSize(widthMeasureSpec)
        val selfHeight = MeasureSpec.getSize(heightMeasureSpec)

        //保存一行中的所有的view
        var lineViews: MutableList<View> = ArrayList()
        //记录这行已经使用了多宽的size
        var lineWidthUsed = 0
        // 一行的行高
        var lineHeight = 0
        // measure过程中,子View要求的父ViewGroup的宽
        var parentNeededWidth = 0
        // measure过程中,子View要求的父ViewGroup的高
        var parentNeededHeight = 0

        for (i in 0..childCount) {
            val childView = getChildAt(i)
            val lp = childView?.layoutParams
            if (childView?.visibility != View.GONE && lp != null) {
                val childWidthMeasure =
                    getChildMeasureSpec(widthMeasureSpec, paddingLeft + paddingRight, lp.width)
                val childHeightMeasure =
                    getChildMeasureSpec(heightMeasureSpec, paddingTop + paddingBottom, lp.height)
                childView.measure(childWidthMeasure, childHeightMeasure)

                //获取子view的度量宽高
                val measuredChildWidth = childView.measuredWidth
                val measuredChildHeight = childView.measuredHeight
                //如果需要换行
                if (measuredChildWidth + lineWidthUsed + mHorizontalSpacing > selfWidth) {
                    //一旦换行,我们就可以判断当前行需要的宽和高了,所以此时要记录下来
                    allLines.add(lineViews)
                    lineHeights.add(lineHeight)

                    parentNeededHeight += lineHeight + mVerticalSpacing
                    parentNeededWidth =
                        parentNeededWidth.coerceAtLeast(lineWidthUsed + mHorizontalSpacing)

                    lineViews = ArrayList()
                    lineWidthUsed = 0
                    lineHeight = 0
                }

                // view 是分行layout的,所以要记录每一行有哪些view,这样可以方便layout布局
                lineViews.add(childView)
                //每行都会有自己的宽和高
                lineWidthUsed += measuredChildWidth + mHorizontalSpacing
                lineHeight = lineHeight.coerceAtLeast(measuredChildHeight)


                if (i == childCount - 1) {
                    allLines.add(lineViews)
                    lineHeights.add(lineHeight)
                    parentNeededHeight += lineHeight + mVerticalSpacing
                    parentNeededWidth =
                        parentNeededWidth.coerceAtLeast(lineWidthUsed + mHorizontalSpacing)
                }

            }
        }

        //再度量自己,保存
        //根据子View的度量结果,来重新度量自己ViewGroup
        // 作为一个ViewGroup,它自己也是一个View,它的大小也需要根据它的父亲给它提供的宽高来度量
        val widthMode = MeasureSpec.getMode(widthMeasureSpec)
        val heightMode = MeasureSpec.getMode(heightMeasureSpec)
        val realWidth = if (widthMode == MeasureSpec.EXACTLY)
            selfWidth else parentNeededWidth
        val realHeight = if (heightMode == MeasureSpec.EXACTLY)
            selfHeight else parentNeededHeight
        setMeasuredDimension(realWidth, realHeight)
    }

    private fun clearMeasureParams() {
        allLines.clear()
        lineHeights.clear()
    }

    override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
        var curL = paddingLeft
        var curT = paddingTop
        for (i in allLines.indices) {
            val childViews = allLines[i]
            val childHeight = lineHeights[i]
            for (j in childViews.indices) {
                val view = childViews[j]

                var left = curL
                var top = curT
                var right = curL + view.measuredWidth
                var bottom = curT + view.measuredHeight
                view.layout(left, top, right, bottom)
                curL = right + mHorizontalSpacing
            }
            curT += childHeight + mVerticalSpacing
            curL = paddingLeft
        }
    }
    
    fun dp2px(dp: Int): Int {
        return TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP,
            dp.toFloat(),
            Resources.getSystem().displayMetrics
        ).toInt()
    }

    fun addView(views: List<View>?) {
        if (views == null){
            throw NullPointerException("child view not null!")
        }
        views.forEach {
            addView(it)
        }
    }
}
  • 2、Xml布局
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <com.example.kotlindemo.layout.FlowLayout
        android:id="@+id/flowLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
  • 3、使用
class MainActivity : AppCompatActivity() {
    var views: MutableList<View> = arrayListOf()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        for (i in 0 until 10) {
            val textView = TextView(this)
            textView.layoutParams = ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT
            )
            textView.text = if (i % 2 == 0) "哈哈哈哈哈哈$i" else "嗷嗷嗷$i"
            textView.setTextColor(Color.parseColor("#EF0909"))
            textView.setBackgroundColor(Color.parseColor("#03A9F4"))
            textView.textSize = 14f
            views.add(textView)
        }
        flowLayout.addView(views)
    }
}

二、自定义ViewPager解决大小不变问题

  • 1、自定义ViewPager
class MyViewPager : ViewPager {
    private val TAG = "MyViewPager"

    constructor(context: Context) : super(context)
    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        var heightMeasure = heightMeasureSpec
        var height = 0
        Log.d(TAG, "onMeasure: getChildCount: $childCount")
        for (i in 0 until childCount) {
            val childView = getChildAt(i)
            val lp = childView.layoutParams
            val childWidth = getChildMeasureSpec(widthMeasureSpec, 0, lp.width)
            var childHeight = getChildMeasureSpec(heightMeasureSpec, 0, lp.height)
            childView.measure(childWidth, childHeight)

            val h = childView.measuredHeight
            if (h > height){
                height = h
            }
            Log.d(TAG, "onMeasure: $h height: $height")
            heightMeasure = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
        }
        super.onMeasure(widthMeasureSpec, heightMeasure)
    }
}

  • 2、自定义PagerAdapter
class MyPagerAdapter : PagerAdapter {
    private val TAG = "MyPagerAdapter"
    lateinit var mImages: List<String>
    lateinit var mContent: Context

    constructor(images: List<String>, context: Context) : super() {
        this.mImages = images
        this.mContent = context
    }

    override fun instantiateItem(container: ViewGroup, position: Int): Any {
        var pos = position
        pos %= mImages.size
        val view = LayoutInflater.from(mContent)
            .inflate(R.layout.linear_item, container, false)
        val textView = view.findViewById<TextView>(R.id.tv)
        textView.text = mImages[pos]
        container.addView(view)
        return view
    }

    override fun isViewFromObject(view: View, o: Any): Boolean {
        return view == o
    }

    override fun destroyItem(container: ViewGroup, position: Int, o: Any) {
        container.removeView(o as View?)
    }

    override fun getCount(): Int {
        return Int.MAX_VALUE
    }
}
  • 3、自定义PageTransformer
class PageTransform : ViewPager.PageTransformer {
    private val DEFAULT_MIN_ALPHA = 0.3f
    private val mMinAlpha = DEFAULT_MIN_ALPHA

    private val DEFAULT_MAX_ROTATE = 15.0f
    private val mMaxRotate = DEFAULT_MAX_ROTATE
    
    override fun transformPage(view: View, position: Float) {
        if (position < -1) {
            //透明度
            view.alpha = mMinAlpha;
            //旋转
            view.rotation = mMaxRotate * -1
            view.pivotX = view.width.toFloat()
            view.pivotY = view.height.toFloat()

        } else if (position <= 1) {
            if (position < 0) {
                //position是0到-1的变化,p1+position就是从1到0的变化
                //(p1 - mMinAlpha) * (p1 + position)就是(p1 - mMinAlpha)到0的变化
                //再加上一个mMinAlpha,就变为1到mMinAlpha的变化。
                val factor = mMinAlpha + (1 - mMinAlpha) * (1 + position)
                view.alpha = factor
                view.rotation = mMaxRotate * position
                //position为width/2到width的变化
                view.pivotX = view.width * 0.5f * (1 - position)
                view.pivotY = view.height.toFloat()
            } else {
                //minAlpha到1的变化
                val factor = mMinAlpha + (1 - mMinAlpha) * (1 - position)
                view.alpha = factor
                view.rotation = mMaxRotate * position
                view.pivotX = view.width * 0.5f * (1- position)
                view.pivotY = view.height.toFloat()
            }
        } else {
            view.alpha = mMinAlpha
            view.rotation = mMaxRotate
            view.pivotX = 0f
            view.pivotY = view.height.toFloat()
        }
    }
}
  • 5、使用
class MainActivity : AppCompatActivity() {
    private var viewPager: ViewPager? = null
    private var radioGroup: RadioGroup? = null
    private var images: MutableList<String>? = null

    private var index = 0
    private var preIndex = 0
    private val timer: Timer = Timer()
    private val isContinue = true

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        images = ArrayList()
        images?.let {
            it.add("哈哈哈")
            it.add("哈哈哈")
            it.add("哈哈哈")
            it.add("哈哈哈")
            val pagerAdapter = MyPagerAdapter(it, this)
            viewPager?.pageMargin = 30
            viewPager?.offscreenPageLimit = 3
            viewPager?.adapter = pagerAdapter
            viewPager?.addOnPageChangeListener(onPageChangeListener)
            viewPager?.setPageTransformer(true, PageTransform())
            initRadioButton(it.size)
        }

        timer.schedule(object : TimerTask() {
            override fun run() {
                if (isContinue) {
                    handler.sendEmptyMessage(1)
                }
            }
        }, 2000, 2000)
    }

    private fun initRadioButton(length: Int) {
        for (i in 0 until length) {
            val imageView = ImageView(this)
            imageView.setImageResource(R.drawable.rg_selector)
            imageView.setPadding(20, 0, 0, 0)
            radioGroup!!.addView(
                imageView, ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT
            )
            radioGroup!!.getChildAt(0).isEnabled = false
        }
    }

    var onPageChangeListener: OnPageChangeListener = object : OnPageChangeListener {
        override fun onPageScrolled(
            position: Int,
            positionOffset: Float,
            positionOffsetPixels: Int
        ) {
        }

        override fun onPageSelected(position: Int) {
            index = position
            setCurrentDot(index % images!!.size)
        }

        override fun onPageScrollStateChanged(state: Int) {}
    }

    private fun setCurrentDot(i: Int) {
        if (radioGroup!!.getChildAt(i) != null) {
            //当前按钮不可改变
            radioGroup!!.getChildAt(i).isEnabled = false
        }
        if (radioGroup!!.getChildAt(preIndex) != null) {
            //上个按钮可以改变
            radioGroup!!.getChildAt(preIndex).isEnabled = true
            //当前位置变为上一个,继续下次轮播
            preIndex = i
        }
    }

    var handler: Handler = object : Handler() {
        override fun handleMessage(msg: Message) {
            super.handleMessage(msg)
            when (msg.what) {
                1 -> {
                    index++
                    viewPager!!.currentItem = index
                }
            }
        }
    }
}

相关文章

网友评论

      本文标题:自定义FlowLayout

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