The iOS Apprentice2-1 / 2代理

1. Your own todo app

1.1. 最终效果图


Paste_Image.png

1.2. TableViews 和 NavigationControllers

  • TableView :显示list用,是iOS开始中最有用的组件。
  • NavigationControllers:显示在界面顶端的导航条,用来迁移界面。
  • 示例图如下:
Paste_Image.png

上面两个组件是iOS开发中最重要的两个,也是本系列的重点,另外我们也将学习如何在界面之间传递数据,这个问题很是困扰初学者。

1.3. Checklist app的设计,界面以及界面迁移的设计

Paste_Image.png

2. Playing with table views

本周todo:

  • 将一个table view放到app
  • 将数据放入table view
  • 用户点击table 中的行,能够on/off

2.1 创建 Single View Application

参考文档创建,注意将朝向设置为肖像模式。


屏幕快照 2016-05-09 23.15.19.png

Upside down
iphone中支持这种模式,但是一般不用,如果来电话时,可能听筒和话筒反了给用户造成困扰。
但是ipad是可以用这种模式的。

2.2 编辑storyboard

  1. 删除既有的View Controller.(因为我们要使用特定的view Controller-TableViewController)
  2. 在swift 文件中,修改代码
  • 修改前:class ViewController: UIViewController
  • 修改后:class ChecklistViewController: UITableViewController
  1. 修改swift 文件名为 ChecklistViewController.swift
  2. 将一个TableViewController拖到storyBoard中,选中TableViewController,将其customeClass的class type 选为 ChecklistViewController .

Controller: The whole screen
Table view: The object that actually draws the list

  1. 将 TableViewController 设置为Is Initial View Controller,既将该画面设置为起始画面,如果不设置的话,iOS不知道load那个viewController,就会显示黑画面。

2.3 深入TableView

TableView:用于显示list,有两种状态,plain(每行显示相同的内容) 和 grouped(每行显示的内容不同)


Paste_Image.png

Table通过cell显示数据,一个cell关联到一个row,如上图。一个屏幕能显示6个cell,但是能够有100行的数据。

  1. 选择prototype cell,拖动一个label到cell上.
  2. 再次选择tableViewCell, 在AI(Attribute Inspector)中,将accessory设置为check mark。(是tableViewCell的一个属性)
  3. 将Table View Cell的Identifier设置为ChecklistItem,为TableViewCell设置reuse Identifier。(cell是row的可视化表现,而不是实际数据的, 还需要将数据添加到table中)

2.4 源数据

// Tableview发送消息请求数据条数,row的数目
override func tableView(tableView: 
UITableView,numberOfRowsInSection section: Int) 
-> Int {
return 1
}

// table view想要描绘一个row时,请求一个cell
override func tableView(tableView: 
UITableView,cellForRowAtIndexPath indexPath: NSIndexPath) 
-> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier
("ChecklistItem", forIndexPath: indexPath)
return cell
}

上面两个特定的方法,是TableView的data source protocol
data source是联系data和table view的纽带,一般来说view controller充当data source的角色并执行这些特定的方法。
TableView需要知道数据有几行应该显示什么数据,如下图

Paste_Image.png

TableView中有几种方式去生成cells,之前的方式是最简单的,总结如下

  • 在storyBoard中为TableView添加一个prototype cell
  • 为prototype cell添加一个reuse identifier
  • 调用dequeueReusableCellWithIdentifier,生成prototype cell的copy或是回收不再使用的cell。

Index paths,NSIndexpath是table中一个指向特定row的对象,有row number 和 section number。section number是用于分组的,这里暂时用不上。另外,以NS开头命名的类,属于Foundation framework,NS表示NextStep。

2.5 将row数据放入cells中

  1. 将label的tag设置为1000,tag是一个便于日后检索的数字标识符
  2. 将tableview(cellForRowAtIndexPath)修改为如下
    override func tableView(tableView: UITableView,
        cellForRowAtIndexPath indexPath: NSIndexPath)->UITableViewCell{
        
        //创建一个新的或是回收一个不用的cell,存入本地常量
        let cell = tableView.dequeueReusableCellWithIdentifier(
                            "ChecklistItem",forIndexPath: indexPath)
        // 获取一个刚才标识为1000的Label
        let label = cell.viewWithTag(1000) as! UILabel
        if indexPath.row%5 == 0{
            label.text = "1.Walk the dog"
        }else if indexPath.row%5 == 1 {
            label.text = "2.Brush my teeth"
        }
        else if indexPath.row%5 == 2 {
            label.text = "3.Learn ios dev"
        }
        else if indexPath.row%5 == 3 {
            label.text = "4.Soccer practice"
        }
        else if indexPath.row%5 == 4 {
            label.text = "5.Eat ice cream"
        }
        return cell
    }

用数据标识符获取一个UI element的引用,而不是用IBOutlet是一个比较好的小技巧。为什么这里不用IBOutlet来关联UI element和变量呢,因为一个table中有很多cell,每个cell都有它的label,label不是属于view controller而是属于cell的。
运行后效果图如下

有100个rows,有13个看得到的cell,如果最下面的cell出来一半,最上面的出来一半,那么需要14个cell,如果滚动很快的话,需要更多的临时cell。

  • rows - 实际数据,可以有很多个,本例子中100个
  • cells - 数据在屏幕上的呈现,有限个

2.6 点击rows

添加如下代码

override func tableView(tableView: UITableView,
                            didSelectRowAtIndexPath indexPath: NSIndexPath) {
    
        if let cell = tableView.cellForRowAtIndexPath(indexPath) {
            if cell.accessoryType == .None {
            cell.accessoryType = .Checkmark
            } else {
            cell.accessoryType = .None }
        }
        tableView.deselectRowAtIndexPath(indexPath, animated: true)
    }

checkmark是cell的accessory属性,所以第一步应该找到对应的cell。 注意第一个语句 只有存在cell的时候才继续执行。

  1. override func tableView(tableView: UITableView,cellForRowAtIndexPath indexPath: NSIndexPath)
  1. if let cell = tableView.cellForRowAtIndexPath(indexPath)
    上述两者除了名字类似以外,其实两个不同对象的不同方法,执行不同的任务。第一个data source方法,如果一个row要出现在屏幕上,则将一个新的或是回收的cell交给table。而第二个也是返回cell,但是是返回一个已经在显示的cell,不会生成新的cell。

上述程序中有bug,比如在一个cell,取消了checkmark,然后将这个cell移动到不可见,然后又将其可见,这个cell的checkmark又会被勾选,另外如果其他row回收了这个cell,这个row(cell)的checkmark是会被取消的。
因为在这里checkmark被设置为cell的属性,而cell是循环利用的,所以依赖cell去设置checkmark是不对的,应该是设置在row上。

Paste_Image.png

方法1的第一个参数是UITableView对象,是这些方法被触发的对象,这样写的话,就不需要像第一个系列中用IBOutlet去将message送给tableview了。
方法1的第二个参数是个sectionNumber,方法2和方法3的是index-path。
方法1在其他的语言中,可以用如下方式去描述
Int numberOfRowsInSection(UITableView tableView, Int section) { ...}

在上面的示例中,第二个参数有两个名称,第一个如numberofRowsSection是一个外部名称,当调用方法的时候使用,第二个名称是内部名称,在方法内部使用。
在swift语言中这种方式很普遍,第一个参数只有一个名称,其他参数有多个名称。
为什么这里三个函数名称完全一样,都叫tableview(),其实参数也是方法名的一部分,实际的命名应该是如下

tableView(numberOfRowsInSection)
tableView(cellForRowAtIndexPath)
tableView(didSelectRowAtIndexPath)

2.7 代理 delegate

在ios中,代理的概念很常用,一个对象经常依赖其他对象去完成特定的任务,这种分离使得系统更简洁,因为每个对象做它擅长的部分。
比如TableView并不关心谁是data source,也不关心app要处理的数据,它只需要发送一个cellForRowAtIndexPath获取cell既可。同样,TableView知道何时row的按下被触发了,发送一个消息后让代理来处理。TableView使用了两个代理,UITableViewDataSource用来将rows放到table,UITableViewDelegate用来处理row上的点击。
说得挺玄乎,感觉代理就是让各自做自己擅长的事情,根据功能来定义不同的类,比如我A今天要买票去北京,让代理B去确认票价和剩余票数,并把结果告诉A。代码实现如下

  • 创建一个协议,在协议中构建两个方法,分别返回票价和剩余票数 。
#import <Foundation/Foundation.h>
@protocol TicketDelegate <NSObject>
 //返回票价
- (double)price;
 //返回剩余票数
- (int)remainTicketNumber;
 @end
  • 代理遵守协议并实现协议中的方法
#import <Foundation/Foundation.h>
#import "TicketDelegate.h"
 @interface Agent : NSObject<TicketDelegate>
 @end
/**
  * 代理实现协议中的方法
 */
#import "Agent.h"
 @implementation Agent

 //返回票价
- (double)price
{
   return 100;
}

 //返回剩余票数
- (int)remainTicketNumber
{
    return 10;
}
 @end
  • A中创建一个遵守协议的代理
#import <Foundation/Foundation.h>
#import "TicketDelegate.h"
@interface Person : NSObject
 @property (nonatomic,strong) id <TicketDelegate> delegate;
 - (void)buyTicket;
 @end

#import "Person.h"
@implementation Person

 - (void)buyTicket
{
    // 叫代理去帮自己买票(询问一下票价、询问一下票的剩余张数)
    double price1 = [_delegate price];
    int number = [_delegate remainTicketNumber];
    NSLog(@"票价是%f,还剩余%d张",price1,number);

}
 @end
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容