Установка размеров

Для установки размеров компонентов в Jetpack Compose определен целый ряд модификаторов:

• Modifier.height(): устанавливает высоту

• Modifier.width(): устанавливает ширину

• Modifier.fillMaxHeight(): растягивает компонент по всей длине контейнера

• Modifier.heightIn(): устанавливает минимальную и максимальную высоту

• Modifier.widthIn(): устанавливает минимальную и максимальную ширину

• Modifier.size(): устанавливает размер

• Modifier.sizeIn(): устанавливает минимальный и максимальный размер

Для установки применяются единицы dp (device-independent pixels/density-independent pixels или независимые от устройства/плотности пиксели).

Например, установим для компонента Text высоту и ширину:

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.height
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
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.background(color=Color.LightGray).width(300.dp).height(200.dp)
            )
        }
    }
}

Обратите внимание, как устанавливаются значения - после числа перед dp идет точка.

Модификаторы width и height, как и другие модификаторы установки размеров, определены в пакете androidx.compose.foundation.layout. Мы их можем импортировать по отдельности:

import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width

Также можно подключить сразу все подобные модификаторы, что удобно при использовании сразу нескольких из них:

import androidx.compose.foundation.layout.*

С помощью модификатора size() можно объединить установку высоты и ширины:

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.size
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
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.background(color=Color.LightGray).size(width = 300.dp, height= 200.dp)
            )
        }
    }
}

Если высота и ширина совпадают, то можно передать в функцию size() только одно общее значение. Например, установка ширины и высоты в 300 единиц:

modifier = Modifier.background(color=Color.LightGray).size(300.dp)

Установка минимальных и максимальных размеров

Модификаторы heightIn() и widthIn() принимают два значения - минимальные и максимальные значения. Например:

modifier = Modifier.background(color=Color.LightGray)
                    .widthIn(min = 100.dp, max = 400.dp)
                    .heightIn(min=50.dp, max=300.dp)

С помощью sizeIn можно сократить определение размеров:

modifier = Modifier.background(color=Color.LightGray)
                    .sizeIn(minWidth = 100.dp, maxWidth = 400.dp, minHeight= 50.dp, maxHeight= 300.dp)

Растяжение по всей длине и ширине контейнера

Отдельная группа модификаторов позволяет растянуть компонент по все длине и(или) ширине контейнера:

• Modifier.fillMaxWidth(): растягивает компонент по всей ширине контейнера

• Modifier.fillMaxHeight(): растягивает компонент по всей высоте контейнера

• Modifier.fillMaxSize(): растягивает компонент по всей длине и ширине контейнера

Например, растянем компонент Text по всей ширине и длине контейнера:

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.fillMaxSize
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
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.background(color=Color.LightGray).fillMaxSize()
            )
        }
    }
}

В качестве параметра модификаторы Modifier.fillMaxWidth(), Modifier.fillMaxHeight() и Modifier.fillMaxSize() принимают множитель, который устанавливает, какую часть от размеров контейнера займет компонент. Это значение имеет тип Float и находится в диапазоне от 0.0 до 1.0. Например:

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.fillMaxSize
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
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.background(color=Color.LightGray).fillMaxSize(0.5f)
            )
        }
    }
}

Переданное в функцию fillMaxSize() значение 0.5f указывает, что компонент получит половину (или 0.5) от ширины и длины контейнера.