Android Jetpack Compose开发实用小技巧

 更新时间:2022年11月18日 10:38:18   作者:黄林晴  
这篇文章主要为大家介绍了Android Jetpack Compose开发中的一些实用小技巧示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前言

在Compose开发的过程中,我们会经常遇到一些看起来很简单却不知道如何处理的小问题,比如去除点击阴影、Dialog全屏等问题,本文记录了这些常见小问题的处理方式。如有更好方案欢迎大佬们交流探讨~

实用小技巧

如何移除View点击阴影

这里的View指的是除了Button系列的之外,如Button、TextButton等,也就是自身没有onClick属性的。这个后面会再次提到。

我们编写一个高度为60dp,宽度满屏的TextView,使用Modifier的clickable属性为其添加点击事件

(注意:如果不使用clickable属性添加,而是使用pointerInput属性可不处理,但简单的点击事件一般不使用此方法)

代码如下所示:

@Composable
fun UITest() {
    Text(text = "点击我", modifier = Modifier
        .background(Color.Red)
        .height(60.dp)
        .fillMaxWidth()
        .clickable {
           //点击事件
        }
    )
}

运行程序,效果如下图所示。

从效果图中可以看出点击阴影还是非常明显的,如果我们想去掉阴影效果,只需要设置indication为null即可,修改后的代码如下所示。

@Composable
fun UITest() {
    Text(text = "点击我", modifier = Modifier
        .background(Color.Red)
        .height(60.dp)
        .fillMaxWidth()
        .clickable(indication = null, interactionSource = remember {
            MutableInteractionSource()
        }) {
        }
    )
}

上面实现的Text文字不是垂直居中的,我们该如何使其内容垂直居中呢?

Text文本如何垂直居中

你可能尝试过textAlign属性,但是很遗憾,textAlign属性只能达到水平居中的效果,如果想要达到垂直居中的效果,需要在其外层包一层父组件,一般推荐Box。代码如下所示。

@Composable
fun UITest() {
    Box(contentAlignment = Alignment.Center,
        modifier = Modifier
            .height(60.dp)
            .fillMaxWidth()) {
        Text(
            text = "点击我",
            modifier = Modifier
                .background(Color.Red)
                .align(Alignment.Center)
        )
    }
}

如何移除Button的点击阴影

这里的Button指的是具有onClick属性的组件系列,因为这类组件有自己的onClick属性,点击时不会进入clickable方法,所以不能使用Text组件的方式去处理。这里以TextButton为例,编写代码如下所示。

@Composable
fun ButtonTest() {
    TextButton(onClick = { }, modifier = Modifier
        .height(60.dp)
        .fillMaxWidth()
        .background(Color.Green)) {
        Text(text = "按钮点击")
    }
}

运行程序代码效果如下所示。

从图可以看出有明显水波纹效果。有这个效果的原因是在MaterialTheme主题中LocalRippleTheme使用了MaterialRippleTheme的效果,源码如下所示。

CompositionLocalProvider(
    LocalColors provides rememberedColors,
    LocalContentAlpha provides ContentAlpha.high,
    LocalIndication provides rippleIndication,
    LocalRippleTheme provides MaterialRippleTheme,
    LocalShapes provides shapes,
    LocalTextSelectionColors provides selectionColors,
    LocalTypography provides typography
) 

我们修改这个Theme即可,自定义Theme名为NoRippleTheme代码如下所示。

object NoRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor(): Color {
        return Color.Transparent
    }
    @Composable
    override fun rippleAlpha(): RippleAlpha {
        return RippleAlpha(0f, 0f, 0f, 0f)
    }
}

然后应用这个theme即可,修改代码如下所示。

ComposeDoTheme {
    CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
       //
    }
}

这样该主题下的按钮点击阴影效果便移除了。

Dialog宽度如何全屏

编写一个Dialog,代码如下所示。

@Composable
fun DialogDemo() {
    Dialog(
        onDismissRequest = { }
    ) {
        Column(
            modifier = Modifier
                .height(100.dp)
                .fillMaxWidth()
                .background(Color.White)) {
            Text(text = "我是标题1111")
            Button(onClick = {
                //取消弹窗显示
            }) {
                Text(text = "知道了")
            }
        }
    }
}

运行程序效果如下图所示。(请忽略他的丑~)

这里代码中已经设置了宽度为

fillMaxWidth(),Dialog的宽度依然不是全屏的,我们可以设置Dialog的properties属性来达到全屏的效果。修改后的代码如下所示。

Dialog(
    onDismissRequest = { },
    properties = DialogProperties(
        usePlatformDefaultWidth = false
    ),
)

修改后的效果如下图所示。

这样我们就达到Dialog宽度全屏的效果了,但之前有大佬说这种方式修改屏幕宽度后会有不可预期的问题,但我测试并未发现这个问题。

如何提升编码效率

许多开发者说用Compose写页面感觉很慢,这是因为一方面对Compose的掌握不熟悉需要多写多练,另一方面是没有合理的利用Compose的Live Templates。

比如我们新建一个Compose函数,如果你是从@Compose开始写就会很慢,可以尝试comp快捷键,创建新的函数,如下图所示。

还有诸如WR、WC等模版,如图所示。

更多实时模板可以从Android Studio中查询

我们也可以根据自己的编码习惯创建自己的模板。

以上就是Android Jetpack Compose开发实用小技巧的详细内容,更多关于Android Jetpack Compose开发技巧的资料请关注脚本之家其它相关文章!

相关文章

  • 一个吸顶Item的简单实现方法分享

    一个吸顶Item的简单实现方法分享

    这篇文章主要给大家介绍了一个吸顶Item的简单实现方法,文中通过示例代码介绍的非常详细,对各位Android开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • Android adb命令中pm工具的作用及用法说明

    Android adb命令中pm工具的作用及用法说明

    这篇文章主要介绍了Android adb命令中pm工具的作用及用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Android开发之Parcel机制实例分析

    Android开发之Parcel机制实例分析

    这篇文章主要介绍了Android开发之Parcel机制,实例分析了Parcel机制的原理与实现技巧,需要的朋友可以参考下
    2015-05-05
  • Android编程之动态壁纸实例分析

    Android编程之动态壁纸实例分析

    这篇文章主要介绍了Android编程之动态壁纸实现方法,以实例形式分析了Android动态壁纸的原理与实现步骤,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • Android将项目导出为Library并在项目中使用教程

    Android将项目导出为Library并在项目中使用教程

    这篇文章主要介绍了Android将项目导出为Library并在项目中使用教程,本文图文并茂给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • Android自定义View实现水波纹扩散效果

    Android自定义View实现水波纹扩散效果

    这篇文章主要为大家详细介绍了Android如何通过自定义View实现水波纹扩散效果,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2022-08-08
  • 如何在Android studio 中使用单例模式

    如何在Android studio 中使用单例模式

    这篇文章主要介绍了如何在Android studio 中使用单例模式,帮助大家更好的理解和学习Android开发,感兴趣的朋友可以了解下
    2021-03-03
  • 详解Android跨进程IPC通信AIDL机制原理

    详解Android跨进程IPC通信AIDL机制原理

    本篇文章主要介绍了详解Android跨进程IPC通信AIDL机制原理,详细的介绍了AIDL的概念和使用,具有一定的参考价值,有兴趣的可以了解一下
    2018-01-01
  • Android实现简单的popupwindow提示框

    Android实现简单的popupwindow提示框

    这篇文章主要为大家详细介绍了Android实现简单的popupwindow提示框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • Android编程实现3D旋转效果实例

    Android编程实现3D旋转效果实例

    这篇文章主要介绍了Android编程实现3D旋转效果的方法,基于Android的Camera类实现坐标变换达到图片3D旋转效果,需要的朋友可以参考下
    2016-01-01

最新评论