Jetpack Compose —— Image

news2024/11/25 8:20:46

 在 Jetpack Compose 中,Image 是一个重要的组件,用于显示图像和处理图像相关的操作。

一、Image在Compose中的简单使用

二、如何网络调用Image


一、Image在Compose中的简单使用

首先,让我们了解一下 Image 组件的基本用法。要在 Jetpack Compose 中显示图像,您可以使用 Image 组件,并将图像资源的引用作为参数传递给它。以下是一个简单的示例:

Image(
    painter = painterResource(R.drawable.my_image),
    contentDescription = "My Image"
)

在上述示例中,painterResource(R.drawable.my_image) 用于从资源中加载图像,并将其作为 Image 组件的 painter 参数。contentDescription 参数用于提供图像的辅助描述,这在可访问性方面非常重要。

除了基本的图像显示功能外,Jetpack Compose 的 Image 组件还提供了一些强大的功能和属性,例如调整图像的大小、裁剪图像、添加点击事件等。以下是一些常见的用法示例:

  1. 调整图像的大小:

Image(
    painter = painterResource(R.drawable.my_image),
    contentDescription = "My Image",
    modifier = Modifier.size(200.dp)
)

在上述示例中,使用 Modifier.size(200.dp) 将图像的大小调整为 200 dp。

    2. 圆角处理:

Image(
    painter = painterResource(R.drawable.ic_launcher_background),
    contentDescription = "my Image",
    alignment = Alignment.Center,
    modifier = Modifier
        .size(30.dp)
        .clip(RoundedCornerShape(10.dp))
)

其中 Modifier.clip()就是裁剪图片的,参数RoundedCornerShape是对边缘进行裁剪。

   3.添加点击事件:

Image(painter = painterResource(R.drawable.ic_launcher_background),
    contentDescription = "my Image",
    alignment = Alignment.Center,
    modifier = Modifier
        .size(30.dp)
        .clip(RoundedCornerShape(10.dp))
        .clickable {
            coroutineScope.launch {
                println("点击了图片")
            }

        })

在上述示例中,使用 Modifier.clickable 添加了一个点击事件,您可以在 lambda 表达式中处理相应的逻辑。

二、如何网络调用Image

     网络调用Image是开发最常用的,下面写个compose通过网络调用图片

1.添加依赖

implementation "io.coil-kt:coil-compose:2.2.2"
implementation "io.coil-kt:coil-svg:2.2.2"
implementation "com.github.skydoves:landscapist-coil:2.0.3"
implementation "com.github.skydoves:landscapist-glide:2.1.0"
implementation "com.github.skydoves:cloudy:0.1.1"
implementation "io.coil-kt:coil-gif:2.3.0"

案例1,异步调用

@Preview
@Composable
fun AsyncImageDemo(){
    val imageUrl= "http://rongcloud-web.qiniudn.com/docs_demo_rongcloud_logo.png"
   // val placeholderRes=R.drawable.ic_launcher_background

    AsyncImage(model = ImageRequest.Builder(LocalContext.current)
        .data(imageUrl)
        .crossfade(true)
        .build(),
        contentDescription = "my Image",
        placeholder=painterResource(id = R.drawable.ic_launcher_background),
        error = painterResource(id = R.drawable.ic_launcher_background),
        onSuccess = {
            Log.d(TAG, "success")
        },
        onError = {
            Log.d(TAG, "error")
        },
        onLoading = {
            Log.d(TAG, "loading")
        },
        modifier =Modifier.clip(RoundedCornerShape(30.dp)))
}

 

案例2,简单的异步加载图片

@Preview
@Composable
fun SubcomposeAsyncImageDemo(){
    val imageUrl= "http://rongcloud-web.qiniudn.com/docs_demo_rongcloud_logo.png"
    SubcomposeAsyncImage(
        model = ImageRequest.Builder(LocalContext.current)
            .data(imageUrl)
            .build(),
        contentDescription = "my Image"){
        if(painter.state is AsyncImagePainter.State.Loading ||  painter.state is AsyncImagePainter.State.Error){
            CircularProgressIndicator()
        }else{
            SubcomposeAsyncImageContent()
        }
    }

}

 

案例3,网络进度加载图片:

@Preview
@Composable
fun AsyncImagePainterDemo(){
    val imageUrl= "http://rongcloud-web.qiniudn.com/docs_demo_rongcloud_logo.png"
    Column(horizontalAlignment = Alignment.CenterHorizontally){
        SubcomposeAsyncImage(model =imageUrl,
        loading = {
            CircularProgressIndicator()

        },
        contentDescription = null,
        modifier =Modifier.size(200.dp,600.dp))


        Spacer(modifier =Modifier.height(15.dp))

        SubcomposeAsyncImage(model = imageUrl,
            contentDescription=null,
            modifier =Modifier.size(200.dp)
        ){
            val state =painter.state
            when(state){
                is AsyncImagePainter.State.Loading->{
                    CircularProgressIndicator()
                }
                is AsyncImagePainter.State.Error -> Text("${state.result.throwable}")
                is AsyncImagePainter.State.Success -> SubcomposeAsyncImageContent()
                is AsyncImagePainter.State.Empty -> Text("Empty")
            }
        }
    }

}

 案例4,加载圆形图片

@Preview
@Composable
fun cicleImageDemo(){
    val imageUrl= "http://rongcloud-web.qiniudn.com/docs_demo_rongcloud_logo.png"
    Column(horizontalAlignment = Alignment.CenterHorizontally){
        Image(modifier= Modifier
            .fillMaxWidth()
            .height(500.dp),
          //  painter = rememberImagePainter(data =imageUrl,
            painter = rememberImagePainter(data =R.drawable.ic_launcher_background,
            builder ={
                placeholder(R.drawable.ic_launcher_background)
                crossfade(true)
                transformations(CircleCropTransformation())//圆形图片
            }),
            contentDescription ="my Image"
            )
        Spacer(modifier =Modifier.width(10.dp))
        Text(text ="圆形图片")
    }
}

 案例5。加载圆角图片

@Preview
@Composable
fun clipImageDemo(){
    Column(horizontalAlignment = Alignment.CenterHorizontally){
        Image(modifier = Modifier
            .fillMaxWidth()
            .padding(20.dp)
            .height(400.dp),
            painter = rememberImagePainter(data=R.drawable.ic_launcher_background,
            builder = {
                placeholder(R.drawable.ic_launcher_background)
                crossfade(true)
                transformations(RoundedCornersTransformation(30f,30f,30f,30f))
            }),
            contentDescription ="my Image"
            )
        Text(text = "圆角图片")
    }
}

案例6:加载gif图片

@Preview
@Composable
fun coliLoadGifDemo(){
    Column(horizontalAlignment =Alignment.CenterHorizontally){
        val imageLoader = ImageLoader.Builder(LocalContext.current)
            .components(fun ComponentRegistry.Builder.(){
                if(SDK_INT >=28){
                    add(ImageDecoderDecoder.Factory())
                }else{
                    add(GifDecoder.Factory())
                }
            } ).build()
        Image(modifier = Modifier
            .fillMaxWidth()
            .height(400.dp)
            .padding(20.dp),
        painter = rememberImagePainter(data = imageLoader,imageLoader=imageLoader,
        builder = {
            placeholder(R.drawable.ic_launcher_background)//占位图
            crossfade(true)//淡出效果
        }),
        contentDescription = null
            )
        Text(text = "加载gif图片")
    }
}

Jetpack Compose 的 Image 组件还支持更多功能和属性,例如加载网络图像、圆角处理、动画效果等。您可以根据自己的需求进行进一步的研究和实践。

总结起来,Jetpack Compose 中的 Image 组件提供了简单而强大的图像显示功能,可以满足各种场景下的需求。您可以根据自己的应用需求使用不同的属性和功能来定制和优化图像的展示效果。

参考资料:

  • Jetpack Compose 文档:https://developer.android.com/jetpack

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/639008.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

复习之linux系统中的软件管理

一、linux系统中软件包 1.软件包的类型 "注意在rhel8中只能使用绿色软件,源码编译软件和rpm软件" 类型支持的条件DEBUBlinux DEBlinux(用不了)RPM#redhat centOS fadorabz2|gz|xz#1.需要源码安装需要编译 #2.绿色软件,直接可用 #ntfs-3g_nt…

2023下半年杭州/广州/东莞/深圳软考(中/高级)认证,这里报名

软考是全国计算机技术与软件专业技术资格(水平)考试(简称软考)项目,是由国家人力资源和社会保障部、工业和信息化部共同组织的国家级考试,既属于国家职业资格考试,又是职称资格考试。 系统集成…

如何成为一名全职创作者——程序员篇

哈喽大家好,我是咸鱼 今天跟大家分享一篇文章,这篇文章的作者 Gergely Orosz 是一名程序员,他从 Uber 辞职以后,就当起了全职创作者 他通过写文章、卖课程、做视频等谋生,今天这篇文章是他对这种商业模式的思考&…

内网渗透-windows远程用户管理

文章目录 0x01 获取window权限(管理员)0x02 添加用户,并且到管理员组0x03 开启远程桌面0x04 添加到远程桌面组0x05 进行远程0x06 免责声明 0x01 获取window权限(管理员) 使用cs上线用户 kali:192.168.253.234 window …

DVWA-10.XSS (DOM)

大约 “跨站点脚本 (XSS)”攻击是一种注入问题,其中恶意脚本被注入到原本良性和受信任的网站上。 当攻击者使用 Web 应用程序发送恶意代码(通常以浏览器端脚本的形式)时,就会发生 XSS 攻击, 给…

报错:HttpMessageNotReadableException: JSON parse error: Unexpected end-of-input

问题: 测试接口发送请求时后端报错:org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Unexpected end-of-input: expected close marker for Object (start marker at [Source: (PushbackInputStream); line: 1,…

Ubuntu18.04安装jdk1.8

1. 下载jdk 下载地址:jdk1.8下载地址 选择需要下载的jdk 2. 安装jdk # 创建用于存放jdk的文件夹 sudo mkdir /usr/local/java# 解压jdk压缩文件到 /usr/local/java/ sudo tar -zxvf jdk-8u371-linux-x64.tar.gz -C /usr/local/java/# 在配置文件中添加java 环境变…

作为自动化测试工程师,这4个自动化测试阶段你真的知道吗?

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 阶段一&#xff1…

Linux—进程信号

进程信号 文章目录 进程信号感性理解信号技术应用角度上理解信号信号的产生按键产生信号系统调用产生信号给自己发送信号给进程发送指定信号 硬件产生信号除0操作野指针访问 软件产生信号alarm函数设置闹钟的软件条件 核心转储关于能否捕获全部信号 信号相关概念信号在内核中的…

码云实战(一)——idea实现将本地的项目推送到码云上

文章目录 前言一、创建本地仓库并关联二、将项目提交本地仓库三、关联远程仓库3.1 创建空白的远程库 四、推送到远程仓库五、验证是否推送成功总结 前言 本系列文章主要记录日常使用中碰到的码云的相关问题 一、创建本地仓库并关联 用IDEA打开项目,在菜单栏点击vc…

闪存潜规则:你的毛病比方案重要

大家好,我是了五月。 前言 目前绝大数存储设备都是以闪存为存储介质的,内部许多固件算法方案都是在为闪存服务的。 无论是什么算法,都是遵循着Flash的特性为前提的。 那闪存究竟有哪些潜规则的特性呢? 先擦后写 闪存块(Bloc…

PCB设计总有几个阻抗没法连续的地方,怎么办?

大家都知道阻抗要连续。但是,PCB设计也总有阻抗不能连续的时候。怎么办? ​特性阻抗:又称“特征阻抗”,它不是直流电阻,属于长线传输中的概念。在高频范围内,信号传输过程中,信号沿到达的地方,…

CMU 15-445 Project #1 - Buffer Pool(Task #2 - LRU-K Replacement Policy)

Task #2 - LRU-K Replacement Policy 一、题目链接二、准备工作三、部分实现四、自定义测试用例 一、题目链接 二、准备工作 见 CMU 15-445 Project #0 - C Primer 中的准备工作。 三、部分实现 LRU-K的提出是为了更好地解决传统LRU中的缓存污染问题。所谓缓存污染&#xff0…

互联网大厂Java面试题1000+附答案(合适各级Java开发人员)

作为一名优秀的程序员,技术面试都是不可避免的一个环节,一般技术面试官都会通过自己的方式去考察程序员的技术功底与基础理论知识。 2022 年的互联网行业竞争越来越严峻,面试也是越来越难,很多粉丝朋友私信希望我出一篇面试专题或…

【QQ界面展示-细节调整 Objective-C语言】

一、刚才我们已经做到这个状态了 1.刚才我们做到这里了,就是文字可以显示出来了, 基本数据给大家加载了,然后我们再把这个美化一下,再把这个时间处理一下, 2.咱们先把它这个效果稍微美化一下吧,怎么美化呢,来看一下, 首先,我们看一下示例程序,实际程序,中间是没有…

深度学习pytorch实战五:基于ResNet34迁移学习的方法图像分类篇自建花数据集图像分类(5类)超详细代码

1.数据集简介 2.模型相关知识 3.split_data.py——训练集与测试集划分 4.model.py——定义ResNet34网络模型 5.train.py——加载数据集并训练,训练集计算损失值loss,测试集计算accuracy,保存训练好的网络参数 6.predict.py——利用训练好的网…

ChatGPT 应用——使用 chatGPT 写高考作文

写作文,很简单,但写一篇好的作文,是非常有难度的。 想要写一篇高分作文,需要对作文题目有正确的理解,需要展现独到的观点和深入的思考,需要具备清晰的逻辑结构,需要准确而得体的语言表达。 正…

Python程序设计基础:数值

文章目录 一、数值数据类型二、python内置的数值操作三、math库 一、数值数据类型 Python语言可以很方便的用于处理数值运算问题,在数值运算过程中,常见的额两种数据类型分别为整数类型(int)和浮点类型(float&#xf…

【论文阅读】(2023.06.09-2023.06.18)论文阅读简单记录和汇总

(2023.06.09-2023.06.12)论文阅读简单记录和汇总 2023/06/09:虽然下周是我做汇报,但是到了周末该打游戏还是得打的 2023/06/12:好累好困,现在好容易累。 目录 (TCSVT 2023)Facial Image Compression via …

2021-07-12

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…