• Jetpack Compose 入门教程之Text

    这个文本显示组件应该是我们最常用的组件,下面会非常细

    归纳

    实例


    下面一一演示这些属性与控制逻辑

    文本的展示


    Text组件 所有构造方法都是text:String,要想用string.xml里面的字符串资源 得使用

    stringResource方法,其相似方法如下


    1. /*
    2.  * Copyright 2019 The Android Open Source Project
    3.  *
    4.  * Licensed under the Apache License, Version 2.0 (the "License");
    5.  * you may not use this file except in compliance with the License.
    6.  * You may obtain a copy of the License at
    7.  *
    8.  *      http://www.apache.org/licenses/LICENSE-2.0
    9.  *
    10.  * Unless required by applicable law or agreed to in writing, software
    11.  * distributed under the License is distributed on an "AS IS" BASIS,
    12.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13.  * See the License for the specific language governing permissions and
    14.  * limitations under the License.
    15.  */
    16.  
    17. package androidx.compose.ui.res
    18.  
    19. import androidx.annotation.ArrayRes
    20. import androidx.annotation.PluralsRes
    21. import androidx.annotation.StringRes
    22. import androidx.compose.runtime.Composable
    23. import androidx.compose.runtime.ReadOnlyComposable
    24.  
    25. /**
    26.  * Load a string resource.
    27.  *
    28.  * @param id the resource identifier
    29.  * @return the string data associated with the resource
    30.  */
    31. @Composable
    32. @ReadOnlyComposable
    33. fun stringResource(@StringRes id: Int): String {
    34.     val resources = resources()
    35.     return resources.getString(id)
    36. }
    37.  
    38. /**
    39.  * Load a string resource with formatting.
    40.  *
    41.  * @param id the resource identifier
    42.  * @param formatArgs the format arguments
    43.  * @return the string data associated with the resource
    44.  */
    45. @Composable
    46. @ReadOnlyComposable
    47. fun stringResource(@StringRes id: Int, vararg formatArgs: Any): String {
    48.     val resources = resources()
    49.     return resources.getString(id, *formatArgs)
    50. }
    51.  
    52. /**
    53.  * Load a string resource.
    54.  *
    55.  * @param id the resource identifier
    56.  * @return the string data associated with the resource
    57.  */
    58. @Composable
    59. @ReadOnlyComposable
    60. fun stringArrayResource(@ArrayRes id: Int): Array {
    61.     val resources = resources()
    62.     return resources.getStringArray(id)
    63. }
    64.  
    65. /**
    66.  * Load a plurals resource.
    67.  *
    68.  * @param id the resource identifier
    69.  * @param count the count
    70.  * @return the pluralized string data associated with the resource
    71.  */
    72. @Composable
    73. @ReadOnlyComposable
    74. fun pluralStringResource(@PluralsRes id: Int, count: Int): String {
    75.     val resources = resources()
    76.     return resources.getQuantityString(id, count)
    77. }
    78.  
    79. /**
    80.  * Load a plurals resource with provided format arguments.
    81.  *
    82.  * @param id the resource identifier
    83.  * @param count the count
    84.  * @param formatArgs arguments used in the format string
    85.  * @return the pluralized string data associated with the resource
    86.  */
    87. @Composable
    88. @ReadOnlyComposable
    89. fun pluralStringResource(@PluralsRes id: Int, count: Int, vararg formatArgs: Any): String {
    90.     val resources = resources()
    91.     return resources.getQuantityString(id, count, *formatArgs)
    92. }
    作用方法
    stringResource(@StringRes id: Int)
    		获取xml指定id字符串资源
    stringResource(@StringRes id: Int, vararg formatArgs: Any)
    		获取xml指定id字符串资源,且格式化占位符号
    stringArrayResource(@ArrayRes id: Int)
    		 
    获取xml指定id字符串资源数组,返回是数组
 
    pluralStringResource(@PluralsRes id: Int, count: Int)
    		根据数字的不同自动选择不同的字符串显示，特别是单复数。
    特别是不同国家的语言对应不同的单复数。
    pluralStringResource(@PluralsRes id: Int, count: Int, vararg formatArgs: Any)

    根据数字的不同自动选择不同的字符串显示，特别是单复数。
    特别是不同国家的语言对应不同的单复数。

    1.  @Composable
    2.     fun showXMLString(){
    3.         Text(text = stringResource(id = R.string.app_name))
    4.     }

    文字颜色
    color属性,但是是Color对象,暂时没看到支持resource的 得转换,估计也是md设计的原因 希望使用CompositionLocal来嫁接,其内置了很多常用色

    1.   @Composable
    2.     fun showTextColor(){
    3.         Text(text = stringResource(id = R.string.app_name), color = Color.Yellow)
    4.     }

    文字大小


    fontSize:UnitType类型

    UnitType 支持sp 和em,app一般用sp,em 网页用得多,估计是为跨平台考虑,kotlin在数字上的拓展转化单位

    1.  @Composable
    2.     fun showTextSize(){
    3.         Text(text = stringResource(id = R.string.app_name), fontSize =30.sp )
    4.     }

    文字粗细
    fontWeight属性
    类型是FontWeight,已经提前预置了很多static常量,当然也可以自己new,常用的

    FontWeight.Bold
    FontWeight.Medium

    FontWeight.Normal

    1. class FontWeight(val weight: Int) : Comparable<FontWeight> {
    2.  
    3.     companion object {
    4.         /** [Thin] */
    5.         @Stable
    6.         val W100 = FontWeight(100)
    7.         /** [ExtraLight] */
    8.         @Stable
    9.         val W200 = FontWeight(200)
    10.         /** [Light] */
    11.         @Stable
    12.         val W300 = FontWeight(300)
    13.         /** [Normal] / regular / plain */
    14.         @Stable
    15.         val W400 = FontWeight(400)
    16.         /** [Medium] */
    17.         @Stable
    18.         val W500 = FontWeight(500)
    19.         /** [SemiBold] */
    20.         @Stable
    21.         val W600 = FontWeight(600)
    22.         /** [Bold] */
    23.         @Stable
    24.         val W700 = FontWeight(700)
    25.         /** [ExtraBold] */
    26.         @Stable
    27.         val W800 = FontWeight(800)
    28.         /** [Black] */
    29.         @Stable
    30.         val W900 = FontWeight(900)
    31.  
    32.         /** Alias for [W100] */
    33.         @Stable
    34.         val Thin = W100
    35.         /** Alias for [W200] */
    36.         @Stable
    37.         val ExtraLight = W200
    38.         /** Alias for [W300] */
    39.         @Stable
    40.         val Light = W300
    41.         /** The default font weight - alias for [W400] */
    42.         @Stable
    43.         val Normal = W400
    44.         /** Alias for [W500] */
    45.         @Stable
    46.         val Medium = W500
    47.         /** Alias for [W600] */
    48.         @Stable
    49.         val SemiBold = W600
    50.         /**
    51.          * A commonly used font weight that is heavier than normal - alias for [W700]
    52.          */
    53.         @Stable
    54.         val Bold = W700
    55.         /** Alias for [W800] */
    56.         @Stable
    57.         val ExtraBold = W800
    58.         /** Alias for [W900] */
    59.         @Stable
    60.         val Black = W900
    61.  
    62.         /** A list of all the font weights. */
    63.         internal val values: List<FontWeight> = listOf(
    64.             W100,
    65.             W200,
    66.             W300,
    67.             W400,
    68.             W500,
    69.             W600,
    70.             W700,
    71.             W800,
    72.             W900
    73.         )
    74.     }
    75.  
    76.     init {
    77.         require(weight in 1..1000) {
    78.             "Font weight can be in range [1, 1000]. Current value: $weight"
    79.         }
    80.     }
    81.  
    82. }
    1.     @Composable
    2.     fun showFontWeight(){
    3.         Text(text = stringResource(id = R.string.app_name), fontWeight = FontWeight.Bold )
    4.     }

    文字对齐方式


    textAlign属性,类型TextAlign对象,固定五6个常量对象

    文字居中实例

    1.   @Composable
    2.     fun showTextAlign(){
    3.         Text(text = "textAlign", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp).background(Color.Blue))
    4.     }


     

    文字阴影

    文字阴影没有一级属性,估计也是不常用,放在了style里面,style的类型是TextStyle,其实所有控制样式的一级属性最后都会merge到TextStyle对象里面,所以能通过一级属性控制的 也基本能通过TextStyle来控制

    1.   @Composable
    2.     fun showTextShadow(){
    3.         Text(text = "textShadow",
    4.             style = TextStyle(shadow = Shadow(color = Color.Gray,
    5.             offset = Offset(10.0f,10.0f),
    6.             blurRadius=3f)))
    7.     }

    文字字体
    fontFamily属性,内置了6种字体

    1.  @Composable
    2.     fun showFontFamily(){
    3.         Column(modifier = Modifier.padding(10.dp)) {
    4.             Text(text = "FontFamily", fontFamily = FontFamily.Serif)
    5.             Text(text = "FontFamily", fontFamily = FontFamily.SansSerif)
    6.         }
    7.     }

    您可以使用 fontFamily 属性来处理 res/font 文件夹中定义的自定义字体和字型：

    font 文件夹的图示" class="l10n-absolute-url-src screenshot" l10n-attrs-original-order="src,alt,width,class" src="https://developer.android.com/static/images/jetpack/compose/text-font-folder.png" width="400" />

    此示例展示了如何根据这些字体文件以及使用 Font 函数定义 fontFamily：

    1. val firaSansFamily = FontFamily(
    2.         Font(R.font.firasans_light, FontWeight.Light),
    3.         Font(R.font.firasans_regular, FontWeight.Normal),
    4.         Font(R.font.firasans_italic, FontWeight.Normal, FontStyle.Italic),
    5.         Font(R.font.firasans_medium, FontWeight.Medium),
    6.         Font(R.font.firasans_bold, FontWeight.Bold)
    7. )

    富文本样式


    AnnotatedString类型,类型Android spanString,ios attributeString

    通过spanStyle 来可以控制文字样式 字重 颜色,背景色等等

    1.  @Composable
    2.     fun MultipleStylesInText() {
    3.         Text(
    4.             buildAnnotatedString {
    5.                 withStyle(style = SpanStyle(color = Color.Blue)) {
    6.                     append("H")
    7.                 }
    8.                 append("ello ")
    9.  
    10.                 withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
    11.                     append("W")
    12.                 }
    13.                 append("orld")
    14.             }
    15.         )
    16.     }

    还可以设置段落样式，如下设置段落间距

    1. @Composable
    2.     fun ParagraphStyleDemo() {
    3.         Text(
    4.             buildAnnotatedString {
    5.                 withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {
    6.                     withStyle(style = SpanStyle(color = Color.Blue)) {
    7.                         append("Hello\n")
    8.                     }
    9.                     withStyle(
    10.                         style = SpanStyle(
    11.                             fontWeight = FontWeight.Bold,
    12.                             color = Color.Red
    13.                         )
    14.                     ) {
    15.                         append("World\n")
    16.                     }
    17.                     append("Compose")
    18.                 }
    19.             }
    20.         )
    21.     }

    行数限制


    maxLines,android 开发用得比较常见,不多说,看效果
     

    1.  @Composable
    2.     fun showMaxLine(){
    3.         Box(modifier = Modifier.width(100.dp)) {
    4.             Text("床前明月光,疑是地上双,举头望明月,低头思故乡", maxLines = 2, modifier = Modifier
    5.                 .padding(15.dp)
    6.                 .background(Color.Gray))
    7.         }
    8.     }

    文字溢出

    用于控制文字截断得时候表现形式,如尾部三个点 

    相比于Android 还是特别少

    1.    Text("床前明月光,疑是地上双,举头望明月,低头思故乡",
    2.                 maxLines = 2,
    3.                 overflow = TextOverflow.Ellipsis,
    4.                 modifier = Modifier
    5.                 .padding(15.dp)
    6.                 .background(Color.Gray))

    文字选中


    compose 需要套一个SelectionContainer才能实现长按划选文字
     

    1.     @Composable
    2.     fun showSelectableText() {
    3.         SelectionContainer {
    4.             Text("支持划选的文字")
    5.         }
    6.     }

    而且还支持多个Text组件实现划选

    1.   @Composable
    2.     fun showMutiSelectableText() {
    3.         SelectionContainer(modifier = Modifier.padding(10.dp)) {
    4.             Column {
    5.                 Text("支持划选的文字第一个")
    6.                 Text("支持划选的文字第二个")
    7.                 Text("支持划选的文字第三个")
    8.             }
    9.         }
    10.     }

    当然也支持局部屏蔽 不让划选

    1.    @Composable
    2.     fun showMutiSelectableText() {
    3.         SelectionContainer(modifier = Modifier.padding(10.dp)) {
    4.             Column {
    5.                 Text("支持划选的文字第一个")
    6.                 DisableSelection {
    7.                     Text("支持划选的文字第二个")
    8.                 }
    9.                 Text("支持划选的文字第三个")
    10.             }
    11.         }
    12.     }


    点击文字的位置


    ClickableText可以获取点击文字的位置

    1. @Composable
    2.     fun showClickableText(){
    3.         ClickableText(text = AnnotatedString("这个文字支持点击位置获取"), onClick ={ offset->
    4.             println("===========>点击位置${offset}");
    5.             Toast.makeText(this,"点击未知${offset}",Toast.LENGTH_SHORT);
    6.         })
    7.     }

    所有实例demo地址

  • 相关阅读:
    前端研习录（11）——CSS3新特性——圆角及阴影讲解及示例说明
    增量式PID
    NR CSI(四) PMI
    生产设备上的静电该如何处理?
    关于汽车维修类中译英的英语翻译
    黑马Java笔记第二讲—java基础
    Spring Boot Offset分页、Keyset 分页与Thymeleaf教程
    mvc:view controller view-name爆红
    对比SQL学习power bi--(1)分组求和后，再平均！
    键盘打字盲打练习系列之认识键盘——0
  • 原文地址：https://blog.csdn.net/axuanqq/article/details/132733626