課程筆記文集地址:Udemy課程:The Complete iOS 9 Developer Course - Build 18 Apps
Section 8 主要的內(nèi)容是克隆 Instagram:107 - 128課。
一、布局 Storyboard
1.添加 Post 按鈕
如上圖所示粉铐,在用戶列表里添加 Post 按鈕(ItemBarButton)疼约,點擊 Post 跳轉到下圖中的界面(segue類型選擇 Show):
2.創(chuàng)建上傳圖片的界面
如上圖,在 Storyboard 中拖拽控制器和相應的控件蝙泼。
控件:UIImageView程剥、UIButton * 2、UITextField汤踏。
3.設置 AutoLayout 約束
4.新建 PostImageViewController.swift
創(chuàng)建此界面對應的類文件:PostImageViewController.swift织鲸,到 Storyboard 中進行關聯(lián)。
5.創(chuàng)建 Action 和 Outlet 連接
@IBOutlet var imageToPost: UIImageView!
@IBOutlet var message: UITextField!
@IBAction func chooseImage(sender: AnyObject) {
}
@IBAction func postImage(sender: AnyObject) {
}
二溪胶、實現(xiàn)選擇圖片按鈕功能(Choose An Image)
1. 協(xié)議
class PostImageViewController: UIViewController, UINavigationControllerDelegate, UIImagePickerControllerDelegate {
}
2.彈出圖片選擇器
@IBAction func chooseImage(sender: AnyObject) {
let image = UIImagePickerController()
image.delegate = self
image.sourceType = UIImagePickerControllerSourceType.PhotoLibrary
image.allowsEditing = false
self.presentViewController(image, animated: true, completion: nil)
}
func imagePickerController(picker: UIImagePickerController, didFinishPickingImage image: UIImage, editingInfo: [String : AnyObject]?) {
self.dismissViewControllerAnimated(true, completion:nil)
imageToPost.image = image
}
三搂擦、實現(xiàn)發(fā)布圖片按鈕功能(Post Image)
1. 在 LeanCloud 創(chuàng)建存儲對象
@IBAction func postImage(sender: AnyObject) {
let post = AVObject(className: "Post")
post.setObject(message.text, forKey: "message")
post.setObject(AVUser.currentUser()!.objectId!, forKey: "userId")
}
2.使用 AVFile
let imageData = UIImagePNGRepresentation(imageToPost.image!)
let imageFile = AVFile(name: "image.png", data: imageData!)
post.setObject(imageFile, forKey: "imageFile")
3.將圖片存儲到 LeanCloud 服務器
post.saveInBackgroundWithBlock{(success, error) -> Void in
if error == nil {
//存儲成功
} else {
//存儲失敗
}
}
4.在上傳圖片過程中不允許有其他操作
添加一個 ActivityIndicator,在上傳的過程中出現(xiàn)哗脖,然后讓用戶等待上傳圖片結束盾饮,在沒有結束之前用戶不能進行其他的操作,保存成功后 ActivityIndicator 消失懒熙,用戶可以繼續(xù)其他操作丘损。
創(chuàng)建變量:
var activityIndicator = UIActivityIndicatorView()
設置屬性:
activityIndicator = UIActivityIndicatorView(frame: self.view.frame)
activityIndicator.backgroundColor = UIColor(white: 1.0, alpha: 0.5)
activityIndicator.center = self.view.center
activityIndicator.hidesWhenStopped = true
activityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.Gray
view.addSubview(activityIndicator)
activityIndicator.startAnimating()
UIApplication.sharedApplication().beginIgnoringInteractionEvents()
結束旋轉:
self.activityIndicator.stopAnimating()
UIApplication.sharedApplication().endIgnoringInteractionEvents()
5.沒有上傳圖片不能點擊發(fā)布
增加提示,檢測用戶是否已經(jīng)上傳圖片工扎。這里可以將提示框做成帶參數(shù)的方法徘钥,能夠多次利用此方法。
func displayAlert(title: String, message: String) {
let alert = UIAlertController(title: title, message: message, preferredStyle: UIAlertControllerStyle.Alert)
alert.addAction((UIAlertAction(title: "OK", style: .Default, handler: { (action) -> Void in
self.dismissViewControllerAnimated(true, completion: nil)
})))
self.presentViewController(alert, animated: true, completion: nil)
}
判斷條件為在存儲過程中是否有錯誤:
post.saveInBackgroundWithBlock{(success, error) -> Void in
self.activityIndicator.stopAnimating()
UIApplication.sharedApplication().endIgnoringInteractionEvents()
if error == nil {
self.displayAlert("Image Posted!", message: "Your image has been posted successfully")
} else {
self.displayAlert("Could not post image", message: "Please try again later")
}
}
7.點擊 Post 方法完整的代碼
@IBAction func postImage(sender: AnyObject) {
activityIndicator = UIActivityIndicatorView(frame: self.view.frame)
activityIndicator.backgroundColor = UIColor(white: 1.0, alpha: 0.5)
activityIndicator.center = self.view.center
activityIndicator.hidesWhenStopped = true
activityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.Gray
view.addSubview(activityIndicator)
activityIndicator.startAnimating()
UIApplication.sharedApplication().beginIgnoringInteractionEvents()
let post = AVObject(className: "Post")
post.setObject(message.text, forKey: "message")
post.setObject(AVUser.currentUser()!.objectId!, forKey: "userId")
let imageData = UIImagePNGRepresentation(imageToPost.image!)
let imageFile = AVFile(name: "image.png", data: imageData!)
post.setObject(imageFile, forKey: "imageFile")
post.saveInBackgroundWithBlock{(success, error) -> Void in
if error == nil {
//存儲成功
self.displayAlert("圖片已發(fā)布!", message: "你的圖片已經(jīng)成功上傳")
//存儲成功后將圖片控件里的圖片變成默認圖片
self.imageToPost.image = UIImage(named: "默認圖片.png")
//存儲成功后將文本框里的文字清空
self.message.text = ""
} else {
//存儲失敗
self.displayAlert("無法發(fā)布圖片", message: "請再試一下")
}
}
}