Adding UIButtons in a UIView with dynamic width in swift - ios

Question

I am trying to add UIButtons in a UIView, buttons width will change depending on their title. So it could be one button in a row or 3 buttons in a row. If there is no space in same row button should be added in the next row. Something like this
and UIView height should increase if more lines are added up-to a certain height.
I am thinking to start with UIStackViews but not sure how to achieve this functionality. Any help is appreciated.

Answer 1

A UICollectionView using a UICollectionViewFlowLayout would do this by default. The only thing you would have to do is update the height of the collevtionView to match its content size if you don't want it to certainly scroll.
Using a UIStackView would require you to calculate the the size of every button and move down to a new row when they don't fit. While that doesn't sound to hard, it's a lot of layout math you'll have to do.

Answer 2

I was able to do this with a custom button generator
import Foundation
import UIKit
class ButtonGenerator {
private var buttonTitleArray = [String]()
private var buttonBackgroundColor: UIColor = UIColor.white
private var buttonFontColor: UIColor = UIColor.black
private var passedFunctionCall: Selector?
private var passedParentView = UIScrollView()
private var parentViewWidth = CGFloat()
private var desiredMargin = CGFloat()
private var buttonsToReturn = [UIButton]()
func setButtonStyle(bkgColor:UIColor,fontColor:UIColor) {
buttonBackgroundColor = bkgColor
buttonFontColor = fontColor
}
func setMargin(to margin:CGFloat) {
desiredMargin = margin
}
func addButtons(to parentView:UIScrollView,withTitles passedTitles [String],calling function:Selector){
//Receive Passed Arguments
passedParentView = parentView
parentViewWidth = parentView.frame.width
buttonTitleArray = passedTitles
passedFunctionCall = function
//Track current origin coordinates
var XPos = desiredMargin
var YPos = desiredMargin
var buttonHeight = CGFloat()
for i in 0..<buttonTitleArray.count {
let buttonToAdd = UIButton(type: .custom)
buttonToAdd.backgroundColor = buttonBackgroundColor
buttonToAdd.setTitleColor(buttonFontColor, for: .normal)
buttonToAdd.setTitle(buttonTitleArray[i], for: .normal)
buttonToAdd.sizeToFit()
buttonHeight = buttonToAdd.frame.height
buttonToAdd.addTarget(self, action: passedFunctionCall!, for: .touchUpInside)
if XPos + buttonToAdd.frame.width < parentViewWidth-(2*desiredMargin) {
//buttonToAdd won't be clipped --> Okay to add to current row
buttonToAdd.frame.origin.x = XPos
buttonToAdd.frame.origin.y = YPos
//no change in row --> only update X position
XPos += buttonToAdd.frame.width + desiredMargin
}
else {
//buttonToAdd will be clipped --> display on next row
XPos = desiredMargin
YPos += buttonHeight + desiredMargin
//set button position
buttonToAdd.frame.origin.x = XPos
buttonToAdd.frame.origin.y = YPos
//update X position
XPos += buttonToAdd.frame.width + desiredMargin
}
//Add Button to return array
buttonsToReturn.append(buttonToAdd)
}
//Set YPos to position of content bottom
YPos += buttonHeight + desiredMargin
//Set content size of the parent scroll view to the generated height
passedParentView.contentSize = CGSize(width: parentViewWidth, height: YPos)
//Add the buttons to the scroll view
for i in 0..<buttonsToReturn.count {
passedParentView.addSubview(buttonsToReturn[i])
}
}
}
Then to call the button generator in your ViewController you'd add the following:
let btnGen = ButtonGenerator()
btnGen.setButtonStyle(bkgColor: UIColor.white, fontColor: UIColor.blue)
btnGen.setMargin(to: 10)
btnGen.addButtons(to: hashtagScrollView, withTitles: PostModel.Post.genericMusicHashtags, calling:#selector(buttonClicked(sender:)))
Also, because of the selector, you'll have to add an #objc func to your ViewController Class.
#objc func buttonClicked(sender: UIButton) {
print(sender.titleLabel!.text!)
}
It doesn't have the limiting height functionality, but you should be able to modify the button generator to include an if statement to stop adding buttons.