CODEWITHSUNDEEP
iosxcodeswiftlayout
Sajjad Aims
Sajjad Aims

Reputation: 99

Bound the button to top right corner of the view iOS swift

I have a view in which i have multiple labels enter image description hereand a button i want the button to be bound to the top right corner

when i apply the add Missing constraints layout the button gets separate position for different devices Please help me to resolve this

Upvotes: 3

Views: 9015

Answers (2)

Swifty Codes
Swifty Codes

Reputation: 1102

enter image description here //Just in case if anybody needs it with code:

//I have added 4 buttons to a custom view's each corner:

var customView = UIView()

 override func viewDidLoad() {
        super.viewDidLoad()

        customView.frame = CGRect.init(x: 0, y: 0, width: 200, height: 200)
        customView.backgroundColor = UIColor.red     //give color to the view
        customView.center = self.view.center

        let crossButton = UIButton(frame: CGRect(x: -10, y: -10, width: 30, height: 30))
        crossButton.layer.cornerRadius = 15
        crossButton.backgroundColor = UIColor.black
        crossButton.setImage(UIImage(named: "cross.png"), for: .normal)
        crossButton.addTarget(self, action: #selector(crossButtonTapped), for: .touchUpInside)
        crossButton.autoresizingMask = [.flexibleLeftMargin, .flexibleBottomMargin]


        let flipButton = UIButton(frame: CGRect(x: customView.frame.width-15, y: -10, width: 30, height: 30))
        flipButton.layer.cornerRadius = 15
        flipButton.backgroundColor = UIColor.black
        flipButton.setImage(UIImage(named: "done.png"), for: .normal)
        flipButton.addTarget(self, action: #selector(crossButtonTapped), for: .touchUpInside)
        flipButton.autoresizingMask = [.flexibleLeftMargin, .flexibleBottomMargin]

        let scaleButton = UIButton(frame: CGRect(x: -10, y: customView.frame.height-20, width: 30, height: 30))
        scaleButton.layer.cornerRadius = 15
        scaleButton.backgroundColor = UIColor.black
        scaleButton.setImage(UIImage(named: "done.png"), for: .normal)
        scaleButton.addTarget(self, action: #selector(crossButtonTapped), for: .touchUpInside)
        scaleButton.autoresizingMask = [.flexibleLeftMargin, .flexibleBottomMargin]

        let editButton = UIButton(frame: CGRect(x: customView.frame.width-20, y: customView.frame.height-20, width: 30, height: 30))
        editButton.layer.cornerRadius = 15
        editButton.backgroundColor = UIColor.black
        editButton.setImage(UIImage(named: "done.png"), for: .normal)
        editButton.addTarget(self, action: #selector(crossButtonTapped), for: .touchUpInside)
        editButton.autoresizingMask = [.flexibleLeftMargin, .flexibleBottomMargin]

        customView.addSubview(crossButton)
        customView.addSubview(flipButton)
        customView.addSubview(scaleButton)
        customView.addSubview(editButton)

        self.view.addSubview(customView)

    }

    func crossButtonTapped(_ sender:UIButton) {

        print("Cross Button was tapped")
    }

Upvotes: 7

8HP8
8HP8

Reputation: 1908

NEVER use add missing constraints. This is a bad way of constructing your layout.

The easiest way to get your desired look is to decide on the size you want your button to be (eg. 30x30)

Then you add the following constraints to your button:

This sets the button's width & Height:

enter image description here

Then pin it to the right top corner:

enter image description here

Upvotes: 7

Related Questions