Иконки и компоненты IconButton и IconToggleButton

Компонент IconButton представляет кликабельную иконку, по нажатию на которую можно выполнить некоторые действия. То есть, фактически он объединяет иконку и кнопку. Обычно этот компонент применяется в панелях инстументов.

Данный компонент имеет следующие параметры:

@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

Параметры функции компонента:

• onClick: представляет функцию-обработчик нажатия кнопки

• modifier: предствляет объект Modifier, который определяет модификаторы кнопки

• enabled: значение типа Boolean устанавливает, доступна ли кнопка для нажатия. По умолчанию равно true (то есть кнопка доступна для нажатия)

• interactionSource: представляет объект типа MutableInteractionSource, который устанавливает поток взаимодействий для кнопки. Значение по умолчанию - remember { MutableInteractionSource() }

• content: содержимое кнопки - обычно представляет иконку в виде объекта типа Icon. В качестве иконки можно использовать встроенные иконки из пакета androidx.compose.material.icons.Icons. А также можно создавать и использовать свои иконки.

Определим простейшую кнопку-иконку:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Info
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            IconButton(onClick = { }) {
                Icon(Icons.Filled.Info, contentDescription = "Информация о приложении")
            }
        }
    }
}

Компонент Icon, который задает иконку, имеет ряд версий:

@Composable
fun Icon(
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
): Unit

@Composable
fun Icon(
    bitmap: ImageBitmap,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
): Unit

@Composable
fun Icon(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
): Unit

Во всех трех версиях первый параметр представляет рисунок, который отображается на иконке. В примере выше этому параметру передавалась встроенная иконка Icons.Filled.Info. Jetpack Compose располагает большим набором встроенных иконок. Весь этот набор можно посмотреть по ссылке Icons

Второй параметр - contentDescription задает описание иконки, которое используется сервисами accessibility. Данное описание нигде в визуальном интерфейсе не оображается и служит только для служебных целей.

Третий параметр - modifier - объект Modifier, который, как и для других компонентов, задает модификаторы для данного компонента.

Четвертый параметр - tint устанавливает цвет иконки.

Например, немного изменить иконку:

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.material.icons.Icons
import androidx.compose.material.icons.filled.Info
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            IconButton(onClick = {  }) {
                Icon(
                    Icons.Filled.Info,
                    contentDescription = "Информация о приложении", modifier = Modifier.size(80.dp),
                    tint = Color.Red
                )
            }
        }
    }
}

IconToggleButton

Компонент IconToggleButton фактически предоставляет IconButton, который может находиться в двух состояниях. Он принимает следующие параметры:

@Composable
fun IconToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: () -> Unit
): Unit

Параметры функции компонента:

• checked: значение типа Boolean, которое указывает, будет ли компонент выбран (значение true) или нет (false)

• onCheckedChange: представляет функцию-обработчик нажатия кнопки

• modifier: представляет объект Modifier, который определяет модификаторы кнопки

• enabled: значение типа Boolean устанавливает, доступна ли кнопка для нажатия. По умолчанию равно true (то есть кнопка доступна для нажатия)

• interactionSource: представляет объект типа MutableInteractionSource, который устанавливает поток взаимодействий для кнопки. Значение по умолчанию - remember { MutableInteractionSource() }

• content: содержимое кнопки - обычно представляет иконку в виде объекта типа Icon. В качестве иконки можно использовать встроенные иконки из пакета androidx.compose.material.icons.Icons. А также можно создавать и использовать свои иконки.

Пример с IconToggleButton:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Row
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Info
import androidx.compose.material3.Icon
import androidx.compose.material3.IconToggleButton
import androidx.compose.material3.Text

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val checked = remember { mutableStateOf(false) }
            Row(verticalAlignment = Alignment.CenterVertically){
                IconToggleButton(checked = checked.value, onCheckedChange = { checked.value = it }) {
                    Icon(
                        Icons.Filled.Info,
                        contentDescription = "Информация о приложении",
                        tint = if (checked.value) Color(0xFFEC407A) else Color(0xFFB0BEC5)
                    )
                }
                Text(
                    text = if(checked.value) "Выбрано" else "Не выбрано",
                    fontSize = 28.sp
                )
            }
        }
    }
}

В данном случае для отслеживания, выбрана ли кнопка, определена переменная checked, в зависимости от значения которой устанавливаются тест компонента Text и цвет иконки в IconToggleButton