124课:上传发布图片

课程笔记文集地址:Udemy课程:The Complete iOS 9 Developer Course - Build 18 Apps

Section 8 主要的内容是克隆 Instagram:107 - 128课。

一、布局 Storyboard

1.添加 Post 按钮

124课:上传发布图片_第1张图片

如上图所示,在用户列表里添加 Post 按钮(ItemBarButton),点击 Post 跳转到下图中的界面(segue类型选择 Show):

124课:上传发布图片_第2张图片

2.创建上传图片的界面

如上图,在 Storyboard 中拖拽控制器和相应的控件。

控件:UIImageView、UIButton * 2、UITextField。

3.设置 AutoLayout 约束

4.新建 PostImageViewController.swift

创建此界面对应的类文件:PostImageViewController.swift,到 Storyboard 中进行关联。

5.创建 Action 和 Outlet 连接

@IBOutlet var imageToPost: UIImageView!
@IBOutlet var message: UITextField!
@IBAction func chooseImage(sender: AnyObject) {

}

@IBAction func postImage(sender: AnyObject) {

}

二、实现选择图片按钮功能(Choose An Image)

1. 协议

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
        
    }

三、实现发布图片按钮功能(Post Image)

1. 在 LeanCloud 创建存储对象

@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,在上传的过程中出现,然后让用户等待上传图片结束,在没有结束之前用户不能进行其他的操作,保存成功后 ActivityIndicator 消失,用户可以继续其他操作。

创建变量:

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.没有上传图片不能点击发布
增加提示,检测用户是否已经上传图片。这里可以将提示框做成带参数的方法,能够多次利用此方法。

    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("图片已发布!", message: "你的图片已经成功上传") 
              //存储成功后将图片控件里的图片变成默认图片
              self.imageToPost.image = UIImage(named: "默认图片.png")
              //存储成功后将文本框里的文字清空
              self.message.text = ""
        } else {
              //存储失败
              self.displayAlert("无法发布图片", message: "请再试一下")   
        }
    }
}

四、结束

你可能感兴趣的:(124课:上传发布图片)