Android开发系列（五）Jetpack Compose之Icon & Image

最新推荐文章于 2025-05-14 20:28:27 发布
最新推荐文章于 2025-05-14 20:28:27 发布
阅读量1.3k 收藏 16
点赞数 16
CC 4.0 BY-SA版权
分类专栏： Android 文章标签： Jetpack Compose Icon Image
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leesino/article/details/139721073

   Icon是用于在界面上显示矢量图标的组件。它提供了很多内置的矢量图标，也支持自定义图标。要使用Icon组件，可以通过指定图标资源的名称或引用来创建一个Icon对象。例如，使用Icons.Default.Home来创建一个默认风格的首页图标。可以通过设置图标的大小、颜色、和点击事件等属性来自定义Icon的外观和行为。

    Image是用于在界面上显示位图图像的组件。它支持从本地资源、网络URL或图像字节数组加载图像。要使用Image组件，可以通过指定图像资源的路径或源来创建一个Image对象。

    下面分别通过示例了解这两个组件的用法。

Icon

    Icon的使用示例如下。

    在Icon函数各个参数的解析如下。

  1. imageVector表示矢量图，这里Icons.Default.Person官方图标库中的图标。
  2. contentDescription描述，用于对该图标的功能，没有描述设置为null即可。
  3. tint 色调，用于设置图标的颜色。
  4. painter, Painter是对可画东西的抽象，可以通过不同的方式创建Painter对象，painterResource从资源文件构造Painter对象。通过该方法可以使得Icon显示本地资源中的图标文件

Image

    Image的使用方法与Icon比较相似，Image主要加载图片，当图片的宽高比例与Image的不一致时，Image通过contentScale可以设置不同的缩放方式，默认情况下，如果您未指定 contentScale

最低0.47元/天 解锁文章

200万优质内容无限畅学
Jetpack Compose - Icon
乐翁龙
12-07 3497
Jetpack Compose - Icon1、属性一览2、使用示例3、未解决问题 1、属性一览 首先直接看下官网给的Icon的三种方法，链接在这里： @Composable fun Icon( imageVector: ImageVector, modifier: Modifier = Modifier, tint: Color = AmbientContentColor.current.copy(alpha = AmbientContentAlpha.current) ):
Jetpack Compose实现Icon或Image旋转动画功能
myc185的专栏
11-02 2077
Jetpack compose 旋转动画
[Android]Jetpack Compose加载图标和图片
Gamin
04-23 5005
库，这个库确实包含了大量的图标资源，但是 Android 的构建系统（包括 Gradle 和 Android Studio）使用了一种称为资源清理（resource shrinking）的技术，这可以帮助移除未使用的资源，以减少最终 APK 的大小。在 Android 开发中使用本地矢量图标是一种常见的做法，因为矢量图标（通常保存为 SVG 或 Android 的 XML vector format）具有可缩放性和较小的文件大小。是可选的，分别用于在图片加载时和加载失败时显示的图片。
Android APP图标icon集合
最新发布
05-14 181
我太棒了，我现在不怕没有图标了。
Jetpack Compose——Icon(图标)的使用
lplj717的博客
12-10 7413
Compose获取资源方式： 文本 -> stringResource(R.string.hello_world) 颜色 -> colorResource(R.color.black) 尺寸 -> dimensionResource(R.dimen.padding) 图片 -> painterResource(R.drawable.head_icon) Icon： 首先看看Icon的接收参数类型： contentDescription：是给无障碍人使用的文本描述,考虑到一些.
compose-icons:Jetpack Compose的开源图标包
03-28
Compose图标是一包库，提供了可在Jetpack Compose Multiplatform中使用的众所周知的Icon Pack。 库的使用受到“构成材料图标”的启发。 撰写版本 Jetpack撰写（Android）： 1.0.0-beta01 Jetbrains组成（桌面）： 0.3.1 添加到您的项目 添加项目存储库： repositories { mavenCentral() } 对于 ： implementation( " br.com.devsrsouza.compose.icons.android:ICON_PACK:0.1.1 " ) 对于 ： implementation( " br.com.devsrsouza.compose.icons.jetbrains:ICON_PACK:0.1.1 " ) 例子 Icon ( imageVector
我用Ai学Android Jetpack Compose之Icon
学无止境，止于至善
02-02 869
当然可以！在 Jetpack Compose 中，Icon是一个非常常用的组件，用于显示矢量图形图标。它可以帮助你轻松地将 Material Icons 或其他自定义图标集成到你的应用界面中。通过Icon，你可以为用户提供直观的视觉反馈，并提升用户体验。Icon是 Jetpack Compose 中用于显示矢量图形图标的关键组件。掌握了它的基本用法和高级特性后，你可以轻松地构建出美观且功能丰富的图标界面。希望这些信息对你有所帮助！如果你有任何进一步的问题或需要更详细的解释，请随时提问！
svg-to-compose:在Jetpack Compose代码中转换SVG和Android Vector Drawable
05-05
SVG组成[实验性] 将SVG或Android Vector Drawable转换为Compose代码。 为什么这个项目 在的开头，它不支持SVG文件和Android Vector Drawables。...该项目使用Android的将SVG转换为Android Drawables，并使用Jetpack Co
Android开发系列（十一）Jetpack Compose之Dialog
06-27 649
AlertDialog使用内置的布局，) {Card() {Column() {Image(Text(text = "带按钮和图片的弹框",Row() {showDialog},) {Text("取消")showDialog},) {Text("确认")运行效果如下图所示在本例中，Dialog的子控件是一个Card控件，Card控件的子控件为Column，Column的子控件有Image、Text、和Row，Row的子空间是2给TextButton。
Jetpack Compose | 控件篇（二） -- Icon，Image
leobert.lan的博客
08-24 1331
highlight: darcula 写在最前 在上一篇，我们学习了Compose 中的 Text 、TextField 、Button，并在WorkShop中进行了一系列尝试。 除了对他们的效果有了直观的认识外，也感受了Compose的编码乐趣。 本篇我们将继续学习Icon和Image，从命名上我们可以看出他们和 图形、图片 有关，也是 内容呈现 中非常重要的一种载体和方式。 文中代码均基于 1.0.1版本 如无特殊说明，文中的 Compose 均指代 Jetpack compose 文中代码均可在 .
Jetpack Compose系列教程之(3)——图标(Icon) 按钮(Button)
软件开发
02-11 1599
本篇分别对常用的组件:图标(Icon) 按钮(Button) 输入框(TextField)的使用方法及各参数使用进行讲解,参考了不少文章,且费了不少时间去时间去一一实践,希望对各位带来些帮助 😊。
android菜单icon图标
01-06
android菜单icon图标，涵盖了常见的icon图标。
Compose | UI组件(四) | Icon()，Image() 图标和图片组件
让 学习 成为一种 习惯 ( 谭祖爱 & 技术博客 )
01-27 1112
Icon为小图标组件，Image为图片组件
Android Compose 图标按钮深度剖析：从源码到实践(五)
Android开发领域创作者
03-20 814
Android Compose 是一种现代的 Android UI 工具包，它采用声明式编程范式，让开发者能够更轻松地构建和管理 UI。与传统的基于视图的 UI 系统相比，Compose 代码更加简洁、易于维护，并且能够自动处理状态变化和布局更新。图标按钮在 Android 应用中广泛应用，用于触发特定的操作或提供导航功能。与普通文本按钮相比，图标按钮更加直观，能够在有限的空间内传达明确的信息，提升用户操作的便捷性。IconButton组件的定义位于包中，以下是简化后的源码：kotlin。
【亲测免费】 推荐开源项目：Compose Icons - 多平台图标库
gitblog_00077的博客
05-22 740
推荐开源项目：Compose Icons - 多平台图标库 在构建现代化的跨平台应用时，一个强大的图标库是必不可少的。今天，我们向您推荐一个非常实用的开源项目——Compose Icons，这是一个为Jetpack Compose设计的多平台图标库，覆盖Android、桌面、iOS、MacOS Native和Web（JSCanvas）等多种环境。 项目介绍 Compose Icons是一个集合了多...
Android应用图标微技巧，8.0系统中应用图标的适配
热门推荐
郭霖的专栏
03-13 9万+
大家好，2018年的第一篇文章到的稍微有点迟，也是因为在上一个Glide系列结束之后一直还没想到什么好的新题材。现在已经进入了2018年，Android 8.0系统也逐渐开始普及起来了。三星今年推出的最新旗舰机Galaxy S9已经搭载了Android 8.0系统，紧接着小米、华为、OV等国产手机厂商即将推出的新年旗舰机也会搭载Android 8.0
Android vs iPhone icon设计指南（翻译理论）
zhjp4295216的专栏
11-01 572
<br /><br />http://mashow.blogbus.com/logs/81550520.html<br />  在研究Android的icon设计之前，有必要先了解Android的界面是如何适配多样化屏幕的。适配性<br />上一篇博文中提到，由于同一个UI元素（如100 x100像素的图片）在高精度的屏幕上要比低精度的屏幕上看起来要小，为了让这两个屏幕上的图片看起来效果差不多，可以采用以下两种方法：程序将图片进行缩放，但是效果较差。为这两个精度屏幕的手机各提供一个图片。<br />但是屏幕
Android图标
weixin_30399797的博客
04-15 363
在线生成安卓App图标、IOS App图标 https://icon.wuruihong.com 转载于:https://www.cnblogs.com/-nanli/p/10713220.html
jetpack compose 底部导航栏
06-02
在 Jetpack Compose 中创建底部导航栏可以使用 `BottomNavigation` 和 `BottomNavigationItem` 组件。以下是创建底部导航栏的步骤： 1. 导入所需的组件： ```kotlin import androidx.compose.foundation.Icon import androidx.compose.foundation.layout.Row import androidx.compose.material.BottomNavigation import androidx.compose.material.BottomNavigationItem import androidx.compose.material.IconToggleButton import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.setValue import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.res.painterResource import androidx.navigation.NavHostController import androidx.navigation.compose.currentBackStackEntryAsState import androidx.navigation.compose.rememberNavController ``` 2. 创建底部导航栏的选项卡： ```kotlin sealed class BottomNavItem(val route: String, val icon: ImageVector, val title: String) { object Home : BottomNavItem(&quot;home&quot;, Icons.Filled.Home, &quot;Home&quot;) object Search : BottomNavItem(&quot;search&quot;, Icons.Filled.Search, &quot;Search&quot;) object Profile : BottomNavItem(&quot;profile&quot;, Icons.Filled.Person, &quot;Profile&quot;) } val bottomNavItems = listOf( BottomNavItem.Home, BottomNavItem.Search, BottomNavItem.Profile ) ``` 3. 创建底部导航栏： ```kotlin @Composable fun BottomNavigationBar( navController: NavHostController ) { var selectedTab by remember { mutableStateOf(BottomNavItem.Home) } BottomNavigation { val navBackStackEntry by navController.currentBackStackEntryAsState() val currentRoute = navBackStackEntry?.destination?.route bottomNavItems.forEach { screen -&gt; BottomNavigationItem( icon = { Icon(screen.icon, contentDescription = null) }, label = { Text(screen.title) }, selected = currentRoute == screen.route, onClick = { selectedTab = screen navController.navigate(screen.route) { popUpTo(navController.graph.startDestinationId) launchSingleTop = true } } ) } } } ``` 在 `BottomNavigationBar` 中，我们首先定义了一个 `selectedTab` 变量，用于跟踪当前选中的选项卡。然后，我们使用 `BottomNavigation` 组件创建底部导航栏，并使用 `BottomNavigationItem` 组件创建每个选项卡。我们使用 `navController` 控制导航，在点击选项卡时，更新 `selectedTab` 变量，然后导航到对应的目的地。 最后，我们可以将 `BottomNavigationBar` 组件添加到 `Scaffold` 中，创建一个带有底部导航栏的应用程序界面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值