Установка отступов и смещения

Отступы

Для установки отступов внутри компонента применяется модификатор padding(), которые имеет несколько вариантов:

// устанавливает отступы от каждой стороны по отдельности
fun Modifier.padding(start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp): Modifier
// устанавливает отступы по вертикали и по горизонтали
fun Modifier.padding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp): Modifier
// устанавливает одно значение для отступов от всех четырех сторон
fun Modifier.padding(all: Dp): Modifier
// устанавливает отступы в виде объекта PaddingValues
fun Modifier.padding(paddingValues: PaddingValues): Modifier

В качестве значения отступов применяются единицы dp. Применим данный модификатор:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent{
            Text(
                "Hello METANIT.COM",
                fontSize=28.sp,
                modifier = Modifier.padding(30.dp)
            )
        }
    }
}

В данном случае устанавливается отступ в 30 единиц между границами компонента Text и его содержимым.

Установка отступов по отдельности:

Modifier.padding(start = 30.dp, top=30.dp, bottom = 25.dp)

Причем необязательно устанавливать отступы от всех четырех сторон, можно задать только те отступы, которые нужны.

Установка отступов по горизонтали и вертикали:

Modifier.padding(horizontal = 25.dp, vertical = 25.dp) 

PaddingValues

Тип PaddingValues применяет значения для установки отступов:

public fun PaddingValues(
    start: Dp,
    top: Dp,
    end: Dp,
    bottom: Dp
): PaddingValues

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent{
            val innerPadding = PaddingValues(top = 20.dp, start = 15.dp)
            Text(
                "Hello METANIT.COM",
                fontSize=28.sp,
                modifier = Modifier.padding(innerPadding)
            )
        }
    }
}

Порядок применения отступов

При использовании отступов следует учитывать очередность их применения, например:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.foundation.background
import androidx.compose.ui.graphics.Color

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent{
            Text(
                "Hello METANIT.COM",
                fontSize=28.sp,
                modifier = Modifier.fillMaxSize()
                    .padding(20.dp)     // отступы перед закрашенной областью
                    .background(color= Color.Yellow)
                    .padding(30.dp)     // отступы перед текстом
            )
        }
    }
}

Здесь компонент Text растягивается по всей длине и ширине экрана. При этом к компоненту применяются два отступа. Но один отступ применяется до установки фонового цвета, а другой отступ - после.

В итоге получится, что сначала применяется модификатор padding(20.dp), который устанавливает отступ в 20 единиц между границами компонента и закрашиваемой областью. Затем применяется модификатор padding(30.dp), который устанавливает отступ в 30 единиц между границами закрашенной области и содержимым - текстом.

Сдвиг

Для сдвига содержимого компонента по горизонтали и вертикали применяется модификатор offset. Он имеет следующие версии:

fun Modifier.offset(x: Dp = 0.dp, y: Dp = 0.dp): Modifier
fun Modifier.offset(offset: Density.() -> IntOffset): Modifier

Посмотрим на использование первой версии модификатора:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.offset
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.foundation.background
import androidx.compose.ui.graphics.Color

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent{
            Text(
                "Hello METANIT.COM",
                fontSize=28.sp,
                modifier = Modifier.size(width=300.dp, height=200.dp)
                    .background(color= Color.LightGray)
                    .offset(x=30.dp, y=50.dp)
            )
        }
    }
}

В данном случае сдвигаем содержимое компонента Text на 30 единиц по горизонтали и на 50 единиц по вертикали.

Как и в случае с отступами следует учитывать порядок применения модификаторов. Так, изменим из предыдущего примера компонент Text следующим образом:

Text(
	"Hello METANIT.COM",
	fontSize=28.sp,
	modifier = Modifier.size(width=300.dp, height=200.dp)
                    .offset(x=30.dp, y=50.dp)
                    .background(color= Color.LightGray)
)

В предыдущем примере сначала применялся фоновый цвет, а лишь затем смещение. Теперь же, наоборот, соответственно мы увидим, что сначала будет производиться смешение содержимого компонента, а затем окрашивание фоновым цветом:

При этом можно передавать не только положительные, но отрицательные значения. В этом случае сдвиг идет в противоположном направлении.