开发一个自拍App吧~第九章练习:A Selfie App

在本书的剩下的几章中,你将学习开发Selfie App然后提交到App Store。Selfie(自拍)App能够让用户拍照然后分享到Facebook(见图9-2),仅能在iPhone中使用,同时使用这章节学到的UIImagePickerController的相关知识点。

图9-2

打开Xcode,顶部菜单栏选择File -> New Project。选择Single View Application,点击Next。

Page 244 | Chapter 9: Camera, Photos, and Social Network

Name一栏输入Selfie,Organization Name和Organization Identifier设置为你的名字不要有空格(见图9-3)。语言是Swift,Device选择iPhone,点击Next,保存文件。

图9-3

屏幕显示工程信息信息,在Device Orientation区域,不勾选Landscape Left和Landscape Right选项(见图9-4)。

图9-4

Exercise: A Selfie App | Page 245

滑倒底部找到Linked Frameworks and Libraries区域(见图9-5),点击左下角的加号,在搜索框中输入Social,选择Social.framework文件,点击Add。Social.framework文件出现在Project Navigator中了,把它拖到Supporting Files文件夹中。

图9-5

Page 246 | Chapter 9: Camera, Photos, and Social Network

打开Main.storyboard文件(见图9-6)。从Object Library拖拽一个Image View,放到界面的中间,把Image View的四个边界拖拽到和界面一样大小,在Attribute Inspector中,把mode改为Aspect Fill。

图9-6

选中Image View,从顶部菜单栏选择Editor -> Pin -> Leading Space to Superview;再次选中Image View,从顶部菜单栏选择Editor -> Pin -> Trailing Space to Superview;再次选中Image View,从顶部菜单栏选择Editor -> Pin -> Top Space to Superview;再次选中Image View,从顶部菜单栏选择Editor -> Pin -> Bottom Space to Superview。这样Image View就能够适配任何尺寸的设备了(见图9-7)。

图9-7

Exercise: A Selfie App | Page 247

接下来你要添加一个navigation bar和两个按钮(见图9-8)。点击选中当前界面上的黄色圆圈,点击顶部菜单栏的Editor -> Embed In -> Navigation Controller。Navigator Controller出现在界面上了,双击navigation bar中间部分,输入Selfie。

图9-8

Page 248 | Chapter 9: Camera, Photos, and Social Network

从Object Library中拖拽两个Bar Button Item到界面上,放到navigation bar的两侧,双击左侧Bar Button Item,命名为Take Selfie。双击右侧Bar Button Item,命名为Share(见图9-9)。

图9-9

现在界面上的控件已经放置完毕了,需要把控件和ViewController.swift文件建立连接。打开Assistant Editor,隐藏Inspector和Document Outline,删除去掉viewDidLoad和didReceiveMemoryWarning方法。

接着按住Control键,点击Image View拖拽到ViewController.swift文件中,放到 class ViewController: UIViewController(见图9-10)的下方,然后松开鼠标,出现弹出框(见图9-11)。

图9-10
图9-11

Exercise: A Selfie App | Page 249

Connection选择Outlet,Name一栏输入myImageView,点击Connect。

按住Control键,把Take Selfie按钮拖拽到ViewController.swift文件中,放到 class ViewController: UIViewController(见图9-12)的下方,然后松开鼠标,出现弹出框(见图9-13)。

图9-12
图9-13

Page 250 | Chapter 9: Camera, Photos, and Social Network

Connection类型选择Action,Name一栏中输入selfieTapped,点击Connect。selfieTapped自动出现在ViewController.swift文件中。

按住Control键,把Share按钮拖拽到ViewController.swift文件中,放到 class ViewController: UIViewController(见图9-14)的下方,然后松开鼠标,出现弹出框(见图9-15)。

图9-14
图9-15

Exercise: A Selfie App | Page 251

Connection类型选择Action,Name一栏中输入shareTapped,点击Connect。shareTapped自动出现在ViewController.swift文件中。

在selfieTapped方法中添加下列代码:

@IBAction func selfieTapped(sender: AnyObject){
    var imagePicker = UIImagePickerController()
    imagePicker.delegate = self

    self.presentViewController(imagePicker, animated: true, completion: nil)

}

Page 252 | Chapter 9: Camera, Photos, and Social Network

第一行代码创建了UIImagePickerController并赋值给了变量imagePicker,第二行代码设定imagePicker的委托属性是当前的view controller,也就是.self。最后一行代码呈现imagePicker,呈现方式是modal,从屏幕下方出现,动画效果为真true。

刚刚写完的这方法出现了错误警告,imagePicker.delegate这行有问题,点击红点,显示:

Type “ViewController” does not conform to protocol ‘UIImagePickerControllerDelegate

这是Xcode让你知道ViewController实例必须要遵守UIImageViewControllerDelegate和UINavigationControllerDelegate两个协议。修改为下列代码:

class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

按Command+B编译程序。Command+B编译程序能够编辑所有的代码但是不启动模拟器,在修复bug时,比较有帮助。

把鼠标光标放到imagePicker.delegate = self这行代码下方,增加下列代码:

if UIImagePickerController.isSourceTypeAvailable(.Camera) {

}  else  {

}

if语句检查当前设备的相机是否可用,如果可用,执行上半部分的代码,如果不可用,执行下半部分的代码。把if语句补充完整:

if UIImagePickerController.isSourceTypeAvailable(.Camera) {
    imagePicker.sourceType = .Camera

    if (UIImagePickerController.isCameraDeviceAvailable(.Front)) {
        imagePicker.cameraDevice = .Front
    } else {
        imagePicker.cameraDevice = .Rear
    }

}

上半部分中第一行代码是把imagePicker的sourceType属性设置为.Camera,第二行开始是一个if语句检查前置摄像头是否可用,如果可用,就把imagePicker.cameraDevice设置为.Front,这样默认摄像头就是前置摄像头了。如果不可用,使用后置摄像头。

Exercise: A Selfie App | Page 253

完成if语句isSourceTypeAvailable下半部分的代码:

    } else {
            imagePicker.sourceType = .PhotoLibrary
    }

当没有可用的摄像头时,下半部分的代码就会执行,这时PhotoLibrary就会出现。(见图9-16)

图9-16

接下来添加didFinishPickingImage方法:

func imagePickerController(picker: UIImagePickerController!,didFinishPickingImage image: UIImage!, editingInfo: [NSObject : AnyObject]!){

}

当用户选择了一张照片或者拍摄照片后,这个方法就会被调用。didFinishPickingImage方法有两个参数,第一个是UIImagePickerController,第二个参数是名为Image的UIimage,image参数存储用户选择或拍摄的那张照片。

修改添加下列代码:

func imagePickerController(picker: UIImagePickerController!,didFinishPickingImage image: UIImage!, editingInfo: [NSObject : AnyObject]!){

    myImageView.image = image
    self.dismissViewControllerAnimated(true, completion: nil)
}

Page 254 | Chapter 9: Camera, Photos, and Social Network

第一行代码是把image参数值赋值给myImageView.image,这样myImageView就会展示image参数图片了。第二行代码是隐藏imagePicker。

把鼠标光标放到import UIKit下方,然后添加代码:

import Social

这行代码把Social.framework引入到ViewController.swift文件中,把鼠标光标放到shareTapped方法中,当用户点击Share按钮时,这个方法就被调用。在这个方法中需要完成两件事情:添加图片,显示Facebook的分享对话框。

在shareTapped():中添加下列代码:

var social = SLComposeViewController(forServiceType: SLServiceTypeFacebook)
social.addImage(myImageView.image)

self.presentViewController(social, animated: true, completion: nil)

第一行代码创建了SLComposeViewController,设置service属性为Facebook。接着第二行代码把myImageView中的图片添加到Facebook分享框中,最后第三行代码,显示SLComposeViewController。

点击Play按钮(Command+R),App启动后,选中图片后点击Share,回车耍嘛一个提示框,显示iOS 模拟器没有Facebook帐号,需要去设置中添加Facebook帐号。一旦设置完成后,停止运行App,再次Command+R启动App(见图9-17)。

图9-17

Exercise: A Selfie App | Page 255

如果App没有按照你想要的结果运行,或者程序有了错误或警告,不要太担心,学习的最佳方式就是试错,熟能生巧,到我们的网站上下载示例代码,对比一下代码,多试几次,直到搞定这个程序为止。

Page 256 | Chapter 9: Camera, Photos, and Social Network

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

推荐阅读更多精彩内容