0

Im completely new in swift, I want to create a list of buttons which I need three buttons in a row it works fine in large screen iPhones but in smaller ones it looks like image below, (half of one of the buttons would be hide) each button has height:100 and width 100

how buttons look like in small devices

I tried to use auto resizing but no difference happened. and I changed my viewDidLoad like this also but result is still same as before. 

class ViewController: UIViewController {



@IBOutlet weak var button: UIButton!
@IBOutlet weak var btn1: UIButton!
@IBOutlet weak var btn2: UIButton!


override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    button.imageView?.contentMode = .scaleAspectFit
    btn1.imageView?.contentMode = .scaleAspectFit
    btn2.imageView?.contentMode = .scaleAspectFit
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
  }
 }

Appreciate any help,.

neda Derakhshesh
  • 1,103
  • 2
  • 20
  • 43
  • Use AutoLayout. Put your buttons in a horizontal stack view and then constraint your stack view to the width of the parent view (probably the main view of your view controller). – Adam Oct 10 '17 at 11:00
  • 1
    I agree with all other comments but this question is almost identical to yours and will probably have a solution for you https://stackoverflow.com/questions/41310445/how-to-divide-uiview-in-to-three-even-sized-subviews-horizontally-in-xcode – Simon Oct 10 '17 at 11:03
  • 1
    Check this one out https://stackoverflow.com/questions/32862142/how-to-add-equal-spacing-and-equal-width-for-button-in-ios-auto-layout I hope it helps ....If you are still confused i can explain it in a more elaborate way...let me know – Pulkit Kumar Singh Oct 10 '17 at 11:05
  • you need to set the frame in minimum device initially, it comes perfectly on max size of device also in autoresizing concept – Anbu.Karthik Oct 10 '17 at 11:11
  • @PulkitKumarSingh thank you very very much. it is really helpful, but as you said I am very very confused and I am new to xCode, its a little bit fast and I do not know what is gray boxes exactly are. if possible give me some step by step guide. I do not know how to thank you. Appreciate very much – neda Derakhshesh Oct 10 '17 at 13:21

3 Answers3

2

Below are the steps Using Stack View and Codeenter image description here

enter image description here

enter image description here

enter image description here

enter image description here

Your code should look like this -

@IBOutlet weak var stackViewNew: UIStackView!

override func viewDidLoad() {
super.viewDidLoad()

stackViewNew.distribution = .equalSpacing

var value : CGFloat!

value = (((self.view.frame.size.width) - 300.0)/2)-10  // Adjust Spacing according to screen size
if(value == 0)
{
    value = 5             //If spacing comes to be zero then minimum spacing set
}
stackViewNew.spacing = value

}

If any other doubt please comment below.

Hope it helps.

Pulkit Kumar Singh
  • 184
  • 13
  • 1
    there is a much easier solution to this now, Will update soon .Using multiplier contraints , using equal width and setting the image aspect ratio. – Pulkit Kumar Singh Jul 24 '18 at 08:47
1

Have a look at Auto Layout and Constraints like here.

ChrisTheGreat
  • 512
  • 4
  • 21
  • thank you very much Im reading it but as I am completely new and a little bit confused but thank you ver much I will let you know the result – neda Derakhshesh Oct 10 '17 at 11:25
1

You can use auto layout to handle it, just add ratio constraint to those button itself, then add equal width constraint to each button with others, also the leading and trailing constraint for all button

Kelvin Lam
  • 41
  • 4