Question 66966 in IOS Swift Question posted in
The official documentation can be found here.

I need help to design a button which attached to imageView – Ios swift

I am trying to build a imageview with a button that attached to itself for settings page. I want to tell users to click to image if they want to change it. So what I wanna to do is similar to : this

I was designin my app with storyboard but I couldn’t find a way to do it.

So I tried to set constraints programmatically.

For example,

`

editButton.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            editButton.trailingAnchor.constraint(equalTo: imageView.trailingAnchor, constant: -66),
            editButton.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: -60)
   ])

`

This constraints works for iPad screen but not for any iPhones. There must be another way to design such things. How can I do it?

Tags:

2

Answers


  1. 0

    I would make the origin of the frame of the button reference the frame of the profile photo. So the button is rendered in the same place relative to the photo no matter the size of the photo. Maybe something like this:

    editButton.frame = CGRect(x: profileImageView.width - 60, y: profileImageView.height - 66, width: 50, height: 50)

    You could also consider adding a tapGestureRecognizer to the photo to trigger the edit option.

    Login or Signup to reply.
  2. 0

    All of this can be done with storyboards or using constraints in code. Should be the same for iPhone or iPad. For example:

    //: A UIKit based Playground for presenting user interface
  
import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {
    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white

        let myImageView = UIImageView()
        
        let myImageViewCornerRadius: CGFloat = 40.0
        
        // Just using a color for the example...
        myImageView.backgroundColor = .blue
        myImageView.layer.cornerRadius = myImageViewCornerRadius
        myImageView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(myImageView)
        
        let myEditButton = UIButton()
        // Again using a color...
        myEditButton.backgroundColor = .red
        myEditButton.translatesAutoresizingMaskIntoConstraints = false
        myEditButton.layer.cornerRadius = 10.0
        view.addSubview(myEditButton)
        
        NSLayoutConstraint.activate([
            myImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            myImageView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            myImageView.widthAnchor.constraint(equalToConstant: 80.0),
            myImageView.heightAnchor.constraint(equalToConstant: 80.0),
            myEditButton.centerYAnchor.constraint(equalTo: myImageView.bottomAnchor,
                                                  constant: -myImageViewCornerRadius / 4.0),
            myEditButton.centerXAnchor.constraint(equalTo: myImageView.trailingAnchor,
                                                 constant: -myImageViewCornerRadius / 4.0),
            myEditButton.widthAnchor.constraint(equalToConstant: 20.0),
            myEditButton.heightAnchor.constraint(equalToConstant: 20.0)
        ])
 
        self.view = view
    }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search