『FoodTracker』(二)

80

这次实现一个选取相册内照片的功能

把 UI 先准备一下

在上次的基础上，加一个 imageView，当用户点击这个 iamgeView 的时候，会打开此设备上的相册，用户选择的照片就会出现在 imageView 中。
 Here We go.
 在 storyBoard的 Object Library中拖一个 imageView到 上次做的button下面，在Size inspector将其 intrinsic Size 选择为 placeholder，并把width和Height都设置为 320。
 然后加个 1:1 aspect ratio 的约束来限制形状。
 接下来，从电脑里拉个图过来放到Assetsxcassets文件中，把名字改为defaultphoto,(放在 2x 的那个位置，这个尺寸合适 ipone6，6s)，之后记得在Storyboard的imageView的Attributes inspector里，把 image 设置为 defaultphoto

把 StoryBoard 的东西通过 "Control-drag" 到代码

选择 imageView and "Control-drag" 到ViewControl.swift文件，并起名为photoImageView, 

@IBOutlet weak var photoImageView: UIImageView!

为 imageView 创建一个『tap』手势

从Object Library中拖一个 tap gesture到 imageView上面去。
 然后把 tap gesture通过 "Control-drag"连接到ViewControl.swift文件，起名为selectImageFromPhotoLibrary，类型选择为 UITapGestureRecognize
 like this: 

@IBAction func selectImageFromPhotoLibrary(sender: UITapGestureRecognizer) {
}

先在这个方法中加行代码来确保用户如果点击了图片区域，键盘会自动隐藏起来 

//隐藏键盘
nameTextField.resignFirstResponder()

然后创建一个 image picker controller 

// UIImagePickerController 是个用来让用户选择图片的 view controller
let imagePickerController = UIImagePickerController()

再加一行代码,干吗用的注释说的很清楚了：只能选，不能干别的 

// Only allow photos to be picked, not taken.
imagePickerController.sourceType = .PhotoLibrary

设置一下代理 

// Make sure ViewController is notified when the user picks an image.
imagePickerController.delegate = self

最后，加一行代码,目的是：当用户选了图片的时候，确保 ViewController 被通知 

        presentViewController(imagePickerController, animated: true, completion: nil)

Ok，现在我们完成了selectImageFromPhotoLibrary方法，接下来干另一件事：写一下UIImagePickerControllerDelegate的方法。

在selectImageFromPhotoLibrary()方法外面，我们需要写两个方法：imagePickerControllerDidCancel()和imagePickerController()这个方法属于 UIImagePickerControllerDelegate.
 代码如下： 

// MARK: UIImagePickerControllerDelegate
    
    func imagePickerControllerDidCancel(picker: UIImagePickerController) {
        // 用户取消的话，释放 picker
        dismissViewControllerAnimated(true, completion: nil)
    }
    
    func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : AnyObject]) {
        // 获得被选中的图片
        let selectedImage = info[UIImagePickerControllerOriginalImage] as! UIImage
        
        //把选中的图片传给 photoImage 
        photoImageView.image = selectedImage
        
        //释放 Picker
        dismissViewControllerAnimated(true, completion: nil)
    }

这样就行了，可以运行 app 啦。
 值得注意的是，这次用到的代理有两个：UIImagePickerControllerDelegate,UINavigationControllerDelegate,因为
 想用前者的话，必须要用到后者，所以都要写上，像这样： 

class ViewController: UIViewController, UITextFieldDelegate, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
}

不然会报错的。

最后说一个我犯得错误，浪费我很久时间，这个错误是『当我点击图片的时候，死活都不会弹出来相册』，最后我发现原因在于：StoryBoard 中，查看 ImageView 的 Attribut inspector，其中有一项叫做 "interacion",它有两个可选的属性"User Interaction Enable"和"Multiple touch"，如果你没有在"User Interaction Enable"前面的小方框中打钩的话，程序是不会弹出相册的，引以为戒
 如果你还是运行不顺利的话，记得仔细观察一下 StroyBoard 中的各种组件是否都正确的关联起来了。
 这个程序可以从这个链接下载到

Comments
Write a Comment