首页 > 其他分享 >Android开发系列(五)Jetpack Compose之Icon & Image

Android开发系列(五)Jetpack Compose之Icon & Image

时间:2024-06-21 22:31:54浏览次数:11  
标签:Compose 示例 Jetpack Image 边框 设置 Icon 图标

   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 选项,系统将使用 ContentScale.Fit。下面分别通过显示效果来了解这几种缩放方式

 

将缩放方式设置为裁剪模式,通过Modifier设置形状可以裁剪图片。

   第1个裁剪的形状为CircleShape为圆形。

  第2个裁剪形状为RoundCornerShape为圆角矩形。

   在裁剪形状的基础上还可以加上边框,示例如下。

    Modifier的border用于设置边框,第1个参数BorderStroke用于指定边框的宽度和颜色,第2个参数指定边框的形状。

    边框的颜色还可以使用渐变色,示例如下

    通过Brush可以定义渐变色,通过BorderStroke把渐变色设置给边框。

   最后一个示例是把图标变为黑白色,在某些特殊的日子需要显示黑白主题,这个就比较有用,不用再重新做一份黑白的图片。

  颜色矩阵 ColorFilter 选项可用于转换图片。只需对图片应用黑白滤镜,使用 ColorMatrix 并将饱和度设置为 0f,就得到黑白图片。

示例代码已上传到github,地址如下

示例代码工程地址

标签:Compose,示例,Jetpack,Image,边框,设置,Icon,图标
From: https://blog.csdn.net/leesino/article/details/139721073

相关文章

  • Android开发系列(六)Jetpack Compose之Box
       Box是一个用来组合和控制子元素布局的组件。它可以在一个矩形区域内排列一个或多个子元素,并根据所提供的参数来控制它们的位置、大小和样式。  Box的功能类似传统的FrameLayout。  下面通过示例了解Box的使用方法,首先看一个最简单的示例,如下所示  这里定......
  • CentOS 7 安装 docker-compose
    在CentOS7上配置docker-compose需要几个步骤。以下是详细步骤:1、安装DockerCompose:DockerCompose的官方推荐安装方式是使用pip(Python的包管理工具)。但是,首先你需要确保你的系统上安装了Python和pip。使用以下命令安装pip(如果你还没有安装的话):sudoyuminst......
  • 准入控制器(Admission Controller):ResourceQuota,ImagePolicyWebhook
    目录一.系统环境二.前言三.准入控制器简介四.为什么需要准入控制器五.启用/禁用ResourceQuota资源配额5.1查看默认启用/禁用的准入控制器插件5.2ResourceQuota资源配额示例5.3禁用ResourceQuota六.配置ImagePolicyWebhook准入控制器禁止使用后缀为latest的镜像6.1搭建Webhook......
  • 阅读笔记:DualGAN: Unsupervised Dual Learning for Image-to-Image Translation
    以下是原论文分析,欢迎指正~DualGAN:用于图像转换的无监督双向学习作者:ZiliYi、Hao(Richard)Zhang、PingTan和MinglunGong纽芬兰纪念大学西蒙弗雷泽大学摘要  使用条件生成对抗网络(conditionalGAN)进行跨域图像转换在过去一年中取得了重大改进.根据任务的复杂程度......
  • 【SkiaSharp绘图05】SKPaint详解(三)之ImageFilter(颜色、组合、膨胀、移位、光照、反射
    文章目录ImageFilterCreateColorFilter颜色滤镜CreateCompose滤镜组合CreateDilate膨胀滤镜CreateDisplacementMapEffect移位映射CreateDistantLitDiffuse光照CreateDistantLitSpecular反射光照CreateDropShadow阴影效果CreateDropShadowOnly只阴影效果CreateErod......
  • [论文阅读] BBDM@ Image-to-Image Translation With Brownian Bridge Diffusion Model
    Pretitle:BBDM:Image-to-ImageTranslationWithBrownianBridgeDiffusionModelssource:CVPR2023paper:https://arxiv.org/abs/2205.07680code:https://github.com/xuekt98/BBDM关键词:I2I,BrownianBridge,Diffusion阅读理由:挺新奇的MotivationGAN-based......
  • docker-compose安装部署
    docker-compose的安装:主要是下载docker-compose文件1、下载docker-compose:https://github.com/docker/compose/releases/tag/v2.20.2(选择docker-compose-linux-x86_64)2、部署docker-compose:·为了在所有目录下都可以使用此命令,将下载的docker-compose文件拷......
  • No connection adapters were found for 'data:image/png;base64
    Noconnectionadapterswerefoundfor'data:image/png;base64,...' 这个错误通常发生在尝试使用像requests这样的HTTP库去访问一个DataURIscheme时。DataURIscheme(如data:image/png;base64,...)不是一个有效的URL,而是一个嵌入在文档或网页中的二进制数据的直接表示,通常用于......
  • html2canvas插件 线上image转base64
    UncaughtDOMException:Failedtoexecute'toDataURL'on'HTMLCanvasElement':Taintedcanvasesmaynotbeexported.html2canvas,如果html中有image,需要转base64才能正常转换image。本地调试可能存在跨域访问图片问题。由于图片服务器未开启跨域允许权限。Access-Control-A......
  • WPF press keydown and show image one by one
    //xaml<Windowx:Class="WpfApp175.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.mi......