使用swift3从零写一个基于位置信息的照片集iOS应用系列一

记录和分享一下使用swift开发一个app的过程,和你们交流学习。html

从一个简单的UITableViewController开始

建立gitub仓库

按照个人习惯首先github网站上面创建一个仓库,这样方便交流和学习的时候更加便捷。
这里我使用的是mac上的github桌面应用,若是你不熟悉git命令行操做,也能够下载git

-w420
这里我由于我已经在github远端建立好了,因此会有一个已经存在的警告提示。若是你是新建立的,那么是不会有这个警告的程序员

建立新的swift项目

我使用的是最新的macos/sierra/,若是你也是,那么应该已是最新的xcode8swift3了。
若是你不肯定本身的swift版本,能够在 Finder-其余-终端 打开后输入 swift -version 查看一下。github

up-w420

接下来我要作下面几件事情来新建一个项目结构macos

  • 建立项目。编程

  • 选择应用模板。swift

  • 完成项目的基础信息配置。数组

-w420
-w420

这里我选择一个空的模板
-w420
项目的基础信息配置这里解释一下xcode

  • Product Name: 这个就是项目名称,咱们这里起的是 PhotosPinapp

  • Team: 这里会自动有的,就是你的开发者的帐号

  • Organization Name: 组织名称,通常多是你告诉的域名

  • Organization Identifier: 组织标识,通常这里会将你的我的或是公司的域名反转写,好比: com.appledev

  • Bundle Identifier: 这里会根据你写的组织标识自动生成,不用管

  • Language: Swift – 选择开发语言,这里固然是选 swift

  • Devices: iPhone – 这里选择你是为何设备开发的,咱们这里选iPhone

  • Use Core Data: [不选] – 这里是问你项目是否使用Core Data,它是apple官方支持的一个本地数据持久化框架,在咱们的应用中期会使用到,但这里先不选

  • Include Unit Tests: [不选] – 这里是问你是否引入单元测试,咱们先不选

  • Include UI Tests: [不选] – 这里从名字能够看出问你是否引入界面UI的测试,不选

-w480

点击右下角的 Create 按钮后你看到就是项目初始的结构了

-w480
上图是我使用的一些习惯,你感兴趣也能够参考下,红色数字与绿色数字的效果是对应

  1. 显示行号

  2. 当鼠标碰到代码块时,高亮显示代码区域,方便我查看关注的代码区域

  3. 代码字符的长度提示线,就是说在一行代码字母数量80个的地方有一条线,提醒我这行代码是否是不易于阅读,固然根据你状况而定

  4. 项目的文件,快捷键是 control+5 ,你试试就知道了,对应左侧的项目结构,由于我但愿敲代码的区域可以大一些,通常讲最左侧的项目结构关闭了

  5. 罗列当前文件中的变量、方法、注释...等等,快捷键是 control+6 很是有用,特别是你的代码写了不少的时候。

使用 UITableViewController 建立一个表格视图的应用

在建立项目的时候回自动生成一个空的 ViewController 和一些文件,咱们这里来看如何使用 UITableViewController 来建立一个简单的表格应用。

首先要选择 Main.storyboard 将自动生成的 view controller 删除掉,选中后按 delete 键。也不须要默认与这个 view controller 关联的 ViewController.swift 文件,同样选中后按 delete 键,在弹出的确认框选中 "Move to Trash"(区别就是这个是真的吧文件从项目删除了,前面一个选项只是把文件的引用清除了,文件仍是在)。

而后从右侧下面的 Object library 中选择 Table View Controller ,拖拽到中间的 Main.storyboard 中。能够右侧下面的 Object library 中长按一个组件就会弹出 名称和说明,建议吧每一个都看一下,方便之后能快速的找到须要的组件。

-w580

  1. 建立一个 UITableViewController

  2. 有时候选择不方便的时候,好比组件多了,鼠标很差选择的时候,能够在左侧的 Document Outline 面板中经过结构选择

  3. 这里会有个 M ,就是 modification 的意思,由于咱们使用了远程代码github,咱们本地的代码与远程的代码不同了,这里就会显示一个标识,后面到了某个阶段,咱们就会将修改的代码内容同步到远程库,就不会有显示了。

由于咱们是本身建立的一个 UITableViewController ,须要咱们手动的指定app的加载初始视图是哪个,咱们这里来按下面的步骤指定。

-w420

  1. 在 Main.storyboard 中选中 TableViewController

  2. 在左侧面板选中 Attributes inspector 属性面板

  3. 在 View Controller 单元,将 Is Initial View Controller 勾选

  4. 你会发如今 Main.storyboard 中的 TableViewController 左侧多了一个箭头,表示这个 View Controller 是app的第一个视图

通常 Table View Controller 是要关联 UITableViewControllerclass 的。下面来建立这个 class 类,并与 Main.storyboard 中的 TableViewController 关联。

这里注意新建 class 类 文件的时候,在左侧的 Project Navigator 项目导航中,要选中项目下面黄色文件夹,不要选中项目,由于选中项目会将文件创造在项目的根文件夹中,到时候你再想移动到项目类文件夹时会出现 在xcode中结构移下去了,但在实际项目文件夹中仍是在外面。我还没解决是什么缘由,因此这里注意下。

-w320

这里选择 Cocoa Touch Class ,而后命名为 “PhotosTableViewController”,下面的 "Subclass of" 写入 UITableViewController 。意思就是说咱们自定义的类是 UITableViewController 的子类。

-w320

-w320

这里若是之前接触过OOP面向对象编程会比较好理解。
简单理解就是,咱们本身建立的 PhotosPinTableViewController 称为子类,它会继承(拥有)UITableViewController 这个父类中定义的全部 状态(变量、常量)和功能(方法)。

到这里,在 Main.storyboard 里刚刚咱们拖拽进去的的 TableViewController 要与刚刚咱们建立 PhotosPinTableViewController.swift 关联起来。这样就能够理解为当前在 Main.storyboard 中的这个视图 view controller 为刚刚建立的这个类来管理和控制。

-w420

  1. 选中view controller

  2. 在右侧面板切换到第三个 Identity inspector

  3. 在 Custom Class 单元下将 Class 下拉选中刚刚建立的类 PhotosPinTableViewController.swift

在开始阶段,咱们会先模拟一些固定的假数据来测试功能是否可以正常跑通,逻辑是否正确。因此在 PhotosPinTableViewController.swift 中定义我copy 过来的一些数据。

var photoNames = ["Cafe Deadend", "Homei", "Teakha", "Cafe Loisl", "Petite Oyster", "For Kee Restaurant", "Po's Atelier", "Bourke Street Bakery", "Haigh's Chocolate", "Palomino Espresso", "Upstate", "Traif", "Graham Avenue Meats", "Waffle & Wolf", "Five Leaves", "Cafe Lore", "Confessional", "Barrafina", "Donostia", "Royal Oak", "CASK Pub and Kitchen"]

这里注意如下,由于PhotosPinTableViewController继承了UITableViewController,而UITableViewController实现了UITableViewDelegateUITableViewDataSource两个协议(也能够理解为接口)。因此PhotosPinTableViewContrller也就从UITableViewController里面得到了UITableViewControllerUITableViewDataSource里面定义的功能(方法)。查看OOP面向对象编程

这里推荐一个Mac上的应用Dash,用来查看各类开发API文档,按照目前程序员的技能发展树,掌握多门语言和技术是必备的,因此这个应用是很是不错的选择。Xcode中是自带Apple开发文档的。

-w280

查看一下UITableViewDelegateUITableViewDataSource两个协议
-w480

  1. 能够搜索“uitableviewcontroller”不区分大小写

  2. 显示当前的Class的继承树,从上往下看

  3. 显示当前的Class实现了哪些协议 Protocol

  4. 在TableViewController要关注的两个基础协议

简单理解
UITableViewDelegate:主要管理处理表视图的界面和功能相关的
UITableViewDataSource:主要处理表视图中的数据和操做相关的

-w480

-w420

  1. 方法名,有时候也这样写 tableView(_:numberOfRowsInSection:),swift的方法做用从定义的名称结构是很好理解的

  2. tableView(_:numberOfRowsInSection:)的功能是返回的表格的块组section里面数据的行数。这里就是咱们定义的数据数组的个数使用 .count 得到

  3. 参数,表示当前的表视图

  4. 参数

  5. 表示这个方法是必须实现

  6. 方法的声明结构

  7. 参数,表视图对象的信息

  8. 参数,标识表视图块的索引

  9. 返回值,数据的数量

在PhotosPinTableViewController.swift中加入如下代码

override func numberOfSections(in tableView: UITableView) -> Int {
        // #返回在表的第几个section中
        return 1
    }

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #返回行数
        return photos.count
    }
    
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        //经过下图指定的Identifier标识来得到cell
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        //下面是table view默认样式下的右边的文字与左边的图片排列
        cell.textLabel?.text = photoNames[indexPath.row]
        cell.imageView?.image = UIImage(named: photosImages[indexPath.row])
        
        return cell
    }
  • tableView(_:numberOfRowsInSection:)方法返回的值决定调用tableView(_:cellForRowAt:)多少次

  • 每次调用tableView(_:cellForRowAt:)就决定行里面内容和数据的显示。

-w580

图片资源加入到项目中 (提取:f6py)

  1. 选中左侧项目导航的 Assets.xcassets

  2. 将图片资源文件夹拖拽到中间的区域

-w380

-w320

相关文章
相关标签/搜索