我的第一个🥇iOS应用:照片📸滤镜应用(iOS应用)
我是一位JavaScript开发人员,希望在Xcode iOS应用程序开发中投入我的精力。 我一夜之间就构建了这个应用程序,🦉您也可以! 为了获得更多乐趣,我创建了一个Youtube视频 。
要点:要构建iOS应用,我们需要Mac Book和Xcode。 选择哪个项目时,请使用Single View App。 Ctrl +拖动很神奇
目标:构建照片滤镜应用App
- 步骤1)安装xcode
我在Google上搜索了以下视频:如何在Mac OS X上安装Xcode。在安装Xcode的过程中,我意识到我已经拥有Xcode。 对我表示敬意! 🙂
- 开始使用苹果公司的First Swift App Video在Xcode IDE上进行Swift编码。
通过观看某人向我展示循序渐进视频的视频,我可以最轻松地学习。
- 创建一个新的Xcode项目
- 单视图应用程序(Xcode的内置模板)
- 产品名称:滤光片
- 组织标识符(捆绑ID *): com.google(使用您自己的ID)
注意:有关如何创建自己的ID的指南。 如果您拥有(或希望拥有)网站名称google.com,则将您的捆绑包ID:com.google(此格式称为反向DNS格式),就像把购物车放在马的前面一样,将com放在Google的前面)
有关捆绑包ID的更多信息,请访问:https://help.apple.com/xcode/mac/current/#/deve21d0239c
- 语言:斯威夫特
- 点击下一步。 保存您的项目。 我把我的保存在文档文件夹下。
- 现在,我们进入了设置视图。 查看左侧面板。
- 左侧列出了组成PhotoFilters应用程序的文件
- 通过拖放将照片添加到PhotoFilters文件夹中。 注意:请使用彩色照片,因为我们将通过添加随机滤镜来更改照片的色调。 谢谢希瑟 的提示。 我最初有一张黑白照片,但效果不佳。
- 接下来,设计应用程序:转到Main.storyboard
故事板是我们可以直观地编辑Web界面的地方。
- 用户故事1 :PhotoFilter应用程序应具有查看功能以显示照片。
在iOS中,“图像视图”是在屏幕上绘制图像的对象(obj)。 转到对象(obj)库并搜索“图像视图”
将“图像视图” obj拖动到视图控制器中并居中。 注意蓝色虚线。
选中图像视图 (您将看到蓝色轮廓 ,在矩形的每个角和中线处都有一个小正方形),单击“属性”检查器。
属性检查器:为接口中的对象设置各种属性。
在图像下拉菜单中选择我们要显示的图像 。
选择: 视图>内容模式>纵横比填充 (“纵横比填充”使照片 填充在 屏幕中。)
- 用户故事2:应用程序用户界面应显示应用程序标题 ,用户可以单击按钮来更改照片上的滤镜 。
使用导航控制器显示顶部导航栏|底部工具栏。
要添加导航控制器,请单击视图控制器顶部栏上的视图控制器图标 。 然后选择编辑器>嵌入>导航控制器
单击您的照片以显示在导航控制器顶部。 请注意,View Controller现在具有顶部栏 (在我的照片顶部以灰色显示)。
附加:您可以通过选择视图控制器栏(带有三个小图标的栏)来移动您的应用程序。 我将其移至右侧,因此我在左侧看到了导航控制器,在右侧看到了视图控制器。
添加标题 : 双击顶部栏的中间,看到蓝色部分出现。 添加标题:过滤器 。 按回车键保存。
添加底部工具栏 :导航控制器> 属性检查器>显示工具栏
添加按钮:在对象库中搜索“条形按钮”
将“栏按钮项”拖到视图控制器的底部栏中 。
双击该项目,将其标题更改为“应用过滤器”,然后按回车键保存。
要居中显示底部标题,请执行以下操作:在标题的两侧拖放“ Flexible Space Bar Button”项。
让我们预览一下该应用在iPhone上的外观。 打开助手编辑器。
切换助手编辑器>预览
然后给自己一些空间,我们单击工具栏折叠图标。
使照片具有响应性 >选择图像视图>解决“自动布局问题”菜单>“添加缺少的约束”
现在,界面可以针对iPhone,iPad等进行相应缩放。
在预览>选择iPad上单击“ +”以检查照片的响应能力。
将用户界面连接到代码(快速)。 与此相关的代码在ViewController.swift文件中。 因此,将助手编辑器从预览切换为自动 (ViewController.swift)。
直接从UI向代码添加一些功能。 按住ctrl键的同时,从图像视图拖动到代码中。 这将创建插座。 (“插入插座或插座集合”), 插座在我们的代码中是可变的 , 链接到故事板上的对象 。
在弹出窗口中,名称:photoImageView> return(或单击Connect)创建变量。
在UI中显示之前,让我们创建一个空间来渲染(处理生成输出图像)已过滤的图像。
提供“应用过滤器”按钮功能(当用户点击“过滤器”按钮>应用过滤器时)。 按住Ctrl键的同时,将“应用过滤器”按钮拖到代码中。
弹出窗口,连接:操作,名称:applyFilter
按Enter保存。
调用applyFilter方法时, 将随机色调滤镜应用于图像。 此行为在系统内置的核心映像中 。
使用iOS模拟器>按播放构建并运行该应用。
- 谢谢, 希瑟与我一起调试。 谁知道将这个应用程序发布到iPhone有多难? 你是冠军!
- 谢谢弗兰基( Frankie)的收看。您是摇滚明星!
- 谢谢Apple Dev提供的教程视频。 您给了我一个跳脱的平台!