自学系列| iOS Swift | 第二课:介面开发(UIKit)第1部分

前言:为什么会有「自学系列」

当我还是程式初学者时,觉得自学最麻烦的就是:那些课程大纲,专有名词我根本看不懂。如果有个已经会的人直接跟我说要学什么,给我一个概述,可以省下很多时间。


关于iOS App自学系列我已经写了两篇,有兴趣可以去看看。

自学系列| 斯威夫特| 用免费的线上学习资源入门iOS App

初学者到底有什么基本东西要学?

medium.com

自学系列| iOS Swift | 第一课:开发工具+ App基础观念+基础UI

用AVFoundation做一个简易变声App

medium.com

简介文章是Udacity iOS应用程序Nanodegree第二课的导读,透过做成这个影片中的App,熟悉介面开发常见的几个元素。


第二课连结在此 ,我们将学会底下几个主题。

UIKit基础知识:了解iOS用户界面库| Udacity

了解iOS UIKit框架,这是在所有iOS应用程序中创建用户界面的基石,对任何其他应用程序都至关重要。

www.udacity.com

1.重点观念

  • 代表

Delegate对初学者而言是一个逃不掉的魔咒,记得自己初学Delegate时,不懂为什么要有这种东西,只会一个案例,一个案例照抄。三个月后大概可以不再参考案例,顺顺地自己写出Delegate,直到最近写这篇文章,我才觉得有点理解它了。

先帮大家打个预防针:

有时候学东西是这样:先照抄➙会自己写➙练习很多很多次之后,终于理解为什么要这样写。

Delegate是代理人的意思,在上一篇有提提过,它是一种写程序的方法(设计模式),用于当A想叫B做事情的时候。还记得MVC吗?View(介面)负责呈现画面给用户,Controller则是负责处理逻辑,例如Controller会根据一些逻辑,告诉查看现在要变成什么画面。

所以,很多时候查看会分配控制器为Delegate(代理人),问Controller现在要如何呈现自己。

举凡为呈现多种资料的UITableView,UICollectionView,呈现文字的UITextView,UITextField,选择日期,数字的UIPickerView …等等,都会用到Delegate。

协议就是这样的东西,遵从Protocol的代表就会有要执行的功能。底下用UITextField视为示例。

  • UITextField

UITextField用于输入文字(如左图红色框局部)。

在第二课的范例中(右图),三个TextField的文字呈现都不同,表示这三个TextField是不同的代理人(代表):

  • 第一个Delegate可以把动物的单字变成表情符号(例如cat变成🐱)
  • 第二个Delegate会根据单字改变句子的颜色(例如红色)
  • 第三个Delegate会算出句子的字数

这三个Delegate都遵从UITextFieldDelegate这个协议,所以当我们输入文字时,三个代理人就要执行该协议

  func textField(UITextField,shouldChangeCharactersIn:NSRange,replaceString:String) 

这个功能,差异只是功能里的逻辑要写什么,决定文字会怎么变。就像外交官出席活动一定要发新闻稿,但新闻稿内容要写什么,则因人而异。


2.资料呈现

  • UITableView / UICollectionView

仔细观察的话,你会发现多数的App都用到TableView或CollectionView。

TableView就是一行一行排下来的,像iPhone内建的设定(左图),Line,Messenger,邮件,备注,YouTube,Facebook …等等,CollectionView则是一格一格的,像instagram(右图),照片,旅行青蛙购买道具和放明信片的页面…等等。

TableView跟CollectionView都要用到Delegate(所以Delegate真的逃不掉!),以TableView来说,就有UITableViewDelegate,UITableViewDataSource这两个。UITableViewDelegate负责处理使用者产生的行为,例如当使用者点选表格,编辑表格时,要怎么回应; UITableViewDataSource则处理数据库与表格之间的关系,例如整个TableView要有几行,第几行要呈现什么资料…等等。


因为Delegate写得有点多,第二课的多页画面,以及其他UI元件我把它放到Part 2,可以点底下连结继续看。

自学系列| iOS Swift | 第二课:介面开发(UIKit)第2部分

熟悉的UIKit基础知识—多页画面

medium.com


 如果喜欢这样的自学系列,请帮我拍拍手👏另外,我把之前写的程序学习相关文章集结在底下的列表,有闲来坐🤗 

艺一网—文章列表

我们的【学程序&软体创业】学习之路

medium.com