我的第一个🥇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编码。

通过观看某人向我展示循序渐进视频的视频,我可以最轻松地学习。

  1. 创建一个新的Xcode项目
  2. 单视图应用程序(Xcode的内置模板)
  3. 产品名称:滤光片
  • 组织标识符(捆绑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提供的教程视频。 您给了我一个跳脱的平台!