I created 2 customs buttons in my navigation Controller. I have one left button and one right, and both have some text + an arrow icon. Since I updated to iOS 11, the size of icons has changed and I don't know why.
This this the difference between iOS 10 (Left) and iOS 11 (right):
How can I change that?
This is a piece of my code:
func addRightButton(){
rightButton = UIButton.init(type: .custom)
rightButton.setImage(UIImage(named: "back"), for: .normal)
rightButton.imageView?.contentMode = .scaleAspectFit
let width = UIScreen.main.bounds.size.width
if width < 375 {
rightButton.titleLabel?.font = UIFont.systemFont(ofSize: 13, weight: UIFont.Weight.bold)
rightButton.frame = CGRect.init(x: 0, y: 0, width: 75, height: 10)
} else {
rightButton.titleLabel?.font = UIFont.systemFont(ofSize: 15, weight: UIFont.Weight.bold)
rightButton.frame = CGRect.init(x: 0, y: 0, width: 100, height: 10)
}
rightButton.imageView!.transform = rightButton.imageView!.transform.rotated(by: CGFloat((Double.pi / 2) * -1))
rightButton.setTitle(" Mixte",for: .normal)
rightButton.addTarget(self, action: #selector(self.switchSex(_:)), for: UIControlEvents.touchUpInside)
let barButton = UIBarButtonItem(customView: rightButton)
self.navigationItem.rightBarButtonItem = barButton
}
You need to add width constraint for your button in xCode 9. Like this:
let width = yourButton.widthAnchor.constraint(equalToConstant: 75)
let height = yourButton.heightAnchor.constraint(equalToConstant: 10)
heightConstraint.isActive = true
widthConstraint.isActive = true
Related
I am trying to make round (sort of notification counter which you see on most of the apps) UIBarButtonItem in Swift. I know how to do it but the thing is it is actually being round only when I am setting the width as 34 and height as 24. Are these magic numbers for UIBarButtonItems ? If I set the width or height (same , my desired frame is 30 x 30) for something else and calculate the cornerRadius based on the width then it is not perfect circle rather rounded rectangle. What is I am doing wrong ? My code is below :
let button = UIButton(type: .custom)
button.frame = CGRect(x: 0, y: 0, width: 34, height: 24)
button.backgroundColor = DarkModeUtil.isDarkMode() ? UIColor.white : UIColor.black
button.setTitle("\(self.pickedAppActions.count > 9 ? "9+" : "\(self.pickedAppActions.count)")", for: .normal)
button.setTitleColor(DarkModeUtil.isDarkMode() ? .black : UIColor.white, for: .normal)
button.contentHorizontalAlignment = .center
button.titleLabel?.fitSize()
button.layer.cornerRadius = button.bounds.size.width / 2
button.clipsToBounds = true
button.addTarget(self, action: #selector(counterTapped(_:)), for: [.touchUpInside])
let doneItem = UIBarButtonItem(image: UIImage(named: "done")?.withRenderingMode(.alwaysTemplate), style: .plain, target: self, action: #selector(doneButtonClicked(_:)))
doneItem.tintColor = DarkModeUtil.isDarkMode() ? .white : .black
let counterButton = UIBarButtonItem(customView: button)
let buttons:[UIBarButtonItem] = [doneItem,counterButton]
self.navigationItem.rightBarButtonItems = buttons
If I set same width and height for example 30 x 30 I get button like this:
make height and width 34 work for me. here is a code. also no need to change button.frame.size.width / 2.
let button = UIButton(type: .custom)
button.frame = CGRect(x: 0, y: 0, width: 34, height: 34)
button.backgroundColor = DarkModeUtil.isDarkMode() ? UIColor.white : UIColor.black
button.setTitle("\(self.pickedAppActions.count > 9 ? "9+" : "\(self.pickedAppActions.count)")", for: .normal)
button.setTitleColor(DarkModeUtil.isDarkMode() ? .black : UIColor.white, for: .normal)
button.contentHorizontalAlignment = .center
button.titleLabel?.fitSize()
button.layer.cornerRadius = button.bounds.size.width / 2
button.clipsToBounds = true
button.addTarget(self, action: #selector(counterTapped(_:)), for: [.touchUpInside])
let doneItem = UIBarButtonItem(image: UIImage(named: "done")?.withRenderingMode(.alwaysTemplate), style: .plain, target: self, action: #selector(doneButtonClicked(_:)))
doneItem.tintColor = DarkModeUtil.isDarkMode() ? .white : .black
let counterButton = UIBarButtonItem(customView: button)
let buttons:[UIBarButtonItem] = [doneItem,counterButton]
self.navigationItem.rightBarButtonItems = buttons
You can set corner radius of the Button using
button.frame = CGRect(x: 0, y: 0, width: 84, height: 40)
button.layer.cornerRadius = button.bounds.size.height / 2
Note: Button Maximum height: 44 and Minimum height: 34 in UINavigationBar as checked from view hierarchy.
Please try with this code :
For Round button you need to make height and width same value :
let button = UIButton(type: .custom)
button.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
button.backgroundColor = UIColor.black
button.setTitle("999", for: .normal)
button.titleLabel?.font = UIFont.systemFont(ofSize: 12.0)
button.titleLabel?.minimumScaleFactor = 0.5
button.titleLabel?.numberOfLines = 0
button.titleLabel?.adjustsFontSizeToFitWidth = true
button.layer.cornerRadius = button.frame.size.height/2
button.clipsToBounds = true
let counterButton = UIBarButtonItem(customView: button)
let buttons:[UIBarButtonItem] = [counterButton]
self.navigationItem.rightBarButtonItems = buttons
let SearchView = UIView()
SearchView.backgroundColor = UIColor.clear
SearchView.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
let Searchbutton = UIButton(type: .system)
Searchbutton.setImage(UIImage (named: "SEARCH"), for: .normal)
Searchbutton.backgroundColor = .clear
Searchbutton.frame = CGRect(x: -17, y: -20, width: 30, height: 30)
Searchbutton.contentMode = .scaleAspectFit
let WidthConstraint = Searchbutton.widthAnchor.constraint(equalToConstant: 30)
let HeightConstraint = Searchbutton.heightAnchor.constraint(equalToConstant: 30)
WidthConstraint.isActive = true
HeightConstraint.isActive = true
let barButtonItem = UIBarButtonItem(customView: SearchView)
self.navigationItem.rightBarButtonItem = barButtonItem
SearchView.addSubview(Searchbutton)
Searchbutton.addTarget(self, action: #selector(viewanewcontroller(button:)), for: .touchUpInside)
//right search button
After making a button, I wanted to move it little bit to the right. So, i made UI View to move the button inside the view. But, then, after this, the button does not work anymore. Can anyone tell me the solution?
Your code is working fine but need to clarify some points.
Reason Your button not working is below 4 lines
let WidthConstraint = Searchbutton.widthAnchor.constraint(equalToConstant: 30)
let HeightConstraint = Searchbutton.heightAnchor.constraint(equalToConstant: 30)
WidthConstraint.isActive = true
HeightConstraint.isActive = true
As you already set UIButton frame then no need to use of above lines of code.
Yellow color view is your SearchView and green color is your UIButton.
If you use Searchbutton frame like Searchbutton.frame = CGRect(x: -17, y: -20, width: 30, height: 30) then it happens something like below image.
You added UIButton as subview of UIView and when you click on green button which is inside yellow View will work but the area which is outside Yellow area doesn't work.
You need to start UIButton frame from 0,0,30,30
Searchbutton.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
or you can directly set UIButton frame same as UIView frame then it looks like below image.
Searchbutton.frame = SearchView.frame
Below is your Working Code.
let SearchView = UIView()
SearchView.backgroundColor = UIColor.clear
SearchView.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
let Searchbutton = UIButton(type: .system)
Searchbutton.setImage(UIImage (named: "SEARCH"), for: .normal)
Searchbutton.backgroundColor = .clear
Searchbutton.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
Searchbutton.contentMode = .scaleAspectFit
let barButtonItem = UIBarButtonItem(customView: SearchView)
self.navigationItem.rightBarButtonItem = barButtonItem
SearchView.addSubview(Searchbutton)
Searchbutton.addTarget(self, action: #selector(viewanewcontroller(button:)), for: .touchUpInside)
//right search button
You're doing a lot of unnecessary things here. Firstly, you don't need to put your Button in a container view to put it as the right bar button item.
You also don't need to add constraints to your searchbutton, since you have given it a fixed frame.
let Searchbutton = UIButton(type: .system)
Searchbutton.setImage(UIImage (named: "SEARCH"), for: .normal)
Searchbutton.backgroundColor = .clear
Searchbutton.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
Searchbutton.contentMode = .scaleAspectFit
let barButtonItem = UIBarButtonItem(customView: Searchbutton)
self.navigationItem.rightBarButtonItem = barButtonItem
Searchbutton.addTarget(self, action: #selector(viewanewcontroller(button:)), for: .touchUpInside)
Also as Pratik's comment said, you're meant to use lower camel case. so SearchView should be searchView and SearchButton as searchButton
As for moving it to the right, it seems like that isn't possible anymore without either subclassing the UINavigationBar and changing the implementation, or by making UIViews look exactly like the standard Navigation Bar.
Get rid of the space on the right side of a UINavigationBar
i have created my custom datepicker view and added UIdatePicker and two buttons in it.
both buttons are on the right place as desired but date picker is not showing on its right place
in image Red area is datepicker
here is my code for datepicker:
#objc func datePicker(){
//DatepickerView
self.datePickerView.frame = CGRect(x: 5, y: Int(SCREEN_HEIGHT-280), width: Int(SCREEN_WIDTH-10), height: 276)
self.datePickerView.backgroundColor = UIColor.white
self.datePickerView.layer.cornerRadius = 8.0
self.datePickerView.layer.masksToBounds = true
self.datePickerView.layer.borderWidth = 2;
self.datePickerView.layer.borderColor = UIColor.black.cgColor;
doneBtn.addTarget(self, action: #selector(doneClicked), for: .touchUpInside)
doneBtn.setTitle("Done", for: .normal)
doneBtn.frame = CGRect(x: 20, y: 10, width: 80, height: 50)
doneBtn.setTitleColor(UIColor.white, for: .normal)
doneBtn.backgroundColor = UIColor.black
doneBtn.titleLabel?.font = UIFont(name: "Montserrat-Regular", size:
16.0)
doneBtn.layer.cornerRadius = 16.0
doneBtn.layer.masksToBounds = true
doneBtn.layer.borderColor = UIColor.clear.cgColor
doneBtn.layer.borderWidth = 1
cancelBtn.addTarget(self, action:#selector(cancelClicked), for: .touchUpInside)
cancelBtn.setTitle("Cancel",for: .normal)
cancelBtn.frame = CGRect(x: SCREEN_WIDTH-110, y: 10, width: 80, height: 50)
cancelBtn.setTitleColor(UIColor.white, for: .normal)
cancelBtn.backgroundColor = UIColor.black
cancelBtn.titleLabel?.font = UIFont(name: "Montserrat-Regular", size: 16.0)
cancelBtn.layer.cornerRadius = 16.0
cancelBtn.layer.masksToBounds = true
cancelBtn.layer.borderColor = UIColor.clear.cgColor
cancelBtn.layer.borderWidth = 1
// DatePicker
self.datePicker = UIDatePicker(frame:CGRect(x: 0, y: 0, width: Int(SCREEN_WIDTH-20), height: 200))
self.datePicker?.backgroundColor = UIColor.red
self.datePicker?.datePickerMode = UIDatePickerMode.date
self.datePicker?.layer.masksToBounds = true
datePicker.center = view.center
datePickerView.addSubview(datePicker)
datePickerView.addSubview(doneBtn)
datePickerView.addSubview(cancelBtn)
self.view.addSubview(datePickerView)
datePickerView.isHidden = true;
}
i have tried more than 10 answers in stackoverflow, but did not worked for me.
Any idea why it is not appearing on right place
This was an iOS 14 problem that I ran into and my datePicker was only peeking out from the bottom of the screen. I found the answer here from PetterBraka:
if #available(iOS 14, *) {
datePicker.preferredDatePickerStyle = .wheels
datePicker.sizeToFit()
}
yourTextField.inputView = datePicker
What exactly you are trying to achieve ?
According to your code :
// DatePicker
self.datePicker = UIDatePicker(frame:CGRect(x: 0, y: 0, width: Int(SCREEN_WIDTH-20), height: 200))
self.datePicker?.backgroundColor = UIColor.red
self.datePicker?.datePickerMode = UIDatePickerMode.date
self.datePicker?.layer.masksToBounds = true
datePicker.center = view.center
you are setting datePicker frame according to the view self.datePickerView and adding as subView to it. But at the same time you are adding:
datePicker.center = view.center
according to the main view which has self.datePickerView as subview.
datePicker is out of the scope in that scenario.
Also your datePicker y frame can not be 0. It will overlap done and cancel button.
Hope this will helps:
I have commented datepicker center alignment code:
// DatePicker
self.datePicker = UIDatePicker(frame:CGRect(x: Int(self.doneBtn.frame.origin.x) , y: Int(doneBtn.frame.origin.y + doneBtn.frame.size.height + 10), width: Int(cancelBtn.frame.origin.x + cancelBtn.frame.size.width - self.doneBtn.frame.origin.x), height: 200))
self.datePicker.backgroundColor = UIColor.red
self.datePicker.datePickerMode = UIDatePickerMode.date
self.datePicker.layer.masksToBounds = true
// datePicker.center = view.center
I'm trying to setup the custom navigation bar in my iOS app, but .frame = CGRect(...) doesn't change the size of buttons that I added to it. Buttons appeared inside the navigation bar, but they have wrong size, or maybe constraints, I don't know.
// Setting up the Navigation Bar
private func setupNavigationBar() {
// Remove the shadow under the Navigation Bar
self.navigationController?.navigationBar.shadowImage = UIImage()
let addButton = UIButton(type: .system)
addButton.setImage(UIImage(named: "ic_add")?.withRenderingMode(.alwaysOriginal), for: .normal)
addButton.frame = CGRect(x: 0, y: 0, width: 25, height: 25)
let settingsButton = UIButton(type: .system)
settingsButton.setImage(UIImage(named: "ic_settings")?.withRenderingMode(.alwaysOriginal), for: .normal)
settingsButton.frame = CGRect(x: 0, y: 0, width: 25, height: 25)
navigationItem.rightBarButtonItems = [UIBarButtonItem(customView: settingsButton), UIBarButtonItem(customView: addButton)]
}
(I call this function inside the viewDidLoad())
Here you can see the result on my iPhone:
This is work for me. Please try it. (iOS 11)
private func setupNavigationBar() {
// Remove the shadow under the Navigation Bar
self.navigationController?.navigationBar.shadowImage = UIImage()
let addButton = UIButton(type: .custom)
addButton.setImage(UIImage(named: "ic_add")?.withRenderingMode(.alwaysOriginal), for: .normal)
addButton.frame = CGRect(x: 0, y: 0, width: 25, height: 25)
let settingsButton = UIButton(type: .custom)
settingsButton.frame = CGRect(x: 0, y: 0, width: 10, height: 10)
settingsButton.setImage(UIImage(named: "ic_settings")?.withRenderingMode(.alwaysOriginal), for: .normal)
let menuBarItem = UIBarButtonItem(customView: settingsButton) // new line
let currWidth = menuBarItem.customView?.widthAnchor.constraint(equalToConstant: 10) // new line
currWidth?.isActive = true // new line
let currHeight = menuBarItem.customView?.heightAnchor.constraint(equalToConstant: 10) // new line
currHeight?.isActive = true // new line
navigationItem.rightBarButtonItems = [
menuBarItem, // modify
UIBarButtonItem(customView: addButton)]
}
Try to change the button type
Replace .system to .custom .
Also check the size of original image if it is very large.
I have the following code
let width = UIScreen.mainScreen().bounds.width
let linkLabel = UILabel(frame: CGRect(x: 8, y: contentHeight, width: 100, height: labelHeight))
let linkButton = UIButton(frame: CGRect(x: 108, y: contentHeight, width: width - 108, height: labelHeight))
mainScrollView.addSubview(linkLabel)
mainScrollView.addSubview(linkButton)
linkLabel.text = "Link:"
linkButton.addTarget(self, action: #selector(linkButtonPressed), forControlEvents: .TouchUpInside)
linkButton.setTitle("http://example.com", forState: .Normal)
linkButton.layer.borderWidth = 1.0
mainScrollView.contentSize = CGSize(width: view.frame.width, height: contentHeight)
And when view loads i see the following picture (Note that button is black rectangle):
So title is not visible but when i click on the button i can fetch its title property
func linkButtonPressed(sender: UIButton) {
print("button title = \(sender.titleLabel?.text)")
}
And i get the button title = Optional("http://example.com") but anyway button title is not visible. Any suggestions?
Your button title is display but in white color.Give any color to button title it is there.There is no problem in your code.
linkButton.setTitle("http://example.com", forState: .Normal)
linkButton.setTitleColor(UIColor.redColor(), forState: UIControlState.Normal)
You skipped one step. You should add title color :-
linkButton.setTitleColor(UIColor.blackColor(), forState: .Normal)