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 ☆

  • NormalThe default
  • Italicitalics
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 laterrebuildI can’t find it otherwisefontthe
  • 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.LeftIt means no matter what language you speak, you’re on the left
  • TextAlign.StartWill 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
  • ClipTrim the overflow
  • EllipsisUse an ellipsis to indicate the overflow
  • VisibleThere 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
  • falseIt is positioned as having infinite horizontal space
  • trueThere 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.

  • NoneTurn off font composition. ifFontFamilyIf bold and italic are not present, they will not be synthesized
  • WeightifFontFamilyIf not provided in, only bold is synthesized. Slanted fonts will not be synthesized.
  • StyleifFontFamilyIs not available, only slant fonts are synthesized. Bold fonts will not be synthesized.
  • AllifFontFamilyIf 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

  • LtrFrom left to right
  • RtlFrom 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
  • colorThe background color

  • blurRadiusFuzzy radius

  • offsetThe offset

Geometric transformation

  • scaleXHorizontal scaling defaults to 1F without scaling
style = TextStyle(
    textGeometricTransform = TextGeometricTransform(
        scaleX = 1f,
        skewX = 0f
    )
)
Copy the code

  • skewXTilt 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