Android全新UI框架之常用ComposeUI组件

最新推荐文章于 2024-04-26 13:21:31 发布
最新推荐文章于 2024-04-26 13:21:31 发布
阅读量1.7k 收藏 15
点赞数 24
分类专栏： jetpack 文章标签： android ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36828822/article/details/136196515
版权

在Compose中，每个组件都是一个带有@Composable注解的函数，被称为Composable。Compose已经预置了很多基于MD设计规范的Composable组件。
在布局方面，Compose提供了Column、Row、Box三种布局组件(感觉跟flutter差不多)，类似于传统视图开发中的LinearLayout(Vertical)、LinearLayout(Horizontal)、RelateiveLayout，可以满足各类产品的常见布局需求。

Modifier修饰符

在传统开发中，使用xml文件来描述组件的样式，而compose则是使用Modifier修饰符。Modifier允许我们通过链式调用的方式为组件应用一系列的样式设置，如边距、字体、位移等。在Compose中，每个基础的Composable组件都有一个modifier参数，通过传入自定义的Modifier来修改组件的样式。

  • 常见修饰符

    Modifier.size设置被修饰组件的大小 Image( painter = painterResource(id = R.drawable.ic_launcher),contentDescription = null, modifier = Modifier.size(width = 10.dp, height = 10.dp) )
    Modifier.background设置被修饰组件的背景颜色。背景色支持纯色背景，也可以使用brush设置渐变背景Image(painter = painterResource(id = R.drawable.ic_launcher),contentDescription = null,modifier = Modifier.size(width = 100.dp, height = 100.dp).background(brush = Brush.verticalGradient(colors = listOf(Color.Blue,Color.Red)))))
    Modifier.fillMaxXXX()让组件在高度或者宽度上填满父空间fillMaxSize():填满整个父空间， fillMaxHeight():高度填满父空间，fillMaxWidth():宽度填满父空间
    Modifier.border&Modifier.paddingborder用来为被修饰组件添加边框。边框可以指定颜色、粗细、以及通过shape指定形状。padding用来为被修饰组件增加间隙。可以在border前后各插入一个padding，区分对外和对内的间距 Box(modifier = Modifier.padding(5.dp).border(2.dp, Color.Green, shape = RoundedCornerShape(2.dp)).padding(5.dp)) { Spacer(modifier = Modifier.size(width = 100.dp, height = 10.dp).background(Color.Blue)) }
    Modifier.offset用来移动被修饰组件的位置，分别传入水平方向和垂直方向的偏移量即可 Box(modifier = Modifier.size(100.dp).background(Color.Blue).offset(x = 10.dp, y = 10.dp).background(Color.Cyan)) {}

  • 作用域限定Modifier修饰符
    Compose充分发挥kotlin的语法特性，让某些Modifier修饰符只能在特定作用域中使用，有利于类型安全地调用它们。所谓“作用域”，在kotlin中就是一个带有Receiver的代码块。注意Receiver代码块默认可以跨层级访问。在compose的DSL中，一般只需要调用当前作用域的方法，为此可以通过@LayoutScopeMarker注解来规避该问题。常见组件的Receiver作用域类型均已使用@LayoutScopeMarker注解进行了声明，使用了该注解之后，像跨级调用外层作用域的方法必须通过显式指明Receiver具体类型。

    @LayoutScopeMarker
@Immutable
interface ColumnScope

    常见的作用域限定Modifier修饰符：

    1. matchParentSize
      matchParentSize是只能在BoxScope中使用的作用域限定修饰符。当使用matchParentSize设置尺寸时，可以保证当前组件的尺寸与父组件相同。而父组件默认的是wrapContent。如果使用fillMaxSize取代matchParentSize，那么该组件的尺寸会被设置为父组件所允许的最大尺寸，这样会导致背景铺满整个屏幕，二者区别如下图所示。

          Column(modifier = Modifier.background(Color.DarkGray)) {
        Box() {
            Box(modifier = Modifier
//                .fillMaxSize()
                .matchParentSize()
                .background(Color.Cyan))
            Spacer(modifier = Modifier.size(50.dp).padding(10.dp).background(Color.Red))
        }
    }

      matchParentSize效果如下所示：
      在这里插入图片描述
      fillMaxSize效果如下所示：在这里插入图片描述

    2. weight
      在RowScope和ColumnScope中，可以使用专属的weight修饰符来设置尺寸。与size不同的是weight允许组件通过百分比设置尺寸，也就是允许组件可以自适应适配各种屏幕尺寸的移动端设备。

          Column(modifier = Modifier
        .background(Color.DarkGray)
        .width(300.dp)
        .height(200.dp)) {
      Spacer(modifier = Modifier
          .fillMaxWidth()
          .weight(1f)
          .background(Color.White))
        Spacer(modifier = Modifier
            .fillMaxWidth()
            .weight(1f)
            .background(Color.Red))
        Spacer(modifier = Modifier.fillMaxWidth().weight(1f).background(Color.Blue))
    }

  • Modifier实现原理
    各位读者可以参考下面这篇博客：
    图解Compose Modifier实现原理 ，竟然如此简单！

常用的基础组件

文字组件
  1. Text文本
    在Compose中，Text是遵循MD设计规范的上层文本组件，如果想脱离MD，也可以直接使用更底层的文本组件BasicText。
    @Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
)
    在很多应用场景中，我们需要在一段文字中对局部内容应用特别格式以示突出，比如一个超链接，此时需要用到AnnotatedString。AnnotatedString是一个数据类，除了文本值，还包含一个SpanStyle和ParagraphStyle的Range列表。SpanStyle用于描述在文本中子串的文字样式，ParagraphStyle则用于描述文本中子串的段落样式，Range确定子串的范围。
    用法如下所示：
    //append用来添加子串的文本
//withStyle为append的子串指定文字或段落样式
Text(text = buildAnnotatedString {
    withStyle(style = SpanStyle(fontSize = 24.sp)){
         append("你现在学习的章节是")
     }
     withStyle(style = SpanStyle(fontSize = 24.sp, fontWeight = FontWeight.W900)){
         append("Text")
     }
     append("\n")
     withStyle(style = ParagraphStyle(lineHeight = 25.sp)){
         append("在刚刚讲过的内容中，我们学会了如何应用文字样式，以及如何限制文本的行数和处理溢出的视觉效果。")
         append("\n")
         append("现在，我们正在学习")
         withStyle(style = SpanStyle(fontWeight = FontWeight.W900, textDecoration = TextDecoration.Underline, color = Color(0xff59a869))){
             append("AnnotatedString")
         }
     }
 })
    SpanStyle继承了TextStyle中关于文字样式相关的字段，而ParagraphStyle继承了TextStyle中控制段落的样式，例如textAlign、lineHeight等。SpanStyle和ParagraphStyle中的设置优先于TextStyle中同名属性设置。

  • SelectionContainer选中文字
    Text自身默认是不能被长按选择的，Compose提供了专门的SelectionContainer组件，对包裹的Text进行选中。

    SelectionContainer() {
    Text(text = "我是可以被复制的文字")
}

  • ClickableText
    Compose提供了一种可点击文本组件，可以响应对文字的点击，并返回点击位置。可以让AnnotatedString子串在相应的ClickedText中点击后，做出不同的动作。在AnnotatedString中可以为子串添加一个tag标签，在处理onClick事件时，根据tag实现不同的逻辑。

     ClickableText(text = annotated, onClick ={
                    annotated.getStringAnnotations(
                        tag = "URL",
                        start = it,
                        end = it
                    ).firstOrNull()?.let {
                        Log.e("MainActivity",it.toString())
                    }
                } )
 
 val annotated = buildAnnotatedString {
        withStyle(style = ParagraphStyle(lineHeight = 25.sp)){
            // 开始一个注解区域
            pushStringAnnotation(tag = "URL", annotation = "https://www.baidu.com")
            // 追加带有注解的文本
            withStyle(
                style = SpanStyle(
                    fontWeight = FontWeight.W900,
                    textDecoration = TextDecoration.Underline,
                    color = Color(0xff59a869)
                )
            ){
                append("AnnotatedString")
            }
            // 结束注解区域
            pop()
            //下面这段文本不会有注解
            withStyle(
                style = SpanStyle(
                    fontWeight = FontWeight.W900,
                    textDecoration = TextDecoration.Underline,
                    color = Color(0xff59a869)
                )
            ){
                append("NotAnnotatedString")
            }
        }
    }

  • TextField输入框
    TextField组件是我们最常用的文本输入框，它也遵循MD设计准则。它也有一个低级别的底层组件，BasicTextField,与TextField和OutlinedTextField不同的是，BasicTextField拥有更多的自定义效果。由于TextField和OutlinedTextField是根据MD准则设计的，无法直接修改输入框的高度，如果尝试修改高度，会看到输入区域被截断，影响正常输入。

    fun TextField(
    value: TextFieldValue,
    onValueChange: (TextFieldValue) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = LocalTextStyle.current,
    label: @Composable (() -> Unit)? = null,
    placeholder: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    supportingText: @Composable (() -> Unit)? = null,
    isError: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    singleLine: Boolean = false,
    maxLines: Int = Int.MAX_VALUE,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = TextFieldDefaults.filledShape,
    colors: TextFieldColors = TextFieldDefaults.textFieldColors()
)
fun BasicTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = TextStyle.Default,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    singleLine: Boolean = false,
    maxLines: Int = Int.MAX_VALUE,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    cursorBrush: Brush = SolidColor(Color.Black),
    decorationBox: @Composable (innerTextField: @Composable () -> Unit) -> Unit =
        @Composable { innerTextField -> innerTextField() }
)

    TextField输入框案例如下：

    @Composable
    fun TextFieldSample(){
        var text by remember {
            mutableStateOf("")
        }
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color(0xfd3d3d3)),
            contentAlignment = Alignment.Center
        ) {
            BasicTextField(
                modifier = Modifier
                    .padding(10.dp)
                    .background(Color.White, CircleShape)
                    .height(30.dp)
                    .fillMaxSize(),
                value = text,
                onValueChange = {text = it},
                decorationBox = {
                    Row(
                        verticalAlignment = Alignment.CenterVertically,
                        modifier = Modifier.padding(vertical = 2.dp, horizontal = 8.dp)
                    ) {
                        Icon(imageVector = Icons.Filled.Search, contentDescription = null)
                        Box(modifier = Modifier
                            .padding(horizontal = 10.dp)
                            .width(100.dp), contentAlignment = Alignment.CenterStart) {
                            if(text.isEmpty()){
                                Text(
                                    text = "输入点东西看看吧～",
                                    style = TextStyle(
                                        color = Color(0,0,0,128)
                                    )
                                )
                            }
                            it()
                        }
                       Box(contentAlignment = Alignment.CenterEnd){
                           if(text.isNotEmpty()){
                               IconButton(
                                   onClick = { text="" },
                                   modifier = Modifier.size(16.dp)) {
                                   Icon(imageVector = Icons.Filled.Close, contentDescription = null, tint = Color.Red)
                               }
                           }
                       }
                    }
                })
        }

    }

  • 图片组件

    1. Icon图标
      Icon组件用于显示一系列小图标。Icon组件支持三种不同类型的图片设置：
    @Composable
fun Icon(
    imageVector: ImageVector,//矢量图对象，可以显示SVG格式的图标
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current
)
@Composable
fun Icon(
    bitmap: ImageBitmap,//位图对象，可以显示JPG、PNG等格式的图标
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current
)
@Composable
fun Icon(
    painter: Painter,//代表一个自定义画笔，可以使用画笔在Canvas上直接绘制图标
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current
)
    1. Image图片
      Image组件用来显示一张图片。它和Icon一样也支持三种类型的图片设置。

  • 按钮组件

    1. Button按钮
      Button也是最常用的组件之一，它也是按照MD风格来实现的。Button并非唯一可点击组件，理论上任何Composable组件都可以通过Modifier.clickable修饰符化身为可点击组件。
      案例如下：
        @Composable
    fun ButtonSample(){
        val interactionSource = remember {
            MutableInteractionSource()
        }
        val pressState = interactionSource.collectIsPressedAsState()
        val borderColor = if (pressState.value) Color.Green else Color.White
        Button(
         modifier = Modifier.clickable {
         //该方法在button组件会失效
            Log.e("MainActivity","点击Butttonclickable")
        },
            interactionSource = interactionSource,
            border = BorderStroke(2.dp, color = borderColor),
            onClick = {
                Log.e("MainActivity","点击Buttton")
            }) {
            Icon(imageVector = Icons.Filled.Done, contentDescription = null, modifier = Modifier.size(ButtonDefaults.IconSize))
            Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))
            Text(text = "确认")
        }
    }
    1. IconButton图标按钮
      IconButton组件实际上只是Button组件的简单封装（一个可点击的图标），它一般用于应用栏中的导航或者其他行为。一般来说，需要在IconButton组件里提供一个图标组件，这个图标的默认尺寸一般为24*24dp。
     IconButton(
    onClick = { text="" },
    modifier = Modifier.size(16.dp)) {
    Icon(imageVector = Icons.Filled.Close, contentDescription = null, tint = Color.Red)
    1. FloatingActionButton悬浮按钮
        @Composable
    fun FloatButton(){
        FloatingActionButton(
            onClick = {}) {
            Row() {
                Text(text = "添加到我的喜欢")
                Icon(imageVector = Icons.Filled.Done, contentDescription = null, modifier = Modifier.size(ButtonDefaults.IconSize))
            }
        }
        ExtendedFloatingActionButton(
            onClick = { /*TODO*/ }) {
            Row() {
                Text(text = "添加到我的喜欢")
                Icon(imageVector = Icons.Filled.Done, contentDescription = null, modifier = Modifier.size(ButtonDefaults.IconSize))
            }
        }
    }

  • 选择器

    1. CheckBox复选框
        @Composable
    fun ChecBoxDemo(){
        val checkedState = remember {
            mutableStateOf(true)
        }
        Checkbox(
            checked = checkedState.value,
            onCheckedChange ={checkedState.value = it},
        colors = CheckboxDefaults.colors(checkedColor =  Color(0xff0079d3)))
    }
    1. TriStateCheckBox三态选择框
      很多时候，我们的复选框会有很多个，并且希望能够统一选择或者取消，这个时候就可以使用三态选择框
     @Composable
    fun ChecBoxDemo(){
        val (state,onStateChange) = remember { mutableStateOf(true) }
        val (state2,onStateChange2) = remember { mutableStateOf(true) }

        val parentState = remember(state,state2) {
            if (state&&state2) ToggleableState.On
            else if (!state&&!state2) ToggleableState.Off
            else ToggleableState.Indeterminate
        }

        val onParentClick = {
            val s = parentState != ToggleableState.On
            onStateChange(s)
            onStateChange2(s)
        }

        TriStateCheckbox(
            colors = CheckboxDefaults.colors(checkedColor = Color.Red),
            state = parentState,
            onClick = onParentClick,
        )

        Column(Modifier.padding(10.dp,0.dp,0.dp,0.dp)) {
            Checkbox(checked = state, onCheckedChange = onStateChange )
            Checkbox(checked = state2, onCheckedChange = onStateChange2 )

        }
    }
    1. Switch单选开关——控制单个项目的开启或关闭状态
      @Composable
    fun ChecBoxDemo(){
        val checkedState = remember {
            mutableStateOf(true)
        }
        Switch(checked = checkedState.value, onCheckedChange = {checkedState.value = it})
    }
    1. Slider滑竿组件——可用来做音量、亮度之类的数值调整或进度条
     var sliderPosition by remember {
            mutableStateOf(0f)
        }
        Slider(value = sliderPosition, onValueChange = {sliderPosition = it})
    1. 进度条
      var progress by remember {
                    mutableStateOf(0.1f)
                }

                val animatedProgress by animateFloatAsState(targetValue = progress, animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec)

                Column {
                    CircularProgressIndicator(progress = animatedProgress)
                    Spacer(modifier = Modifier.requiredHeight(30.dp))
                    OutlinedButton(onClick = {
                        if(progress<1f)progress +=.1f
                    }) {
                        Text(text = "增加进度")
                    }

                }
    1. 对话框
        @Composable
    fun DialogDemo(){
        val openDialog = remember {
            mutableStateOf(true)
        }
        val dialogWidth = 200.dp
        val dialogHeight = 50.dp
        if(openDialog.value){
            Dialog(
                onDismissRequest = { openDialog.value = false },
            properties = DialogProperties(
                dismissOnBackPress = true,//允许通过点击物理返回键取消对话框
                dismissOnClickOutside = true//允许点击对话框外部取消对话框
            )
            ) {
                Box(modifier = Modifier
                    .size(dialogWidth, dialogHeight)
                    .background(Color.Blue))
            }
        }
    }

常用的布局组件

  • 线性布局
    线性布局对应于传统视图中的linearLayout，Compose根据orientation的不同又分为Column和Row。

    1. Column
      Column是一个垂直线性布局组件，它能够将子项按照从上到下的顺序垂直排列。verticalArrangement和horizontalAlignment参数分别可以帮助我们安排子项的垂直/水平位置，在默认的情况下，子项会以垂直方向上靠上，水平方向上靠左来布置。
    2. Row
      Row组件能够将内部子项按照从左到右的方向水平排列。用法Column类似。

  • 帧布局

    1. Box
      Box组件是一个能够将里面的子项依次按照顺序堆叠的布局组件，在使用上类似于传统视图中的Framelayout。
    2. Surface
      Surface是一个平面，在MD设计准则中也同样如此，我们可以将很多的组件摆放在这个平面之上，可以设置这个平面的边框、圆角、颜色等。

  • Spacer留白
    在很多时候，需要让两个组件之间留有空白的间隔，这个时候就可以使用该组件。其实当Box组件没有content时，完全可以用Spacer替换。可以给Spacer做如下封装，可以更方便地用在水平或垂直布局中。

        @Composable
    fun WidthSpacer(value:Dp){
        Spacer(modifier = Modifier.width(value))
    }

    @Composable
    fun HeightSpacer(value:Dp){
        Spacer(modifier = Modifier.height(value))
    }

  • ConstraintLayout约束布局
    各位读者可以参考下面这篇博客：
    Compose ConstraintLayout 详讲

  • Scaffold脚手架
    Scaffold组件实现了MD的布局结构，通过配合其他MD组件可以轻松构建MD风格的页面。

        @SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun Sample(){
        var selectedItem by remember {
            mutableStateOf(0)
        }
        val items = listOf(
            Item("主页",R.drawable.ic_launcher),
            Item("列表",R.drawable.ic_launcher),
            Item("设置",R.drawable.ic_launcher),
        )

        Scaffold(

            topBar ={
               TopAppBar(
                   title = { Text(text = "主页")},
                   navigationIcon = {
                       IconButton(onClick = { /*TODO*/ }) {
                           Icon(imageVector = Icons.Filled.Menu, contentDescription = null)
                       }
               })
            }){
            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center){
                Text(text = "主页面")
            }
        }
    }

列表

很多产品中都有展示一组数据的需求场景，如果数据数量是可以枚举的，则仅需通过Column组件来枚举列出。然而很多时候，列表中的项目会非常多，我们需要滑动列表来查看所有内容，可以通过给Column的modifier添加verticalScroll方法来让列表实现滑动。

    @Composable
    fun ListDemo(){
        val initialCapacity = 1000 // 设置你想要的初始容量
        val items = ArrayList<String>(initialCapacity)
        for (i in 1..initialCapacity) {
            items.add("我是text$i")
        }
        Column(
            modifier = Modifier
                .verticalScroll(state = ScrollState(5), enabled = true)
        ) {
            items.forEach{
                Text(text = "$it")
            }

        }
    }

给Column的Modifier添加verticalScroll方法可以让列表实现滑动。但是如果列表过长，众多的内容会占用大量的内存。然而更多的内容对于用户其实都是不可见的，没有必要加载到内存。所以compose提供了专门用于处理长列表的组件，LazyColumn和LazyRow，其作用类似于传统视图中的Listview和RecyclerView。

  LazyColumn(
    modifier = Modifier
            .fillMaxSize()
            .background(Color.Cyan),
        contentPadding = PaddingValues(30.dp),//为内容设置外边距
    verticalArrangement = Arrangement.spacedBy(10.dp)//为每个item设置间隔
    ) {
        items(1000){
            Text(text = "$it")
        }

    }
hzulwy
关注
  • 24
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
25个实用酷炫的Android开源UI框架
08-27
本文为大家分享了25个实用酷炫的Android开源UI框架，灵活运用这些UI框架可在日常工作中节省不少时间
太全了，一线互联网大厂都在用的Android UI框架完全解析，拿去吧你
Android23333的博客
11-01 3808
在学习Android过程中，会使用到很多UI框架，而使用时对框架的实现方式应有一定的了解，这个过程最好的方式就是阅读源码，学习大厂的使用方法。但UI框架很多，不时会有新的出现，而且对一些通用框架来说，一般代码量非常庞大，所以正确的学习姿势很重要。 今天要给大家分享一份互联网大厂流出的《Android UI开源框架进阶解密》，总结了 Android 项目中值得推荐的UI优秀开源项目，将收集到的开源项目分类汇总到表格中，并对开源项目一一进行详细解析。 内容涵盖Loading、图表、菜单、日历、图片、文本、弹窗、
Android酷炫实用的开源框架（UI框架）
2401_83816838的博客
03-24 874
网上高级工程师面试相关文章鱼龙混杂，要么一堆内容，要么内容质量太浅， 鉴于此我整理了上述安卓开发高级工程师面试题以及答案。希望帮助大家顺利进阶为高级工程师。目前我就职于某大厂安卓高级工程师职位，在当下大环境下也想为安卓工程师出一份力，通过我的技术经验整理了面试经常问的题，答案部分是一篇文章或者几篇文章，都是我认真看过并且觉得不错才整理出来。大家知道高级工程师不会像刚入门那样被问的问题一句话两句话就能表述清楚，所以我通过过滤好文章来帮助大家理解。现在都说互联网寒冬，其实只要自身技术能力够强，咱们就不怕。
直接拿来用！10款实用Android UI工具
LIAN_1988的专栏
10-23 1358
移动应用的UI就好像达摩克利斯之剑，一方面，一个视觉、交互、体验良好的UI可以加强应用在用户心中的形象和识别性，而另一方面，一个体验糟糕的UI设计不仅使用户无法沉浸在应用内，而且还会造成用户对该应用产生厌恶感。所以在应用如海的Andriod世界里，一个高质量的对于应用的推广有着举足轻重的作用。为此，本文为广大的移动应用开发者推荐10款轻巧使用的UI设计工具。 1. ActionBarSher
全网最全Android compose开发应用指南
Eqiqi的博客
09-16 4930
Jetpack Compose 是一款基于Kotlin API，重新定义Android布局的一套框架。它可简化并加快 Android 上的界面开发。使用更少的代码、强大的工具和直观的 Kotlin API，快速让应用生动而精彩。对于开发者而言最直观的就是**节省开发时长，减少包体积，提高应用性能。
25个Android酷炫开源UI框架，2024吊打面试官系列
peixianchacha的博客
04-03 917
绘制图表的库，支持LineChartView、BarChartView和StackBarChartView三中图表类型，并且支持 Android 2.2及以上的系统。用户简历界面，出品。Instagram的一组Material 风格的概念设计使用bezier实现粘连效果的页面指示仿qq消息气泡拖拽消失的效果。折叠的信纸被打开一样的动画效果下拉刷新，Yalantis 出品。（是不是有点似曾相识呢？在点击搜索的时候控件在原有位置显示输入框。
Android前沿技术学习——Compose布局原理+配置布局+四大块技术全方面解析
m0_71524094的博客
07-11 9426
布局系统的 Jetpack Compose 实现有两个主要目标：一是实现高性能，二是让开发者能够轻松编写自定义布局。在 Compose 中，通过避免多次测量布局子级可实现高性能。如果需要进行多次测量，Compose 具有一个特殊系统，即固有特性测量。注意：使用 Android View 系统时，在嵌套某些 View（如 ）时，可能会出现一些性能问题。由于 Compose 可以避免多次测量，因此可以根据需要进行深层次嵌套，而不会影响性能。布局主要包括：布局基础知识、Material组件和布局、自定义布局、Co
Android Compose 介绍与实践
金戈鐡馬
03-07 3258
Jetpack Compose 是 Google 官方 2019 年推出的UI框架，它可简化并加快 Android 的 UI 开发工作。使用更少的代码、强大的工具和直观的 Kotlin API，快速构建 App 的 UI。2021年迎来 Compose 的正式版，来了解一下这个官方强推的，布局机制、渲染机制、具体写法等可以说是全新的UI框架了。
Android compose官方入门教程，基础到实战，快速通关
m0_59162559的博客
10-27 4596
Compose是Android团队与JetBrain大力推动的新一代UI框架。2021年7月 Android compose 1.0正式版本的诞生，这意味着Compose即将进入生产环节。 国际app巨头Twitter首当其冲，其他国内外企业和程序员的学习热情也都非常高涨，目前国内以字节跳动为首的大小厂也都开始尝试在新页面上使用Compose。 声明式 UI、更简单的自定义、实时且带交互的预览功能、更强的性能和功能...这些优势和特点让Compose飞速超越传统写法的「命令式 UI」的热度，成为程序员们
Compose 在 Android 中的必要性和前景分析
weixin_38754349的博客
09-26 1300
以下内容来自公众号code小生，关注每日干货及时送达作者:韩超杰(产品技术中心-移动端研发部)1.什么是ComposeCompose是Google官方推出的一种全新的用户界面框架。在过去的几年中，整个行业已开始转向声明性界面模型，该模型大大简化了与构建和更新界面关联的工程任务。该技术的工作原理是在概念上从头开始重新生成整个屏幕，然后仅执行必要的更改。此方法可避免手动更新有状态视图层次结构的复杂性。...
XUI - 一个简洁而优雅的Android原生UI框架
一个IT人的技术成长历程。创造未来的行为就发生在今天，没有明天的目标，今天的行动就是重复昨天的事情。
09-21 2872
涵盖绝大部分的UI组件：TextView、Button、EditText、ImageView、Spinner、Picker、Dialog、PopupWindow、ProgressBar、LoadingView、StateLayout、FlowLayout、Switch、Actionbar、TabBar、Banner、GuideView、BadgeView、MarqueeView、WebView、SearchView等一系列的组件和丰富多彩的样式主题。
Android UI控件组件库集合【源码】
05-21
Android UI控件组件库集合【源码】 热门标签，流式布局，刮刮乐控件，侧滑控件，循环幻灯片控件，自动换行控件，下拉列表，圆角进度控件等常用UI控件组件合集
12个常用前端UI框架集合汇总
10-15
本文整理了一些比较流行的前端UI框架其中有VUE、bootstrap、jQuery等框架，，排名不分先后，仅供参考。可按照项目需求自行考虑
HAP框架-LigerUI常用组件使用手册.docx
10-02
HAP框架-LigerUI常用组件使用手册.docx
Android布局技巧之创建可重用的UI组件
09-02
主要为大家详细介绍了Android布局技巧之创建可重用的UI组件，文中提到了include标签的使用方法，感兴趣的小伙伴们可以参考一下
Android --- 英文单引号用&apos；替换报错：does not contain a valid string resource
梁同学与Android
04-23 195
Android --- 英文单引号用&apos;替换报错：does not contain a valid string resource
Android使用ProtoBuf 适配 gradle7.5 gradle8.0
最新发布
wsdxho的博客
04-26 540
android 配置 protobuf插件 (gradle7.5 gradle8.0 适配)
TP8 利用jwt 生成token
m0_69254007的博客
04-26 214
使用Composer安装依赖库，终端切换到项目根目录输入如下。
android 常用的ui框架
08-28
Android 常用的 UI 框架有很多种，下面我将介绍其中几种常用的 UI 框架。 1. Android Native UI 框架：Android 提供了自带的 UI 控件库，包括 TextView、Button、ListView 等。这些控件具有良好的兼容性和稳定性，适合开发简单的界面。 2. RecyclerView：RecyclerView 是一个高度可定制的控件，替代了 ListView 和 GridView。它使得列表的管理和展示更加灵活，可以通过添加不同的布局管理器和适配器来实现不同形式的列表显示方式。 3. ConstraintLayout：ConstraintLayout 是一个相对布局控件，它强调使用约束来定位和管理子视图的位置。通过设置约束规则，可以创建复杂的布局，适用于各种复杂的界面设计。 4. ViewPager：ViewPager 是支持左右滑动切换页面的控件，通常用于实现导航、展示图片等功能。它可以结合 Fragment 使用，实现多页面的切换效果。 5. Material Design：Material Design 是 Google 提出的一种全新的设计风格，它包含了一系列的 UI 设计规范、交互模式和组件库。开发者可以使用 Material Design 提供的控件和样式来创建符合统一风格的用户界面。 6. ButterKnife：ButterKnife 是一个基于注解的 View 绑定框架，可以简化在代码中 findViewById 的操作。通过注解的方式，可以方便地绑定 View，并且提供了一些简化代码的方法。 综上所述，以上是 Android 开发常用的一些 UI 框架。根据具体的开发需求和设计风格，开发者可以选择合适的框架来提升开发效率和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值