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

I have a view in which i have multiple labels and 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

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:
Then pin it to the right top corner:

//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")
}

Related

UIButton Text is cut off not according to the width, how to set width wrap content?

these several days im learning iOS Development, I have a problem where my text button is clipped to the wrong width,
how can I make the UIButton match the width of the content? below is my code
let btnPost = UIButton()
btnPost.setTitle("POST", for: .normal)
btnPost.backgroundColor = Color.shared.accent
btnPost.titleLabel?.font = UIFont.boldSystemFont(ofSize: 14)
btnPost.layer.cornerRadius = 10
btnPost.layer.masksToBounds = true
btnPost.titleEdgeInsets = UIEdgeInsets(top: 5, left: 15, bottom: 5, right: 15)
btnPost.addTarget(
self,
action: #selector(baseDidTapPost(_:)),
for: .touchUpInside)
let barButtonItem = UIBarButtonItem(customView: btnPost)
navigationItem.rightBarButtonItem = barButtonItem
Thanks
You have to just remove the btnPost.titleEdgeInsets and add a frame to your button
btnPost = UIButton(frame: CGRect(x: 0, y: 0, width: 80, height: 20))
complete code :
let btnPost = UIButton(frame: CGRect(x: 0, y: 0, width: 80, height: 20))
btnPost.setTitle("POST", for: .normal)
btnPost.backgroundColor = UIColor.blue
btnPost.titleLabel?.font = UIFont.boldSystemFont(ofSize: 14)
btnPost.layer.cornerRadius = 10
btnPost.layer.masksToBounds = true
btnPost.addTarget(self,action: #selector(baseDidTapPost(_:)),for: .touchUpInside)
let barButtonItem = UIBarButtonItem(customView: btnPost)
navigationItem.rightBarButtonItem = barButtonItem

Swift position and constraints programmatically

I have the following view:
I have to place a UIButton or a UILabel below Account balance depending if this movement is rejected or not (just check a variable).
I've created programmatically the button & label depending on that, but I don't know how to add it to that specific place and add constraints.
func checkRejected () {
if !movement.rejected {
let xposition = amountLabel.frame.origin.x
let yposition = balanceLabel.frame.origin.y + 300
let button = UIButton(frame: CGRect(x: xposition, y: yposition, width: 100, height: 50))
button.setTitle("Reject", for: .normal)
button.setTitleColor(UIColor.blue, for: .normal)
button.addTarget(self, action: #selector(rejectAction), for: .touchUpInside)
self.view.addSubview(button)
}
else {
let xposition = amountLabel.frame.origin.x
let yposition = balanceLabel.frame.origin.y + 300
let label = UILabel(frame: CGRect(x: xposition, y: yposition, width: 100, height: 50))
label.text = "Rejected"
label.textColor = UIColor.red
self.view.addSubview(label)
}
}
How I could do that?
You can try
self.view.addSubview(button)
button.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
button.topAnchor.constraint(equalTo: self.balanceLabel.bottomAnchor,constant:30),
button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
])
Same for the label
Note: Since the button and the label have an intrinsic content size , then we don't have to set width && height

how to remove padding left UIBarButtonItem?

I would like to use a custom View as UIBarButtonItem left in an UINavigationController, is it possible to remove the left padding here?
Ill alrady tried:
let btn = UIButton()
btn.frame = CGRect(x: -50, y: -50, width: 44, height: 50)
btn.setImage(UIImage(name:"img").withRenderingMode(.alwaysTemplate), for: .normal)
btn.addTarget(self, action: #selector(openSetting), for: .touchUpInside)
let leftButtonBar = UIBarButtonItem(customView: btn)
self.navigationItem.leftBarButtonItems = ( [leftButtonBar , otherBtn ])
how to remove space left setting icon
update. tired this code:
let view = UIView(frame: CGRect(x: 0, y: 0, width: 50, height:
view.backgroundColor = .gray
let btn = UIButton()
btn.frame = CGRect(x: -15, y: 0, width: 44, height: 50)
btn.setImage(UIImage(name:"img").withRenderingMode(.alwaysTemplate), for: .normal)
btn.addTarget(self, action: #selector(DashboardTabBarController.openSetting), for: .touchUpInside)
view.addSubview(btn)
let leftButtonBar = UIBarButtonItem(customView: view)
problem this user when clicked btn setting user
and other problem title navigation not center align
You should have noticed that whatever x value you provide to your custom view i.e, btn, it will always start from the same position because internally navigation bar doesn't count for position provided for that item and it always set the internally defined position as in below image, I set the background color to the custom button for better visuals.
So, the trick here is to put your custom button into another container view as below,
let view = UIView(frame: CGRect(origin: .zero, size: CGSize(width: 200, height: 50)))
view.backgroundColor = .green
let btn = UIButton(frame: CGRect(x: -10, y: 10 , width: 30, height: 30))
btn.setImage(UIImage(named: "cancelled")?.withRenderingMode(.alwaysTemplate), for: .normal)
btn.addTarget(self, action: #selector(openSetting), for: .touchUpInside)
btn.backgroundColor = .yellow
btn.tintColor = .red
view.addSubview(btn)
let btn2 = UIButton(frame: CGRect(x: 20, y: 10, width: 30, height: 30))
btn2.setImage(UIImage(named: "cancelled")?.withRenderingMode(.alwaysTemplate), for: .normal)
btn2.contentMode = .scaleAspectFit
btn2.tintColor = .yellow
btn2.addTarget(self, action: #selector(openSetting), for: .touchUpInside)
view.addSubview(btn2)
let itemsContainer = UIBarButtonItem(customView: view)
self.navigationItem.leftBarButtonItems = [itemsContainer]
This will result into this,
Now, if you change the x, y, width, height of btn, it will adjust accordingly.
Please try this. It works fine for me. If this code not working properly then I will give you another solution.
let view = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
let btn = UIButton()
btn.frame = CGRect(x: -15, y: 0, width: 44, height: 50)
btn.setImage(UIImage(name:"img").withRenderingMode(.alwaysTemplate), for: .normal)
btn.addTarget(self, action: #selector(openSetting), for: .touchUpInside)
view.addSubview(btn)
let leftButtonBar = UIBarButtonItem(customView: view)
self.navigationItem.leftBarButtonItems = ( [leftButtonBar])
Please add other button in View and set the width of view accordingy.It may hepls to you.Thank you
You can set imageInsets and set image this is example of left margin to set back image on position of default back button
let rightBtn = UIBarButtonItem(image: UIImage(named: "BackArrow"), style: .done, target: self, action: #selector(actnClose))
rightBtn.imageInsets = UIEdgeInsets(top: 0, left: -12, bottom: 0, right: 0)
self.navigationItem.setLeftBarButton(rightBtn, animated: true)
Set the x value of cRect to zero:
btn.frame = CGRect(x: 0, y: -50, width: 44, height: 50)
The less painful and actually cleanest solution was to hide the left button and just add a subview directly to the navigationBar and customise it's position and size with the good old constraints. Worked like a charm. Haven't tested it in every situation but seems to work fine.

Two UIButton form one having gradient color and another having border and rounded corner

I am trying to achive this using gradient color and corner radius on [.topLeft,.bottomLeft] and [.topRight,.bottomRight] but I am not able to achieve the border color on one side.
Here is my code
//btnMale gradient color
btnMale.roundCorners([.topLeft,.bottomLeft], radius: 20)
btnFemale.roundCorners([.topRight,.bottomRight], radius: 20)
btnMale.backgroundColor = .clear
let gradient1: CAGradientLayer = CAGradientLayer()
gradient1.frame = CGRect(x: 0, y: 0, width: (self.view.frame.size.width - 90)/2 , height: btnMale.frame.size.height)
gradient1.colors = [Colors.appYellow,Colors.appRed].map { $0.cgColor }
gradient1.startPoint = GradientOrientation.horizontal.startPoint
gradient1.endPoint = GradientOrientation.horizontal.endPoint
btnMale.layer.insertSublayer(gradient1, at: 0)
btnMale.applyGradient(withColours: [Colors.appYellow,Colors.appRed], gradientOrientation: .horizontal)
btnMale.borderWidth = 0.0
btnFemale.borderWidth = 0.5
btnFemale.borderColor = .black
btnMale.setImage(UIImage(named: Images.imgMaleIconWhite), for: .normal)
btnFemale.setImage(UIImage(named: Images.imgFemaleIconBlack), for: .normal)
and here is my output
Please help.
Pradip it's better to add buttons in UIView. It will be easy for you to manage. I made UI like you want using UIView. See this,
let button = UIButton.init(frame: CGRect.init(x: 0, y: 250, width: 200, height: 100))
button.setTitle("HI", for: .normal)
button.addTarget(self, action: #selector(self.btnTapped(pageNo:)), for: .touchUpInside)
self.view.addSubview(button)
let view = UIView.init(frame: CGRect.init(x: 50, y: 250, width: 250, height: 50))
view.backgroundColor = UIColor.red
self.view.addSubview(view)
let btnMale = UIButton.init(type: .custom)
btnMale.frame = CGRect.init(x: 0, y: 0, width: 125, height: 50)
btnMale.setTitle("Male", for: .normal)
btnMale.applyGradient(colours: [UIColor.yellow,UIColor.red])
view.addSubview(btnMale)
let btnFemale = UIButton.init(type: .custom)
btnFemale.frame = CGRect.init(x: 125, y: 0, width: 125, height: 50)
btnFemale.setTitle("Female", for: .normal)
view.addSubview(btnFemale)
view.layer.cornerRadius = 25
view.clipsToBounds = true
Output of above code will look like this.

How to add a static header in JSQMessageView Controller

How i can add header just like the image below which should not scroll up with view controller.
To add static header view, use following function (Swift 4):
Note: I have tried to put this kind of header view directly using storyboard. But, it wont worked. So, finally I achieved it by adding programatically.
func addHeaderView() {
let selectableView = UIView(frame: CGRect(x: 0, y: 20, width: self.view.bounds.width, height: 60))
selectableView.backgroundColor = UIColor(red: 56.0/255.0, green: 120.0/255.0, blue: 222.0/255.0, alpha: 1.0)
let btn: UIButton = UIButton(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
btn.setImage(UIImage(named:"ArrowBack"), for: .normal)
btn.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
btn.tag = 1
selectableView.addSubview(btn)
let titleLabel = UILabel(frame: CGRect(x: btn.frame.size.width+5, y: 5, width: selectableView.frame.size.width-60, height: 18))
titleLabel.textColor = UIColor.white
titleLabel.text = "Winter event 2017"
selectableView.addSubview(titleLabel)
let subTitleLabel = UILabel(frame: CGRect(x: btn.frame.size.width+5, y: 30, width: 100, height: 16))
subTitleLabel.textColor = UIColor.white
subTitleLabel.text = "135 members"
selectableView.addSubview(subTitleLabel)
let btnOptions: UIButton = UIButton(frame: CGRect(x: selectableView.frame.size.width-60, y: 0, width: 50, height: 50))
btnOptions.setImage(UIImage(named:"Settings"), for: .normal)
btnOptions.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
btnOptions.tag = 2
selectableView.addSubview(btnOptions)
view.addSubview(selectableView)
}
//then make a action method :
#objc func buttonAction(sender: UIButton!) {
let btnsendtag: UIButton = sender
if btnsendtag.tag == 1 {
self.navigationController?.popViewController(animated: true)
} else {
askForSettings()
}
}
Also put this line of code in viewDidLoad()
self.collectionView?.collectionViewLayout.sectionInset = UIEdgeInsets(top: 80, left: 0, bottom: 0, right: 0)

Resources