Как объединить Custom View с пользовательской разметкой (Custom Layout)

Объединение Custom View с пользовательской разметкой (Custom Layout)

В Android разработке объединение Custom View с Custom Layout — это мощный подход для создания сложных, переиспользуемых UI-компонентов, которые управляют как собственным внешним видом, так и расположением дочерних элементов. Это позволяет создавать высокоспециализированные виджеты, такие как кастомные панели инструментов, навигационные панели или сложные анимационные контейнеры.

Ключевые концепции

1. Custom View — наследуется от View или ViewGroup. Отвечает за отрисовку (onDraw()) и измерение (onMeasure()).
2. Custom Layout — наследуется от ViewGroup. Управляет расположением дочерних элементов через onLayout() и onMeasure().
3. Объединение — создание класса, который наследует от ViewGroup и реализует логику как отрисовки, так и компоновки.

Шаги реализации

1. Создание класса, наследующего от ViewGroup

class CombinedCustomView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : ViewGroup(context, attrs, defStyleAttr) {

    // Локальные переменные для хранения состояния отрисовки
    private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = Color.BLUE
        style = Paint.Style.FILL
    }
    private var cornerRadius = 16f.dpToPx() // dp в пиксели

    init {
        // Чтение кастомных атрибутов из XML
        context.theme.obtainStyledAttributes(
            attrs,
            R.styleable.CombinedCustomView,
            defStyleAttr,
            0
        ).apply {
            try {
                cornerRadius = getDimension(
                    R.styleable.CombinedCustomView_cornerRadius, 
                    cornerRadius
                )
            } finally {
                recycle()
            }
        }
    }
}

2. Реализация измерения (onMeasure)

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
    var totalWidth = 0
    var totalHeight = 0
    
    // Измеряем каждого ребенка
    for (i in 0 until childCount) {
        val child = getChildAt(i)
        if (child.visibility != View.GONE) {
            // Создаем MeasureSpec для ребенка (пример: wrap_content поведение)
            val childWidthSpec = MeasureSpec.makeMeasureSpec(
                MeasureSpec.getSize(widthMeasureSpec),
                MeasureSpec.AT_MOST
            )
            val childHeightSpec = MeasureSpec.makeMeasureSpec(
                MeasureSpec.getSize(heightMeasureSpec),
                MeasureSpec.AT_MOST
            )
            child.measure(childWidthSpec, childHeightSpec)
            
            // Аккумулируем размеры для нашего View
            totalWidth = max(totalWidth, child.measuredWidth)
            totalHeight += child.measuredHeight
        }
    }
    
    // Добавляем отступы и минимальные размеры
    val paddingHorizontal = paddingLeft + paddingRight
    val paddingVertical = paddingTop + paddingBottom
    val desiredWidth = totalWidth + paddingHorizontal
    val desiredHeight = totalHeight + paddingVertical + 50 // +50 для кастомной отрисовки
    
    // Устанавливаем финальные размеры
    setMeasuredDimension(
        resolveSize(desiredWidth, widthMeasureSpec),
        resolveSize(desiredHeight, heightMeasureSpec)
    )
}

3. Реализация компоновки (onLayout)

override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
    var currentTop = paddingTop + 50 // Отступ для кастомной графики
    
    for (i in 0 until childCount) {
        val child = getChildAt(i)
        if (child.visibility != View.GONE) {
            val childWidth = child.measuredWidth
            val childHeight = child.measuredHeight
            
            // Располагаем ребенка по центру горизонтально
            val childLeft = paddingLeft + (width - paddingLeft - paddingRight - childWidth) / 2
            child.layout(
                childLeft,
                currentTop,
                childLeft + childWidth,
                currentTop + childHeight
            )
            
            currentTop += childHeight + 10 // Добавляем вертикальный отступ
        }
    }
}

4. Добавление кастомной отрисовки (onDraw)

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    
    // Рисуем фон с закругленными углами
    val backgroundRect = RectF(
        paddingLeft.toFloat(),
        paddingTop.toFloat(),
        (width - paddingRight).toFloat(),
        (paddingTop + 50).toFloat()
    )
    canvas.drawRoundRect(backgroundRect, cornerRadius, cornerRadius, paint)
    
    // Добавляем текст или другие графические элементы
    paint.color = Color.WHITE
    paint.textSize = 18f.dpToPx()
    canvas.drawText(
        "Custom Header",
        paddingLeft.toFloat() + 20,
        paddingTop.toFloat() + 30,
        paint
    )
}

Определение кастомных атрибутов

В res/values/attrs.xml:

<resources>
    <declare-styleable name="CombinedCustomView">
        <attr name="cornerRadius" format="dimension" />
        <attr name="headerColor" format="color" />
        <attr name="showHeader" format="boolean" />
    </declare-styleable>
</resources>

Использование в XML

<com.example.app.CombinedCustomView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    app:cornerRadius="8dp"
    app:headerColor="@color/primary"
    app:showHeader="true">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Child 1" />
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Child 2" />

</com.example.app.CombinedCustomView>

Преимущества подхода

• Полный контроль — управление и отрисовкой, и компоновкой в одном месте
• Высокая производительность — минимизация количества View в иерархии
• Переиспользуемость — создание самодостаточных компонентов
• Согласованность — единая логика измерения и отрисовки

Рекомендации

1. Всегда учитывайте отступы (padding) в расчетах
2. Правильно обрабатывайте состояние GONE у дочерних элементов
3. Используйте кеширование измерений для оптимизации производительности
4. Обеспечьте корректную работу с кастомными атрибутами
5. Реализуйте сохранение состояния через Parcelable для конфигурационных изменений

Объединение Custom View и Custom Layout требует глубокого понимания жизненного цикла View в Android, но дает максимальную гибкость при создании сложных UI-компонентов.