Jetpack撰写 是Google提供的新工具包。这对于设计漂亮的UI设计很有用。 Android TextView是Android中的简单视图,用于在我们的App中显示文本。在本文中,我们将介绍使用Jetpack Compose在Android中实现TextView的方法。
TextView小部件的属性
Attributes |
Description |
---|---|
text | to set the text which we have to display inside our TextView. |
style | to change the style of TextView in Android. |
color | to change the color of TextView. |
fontSize | to change the font size of our text. |
fontWeight | to set the weight for our font ie. extra bold, dark, and many more |
fontStyle | to set font style to italic. |
fontFamily | to change the font family of our text. |
letterSpacing | to set spacing in between letters of our TextView. |
background | to set background color for our TextView. |
shadow | to add shadow for our TextView. |
textAlign | to change the alignment of our TextView. |
modifier | the modifier is used to add padding to our TextView. |
分步实施
步骤1:创建一个新项目
要在Android Studio Canary版本中创建新项目,请参阅如何使用Jetpack Compose在Android Studio Canary版本中创建新项目。
步骤2:在MainActivity.kt文件中添加TextView
导航到应用程序> Java >您的应用程序的程序包名称,然后打开MainActivity.kt文件。在该文件内,添加以下代码。在代码内部添加了注释,以更详细地了解代码。
Kotlin
package com.example.edittext
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
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.graphics.Shadow
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.TextUnit
import com.example.edittext.ui.EditTextTheme
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
EditTextTheme {
// A surface container using the
// 'background' color from the theme
Surface(
// to add background color for our screen.
color = MaterialTheme.colors.background,
) {
// here we are calling our Composable
// function inside setContent method.
TextView()
}
}
}
}
}
// below is the Composable function
// which we have created for our TextView.
@Composable
fun TextView() {
Column(
// we are using column to align
// our textview to center of the screen.
modifier = Modifier.fillMaxWidth().fillMaxHeight(),
// below line is used for specifying
// vertical arrangement.
verticalArrangement = Arrangement.Center,
// below line is used for specifying
// horizontal arrangement.
horizontalAlignment = Alignment.CenterHorizontally,
) {
// TextView widget.
androidx.compose.foundation.Text(
// below line is for displaying
// text in our text view.
text = "Geeks for Geeks",
// below line is used to add
// style to our text view.
style = TextStyle(
// color is used to provide green
// color to our text view.
color = Color.Green,
// font size to change the
// size of our text view.
fontSize = TextUnit.Sp(30),
// font weight to bold such as light bold,
// extra bold to our text view.
fontWeight = FontWeight.Black,
// font style is i=use to change style
// of our text view to italic and normal.
fontStyle = FontStyle.Italic,
// font family is use to change
// our font family to cursive.
fontFamily = FontFamily.Cursive,
// letter spacing i use to
// provide between letters.
letterSpacing = TextUnit.Companion.Sp(2),
// background is use to specify background
// color to our text view.
background = Color.White,
// shadow to make our
// text view elevated.
shadow = Shadow(color = Color.Gray),
// textALign to align our text view
// to center position.
textAlign = TextAlign.Center,
),
// modifier is use to give
// padding to our text view.
modifier = Modifier.padding(all = Dp(20.0F))
)
}
}
// @Preview function is use to see preview
// for our composable function in preview section.
@Preview
@Composable
fun DefaultPreview() {
MaterialTheme {
// we are passing our composable
// function to display its preview.
TextView()
}
}
输出:
想要一个节奏更快,更具竞争性的环境来学习Android的基础知识吗?
单击此处前往由我们的专家精心策划的指南,以使您立即做好行业准备!