Pinning a UIButton to a specific location on a photograph - swift

Question

urbanPan
Hi,
I have a photograph with UI buttons on top. The UI buttons need to be at very specific and precise locations on the photograph.
When I resize the photograph (for example, for different devices), the UI buttons never stay in alignment.
Containers do not work as they are relative to the screen size and orientation rather than the aspect and dimensions of the photograph.
For example, when the photo is uncropped on larger devices such as the iPad, then the container rules are no longer relevant.
Pinning does not work as the absolute values cannot be scaled up and resized.
I know what I’m trying to achieve is possible as it is common and seen in other apps. However, the alignment and constraints in Xcode do not appear to facilitate this?
I’m sure I’m missing something. Any ideas, greatly appreciated.
See urbanPan image below or urbanPan.io for Github files.
urbanPan
Blessup,
UrbanSmash
Although the issue appears to be more directly related to the Main.Storyboard layout, here is the code for the ViewController.swift
//
// ViewController.swift
// urbanPan
//
// Created by URBANSMASH pro on 29/08/2019.
// Copyright © 2019 Play it on Pan. All rights reserved.
//
import UIKit
import AVFoundation
import AudioKit
class ViewController: UIViewController, AVAudioPlayerDelegate {
var player : AVAudioPlayer!
let sounds = ["Rest", "2-F3", "2-FS3", "2-G3", "2-GS3", "2-A3", "2-AS3", "2-B3", "2-C4", "2-CS4", "2-D4", "2-DS4", "2-E4", "2-F4", "2-FS4", "2-G4", "2-GS4", "2-A4", "2-AS4", "2-B4", "2-C5", "2-CS5", "2-D5", "2-DS5", "2-E5", "2-F5", "2-FS5", "2-G5", "2-GS5", "2-A5", "2-AS5", "2-B5", "2-C6"]
var noteNum = 0
let conductor = Conductor.shared
var isPlaying = false
var currentSound = 0
override func viewDidLoad() {
super.viewDidLoad()
conductor.midi.addListener(self)
conductor.loadSamples(byIndex: currentSound)
}
#IBAction func noteReleased(_ sender: UIButton) {
noteNum = sender.tag
// player.currentTime = 0
stopSound()
}
#IBAction func notePlayed(_ sender: UIButton) {
noteNum = sender.tag
// player.currentTime = 0
playSound()
}
func stopSound() {
noteOff(note: MIDINoteNumber(noteNum))
}
func playSound() {
noteOn(note: MIDINoteNumber(noteNum))
}
func noteOn(note: MIDINoteNumber) {
DispatchQueue.main.async {
self.conductor.playNote(note: note, velocity: 100, channel: 0)
}
}
func noteOff(note: MIDINoteNumber) {
DispatchQueue.main.async {
self.conductor.stopNote(note: note, channel: 0)
}
}
}
extension ViewController: AKMIDIListener {
func receivedMIDINoteOn(noteNumber: MIDINoteNumber, velocity: MIDIVelocity, channel: MIDIChannel) {
DispatchQueue.main.async {
self.conductor.playNote(note: noteNumber, velocity: velocity, channel: channel)
}
}
func receivedMIDINoteOff(noteNumber: MIDINoteNumber, velocity: MIDIVelocity, channel: MIDIChannel) {
DispatchQueue.main.async {
self.conductor.stopNote(note: noteNumber, channel: channel)
}
}
// MIDI Controller input
func receivedMIDIController(_ controller: MIDIByte, value: MIDIByte, channel: MIDIChannel) {
AKLog("Channel: \(channel + 1) controller: \(controller) value: \(value)")
//conductor.controller(controller, value: value)
}
// MIDI Pitch Wheel
func receivedMIDIPitchWheel(_ pitchWheelValue: MIDIWord, channel: MIDIChannel) {
//conductor.pitchBend(pitchWheelValue)
}
// After touch
func receivedMIDIAfterTouch(_ pressure: MIDIByte, channel: MIDIChannel) {
conductor.afterTouch(pressure)
}
func receivedMIDISystemCommand(_ data: [MIDIByte]) {
// do nothing: silence superclass's log chatter
}
// MIDI Setup Change
func receivedMIDISetupChange() {
AKLog("midi setup change, midi.inputNames: \(conductor.midi.inputNames)")
let inputNames = conductor.midi.inputNames
inputNames.forEach { inputName in
conductor.midi.openInput(name: inputName)
}
}
func setSpeakersAsDefaultAudioOutput() {
do {
try AVAudioSession.sharedInstance().setCategory(AVAudioSession.Category.playAndRecord, options: AVAudioSession.CategoryOptions.defaultToSpeaker)
}
catch {
// hard to imagine how we'll get this exception
let alertController = UIAlertController(title: "Speaker Problem", message: "You may be able to hear sound using headphones.", preferredStyle: UIAlertController.Style.alert)
let okAction = UIAlertAction(title: "OK", style: UIAlertAction.Style.default) {
(result: UIAlertAction) -> Void in
}
alertController.addAction(okAction)
self.present(alertController, animated: true, completion: nil)
}
}
}

Answer 1

For this layout, I think FrameLayout is preferred over AutoLayout.
When the viewDidLayoutSubviews method is called, you calculate and update the view size and position according to the screen size.
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let screenSize = UIScreen.main.bounds
// ...
d4View.frame = ...
}