Направляющие линии guildeline

Направляющие линии guildelines в ConstraintLayout предоставляют горизонтальную или вертикальную опорную линию, относительно которой могут позиционироваться компоненты. Это может использоваться, когда группу компонентов необходимо выровнять относительно определенной линии оси. Положение направляющей может быть объявлено в процентах от высоты или ширины родительского контейнера или расположено с определенным смещением от определенной стороны:

• createGuidelineFromAbsoluteLeft(): создает направляющую линию от левой стороны контейнера

• createGuidelineFromAbsoluteRight(): создает направляющую линию от правой стороны контейнера

• createGuidelineFromBottom(): создает направляющую линию от нижней стороны контейнера

• createGuidelineFromTop(): создает направляющую линию от верхней стороны контейнера

• createGuidelineFromStart(): создает направляющую линию от начала контейнера

• createGuidelineFromEnd(): создает направляющую линию от конца контейнера

Все эти функции имеют две версии. Одна принимает параметр fraction - значение Float от 0.0 до 1.0, который представляет долю от направляющей до соответствующей стороны контейнера. Вторая версия принимает параметр offset - отступ в пикселях (Dp) между направляющей и соответствующей стороны контейнера.

Так, в следующем примере создается направляющая, которая расположена на 60% от начальной стороны контейнера (левой стороны при левосторонней ориентации):

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent{
            ConstraintLayout(Modifier.fillMaxSize()) {
                val (box1, box2, box3) = createRefs()
                val guide = createGuidelineFromStart(fraction = .60f)
                Box(Modifier.size(120.dp).background(Color.DarkGray).constrainAs(box1) {
                    top.linkTo(parent.top, margin = 30.dp)
                    end.linkTo(guide)
                })
                Box(Modifier.size(120.dp).background(Color.Red).constrainAs(box2) {
                    top.linkTo(box1.bottom, margin = 20.dp)
                    start.linkTo(guide, margin = 40.dp)
                })
                Box(Modifier.size(120.dp).background(Color.Blue).constrainAs(box3) {
                    top.linkTo(box2.bottom, margin = 40.dp)
                    end.linkTo(guide, margin = 60.dp)
                })
            }
        }
    }
}

Вначале создаем направляющую и сохраняем ссылку на нее в переменную guide:

val guide = createGuidelineFromStart(fraction = .60f)

Далее используем эту направляющую для установки ограничений. Например, для компонента Box с ссылкой box1 по направляющей определяется конечная сторона (правая сторона при левосторонней ориентации)

end.linkTo(guide)

Та же сторона определяется и для компонента box3, только добавляется отступ в 60 пикселей влево:

end.linkTo(guide, margin = 60.dp)

А для box2 по направляющей guide определяется начальная сторона:

start.linkTo(guide, margin = 40.dp)

То есть направляющая guide выступает в качестве оси, вокруг которой расположены компоненты.

Аналогично можно было бы использовать смещение для образования направляющей линии, например, линия со смещением на 200 пикселей от начальной стороны контейнера:

val guide = createGuidelineFromStart(offset = 200.dp)