how to overlay an image over an image in xcode?

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
    }
}