在 Android Jetpack Compose 中创建带有图标的圆形按钮

在 Android 中，按钮是最基本和最常用的 UI 元素，它允许用户从应用程序上下文调用函数或启动任务。它被提供给用户以在单击的帮助下向应用程序提供输入。这些按钮在很大程度上是可定制的，并且可以根据应用程序的主题更改视觉属性。

在本文中，我们将向您展示如何使用 Jetpack Compose 在 Android 中创建带有图标的圆形按钮。 IDE 准备就绪后，请按照以下步骤操作。

第 1 步：在 Android Studio 中创建一个新项目

要在 Android Studio 中创建新项目，请参阅如何在 Android Studio 中创建/启动新项目。选择模板时，选择Empty Compose Activity 。如果您没有找到此模板，请尝试将 Android Studio 升级到最新版本。我们在Kotlin中演示了该应用程序，因此请确保在创建新项目时选择 Kotlin 作为主要语言。

第 2 步：使用 MainActivity.kt 文件

转到MainActivity.kt文件并参考以下代码。下面是MainActivity.kt文件的代码。代码中添加了注释以更详细地理解代码。

Kotlin

package com.geeksforgeeks.circularbutton
  
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
  
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // Calling the composable function 
            // to display element and its contents
            MainContent()
        }
    }
}
  
// Creating a composable 
// function to display Top Bar
@Composable
fun MainContent(){
    Scaffold(
        topBar = {TopAppBar(
            title = {Text(
                "GFG | Circular Button",
                color = Color.White)},
            backgroundColor = Color(0xff0f9d58)
        ) },
        content = { MyContent()}
    )
}
  
// Creating a Composable function to create
// a Circular Button with an Icon inside it
// Calling this function as content in the above function
@Composable
fun MyContent(){
    
    // Fetching the local context
    val mContext = LocalContext.current
    Column(Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally) {
  
         // Creating an Outlined Button and setting
        // the shape attribute to CircleShape
        // When the Button is clicked, a Toast 
        // message would be displayed
        OutlinedButton(onClick = { Toast.makeText(mContext, "This is a Circular Button with a + Icon", Toast.LENGTH_LONG).show()},
            modifier= Modifier.size(100.dp),
            shape = CircleShape,
            border= BorderStroke(5.dp, Color(0XFF0F9D58)),
            contentPadding = PaddingValues(0.dp),
            colors = ButtonDefaults.outlinedButtonColors(contentColor =  Color.Blue)
        ) {
            // Adding an Icon "Add" inside the Button
            Icon(Icons.Default.Add ,contentDescription = "content description", tint=Color(0XFF0F9D58))
        }
  
    }
}
  
// For displaying preview in the 
// Android Studio IDE emulator
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MainContent()
}

输出：

当您运行该应用程序时，您可以看到一个圆形按钮出现，其中带有一个“+”图标。