0

Background:

I'm creating a shop for a game I'm building in Xcode using SceneKit for the game, SpriteKit for the overlays, and UIKit for the shop and any other non-overlay view I may create. I have 9 buttons, all with default sizes of 700x700 scaled down in the storyboard to 90x90. I am trying to get all 9 of them to appear in a 3x3 format that resizes and spaces based on what screen the user has.

Note: contentView is a UIView with a lighter Blue background which contains all of my buttons.

(Image 1) What I want it to look like across all screens (Minus the blue outlines): https://prnt.sc/ndzqbz

(Image 2) What It looks like on the device I designed it for (Iphone 7 Plus): http://prntscr.com/ndzrkn

(Image 3) What It looks like on a different device (I pad Pro 12.9inch 3rd gen): http://prntscr.com/ndzrrh

Question:

How would I go about making Image 2, and 3 closer to Image 1?

I've been through a ton of auto-layout constraint videos and been all over the web and haven't found anything. Every time I tried something it would mess up Image 3 even more. Note: Image 3 is a 'cleaned' version of what I previously had, it used to have buttons of all different shapes and sizes everywhere they weren't supposed to be.

I've also tried the programmatical approach to solving this problem in Swift 5.0:

Code:

func setupButtons() {
       player_button.frame = CGRect(x: contentView.self.frame.midX, y: contentView.self.frame.midY, width: 200, height: 200)
    }

What I thought it would do is position my button in the middle of the view and increase the size of my button. It did increase the size of my button, but on the Ipad screen it positioned it here: http://prntscr.com/ndzxgo which is not in the middle of my contentView as I wanted. What it seems to have done is taken the contentViews original size and used that. I also cannot seem to get it to take the size of contentView with constraints applied (I did happen to get my contentViews constraints working for the most part.).

Other things to consider:

• I have attempted Resizing the images and putting them in Stack Views - I couldn't get it to work

Thank you for any feedback!

Lal Krishna
  • 12,476
  • 4
  • 53
  • 65
Zcipher
  • 1
  • Does you set `90x90` each button size from storyboard ? – dahiya_boy Apr 19 '19 at 06:20
  • @dahiya_boy I did, I also made a 90x90 version of each image for each button. I tried using those too and got the same result. – Zcipher Apr 19 '19 at 06:22
  • There are two ways for doing this.. 1. use collectionview (more dynamic) 2. use vary for trait (to set constraints for iPhone and iPad different) – dahiya_boy Apr 19 '19 at 06:26
  • [How to create collectionView](https://www.ioscreator.com/tutorials/collection-view-controller-ios-tutorial) and [How to set size](https://stackoverflow.com/questions/38028013/how-to-set-uicollectionviewcell-width-and-height-programmatically) . You might need to put your some logic for size.. its simple so dont worry you can do it. – dahiya_boy Apr 19 '19 at 06:30
  • [How to use vary for traits](https://stackoverflow.com/questions/39890055/what-is-vary-for-traits-in-xcode-8) – dahiya_boy Apr 19 '19 at 06:31
  • @dahiya_boy Thank you! I will check it out right now! – Zcipher Apr 19 '19 at 06:33

0 Answers0