巧用FlowLayout，实现界面布局定制

2024-02-04 09:20:49

在Android应用程序开发中，灵活的界面布局至关重要。FlowLayout控件正是帮助开发者轻松实现此目标的利器。通过合理运用FlowLayout，开发者可以根据需要自由定制界面元素的排列方式，打造美观且实用的用户界面。

FlowLayout简介

FlowLayout是一个布局容器，它允许其子控件按照自然顺序依次排列，类似于文本流。子控件的排列顺序遵循先水平再垂直的规则，每行排列到边缘时，下一行将从头开始。FlowLayout提供了一系列属性，开发者可以通过这些属性控制子控件的间距、对齐方式等，实现更精细的布局效果。

自定义属性说明

FlowLayout提供了丰富的自定义属性，允许开发者灵活地调整控件的行为和外观。下面列出一些常用的自定义属性：

android:layout_gravity： 控制子控件在FlowLayout中的对齐方式，支持start、end、center等选项。
android:layout_horizontalSpacing： 设置子控件之间的水平间距。
android:layout_verticalSpacing： 设置子控件之间的垂直间距。
android:lineSpacing： 设置相邻两行之间的间距。
android:orientation： 设置FlowLayout的排列方向，可以是horizontal（水平）或vertical（垂直）。

实现可定制化FlowLayout

为了实现可定制化的FlowLayout，我们需要扩展原生的FlowLayout控件，并添加额外的属性和方法。下面是一个示例代码：

class CustomFlowLayout : FlowLayout {

    private var mGravity: Int = Gravity.START
    private var mHorizontalSpacing: Int = 0
    private var mVerticalSpacing: Int = 0
    private var mLineSpacing: Int = 0

    constructor(context: Context) : super(context) {
        init(context, null)
    }

    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
        init(context, attrs)
    }

    private fun init(context: Context, attrs: AttributeSet?) {
        if (attrs != null) {
            val typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomFlowLayout)
            mGravity = typedArray.getInt(R.styleable.CustomFlowLayout_android_layout_gravity, Gravity.START)
            mHorizontalSpacing = typedArray.getDimensionPixelSize(R.styleable.CustomFlowLayout_android_layout_horizontalSpacing, 0)
            mVerticalSpacing = typedArray.getDimensionPixelSize(R.styleable.CustomFlowLayout_android_layout_verticalSpacing, 0)
            mLineSpacing = typedArray.getDimensionPixelSize(R.styleable.CustomFlowLayout_android_lineSpacing, 0)
            typedArray.recycle()
        }
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)

        val widthSize = MeasureSpec.getSize(widthMeasureSpec)
        val heightSize = MeasureSpec.getSize(heightMeasureSpec)
        val widthMode = MeasureSpec.getMode(widthMeasureSpec)
        val heightMode = MeasureSpec.getMode(heightMeasureSpec)

        var width = 0
        var height = 0

        // 计算子控件的总宽度和总高度
        for (i in 0 until childCount) {
            val child = getChildAt(i)
            measureChild(child, widthMeasureSpec, heightMeasureSpec)
            width += child.measuredWidth + mHorizontalSpacing
            height += child.measuredHeight + mVerticalSpacing
        }

        // 去掉多余的间距
        width -= mHorizontalSpacing
        height -= mVerticalSpacing

        // 计算FlowLayout的宽高
        if (widthMode == MeasureSpec.EXACTLY) {
            width = widthSize
        } else if (widthMode == MeasureSpec.AT_MOST) {
            width = Math.min(width, widthSize)
        }

        if (heightMode == MeasureSpec.EXACTLY) {
            height = heightSize
        } else if (heightMode == MeasureSpec.AT_MOST) {
            height = Math.min(height, heightSize)
        }

        setMeasuredDimension(width, height)
    }

    override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
        super.onLayout(changed, l, t, r, b)

        var left = 0
        var top = 0
        var right = 0
        var bottom = 0

        for (i in 0 until childCount) {
            val child = getChildAt(i)
            val childWidth = child.measuredWidth
            val childHeight = child.measuredHeight

            // 根据对齐方式计算子控件的坐标
            when (mGravity) {
                Gravity.START -> {
                    right = left + childWidth
                    bottom = top + childHeight
                }
                Gravity.END -> {
                    left = right - childWidth
                    top = bottom - childHeight
                }
                Gravity.CENTER -> {
                    left = (width - childWidth) / 2
                    top = (height - childHeight) / 2
                }
            }

            // 布局子控件
            child.layout(left, top, right, bottom)

            // 更新坐标
            left += childWidth + mHorizontalSpacing
            top += childHeight + mVerticalSpacing
        }
    }
}

在自定义FlowLayout中，我们添加了额外的属性和方法，包括mGravity（对齐方式）、mHorizontalSpacing（水平间距）、mVerticalSpacing（垂直间距）和mLineSpacing（行间距）。这些属性可以通过XML属性或Java代码设置。

示例用法

<com.example.myapplication.CustomFlowLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_horizontalSpacing="10dp"
    android:layout_verticalSpacing="15dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Item 1" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Item 2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Item 3" />

</com.example.myapplication.CustomFlowLayout>