Text alignment issue by programatically created buttons and View

Question

I have a programtically created view inside that i have 8 buttons (3 button on one line).I have dynamic button title so my alignment gets messed up. what i want is buttons on left center and right aligned if more text it should have 2 lines.

CreateBtn function creates the button view width is 375 and height 130

image

func CreateBtn() {
        
        let workingImage = UIImage(named: "WorkStatus") as UIImage?
        let workingButton = UIButton(frame: CGRect(x: -53, y: 0, width: 200, height: 60))
        workingButton.setTitle("\(localWorking)", for: .normal)
        workingButton.setImage(workingImage, for: .normal)
        workingButton.setTitleColor(UIColor.rgb(red: 93, green: 93, blue: 93), for: .normal)
        workingButton.addTarget(self, action: #selector(self.WorkingbuttonTapped), for: .touchUpInside)
        view.addSubview(workingButton)
        
        let idleImage = UIImage(named: "Idle") as UIImage?
        let idleButton = UIButton(frame: CGRect(x: 58, y: 0, width: 200, height: 60))
        idleButton.setTitle("\(localIdle)", for: .normal)
        idleButton.setImage(idleImage, for: .normal)
        
        idleButton.setTitleColor(UIColor.rgb(red: 93, green: 93, blue: 93), for: .normal)
        idleButton.addTarget(self, action: #selector(self.IdlebuttonTapped), for: .touchUpInside)
        view.addSubview(idleButton)
        
        let meetingImage = UIImage(named: "Meeting") as UIImage?
        let mettingButton = UIButton(frame: CGRect(x: 190, y: 0, width: 200, height: 60))
        mettingButton.setTitle("\(localMeeting)", for: .normal)
        mettingButton.setImage(meetingImage, for: .normal)
        mettingButton.setTitleColor(UIColor.rgb(red: 93, green: 93, blue: 93), for: .normal)
        mettingButton.addTarget(self, action: #selector(self.MeetingbuttonTapped), for: .touchUpInside)
        view.addSubview(mettingButton)
        
        let lunchImage = UIImage(named: "Lunch") as UIImage?
        let lunchButton = UIButton(frame: CGRect(x: -60, y: 40, width: 200, height: 60))
        lunchButton.setTitle("\(localLunch)", for: .normal)
        lunchButton.setImage(lunchImage, for: .normal)
        lunchButton.setTitleColor(UIColor.rgb(red: 93, green: 93, blue: 93), for: .normal)
        lunchButton.addTarget(self, action: #selector(self.LunchbuttonTapped), for: .touchUpInside)
        view.addSubview(lunchButton)
        
        let checkinImage = UIImage(named: "Check In") as UIImage?
        let checkinButton = UIButton(frame: CGRect(x: 75, y: 40, width: 200, height: 60))
        checkinButton.setTitle("\(localCheckin)", for: .normal)
        checkinButton.setImage(checkinImage, for: .normal)
        checkinButton.setTitleColor(UIColor.rgb(red: 93, green: 93, blue: 93), for: .normal)
        checkinButton.addTarget(self, action: #selector(self.CheckInbuttonTapped), for: .touchUpInside)
        view.addSubview(checkinButton)
        
        let checkoutImage = UIImage(named: "Check Out") as UIImage?
        let checkoutButton = UIButton(frame: CGRect(x: 198, y: 40, width: 200, height: 60))
        checkoutButton.setTitle("\(localCheckOut)", for: .normal)
        checkoutButton.setImage(checkoutImage, for: .normal)
        checkoutButton.setTitleColor(UIColor.rgb(red: 93, green: 93, blue: 93), for: .normal)
        checkoutButton.addTarget(self, action: #selector(self.CheckOutbuttonTapped), for: .touchUpInside)
        view.addSubview(checkoutButton)
        
        let onMobileImage = UIImage(named: "On Mobile") as UIImage?
        let onMobileButton = UIButton(frame: CGRect(x: -45, y: 80, width: 200, height: 60))
        onMobileButton.setTitle("\(localOnMobile)", for: .normal)
        onMobileButton.setImage(onMobileImage, for: .normal)
        onMobileButton.setTitleColor(UIColor.rgb(red: 93, green: 93, blue: 93), for: .normal)
        onMobileButton.addTarget(self, action: #selector(self.OnMobilebuttonTapped), for: .touchUpInside)
        view.addSubview(onMobileButton)
        
        let privateImage = UIImage(named: "Private Time") as UIImage?
        let privateButton = UIButton(frame: CGRect(x: 90, y: 80, width: 200, height: 60))
        privateButton.setTitle("\(localPrivateTime)", for: .normal)
        privateButton.setImage(privateImage, for: .normal)
        privateButton.setTitleColor(UIColor.rgb(red: 93, green: 93, blue: 93), for: .normal)
        privateButton.addTarget(self, action: #selector(self.PrivateTimebuttonTapped), for: .touchUpInside)
        view.addSubview(privateButton)
    }

I don't understand what you mean by left-center and right-aligned however in order to make your text go in two lines you have to fix your button width( by setting wdth anchor ) and then setting the number of lines to two. This might prove helpful https://stackoverflow.com/questions/30679370/swift-uibutton-with-two-lines-of-text — Muhammad Ali, Jul 06 '20 at 06:00

score 0 · Answer 1 · answered Jul 07 '20 at 10:17

Have you tried using UIStackView? Here is a reference to Apple documentation: https://developer.apple.com/documentation/uikit/uistackview

If you use stack views, you'll be able to align the buttons to top/bottom/left etc.

So, you put the first 3 items (let's say 'column') into a vertical stack view. And you repeat it on two more columns. Then you put all 3 columns into a horizontal stack view. This will help to easily align what you need. Don't forget to put width and height constraints before you put items into the stack views.

Text alignment issue by programatically created buttons and View

1 Answers1