preface
Learn to record a wave. Facilitate subsequent reference. It is also convenient for other partners to get started quickly. The official website can be viewed.
According to the text
📌 Previews and comments are omitted for space. Only key information codes are displayed.
@Preview(showBackground = true)
@Composable
fun SimpleText() {
Text(text = "hello world")}Copy the code
You can use stringResource if you want to display text in a resource
Text(stringResource(id = R.string.hello_world))
Copy the code
Font color ☆
Text(
text = stringResource(id = R.string.hello_world),
color = Color.Blue
)
Copy the code
Or use style to define color
📌 you can find the same attribute in TextStyle below. Would add ☆ in the title
Text(
text = value,
style = TextStyle(
color = Color.Blue
)
)
Copy the code
Use colorResource if it is a color in a resource
color = colorResource(id = R.color.black)
Copy the code
Can also be
Color(0xffff0000)
Color(red = 0f, green = 0f, blue = 1f)
Copy the code
Compose doesn’t seem to provide this method, but you can define it for yourself. For example,
// extend the function
fun Color.Companion.parse(colorString: String): Color =
Color(color = android.graphics.Color.parseColor(colorString))
Copy the code
It’s easy to use
color = Color.parse("#FF0000"),
Copy the code
Text size ☆
Text(
text = stringResource(id = R.string.hello_world),
fontSize = 40.sp
)
Copy the code
Font style ☆
Normal
The defaultItalic
italics
Column {
Text(
text = value,
fontStyle = FontStyle.Normal
)
Text(
text = value,
fontStyle = FontStyle.Italic
)
}
Copy the code
Font bold ☆
Text(
text = value,
fontWeight = FontWeight.W800
)
Copy the code
The left and right sides are equivalent
Font do
Text(
text = value,
fontFamily = FontFamily.Default
)
Copy the code
You can use the fontFamily property to handle custom fonts and fonts defined in the RES/FONT folder
- Note that the imported font library name must contain only the lowercase letters AZ, 0-9, or underscore
- Once the introduction is complete, it will be needed later
rebuild
I can’t find it otherwisefont
the- Font download
val fontFamily = FontFamily(
Font(resId = R.font.myfont, weight = FontWeight.Normal)
)
Text(
text = "Demo Text",
style = TextStyle(
fontFamily = fontFamily,
)
)
Copy the code
Space between words
Text(
text = value,
letterSpacing = 2.sp
)
Copy the code
Text decoration
Text(
text = value,
textDecoration = TextDecoration.None
)
Copy the code
Alignment mode ☆
Gravity =’left’
Text(
text = value,
textAlign = TextAlign.Left
)
Copy the code
Justify means close at both ends
Textalign.start and Textalign.left
Some countries write from right to left. Arabic, for example.
TextAlign.Left
It means no matter what language you speak, you’re on the leftTextAlign.Start
Will choose from left or right based on the preference language
Line height nurture
Text(
text = value,
lineHeight = 30.sp
)
Copy the code
The largest number of lines
Text("hello ".repeat(50), maxLines = 2)
Copy the code
Text overflow
Text(
text = value,
overflow = TextOverflow.Ellipsis,
maxLines = 1
)
Copy the code
Clip
Trim the overflowEllipsis
Use an ellipsis to indicate the overflowVisible
There is not enough space in the specified range. Display all text as well
For the last Visible, you can find an example on the website to demonstrate the effects. I’ve simplified it a little bit. The following is an example.
Box(modifier = Modifier
.size(300.dp, 150.dp)
.background(Color.Red)) {
Text(
text = "Hello World".repeat(2),
modifier = Modifier
.size(200.dp, 70.dp)
.background(Color.Yellow),
fontSize = 35.sp,
overflow = TextOverflow.Visible,
)
}
Copy the code
Is not setVisible |
Set upVisible |
---|---|
Line feed processing
Text(
text = value2,
softWrap = false
)
Copy the code
false
It is positioned as having infinite horizontal spacetrue
There are boundaries by default
onTextLayout
The callback that is executed when the new text layout is evaluated. Previews are not printed. Prints only when run
@Preview(showBackground = true)
@Composable
fun SimpleText7() {
val value = "hello world"
Column(Modifier.width(200.dp)) {
Text(
text = value,
onTextLayout = {
Log.i("TAGText",it.toString())
}
)
}
}
Copy the code
As a result, you can see that all the attributes are printed out
2021-04-14 11:40:50.016 16830-16830/com.starot.pencase_compose I/TAGText: TextLayoutResult(layoutInput=TextLayoutInput(
text=hello world,
style=TextStyle(color=Color(0.0.0.0.0.0.1.0, sRGB IEC61966-2.1),
fontSize=Unspecified,
fontWeight=null,
fontStyle=null,
fontSynthesis=null,
fontFamily=null,
fontFeatureSettings=null,
letterSpacing=Unspecified,
baselineShift=null,
textGeometricTransform=null,
localeList=null,
background=Color(0.0.0.0.0.0.0.0, None),
textDecoration=null,
shadow=null,
textAlign=null,
textDirection=null,
lineHeight=Unspecified,
textIndent=null),
placeholders=[],
maxLines=2147483647,
softWrap=true,
overflow=Clip,
density=DensityImpl(density=2.75, fontScale=1.0),
layoutDirection=Ltr,
resourceLoader=androidx.compose.ui.platform.AndroidFontResourceLoader@7058a4b,
constraints=Constraints(minWidth = 0, maxWidth = 550, minHeight = 0, maxHeight = 1977)),
multiParagraph=androidx.compose.ui.text.MultiParagraph@e80ec28,
size=184 x 52,
firstBaseline=41.0,
lastBaseline=41.0, placeholderRects=[])
Copy the code
Text style 🔥
In the TextStyle class of the style property. A lot of that can be done in the Text constructor. But there are still some special properties
The background color
style = TextStyle(
background = Color.Red
)
Copy the code
Baseline shift
Text(
text = value,
style = TextStyle(
baselineShift = BaselineShift.Subscript
)
)
Copy the code
Before specifying this property, understand what a baseline is. Described in Hencoder
Each bird has a different top and bottom, but the picture is balanced, and the baseline used to align all the words with each other is the baseline.
Android Text baseline baseline
How does it actually work?
The author selects three parameters for demonstration.
BaselineShift gives us three default options
Val Superscript = BaselineShift (0.5 f)
Val Subscript = BaselineShift (0.5 f)
Val None = BaselineShift (0.0 f)
Synthesis of font
fontSynthesis = FontSynthesis.All
Copy the code
Composite fonts are used to specify whether the system should forge bold or slanted fonts when the FontFamily used does not contain bold or italic fonts.
None
Turn off font composition. ifFontFamily
If bold and italic are not present, they will not be synthesizedWeight
ifFontFamily
If not provided in, only bold is synthesized. Slanted fonts will not be synthesized.Style
ifFontFamily
Is not available, only slant fonts are synthesized. Bold fonts will not be synthesized.All
ifFontFamily
If bold and slanted fonts are not provided, the system synthesizes them
Text indentation
Text(
text = "hello world".repeat(2),
style = TextStyle(
textIndent = TextIndent(10.sp,10.sp)
)
)
Copy the code
Class TextIndent(val firstLine: TextUnit = 0.sp, val restLine: TextUnit = 0.sp)Copy the code
The text direction
style = TextStyle(
textDirection = TextDirection.Ltr
)
Copy the code
In general. We’re going from left to right. There are also countries where the language is spoken from right to left, such as Arabic
Ltr
From left to rightRtl
From right to left
The following types are based on the Unicode bidirectional algorithm, where text orientation depends on the first strongly oriented character in the text. Applies to text in which there are two different words.
See Unicode control characters for Unicode bidirectional algorithms
Content
ContentOrLtr
ContentOrRtl
Font shadows
style = TextStyle(
shadow = Shadow(
color = Color.Red,
offset = Offset.Zero,
blurRadius = 20.0f
)
)
Copy the code
color
The background color
blurRadius
Fuzzy radius
offset
The offset
Geometric transformation
scaleX
Horizontal scaling defaults to 1F without scaling
style = TextStyle(
textGeometricTransform = TextGeometricTransform(
scaleX = 1f,
skewX = 0f
)
)
Copy the code
skewX
Tilt The default value is 0F
The language environment
style = TextStyle(
localeList = LocaleList(Locale.current)
)
Copy the code
So let’s start with hencoder for locales
Senior typesetting
Text(
text = "Hello World",
style = TextStyle(
fontFeatureSettings = "smcp"))Copy the code
Use CSS font feature-settings to set text