After the HelloWorld and One Button Hookup exercise, I learned how to add simple UI objects like labels and buttons to a single view app, arranging them in the safe area for auto layout.
I manage social media and streaming platforms for this radio station: The Lot Radio. There is an anniversary party coming up this weekend so I thought about making a one button app that reveals some major performers on the line up by tapping through pictures of the artists. Instead of having sound files in sound file array correspond to the image array like in the one button code kit, I decided to just play one track throughout from the moment the app launches, so I placed the play sound function in func viewDidLoad().
I also changed the launchscreen image of Mobile Lab into The Lot Radio logo inside the attribute inspector of the image.
Github repo: https://github.com/ada10086/Mobile-Lab/tree/master/Week%201%20One%20Button%20App
Challenge:
I first set the image view constraints so that image.view.width = safe area width, image.view.height = safe area height, and centerX/Y = safe area centerX/Y, and set the content mode of my image view to aspect fill. However, there would still be an empty space above and below my images when I ran simulation, I assumed it was the the space outside of safe area but its actually much smaller. I didn’t know where the issue was and how to fix that tiny line on the top and bottom. So I referred to this documentation on constraints, and figured out I could extend the image view beyond safe area in the size inspector of constraints by adding a constant value. So I manually adjusted the constant value to maximize the image to fill up the screen ->
Now my images are filling up my screen in portrait mode, however when its in landscape mode, the left and right area (previously top and bottom) were still not filled, only the safe area was filled, and I wasn’t sure how to fix that:
I also tried to highlight the label with different color box that’s the same size as my label so the texts are more visible against the background images, but since the width and height of my label is the same as my safe area, changing the background of the label seem to change the color of the whole screen, so I deleted label height = safe area height and added a constant to center Y alignment constraint, and changed the background color of the label.
In the end, my app looks like this: