124課:上傳發(fā)布圖片

課程筆記文集地址: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: "請再試一下")   
        }
    }
}

四肢娘、結束

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末呈础,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子橱健,更是在濱河造成了極大的恐慌而钞,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,997評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件拘荡,死亡現(xiàn)場離奇詭異臼节,居然都是意外死亡,警方通過查閱死者的電腦和手機珊皿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,603評論 3 392
  • 文/潘曉璐 我一進店門网缝,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蟋定,你說我怎么就攤上這事粉臊。” “怎么了驶兜?”我有些...
    開封第一講書人閱讀 163,359評論 0 353
  • 文/不壞的土叔 我叫張陵扼仲,是天一觀的道長远寸。 經(jīng)常有香客問我,道長屠凶,這世上最難降的妖魔是什么驰后? 我笑而不...
    開封第一講書人閱讀 58,309評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮阅畴,結果婚禮上,老公的妹妹穿的比我還像新娘迅耘。我一直安慰自己贱枣,他們只是感情好,可當我...
    茶點故事閱讀 67,346評論 6 390
  • 文/花漫 我一把揭開白布颤专。 她就那樣靜靜地躺著纽哥,像睡著了一般。 火紅的嫁衣襯著肌膚如雪栖秕。 梳的紋絲不亂的頭發(fā)上春塌,一...
    開封第一講書人閱讀 51,258評論 1 300
  • 那天,我揣著相機與錄音簇捍,去河邊找鬼只壳。 笑死,一個胖子當著我的面吹牛暑塑,可吹牛的內(nèi)容都是我干的吼句。 我是一名探鬼主播,決...
    沈念sama閱讀 40,122評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼事格,長吁一口氣:“原來是場噩夢啊……” “哼惕艳!你這毒婦竟也來了?” 一聲冷哼從身側響起驹愚,我...
    開封第一講書人閱讀 38,970評論 0 275
  • 序言:老撾萬榮一對情侶失蹤远搪,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后逢捺,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體谁鳍,經(jīng)...
    沈念sama閱讀 45,403評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,596評論 3 334
  • 正文 我和宋清朗相戀三年劫瞳,在試婚紗的時候發(fā)現(xiàn)自己被綠了棠耕。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,769評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡柠新,死狀恐怖窍荧,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情恨憎,我是刑警寧澤蕊退,帶...
    沈念sama閱讀 35,464評論 5 344
  • 正文 年R本政府宣布郊楣,位于F島的核電站,受9級特大地震影響瓤荔,放射性物質(zhì)發(fā)生泄漏净蚤。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,075評論 3 327
  • 文/蒙蒙 一输硝、第九天 我趴在偏房一處隱蔽的房頂上張望今瀑。 院中可真熱鬧,春花似錦点把、人聲如沸橘荠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,705評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽哥童。三九已至,卻和暖如春褒翰,著一層夾襖步出監(jiān)牢的瞬間贮懈,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,848評論 1 269
  • 我被黑心中介騙來泰國打工优训, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留朵你,地道東北人。 一個月前我還...
    沈念sama閱讀 47,831評論 2 370
  • 正文 我出身青樓揣非,卻偏偏與公主長得像撬呢,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子妆兑,可洞房花燭夜當晚...
    茶點故事閱讀 44,678評論 2 354

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,095評論 25 707
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫魂拦、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,098評論 4 62
  • 1.首先應該檢測一下目前電腦上擁有的java的版本: 2.如果已經(jīng)有java8了搁嗓,就可以直接跳轉到第四步: 3.沒...
    關瑋琳linSir閱讀 11,591評論 0 24
  • 有一個年齡段芯勘,總愛唏噓自己已經(jīng)變老了,變老可以概括很多狀況腺逛, 有時候是認真的荷愕,但有時候只是戲謔的。 應該只是想表示...
    2小閱讀 311評論 1 1
  • 如果可以擁有100個胃荐类,我愿意將99個胃,都留給順德茁帽∮窆蓿——列車長 1 “食出廣東屈嗤,廚在鳳城”, 鳳城吊输,正是如今的順...
    公元2046閱讀 499評論 0 0