iOS Developer

iOS Apprentice中文版-从0开始学iOS开发-第三十

2017-10-15  本文已影响209人  Billionfan

Tag Location界面

主界面上有一个叫做Tag Location的大按钮。它仅仅在GPS坐标被获取后才显示,然后你可以通过点击这个按钮来添加关于位置信息的描述以及添加一张照片上去。

在这一小节,你将创建Tag Location界面,但是还不会进入到保存location对象的内容,我们会在下一小节讲关于保存location的话题。

Tag Location界面是一个标准的具备静态cell的table view controller,所以你会对这个过程非常熟悉,我们在前面的课程中已经做过好几次类似的事了。

这一工作结束时,Tag Location界面看上去会是这个样子的:

顶部的description cell包含一个UITextView。你已经使用过UITextField控件了,它是用于编辑单行文本的;UITextView和它非常类似,但是是用来编辑多行文本的。

点击Category cell会打开一个新的界面,使你可以从category(分类)列表中选择一个分类。这和上一个课程中的icon picker(选择图标的那个东西)非常类似,这里没有什么太新的东西。

Add Photo cell可以是你从照片库中选择一张照片或者是拍摄一张新的照片。我们不会在这一小节中讲述全部上述内容,因为你一次做不了那么多事。

其他的cell,仅仅是显示一些可读信息,比如经纬度、地址信息,并且会展示出当前的时间。

练习:试着通过上面的描述自己构建这个界面。你不必做“选择分类”和“获取照片”这一部分。噢,看起来工作量不少。实际上工作量确实不小,但是你应该有能力处理它们。这个界面设计的所有东西,前面你都做过一次或者几次。所以,带上点信心,开始做吧。

添加新的视图控制器

新建一个Swift文件,命名为LocationDetailsViewController。

接下来要干的事情和你想的一样:为storyboard上的控件创建outlet和链接。为了节省时间,我直接把代码贴出来给你。

打开LocationDetailsViewController.swift,把原有的内容都删掉,然后替换为下面的代码:

import UIKit

class LocationDetailsViewController: UITableViewController {
    @IBOutlet weak var descriptionTextView: UITextView!
    @IBOutlet weak var categoryLable: UILabel!
    @IBOutlet weak var latitudeLabel: UILabel!
    @IBOutlet weak var longitudeLabel: UILabel!
    @IBOutlet weak var addressLabel: UILabel!
    @IBOutlet weak var dateLabel: UILabel!
    
    @IBAction func done() {
        dismiss(animated: true, completion: nil)
    }
    
    @IBAction func cancel() {
        dismiss(animated: true, completion: nil)
    }
}

这里没有什么陌生的东西,就是一堆outlet属性和两个动作方法,目前这两个动作方法都仅仅是解除掉当前界面。

打开storyboard,拖拽一个新的Table View Controller到画布上,就放到Current Location View Controller的旁边。

打开这个新视图的身份检查器,将Class属性修改为LocationDetailsViewController,这样就把它和刚创建的Swift文件关联起来了。

选定这个新的Table View Controller,然后选择Editor -> Embed In -> Navigation Controller,来把它推到一个新的导航控制器中。

按住ctrl键拖拽Tag Location按钮到这个新的导航控制器上并且创建一个Present Modally的转场,将这个转场的identifier设置为TagLocation。

双击Location Details View Controller的导航栏中心处,将其标题修改为Tag Location。

选择table view,设置Static Cells,并且将style设置为Grouped。

完成后storyboard看起来会是这个样子:

接下来运行app,确保一切正常。

当然,这个新的界面现在不具备任何功能,让我们来添加一些按钮。

注:由于国庆长假原因,翻译君的速度木有跟上,不过后面会尽量快点的,希望大家能继续关注,(^^)

上一篇下一篇

猜你喜欢

热点阅读