Создание границы. Модификатор border

Модификатор border позволяет определить границу вокруг компонента. Этот модификатор имеет следующие определения:

Modifier.border(border: BorderStroke, shape: Shape = RectangleShape)
Modifier.border(width: Dp, brush: Brush, shape: Shape = RectangleShape)
Modifier.border(width: Dp, color: Color, shape: Shape = RectangleShape)

Первый вариант в качестве первого параметра принимает объект BorderStroke, в который через конструктор передается ширина линии в единицах dp и ее цвет в виде объекта Brush:

BorderStroke(width: Dp, brush: Brush)

Последний параметр представляет объект Shape, который определяет форму контура вокруг компонента. По умолчанию это RectangleShape, который представляет прямоугольную область.

Второй и третий варианты по сути повторяют первый вариант, только в третьем случае для установки цвета применяется объект Color.

Определим границу вокруг компонента Text:

package com.example.helloapp

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

import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello METANIT.COM!",
                fontSize = 28.sp,
                modifier = Modifier
                    .padding(10.dp)
                    .border(width = 2.dp, color = Color.Black)
            )
        }
    }
}

Здесь вокруг текста создается граница черного цвета толщиной в 2 единицы:

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

Text("Hello METANIT.COM!",
    fontSize = 28.sp,
    modifier = Modifier
                .padding(10.dp)     // отступы между границей компонента и границами контейнера
                .border(width = 2.dp, color = Color.Black)
                .padding(10.dp)     // отступы между границей и содержимым компонента
)

Аналогичным образлм можно закрасить область внутри границы:

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.border
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.sp

import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello METANIT.COM!",
                fontSize = 28.sp,
                modifier = Modifier
                    .padding(10.dp)
                    .border(width = 2.dp, color = Color.DarkGray)
                    .background(Color.LightGray)
                    .padding(10.dp)
            )
        }
    }
}

По умолчанию в качестве формы границы применяется объект RectangleShape, который определяет прямоугольную область. В частности, одна из наиболее используемых - это округлая форма с закруглениями вместо углов. Для ее создания можно применять объект RoundedCornerShape, в конструктор которого передается радиус:

package com.example.helloapp

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

import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello METANIT.COM!",
                fontSize = 28.sp,
                modifier = Modifier
                    .padding(10.dp)
                    .border(width = 2.dp, color = Color.DarkGray, shape= RoundedCornerShape(20.dp))
                    .padding(10.dp)
            )
        }
    }
}