how to overlay an image over an image in xcode? - ios

Question

I am trying to make an app where the user can select an image out of their image library that will be used as background, followed by their logo that they can also choose from their (photo) library...
For now i haven't found a tutorial that can help me, mostly because the user must be able to set their own images instead of a default image.
Also, does anyone of you guys also know how i can have multiple UIImagePickerControllers since this code affects both images at the same time instead of one per picker?
What i use/have :
I use swift
I use xcode 7.0.1
This is
the storyboard i currently use.
My swift file :
class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
#IBOutlet weak var logo: UIImageView!
#IBOutlet weak var bgimg: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
}
#IBAction func selectbg(sender: AnyObject) {
let bgPicker = UIImagePickerController()
bgPicker.delegate = self
bgPicker.sourceType = .PhotoLibrary
self.presentViewController(bgPicker, animated: true, completion: nil)
}
#IBAction func selectlogo(sender: AnyObject) {
let logoPicker = UIImagePickerController()
logoPicker.delegate = self
logoPicker.sourceType = .PhotoLibrary
self.presentViewController(logoPicker, animated: true, completion: nil)
}
func imagePickerController(picker: UIImagePickerController, didFinishPickingImage image: UIImage, editingInfo: [String : AnyObject]?) {
logo.image = image
bgimg.image = image
self.dismissViewControllerAnimated(false, completion: nil)
}
#IBAction func addImage(sender: AnyObject) {
let ActionAlert = UIAlertController(title: nil, message: "What image do you want to add/edit?", preferredStyle: .ActionSheet)
let bgimage = UIAlertAction(title: "Background", style: .Default, handler: { (Alert:UIAlertAction!) -> Void in
print("Edit background image")
})
let logo = UIAlertAction(title: "Logo", style: .Default) { (Alert:UIAlertAction!) -> Void in
print("Edit logo")
}
let cancel = UIAlertAction(title: "Cancel", style: .Cancel) { (Alert:UIAlertAction!) -> Void in
print("remove menu")
}
ActionAlert.addAction(bgimage)
ActionAlert.addAction(logo)
ActionAlert.addAction(cancel)
self.presentViewController(ActionAlert, animated: true, completion: nil)
}
}
If i wasn't clear about my question, feel free to ask for more info

Answer 1

Create two UIImageViews for each image and add the foreground one as a subview to the parent.
Something like this:
let bgimg = UIImage(named: "image-name") // The image used as a background
let bgimgview = UIImageView(image: bgimg) // Create the view holding the image
bgimgview.frame = CGRect(x: 0, y: 0, width: 500, height: 500) // The size of the background image
let frontimg = UIImage(named: "front-image") // The image in the foreground
let frontimgview = UIImageView(image: frontimg) // Create the view holding the image
frontimgview.frame = CGRect(x: 150, y: 300, width: 50, height: 50) // The size and position of the front image
bgimgview.addSubview(frontimgview) // Add the front image on top of the background

Answer 2

Here's the sample code for merging footer image to original
extension UIImage{
func merge(mergewith:UIImage) -> UIImage {
UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
let actualArea = CGRect(x: 0, y: 0, width: size.width, height: size.height)
let mergeArea = CGRect(x: 0, y: size.height - mergewith.size.height, width: size.width, height: mergewith.size.height)
self.draw(in: actualArea)
mergewith.draw(in: mergeArea)
let merged = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return merged
}
}