当前位置: 首页 > news >正文

Jetpack Compose基础组件 - Image

Image的源码参数预览

@Composable
fun Image(painter: Painter,contentDescription: String?,modifier: Modifier = Modifier,alignment: Alignment = Alignment.Center,contentScale: ContentScale = ContentScale.Fit,alpha: Float = DefaultAlpha,colorFilter: ColorFilter? = null
)

目前在 Compose 中 Image 有三种,详情可先在官网中找到

Image 可以帮我们加载一张图片

@Composable
fun ImageScreen1() {Image(painter = painterResource(id = R.drawable.ic_launcher_background),contentDescription = null)
}@Preview(showBackground = true)
@Composable
fun ImageScreenPreview1() {ImageScreen1()
}

图片大小

我们可以使用 Modifier.size() 来设置图片大小。

@Composable
fun ImageScreen1() {Image(painter = painterResource(id = R.drawable.ic_launcher_foreground),contentDescription = null,modifier = Modifier.size(350.dp))
}

图片形状

我们可以使用 Surface 来帮助我们设置形状,或者在 Image 组件中使用 modifier.clip() 来裁剪形状。

@Composable
fun ImageScreen() {Surface(shape = CircleShape) {Image(painter = painterResource(id = R.drawable.wallpaper),contentDescription = null,modifier = Modifier.size(350.dp))}}

是不是有一点小问题?似乎只有左右两边变成了圆形,而上下并没有。

这是因为 Image 中源码的 contentScale 参数默认是 ContentScale.Fit

也就是保持图片的宽高比,缩小到可以完整显示整张图片。

而 ContentScale.Crop 也是保持宽高比,但是尽量让宽度或者高度完整的占满。

所以我们将 contentScale 设置成 ContentScale.Crop

@Composable
fun ImageScreen() {Surface(shape = CircleShape) {Image(painter = painterResource(id = R.drawable.wallpaper),contentDescription = null,modifier = Modifier.size(350.dp),contentScale = ContentScale.Crop)}}

图像边框

你可以利用 Surface 中的 border 参数来设置边框。

@Composable
fun ImageScreen() {Surface(shape = CircleShape,border = BorderStroke(5.dp, Color.Gray)) {Image(painter = painterResource(id = R.drawable.wallpaper),contentDescription = null,modifier = Modifier.size(350.dp),contentScale = ContentScale.Crop)}
}

使用 Coil 来动态加载图片

Compose 自带的 Image 只能加载资源管理器中的图片文件,如果想加载网络图片或者是其他本地路径下的文件,则需要考虑其他的库,比如 Coil

<uses-permission android:name="android.permission.INTERNET" />
implementation("io.coil-kt:coil-compose:2.4.0")
Image(painter = rememberAsyncImagePainter(data = "https://picsum.photos/300/300"),contentDescription = null
)

加载Gif图像

implementation("io.coil-kt:coil-gif:2.4.0") // KTS
val gif_url="https://s1.chu0.com/src/img/gif/db/dba873378578488a9de51f01c101cd6a.gif?e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:ENutG45YK-AdEpn2dSKWQRZ_8qY="val imageLoader = ImageLoader.Builder(context).components {if (SDK_INT >= 28) {add(ImageDecoderDecoder.Factory())} else {add(coil.decode.GifDecoder.Factory())}}.build()Image(painter = rememberAsyncImagePainter(gif_url,imageLoader = imageLoader),contentDescription = null
)

加载 Svg 图像

Coil 可以加载 Svg 图像

添加依赖

implementation("io.coil-kt:coil-svg:2.4.0") // KTS
val imageLoader = ImageLoader.Builder(context).components {add(SvgDecoder.Factory(true))}.build()Image(painter = rememberAsyncImagePainter(data = "https://coil-kt.github.io/coil/images/coil_logo_black.svg",imageLoader = imageLoader),contentDescription = null
)

放大缩小 Svg 图像文件

虽然 Coil 可以显示 Svg 图像,但是如果在我们的 app 中,需要动态的放大 Svg 图像,那么你大概率会得到强行拉升 Svg 像素后的图像,而不是无损放大

导致的原因可能是 Coil 中的 ImageLoader 会把 Svg 转换成位图,而不是安卓的矢量图 vector drawable, 而位图则不能无损放大

val context = LocalContext.current
val imageLoader = ImageLoader.Builder(context).componentRegistry {add(SvgDecoder(context))}.build()var flag by remember { mutableStateOf(false) }
val size by animateDpAsState(targetValue = if(flag) 450.dp else 50.dp)Box(modifier = Modifier.fillMaxSize(),contentAlignment = Alignment.Center
) {Column {Image(painter = rememberAsyncImagePainter(data = "https://coil-kt.github.io/coil/images/coil_logo_black.svg",imageLoader = imageLoader),contentDescription = null,modifier = Modifier.size(size).clickable(onClick = {flag = !flag},indication = null,interactionSource = MutableInteractionSource()))}
}

那么要解决这个问题,就是尝试实现 svg 转换为 vector drawable, 需要添加三方依赖 

Landscapist

implementation "com.github.skydoves:landscapist-coil:1.3.2"
CoilImage(imageModel = "https://coil-kt.github.io/coil/images/coil_logo_black.svg",contentDescription = null,modifier = Modifier.size(size).clickable(onClick = {flag = !flag},indication = null,interactionSource = MutableInteractionSource()),imageLoader = imageLoader
)

Image 参数详情

Ucrop 一个图片裁剪库

Coil

相关文章:

Jetpack Compose基础组件 - Image

Image的源码参数预览 Composable fun Image(painter: Painter,contentDescription: String?,modifier: Modifier Modifier,alignment: Alignment Alignment.Center,contentScale: ContentScale ContentScale.Fit,alpha: Float DefaultAlpha,colorFilter: ColorFilter? …...

UINavigationController内的页面跳转实现 UIViewController 的 present和dismiss动画

UINavigationController内部页面跳转默认为左右切换&#xff0c;但是当我们想向上弹出进入界面&#xff0c;或者向下离开界面时&#xff0c;需要实现UINavigationControllerDelegate 协议自行控制页面的动画(否则直接在navVc上叠加动画会导致动画结束后的那个页面&#xff0c;自…...

PMP对项目管理工作有什么用?

首先&#xff0c;项目管理岗位基本是不限行业的&#xff0c;所以&#xff0c;只要是项目管理相关的岗位&#xff0c;pmp证书都是能起到效果的&#xff0c;不用担心局限性太大&#xff0c;而且&#xff0c;pmp证书是国际证书&#xff0c;无论国企还是外企&#xff0c;都是认可这…...

Python 将‘20230919182550‘ 转换为 ‘%Y年%m月%d日 %H:%M‘

为了将给定的时间字符串 cur_time 转换为指定的格式&#xff0c;可以使用 Python 的 datetime 模块。以下是完成此操作的步骤&#xff1a; 使用 strptime 方法将 cur_time 转换为一个 datetime 对象。使用 strftime 方法将这个 datetime 对象转换为所需的格式。 这是具体的代…...

vue2.0检测无用的代码并删除

&#xff08;1&#xff09;、使用 useless-files-webpack-plugin 来查找无用文件 npm i useless-files-webpack-plugin -S &#xff08;2&#xff09;、vue.config.js中配置 const UselessFile require(useless-files-webpack-plugin)chainWebpack: config > {config.plu…...

小米华为,化干戈为玉帛!

近日来&#xff0c;手机圈又掀起了各大厂家推出新品的高潮。首先是华为Mate60的推出&#xff0c;其自研的麒麟9000S芯片瞬间点燃了国内手机市场&#xff0c;得到了国内甚至国外业界人士的认可和好评。 而近日网上盛传的小米创始人雷军的“愿意加入华为技术生态圈”的邀请&…...

【文末赠书】SRE求职必会 —— 可观测性平台可观测性工程(Observability Engineering)

文章目录 〇、导读一、实现可观测性平台的技术要点是什么&#xff1f;二、兼容全域信号量三、所谓全域信号量有哪些&#xff1f;四、统一采集和上传工具五、统一的存储后台六、自由探索和综合使用数据七、总结★推荐阅读《可观测性工程》直播预告直播主题直播时间预约直播 视频…...

content生成自定义图标的方式是什么?

animate.css是一个跨浏览器的CSS3动画库&#xff0c;它内置了很多经典的CSS3动画。使用起来很方便。下面我们通过例子讲解如何使用自定义类名和animate.css库实现动画效果。 (1)从animate.css官方网站获取animate.css文件&#xff0c;保存到chapter04目录中。 (2)创建C:\vue\…...

无涯教程-JavaScript - SECH函数

描述 SECH函数返回某个Angular的双曲正割。双曲正割是双曲余弦的倒数。因此,双曲正割的值由等式给出- $$\sinh\left(x\right)\frac {1} {\cosh\left(x\right)} \frac {2} {e ^ x e ^ {-x}} $$ 语法 SECH (number)争论 Argument描述Required/OptionalNumberNumber is the …...

天宇微纳芯片ic测试软件如何测试芯片上下电功能?

芯片的上电与下电功能测试是集成电路生产和研发过程中的关键环节&#xff0c;可以帮助企业确保产品的可靠性、整合性和兼容性&#xff0c;同时提高生产效率和产品质量。 因此在芯片的研发设计中&#xff0c;企业会对芯片的上下电有严格的要求&#xff0c;包括上下电的时序&…...

1万多爱背句子英语口语ACCESS\EXCEL数据库

今天这个数据库包含3个表&#xff0c;一个是分类表&#xff0c;一个是分类章节有&#xff0c;一个是具体句子表&#xff0c;表与表之间可以根据相关ID进行关联&#xff0c;是一个学习英语的好数据&#xff0c;具体请查收截图或样本&#xff1a; 数据有ACCESS数据库文件&#xf…...

C++:new 和 delete

个人主页 &#xff1a; 个人主页 个人专栏 &#xff1a; 《数据结构》 《C语言》《C》 文章目录 前言一、C内存管理1.内置类型2.自定义类型3.delete 与 new不匹配使用问题(VS平台下) 二、operator new 与 operator delete函数三、 new 和delete的实现原理内置类型自定义类型 四…...

mysql5.7版本的数据导入到mysql8.0版本需要怎么做

将 MySQL 5.7 版本的数据导入到 MySQL 8.0 版本&#xff0c;由于版本之间可能存在一些差异&#xff0c;需要采取一些步骤来确保数据导入的顺利进行。以下是一般的导入步骤&#xff1a; 备份数据&#xff1a; 在进行任何操作之前&#xff0c;务必备份 MySQL 5.7 数据库。可以使用…...

Python150题day06

1.4字典练习题 ①字典基本操作 dic { python: 95, java: 99, c: 100 } 用程序解答以下题目 1.字典的长度是多少 2.请修改java这个key对应的value值为98 3.删除 c 这个key 4.增加一个key-value对&#xff0c;key值为 php,value是90 5.获取所有的key值&#xff0c;存储在列表里…...

2023Node.js零基础教程(小白友好型),nodejs新手到高手,(一)NodeJS入门

写在开始前 在无尽的代码汪洪中&#xff0c;闪耀着一抹绚丽的光芒。它叫做Web前端开发&#xff01; HTML是我们的魔法笔&#xff0c;是创造力的源泉。它将我们的思绪化为标签&#xff0c;将我们的想象变为元素。 在无尽的标签组合中&#xff0c;我们创造出独特的网页&#xff…...

拉格朗日乘子法思路来源

核心思路:由果索因 一. 直观理解 1. 问题描述 对于如"图1"式(等式约束优化问题, 可行域是边界), 转化成拉格朗日乘子法的思路来源: 图1: 拉格朗日乘子法问题描述图 如"图2",f为曲面.c为平面, 黑色加粗线是f和c的交线.(约束就是限制自变量的变化范围). …...

天选之子C++是如何发展起来的?如何学习C++呢?

天选之子C是如何发展起来的&#xff1f;如何学习C呢? 一、什么是C二、C发展史三、C的重要性3.1 语言的使用广泛度3.2 在工作领域 四、如何学习C4.1 大佬怎么学&#xff1f;4.2 自己怎么学 一、什么是C C语言是结构化和模块化的语言&#xff0c;适合处理较小规模的程序。对于复…...

Oracle Schema Only账户

概念 Schema Only Accounts是Oracle 18c的新安全功能&#xff0c;19c进一步增强。 19c的增强其实就是允许此账户有管理权限&#xff1a;Ability to Grant or Revoke Administrative Privileges to and from Schema-Only Accounts A schema only account cannot log in to the…...

分界线-积木游戏 demo

目录 匿名信 题目描述: 输入描述 输出描述: 示例: Java实现 (期待看官能够修复一下, 害): 二、积木游戏 题目描述: 输入描述 输出描述 补充说明 示例 Java代码实现 匿名信 题目描述: 电视剧《分界线》里面有一个片段&#xff0c;男主为了向警察透露案件细节&…...

智能指针解读(2)

前面一篇文章&#xff0c;我讲解了智能指针的原理&#xff0c;并实现了一个简单的智能指针。为了加深对智能指针的理解&#xff0c;在这篇文章中&#xff0c;我把C中的几个智能指针讲解下&#xff1a;auto_ptr, unique_ptr, shared_ptr, weak_ptr。 1、auto_ptr 前面的文章我…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...