iOS应用:小费计算器

目标 :构建可自动计算不同小费金额的小费计算器iOS应用。

代码 :查看我的代码存储库以获取完整的代码。 👩🏻💻

摘自:我不得不认真思考如何在用户点击其他小费按钮时动态更新应用程序以计算正确的小费金额。 主要突破是连接提示按钮。 在iOS中,按钮是分段的数组,每个按钮都可以表示为数组的索引。 一旦我意识到🦉,那么真正的问题就是创建提示[18%,20%,25%]数组,该数组映射到相应的按钮段索引。 例如)分段按钮索引0映射到我的笔尖数组18%。 (基于零的索引)

最后,将视图链接到Swift内的函数或变量对我而言是一个神奇的时刻。 😮我❤️iOS应用程序的编码非常直观,就像我在调试器中编码一样。 快去吧! 👩🏻💻

  • 让我们打开Xcode。 文件>新建>项目>单视图应用
  • 产品名称:tippy
  • 团队:这是您在MacBook上向Xcode注册的团队名称
  • 组织名称:保留默认值
  • 组织标识符:这是您的网站名称,但DNS顺序相反。
  • 按下一步>将其保存在桌面上>创建
  • 小费应用程式启动
  • 注意按一下此按钮,很少有面板切换可以打开/关闭左侧和右侧面板。
  • 接下来,单击Main.StoryBoard
  • 单击View Controller内的大框以选择>单击文档图标(文件检查器)>取消选中“使用自动版式”复选框
  • 双击放大
  • 在对象库中搜索ui标签并将其拖到主应用程序视图中:“ uilabel”
  • 将标签放置在主应用程序视图的左上角
  • 接下来,在Objec(Obj)库(lib)中搜索“ uiview”>选择“视图”元素>拖入主视图区域。
  • 3,元素Search Obj Lib:“按钮”并拖入主应用程序视图。
  • 查看左侧面板,查看已添加的所有元素的列表。 这类似于Photoshop中的图层视图。
  • 接下来,单击面板的右上角>选择“属性”图标
  • 尝试更改“视图”图标的背景颜色:单击“视图”>确保“属性”图标突出显示为蓝色>将背景颜色更改为浅灰色。
  • 要查看模拟器的选项>单击活动的方案按钮>,您可以看到许多版本的iPhone。

注意:如果您有iPhone

  • Comamand + r(或按播放按钮)以运行模拟器。 我已连接设备,因此现在我可以在iPhone上看到它的运行状态。
  • 或选择iphone 6s模拟器>点击播放按钮(Comamand + r)
  • iOS应用程式)绝对位置可以。 您所看到的一切。 将“标签”移到故事板左侧>单击播放按钮(命令+ r)。 注意更改已反映在您的模拟器上。
  • 让我们将元素标签嵌套在视图元素内(创建父级>子级关系的层次结构)
  • 将“标签”拖到“视图”元素中
  • 将鼠标悬停在视图上>将鼠标图标更改为手形图标>抓取视图,并注意“标签”和“视图”一起移动(因为它们组合在一起(嵌套))。

注意:为什么要分组? 用例1:隐藏/淡入在一起的所有元素。 用例2:插入动画,将所有组合在一起的元素获得特殊效果。

注意:在iOS开发中鼓励使用绝对位置的原因(在HTML中是一个重大违反),一旦我们在绝对位置之上应用自动布局,然后自动布局就可以帮助应用进行响应(拉伸此元素或使其横向iPhone行为要求)

  • 点击播放以查看更新的应用。
  • 真正的建筑开始的时间。 删除所有元素。
  • 搜索’uilab’>将4个标签拖到画布ui中

注意:快速复制画布上的元素:在画布上拖动一个Label>单击Label element>选项+拖动(在画布上)以快速复制元素。 这样,我们不必从obj lib拖到画布上4次不同的时间。

  • 搜索“ uiview”>将“视图”拖到画布上
  • 如图所示对齐按钮并展平视图元素以制作水平分隔线>添加背景色:灰色
  • 左对齐Bill,Tip,Total。 搜索“ uitext”>拖动“文本字段”。 右对齐第二列。 有关更新元素,请参见下文。
  • 将所有元素对齐到最右边或最左边。 搜索分段控件(iOS版本的单选按钮)>拖动
  • 制作3个单选按钮:细分:3
  • 名称按钮(18%,20%,25%),每次按回车键保存更改。
  • Command + R(播放)。 现在我们已经完成了设计我们的应用程序。

注意:https://pttrns.com/iphone-patterns该站点有许多iOS应用程序,我们可以概括为大多数iOS应用程序使用4 -5常用的对象库视图元素。

  1. 图片视图/顶部文字
  2. 按钮(设置按钮齿轮外观)
  3. 标签栏(许多应用程序的底部工具栏可切换到应用程序的不同部分)
  4. 地图视图(显示Google Map API)
  5. ui网页视图(网页的显示部分)

我们最终在iOS应用中使用的控件数量很少。 无需被对象库淹没。

主视图布局意味着可以很好地掌握上述视图类型(图像,按钮,选项卡栏,地图,UI Web)以及相应的属性(配置和设置其行为)。

  • 重要:在对象lib下: 导航栏永远不要手动将其拖动到画布中。
  • 如何以正确的方式添加导航栏: 编辑器>嵌入>导航控制器
  • 此时,使用Command + R运行该应用程序。
  • 添加标题:导航栏上的提示计算器

这样就结束了视图布局设计

  • 向应用添加功能
  • 检查键盘是否已连接到应用程序。 单击模拟器上的iPhone>“帐单”文本框区域>“硬件”>“键盘”>“连接硬件键盘”(如果在模拟器上看不到键盘,请使用Command + K调出键盘)。 这称为切换键盘(命令+ k)
  • 关闭键盘视图: 添加 obj lib: ‘tap手势识别器’ >拖到主要部分(应用程序的较大空白区域(主视图),注意不要将其放在任何特殊按钮下)
  • 现在,我们在主视图上设置了手势识别器,让我们添加一些动态行为(功能性)。 在左侧面板上选择“ 点击手势识别器” (蓝色突出显示)后,单击右上方的双环图标。
  • 将+轻击手势识别器控制+拖动到类ViewController代码块内的代码块中。 请注意,它恰好在类函数的最后一个卷曲(’}’)之前
  • 试试看。 按播放按钮构建>点击应用程序的主要部分(应用程序的白色大空白背景)。 您在调试器控制台中看到了吗?
  • 代码:隐藏键盘`view.endEditing(true)`
  • 点击播放,然后在模拟器上进行尝试。 键盘隐藏吗?
  • 单击Bill:请注意,对于Bill,我们希望显示数字键盘。

看看周围有哪些文本字段属性。 注意:密码的安全文本输入。

用户故事 :单击“帐单”字段时,将显示数字键盘。

  • 选择“帐单”文本字段>“文本输入特征”>“键盘类型”>“小数键盘”
  • 点击播放按钮以保存并检查是否显示数字键盘。

用户故事:计算技巧。

  • 选择“帐单:文本字段>右键单击(MBP上的双指)”。

注意: “已发送事件”部分列出文本字段中可能发生的所有事件 。 例如)如果我的手指着地,请执行一些操作。 如果在内部向上触摸>做某事。

用户案例:每次用户更改“帐单:”文本字段时,更新提示值。

  • 将“编辑”拖动到代码中>名称:calculateTip

用户案例: calculateTip函数动态更新 TotalTip值。

  • Ctrl +从提示值$ 0.00拖动到代码。 每当我们想要修改某些内容时,我们都会拖动该字段并连接到代码字段。
  • 名称:tipLabel(注意命名约定。名称的第一部分:tip是其功能的描述。名称的第二部分:标签是类型。
  • Ctrl +从总价值$ 0.00拖动到代码。 名称:totalLabel
  • 添加功能来计算提示功能:
  • 分配技巧:$ 10,总计:$ 110
  • 达到此目的:当Bill字段发生更改时,calculateTip函数可以配置用户视图。

注意:键入时,您会看到我们可以添加到tipLabel的其他功能。 我们可以更改背景颜色tipLabel.textColor。 我们可以像在属性下看到的那样对齐文本。

  • 运行它,在“帐单”文本字段中输入输入>“提示”和“总计”值分别设置为$ 10,$ 110时。

现在,让我们动态更改“提示”和“总计”值。

  • Ctrl +将“帐单字段”拖到“代码”中,名称:billField
  • 计算提示功能:

// Double(string)>将字符串转换为数字ex)billField.text是string。

// 注意 ! >斯威夫特真的很喜欢!

// ?? >否则。 如果Double(billField.text!)无效(例如:如果用户在“帐单”字段中输入’abc’> Swift,将无法将’abc’转换为数字>因此将默认值设置为0。

让bill = Double(billField.text!) 0

// \( *此处的任何内容都将被视为变量*

tipLable.text =“ $ \(tip)”

用户故事:数字格式应为货币(小数点后两个零)格式。

// $“%f”,提示替换%f,随后的提示被处理为变量(%f为十进制值)

//“%@”>字符串| 其他物件

//“%d”>附加值

tipLabel.text =字符串(格式:“ $%f”,技巧)

一旦运行它,现在小数位数太多了。

  • 修复此问题,我们指定要显示的小数位数:“ $%. 2 f”(我们需要2个小数位)

用户故事:当用户分页18%,20%,25%时; 小费金额应反映相应的小费。

  • Ctrl +从“提示”按钮(分段的标签)中拖动以进行编码。 名称:tipControl
  • 合并tipControl的分段索引,每个选项卡对应于数组索引0、1、2
  • 运行以正确计算测试笔尖。 它正在正确读取提示值,但切换制表键不会触发显示新的更新值。

用户案例:随着小费选项卡的更改,小费和总价值应动态更新。

请注意,切换到不同的吸嘴数量选项卡时,吸嘴和总计不会触发calculateTip函数。

  • 转到提示分段按钮>右键单击>值更改> Ctrl +拖动值在calculateTip函数顶部已更改。
  • 完成后,右键单击分段的笔尖以查看值的分配已更改。
  • 提示按钮> calculateTip功能的任何部分上的用户选项卡将随时执行以提供新更新的值。
  • 点击播放按钮运行模拟器。 当用户单击18%,20%,25%提示按钮时,提示和总计值会动态计算相应的提示量。

感谢CodePath和SwiftGuy提供的教程,使我的技巧计算器发布成为可能。

  • Resource1:iOS App文档
  • 资源2:CodePath翻斗YouTube教程
  • 资源3:SwiftGuy计算器YouTube教程
  • Resource4:Apple Dev的Swift简介