Плавающая кнопка действия в Android с помощью Jetpack Compose
Плавающая кнопка действия добавлена в приложение для Android, чтобы выполнять некоторые важные действия в приложении для Android. Они реализованы в пользовательском интерфейсе приложения Android для некоторых основных действий в приложении. Существуют различные типы плавающих кнопок действий, такие как простые, квадратные и расширенные плавающие кнопки действий. В этой статье мы рассмотрим, как реализовать все различные типы плавающих кнопок действий в Android с помощью Jetpack Compose . Пример видео приведен ниже, чтобы получить представление о том, что мы собираемся делать в этой статье.
Пошаговая реализация
Шаг 1. Создайте новый проект в Android Studio.
Чтобы создать новый проект в Android Studio, обратитесь к разделу «Как создать/запустить новый проект в Android Studio». При выборе шаблона выберите «Пустая активность создания» . Если вы не нашли этот шаблон, попробуйте обновить Android Studio до последней версии. Мы продемонстрировали приложение на Kotlin, поэтому убедитесь, что вы выбрали Kotlin в качестве основного языка при создании нового проекта.
Шаг 2: Работа с файлом Color.kt
Перейдите к файлу app>java>имя пакета вашего приложения>ui.theme>Color.kt и добавьте в него приведенный ниже код. В код добавлены комментарии для более подробного ознакомления.
Kotlin
package com.example.newcanaryproject.ui.theme import androidx.compose.ui.graphics.Color val Purple200 = Color( 0xFF0F9D58 ) val Purple500 = Color( 0xFF0F9D58 ) val Purple700 = Color( 0xFF3700B3 ) val Teal200 = Color( 0xFF03DAC5 ) // on below line we are adding different colors. val greenColor = Color( 0xFF0F9D58 ) |
Шаг 3: Работа с файлом MainActivity.kt
Перейдите к файлу MainActivity.kt и обратитесь к следующему коду. Ниже приведен код файла MainActivity.kt . Комментарии добавляются внутри кода, чтобы понять код более подробно.
Kotlin
package com.example.newcanaryproject import android.app.Activity import android.content.Context import android.os.Bundle import android.widget.Chronometer import android.widget.Toast import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.* import androidx.compose.material.* import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Add import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.* import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.input.TextFieldValue import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.* import com.example.newcanaryproject.ui.theme.* import dev.shreyaspatil.easyupipayment.EasyUpiPayment import dev.shreyaspatil.easyupipayment.listener.PaymentStatusListener import dev.shreyaspatil.easyupipayment.model.PaymentApp import dev.shreyaspatil.easyupipayment.model.TransactionDetails import java.text.SimpleDateFormat import java.util.* class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContent { NewCanaryProjectTheme { // on below line we are specifying background color for our application Surface( // on below line we are specifying modifier and color for our app modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background ) { // on the below line we are specifying the theme as the scaffold. Scaffold( // in scaffold we are specifying the top bar. topBar = { // inside top bar we are specifying background color. TopAppBar(backgroundColor = greenColor, // along with that we are specifying title for our top bar. title = { // in the top bar we are specifying tile as a text Text( // on below line we are specifying // text to display in top app bar. text = "Floating Action Buttons in Android" , // on below line we are specifying // modifier to fill max width. modifier = Modifier.fillMaxWidth(), // on below line we are specifying // text alignment. textAlign = TextAlign.Center, // on below line we are specifying // color for our text. color = Color.White ) }) }) { // on below line we are // calling floating action buttons // to display our fabs. floatingActionButtons() } } } } } } @Composable fun floatingActionButtons() { val ctx = LocalContext.current // on the below line we are creating a column. Column( // on below line we are adding a modifier to it // and setting max size, max height and max width modifier = Modifier .fillMaxSize() .fillMaxHeight() .fillMaxWidth(), // on below line we are adding vertical // arrangement and horizontal alignment. verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { // on below line we are creating a text Text( // on below line we are specifying text as // Session Management in Android. text = "Floating Action Buttons in Android
Jetpack Compose" , // on below line we are specifying text color. color = greenColor, // on below line we are specifying font family fontFamily = FontFamily.Default, // on below line we are adding font weight // and alignment for our text fontWeight = FontWeight.Bold, textAlign = TextAlign.Center ) // on below line adding a spacer Spacer(modifier = Modifier.height( 20 .dp)) // on below line we are creating // a simple floating action button FloatingActionButton( // on below line we are adding on click for our fab onClick = { Toast.makeText(ctx, "Simple Floating Action Button" , Toast.LENGTH_SHORT).show() }, // on below line we are adding // background color for our button backgroundColor = greenColor, // on below line we are adding // color for our content of fab. contentColor = Color.White ) { // on below line we are // adding icon for button. Icon(Icons.Filled.Add, "" ) } // on below line adding a spacer Spacer(modifier = Modifier.height( 20 .dp)) // on below line we are creating // a square floating action button FloatingActionButton( // on below line we are // adding on click for our fab onClick = { Toast.makeText(ctx, "Square Floating Action Button" , Toast.LENGTH_SHORT).show() }, // on below line we are // specifying shape for our button shape = RectangleShape, // on below line we are // adding background color. backgroundColor = greenColor, // on below line we are // adding content color. contentColor = Color.White ) { // on below line we are // adding icon for fab. Icon(Icons.Filled.Add, "" ) } // on below line adding a spacer Spacer(modifier = Modifier.height( 20 .dp)) // on below line we are creating // an extended floating action button. ExtendedFloatingActionButton( // on below line we are setting text for our fab text = { Text(text = "Extended FAB" ) }, // on below line we are adding click listener. onClick = { Toast.makeText(ctx, "Extended Floating Action Button" , Toast.LENGTH_SHORT).show() }, // on below line adding // a background color. backgroundColor = greenColor, // on below line we are // adding a content color. contentColor = Color.White, // on below line we are // adding icon for our fab icon = { Icon(Icons.Filled.Add, "" ) } ) } } |
Теперь запустите ваше приложение, чтобы увидеть результат.
Выход: