swift UI专项训练14 ImageView图像视图

简介:   图像在swift中基于UIImageView,我们从storyboard中拖一个ImageView出来。

  图像在swift中基于UIImageView,我们从storyboard中拖一个ImageView出来。


  那么我们如何使用工程中的图片呢,点开images.xcassets,在空白处点击右键点击import,导入图片。



现在回到storyboard中,就能看到选择图片时有选项了。



我选择土豆丝,然后运行一下:


可以看到图片被拉长了,在Mode中选择Aspect Fit这个是图片自适应


现在效果好多了:


我们调整imageView的大小,然后在界面上增加一个按钮,把imageView与控制器关联起来。



我们的代码需要在按钮的action中完成,代码如下:

 @IBAction func playButton(sender: UIButton) {
        imageVew1.animationImages = [
            UIImage(named: "红烧肉")!,
            UIImage(named: "土豆丝")!,
            UIImage(named: "梅菜扣肉")!,
            UIImage(named: "红烧狮子头")!
        ]
        imageVew1.contentMode = .ScaleAspectFit
        imageVew1.animationDuration = 1
        imageVew1.startAnimating()
    }

1的意思是动画在1秒内轮流播放完,所以4张图片每张显示0.25秒,注意数组中如果不加!会报错,大家注意一下。现在我们运行一下,效果如图:



然后我们点击按钮,可以看到图片已经动起来了。


目录
相关文章
|
10月前
|
开发工具 Android开发 开发者
Android UI设计: 解释Android的Nine-Patch图像是什么,它用于什么目的?
Android UI设计: 解释Android的Nine-Patch图像是什么,它用于什么目的?
112 4
|
9月前
|
存储 开发框架 JavaScript
深入探讨Flutter中动态UI构建的原理、方法以及数据驱动视图的实现技巧
【6月更文挑战第11天】Flutter是高效的跨平台移动开发框架,以其热重载、高性能渲染和丰富组件库著称。本文探讨了Flutter中动态UI构建原理与数据驱动视图的实现。动态UI基于Widget树模型,状态变化触发UI更新。状态管理是关键,Flutter提供StatefulWidget、Provider、Redux等方式。使用ListView等可滚动组件和StreamBuilder等流式组件实现数据驱动视图的自动更新。响应式布局确保UI在不同设备上的适应性。Flutter为开发者构建动态、用户友好的界面提供了强大支持。
138 2
|
7月前
|
测试技术 Swift iOS开发
探索iOS自动化测试:使用Swift编写UI测试
【8月更文挑战第31天】在软件开发的海洋中,自动化测试是保证船只不偏离航线的灯塔。本文将带领读者启航,深入探索iOS应用的自动化UI测试。我们将通过Swift语言,点亮代码的灯塔,照亮测试的道路。文章不仅会展示如何搭建测试环境,还会提供实用的代码示例,让理论知识在实践中生根发芽。无论你是新手还是有经验的开发者,这篇文章都将是你技能提升之旅的宝贵指南。
|
9月前
|
开发工具 Android开发 开发者
Android `.9.png` 图像是用于UI的可拉伸格式,保持元素清晰度和比例
【6月更文挑战第26天】Android `.9.png` 图像是用于UI的可拉伸格式,保持元素清晰度和比例。通过边上的黑线定义拉伸区域,右下角黑点标识内容区域,适应文本或组件大小变化。常用于按钮、背景等,确保跨屏幕尺寸显示质量。Android SDK 提供`draw9patch.bat`工具来创建和编辑。**
275 6
|
10月前
|
开发框架 前端开发 JavaScript
【Flutter前端技术开发专栏】Flutter中的动态UI构建与数据驱动视图
【4月更文挑战第30天】Flutter是一款高效跨平台移动开发框架,以其热重载、高性能渲染和丰富组件库著称,简化了动态UI和数据驱动视图的实现。本文深入讨论了动态UI构建原理,包括基于Widget树模型的UI更新和状态管理,如使用StatefulWidget和数据流库(如Provider、Redux)。此外,文中还介绍了实现技巧,如使用ListView等可滚动组件、StreamBuilder进行数据流驱动的UI更新,以及应用响应式布局以适应不同设备。Flutter为开发者提供了构建高效动态界面的强大工具。
243 0
【Flutter前端技术开发专栏】Flutter中的动态UI构建与数据驱动视图
|
10月前
|
iOS开发
Xcode强大的多视图立体分层显示View UI Herarchy
Xcode强大的多视图立体分层显示View UI Herarchy
78 0
|
10月前
|
Swift 图形学 iOS开发
【Swift开发专栏】Swift中的自定义视图与绘制
【4月更文挑战第30天】本文探讨了Swift中自定义视图的创建与绘制,分为基础知识、绘制步骤和性能优化三部分。开发者通过继承`UIView`,重写`draw(_:)`方法并利用Core Graphics进行2D绘图。提高性能的技巧包括避免重复绘制、使用轻量级视图、优化图形上下文使用、启用图层背板及避免阻塞主线程。自定义视图让iOS和macOS界面更独特高效,进阶可探索Core Animation和Metal等技术。
114 0
|
10月前
|
存储 传感器 监控
工业相机如何实现实时和本地Raw格式图像和Bitmap格式图像的保存和相互转换(C#代码,UI界面版)
工业相机如何实现实时和本地Raw格式图像和Bitmap格式图像的保存和相互转换(C#代码,UI界面版)
355 0
|
10月前
|
人工智能 资源调度 API
StableStudio:来自 Stability AI 的开源聊天和图像生成UI
StableStudio:来自 Stability AI 的开源聊天和图像生成UI
290 0
|
存储 数据管理 数据库
CoreData 在 swift UI 中的使用
当谈到在 Swift UI 中进行本地数据持久化,Core Data 是一个强大且常用的解决方案。Core Data 是苹果提供的一种数据存储和管理框架,用于在应用程序中创建、读取、更新和删除数据。它提供了一个对象图管理器,可以将数据映射到对象,并提供了一种简化数据操作的方式。在本文中,我们将深入介绍 Core Data 在 Swift UI 中的使用。
CoreData 在 swift UI 中的使用

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    Magma:微软放大招!新型多模态AI能看懂视频+浏览网页+UI交互+控制机器人,数字世界到物理现实无缝衔接
  • 3
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
  • 4
    如何在React.js中使用Shadcn/UI
  • 5
    移动端UI名词 - AxureMost
  • 6
    unity判断鼠标在不在UI上
  • 7
    Flame:开源AI设计图转代码模型!生成React组件,精准还原UI+动态交互效果
  • 8
    Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
  • 9
    FirstUI:Deepseek能帮我们做很多事情,而这款开源框架专为开发者设计的开源UI框架,让你的项目加速起飞
  • 10
    【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
  • 1
    如何在React.js中使用Shadcn/UI
    73
  • 2
    Flame:开源AI设计图转代码模型!生成React组件,精准还原UI+动态交互效果
    88
  • 3
    WEB CAD插件通过上下文对象MxPluginContext修改UI界面的方法
    18
  • 4
    FirstUI:Deepseek能帮我们做很多事情,而这款开源框架专为开发者设计的开源UI框架,让你的项目加速起飞
    33
  • 5
    【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    29
  • 6
    Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
    34
  • 7
    Magma:微软放大招!新型多模态AI能看懂视频+浏览网页+UI交互+控制机器人,数字世界到物理现实无缝衔接
    92
  • 8
    unity判断鼠标在不在UI上
    58
  • 9
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    83
  • 10
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    163