Can someone please explain to me why I cannot see this StackView show up in its container?
This is what it looks like now:
This is what I want it to look like, ignore the cells, I just need to figure out why the Edit button, search bar and Sort button are not showing.
Here is the code I used to setup the views and their contents:
// Container
let barViewFrame = CGRectMake(0, 0, view.frame.width, 44)
let barViewContainer = UIView(frame: barViewFrame)
barViewContainer.backgroundColor = UIColor(red: 231/255, green: 231/255, blue: 231/255, alpha: 1.0)
tableView.tableHeaderView = barViewContainer
// Edit Button
let editButton = UIButton(type: .System)
editButton.bounds = CGRectMake(0, 0, 44, 44)
editButton.setTitle("Edit", forState: .Normal)
// Search Bar
let searchBar = UISearchBar(frame: CGRect(x: 0, y: 0, width: 50, height: 44))
searchBar.placeholder = "Search"
searchBar.searchBarStyle = .Prominent
searchBar.barTintColor = UIColor(red: 231/255, green: 231/255, blue: 231/255, alpha: 1.0)
// Sort Button
let sortButtton = UIButton(type: .Custom)
sortButtton.bounds = CGRectMake(0, 0, 44, 44)
sortButtton.setImage(UIImage(named: "Sort"), forState: .Normal)
// Stackview
let stackViewH = UIStackView(arrangedSubviews: [editButton, searchBar, sortButtton])
stackViewH.axis = .Horizontal
stackViewH.alignment = .Center
stackViewH.spacing = 8
barViewContainer.addSubview(stackViewH)
barViewContainer.addConstraints([
stackViewH.leftAnchor.constraintEqualToAnchor(barViewContainer.leftAnchor),
stackViewH.topAnchor.constraintEqualToAnchor(barViewContainer.topAnchor),
stackViewH.rightAnchor.constraintEqualToAnchor(barViewContainer.rightAnchor),
stackViewH.bottomAnchor.constraintEqualToAnchor(barViewContainer.bottomAnchor)])
When you add views programmatically, iOS assumes that you want to layout those views using frames. To make this work with auto layout, behinds the scenes it adds constraints so the view will appear according to its frame. But, you are adding constraints that you want the auto layout engine to use rather than the ones it would like to create. So to tell auto layout not to generate those constraints you can set the translatesAutoresizingMaskIntoConstraints to false for the views on which you don't want this to occur.
In your case:
stackViewH.translatesAutoresizingMaskIntoConstraints = false
Related
My wish is to make centered image(left) and next to it(right) the label.
Without setting an image, there was a perfectly centered titleLabel:
btnWhatsapp.titleLabel?.adjustsFontSizeToFitWidth = true
btnWhatsapp.setTitle("WhatsApp", for: .normal)
Then I added this code to add an image:
btnWhatsapp.setImage(UIImage(named: "phoneIcon"), for: .normal)
btnWhatsapp.imageView?.layer.transform = CATransform3DMakeScale(0.5, 0.6, 0.5)
btnWhatsapp.imageView?.contentMode = .scaleAspectFit
, and this iswhat I got then:
, so the title disappeared.
Maybe the problem is that image uses more space than its actual size(the size shouldnt take more widht and height than the icon size). I saw this when changed images background(should be this much grey color):
btnWhatsapp.imageView?.backgroundColor = .gray
I tried to use the imageEdgeInsets but it is very hard to calculate it to fit perfectly on every iPhone.
This is the Attributes inspector of the button:
You can't set title and image at once by default, nor position them as you describe.
If you need to have a UIButton, I'd recommend to make a UIView (or possibly horizontal UIStackView) with UIImage and UILabel inside, position them with autolayout, then you can add this view to the UIButton as a subview.
let button = UIButton(type: .custom)
button.frame = viewFrame // This is the desired frame of your custom UIView or UIStackView
button.addSubview(customView)
You will be able to position the views easily for all sizes with this approach, but you will probably want to use autolayout in real word app, instead of hardcoded frames.
Example:
override func viewDidLoad() {
super.viewDidLoad()
let image = UIImageView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
let label = UILabel(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
label.text = "text"
let stack = UIStackView(arrangedSubviews: [image, label])
stack.frame = CGRect(x: 0, y: 0, width: 100, height: 50)
stack.distribution = .fillEqually
let button = UIButton()
button.frame = CGRect(x: 0, y: 0, width: 100, height: 50)
button.addSubview(stack)
view.addSubview(button)
self.view.addSubview(button)
}
Set your button under your controller class like this:
let imageButton: UIButton = {
let b = UIButton(type: .custom)
b.backgroundColor = #colorLiteral(red: 0.3411764801, green: 0.6235294342, blue: 0.1686274558, alpha: 1)
b.layer.cornerRadius = 12
b.clipsToBounds = true
b.translatesAutoresizingMaskIntoConstraints = false
let imageV = UIImageView()
imageV.image = UIImage(named: "yourImage")?.withRenderingMode(.alwaysTemplate)
imageV.tintColor = .white
imageV.contentMode = .scaleAspectFill
imageV.translatesAutoresizingMaskIntoConstraints = false
imageV.widthAnchor.constraint(equalToConstant: 30).isActive = true
let label = UILabel()
label.text = "WhatsApp"
label.textColor = .white
label.font = .systemFont(ofSize: 16, weight: .regular)
let stack = UIStackView(arrangedSubviews: [imageV, label])
stack.distribution = .fill
stack.spacing = 4
stack.axis = .horizontal
stack.translatesAutoresizingMaskIntoConstraints = false
b.addSubview(stack)
stack.heightAnchor.constraint(equalToConstant: 30).isActive = true
stack.widthAnchor.constraint(equalToConstant: 120).isActive = true
stack.centerXAnchor.constraint(equalTo: b.centerXAnchor).isActive = true
stack.centerYAnchor.constraint(equalTo: b.centerYAnchor).isActive = true
return b
}()
Now in viewDidLoad add button and set constraints in your view (in my case on top)
view.addSubview(imageButton)
imageButton.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20).isActive = true
imageButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
imageButton.widthAnchor.constraint(equalToConstant: 200).isActive = true
imageButton.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
This is the result:
I have created a common nevigation method in view controller extension to show back, close and cart item on navigation bar through out my application. It shows the items on nav bar properly. But the cart item which is at the right side of the nav bar, has a button icon and a round badge icon with label. I need to update the label and increase the count on label every time an item is added in the cart. But somehow the label is not changing. Below is my code -
UIViewController Extension -
func setCartBarButtonItem() {
let cartBarButton = UIBarButtonItem.init(customView: getCartButton())
self.navigationItem.rightBarButtonItem = cartBarButton
}
func getCartButton() -> UIButton{
let frame = CGRect.init(x: UIScreen.main.bounds.width - 40, y: 14, width: 44, height:44)
let cartButton = UIButton.init(frame: frame)
cartButton.setImage(UIImage(named: "cart"), for: .normal)
cartButton.addTarget(self, action: #selector(self.cartButtonTapped), for: .touchUpInside)
let cartLabelView = UIView(frame: CGRect(x: cartButton.layer.bounds.width/2, y: 10, width: 16, height: 16))
cartLabelView.backgroundColor = UIColor(red: 255.0/255.0, green: 234.0/255.0, blue: 41.0/255.0, alpha: 1.0)
cartLabelView.layer.cornerRadius = 8
cartLabelView.layer.borderWidth = 0.5
cartLabelView.layer.borderColor = UIColor(red: 54.0/255.0, green: 54.0/255.0, blue: 54.0/255.0, alpha: 1.0).cgColor
cartButton.addSubview(cartLabelView)
let cartLabel = UILabel(frame: CGRect(x: cartLabelView.layer.bounds.width/3, y: 0, width: cartLabelView.layer.bounds.width, height: cartLabelView.layer.bounds.height))
cartLabel.textColor = UIColor.black
cartLabel.font = UIFont(name: "Arial", size: 9)
cartLabelView.addSubview(cartLabel)
cartLabelView.isHidden = true
var count = 0
count = getNumberOfItemInCart()
if count > 0 {
cartLabelView.isHidden = false
cartLabel.text = String(count)
}
return cartButton
}
In one delegate function which is called when item is added in cart, I call the this setCartBarButtonItem() to update the label. But label does not update. It shows the last value only.
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 a collection view when I display a message to the user if the collection view is empty. I also programmatically add a button to let the user add a photo if the collection view is empty. However, once the photo is added and the I reload the collection view, I found a way to get rid of the label, however, how can I get rid of the button's subview? since I can't access "self.collectionViews?.addSubview(button)" since it is in a guard let statement. Thanks in advance!
guard let parseUSERS = parseJSON["users"] as? [AnyObject] else {
// if the collection view is empty, display a message
let messageLabel = UILabel(frame: CGRect(x: 20.0, y: 10, width: self.collectionViews!.bounds.size.width - 40.0, height: (self.collectionViews?.bounds.size.height)!))
messageLabel.text = "Collection view is empty!"
messageLabel.font = messageLabel.font.withSize(20)
messageLabel.font = UIFont.boldSystemFont(ofSize: messageLabel.font.pointSize)
messageLabel.textColor = UIColor.white
messageLabel.numberOfLines = 0
messageLabel.textAlignment = NSTextAlignment.center
messageLabel.sizeToFit()
let button = UIButton(frame: CGRect(x: 80.0, y: 320, width: 215, height: 50))
button.backgroundColor = UIColor.white
button.setTitle("create",for: .normal)
button.setTitleColor(colorCircleBlue, for: .normal)
button.addTarget(self, action: #selector(self.action(sender:)), for: .touchUpInside)
// round corners for login/register buttons
button.layer.cornerRadius = button.bounds.width / 20
self.collectionViews?.backgroundColor = UIColor.blue
self.collectionViews?.backgroundView = messageLabel
self.collectionViews?.addSubview(button)
return
}
self.collectionViews?.backgroundColor = UIColor.white
self.collectionViews?.backgroundView = nil
I would recommend making a UIView that contains both your UILabel and the UIButton. Then setting the aforementioned UIView as the backgroundView of the UICollectionView. Ensure userInteraction is enabled on the backgroundView.
This will make sure that the both the UILabel & the UIButton are removed when you set the backgroundView to nil.
Something like this should do the trick (Be aware I have not tested this):
//Container view
let view = UIView.init(frame: self.collectionViews?.frame)
//Label
let messageLabel = UILabel(frame: CGRect(x: 20.0, y: 10, width: self.collectionViews!.bounds.size.width - 40.0, height: (self.collectionViews?.bounds.size.height)!))
messageLabel.text = "Collection view is empty!"
messageLabel.font = messageLabel.font.withSize(20)
messageLabel.font = UIFont.boldSystemFont(ofSize: messageLabel.font.pointSize)
messageLabel.textColor = UIColor.white
messageLabel.numberOfLines = 0
messageLabel.textAlignment = NSTextAlignment.center
messageLabel.sizeToFit()
//Button
let button = UIButton(frame: CGRect(x: 80.0, y: 320, width: 215, height: 50))
button.backgroundColor = UIColor.white
button.setTitle("create",for: .normal)
button.setTitleColor(colorCircleBlue, for: .normal)
button.addTarget(self, action: #selector(self.action(sender:)), for: .touchUpInside)
// round corners for login/register buttons
button.layer.cornerRadius = button.bounds.width / 20
//Add elements to container view
view.addSubview(messageLabel)
view.addSubview(button)
self.collectionViews?.backgroundView = view
Then in the future when you want to remove both elements you can just set the backgroundView to nil.
I actually found this same question here but for obj.c so with that I managed to do this:
trashNavButton = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton
trashNavButton.addTarget(self, action: "trashItemClicked", forControlEvents: UIControlEvents.TouchUpInside)
trashNavButton = UIButton(frame: CGRectMake(0, 0, 50, 32))
trashNavButton.setTitle("\(trashCount)", forState: UIControlState.Normal)
trashNavButton.setTitleColor(UIColor(red: 229.0/255.0, green: 57.0/255.0, blue: 53.0/255.0, alpha: 1.0), forState: UIControlState.Normal)
trashNavButton.titleLabel?.textAlignment = NSTextAlignment.Right
trashNavButton.setImage(UIImage(named: "trashButton"), forState: UIControlState.Normal)
rightBarButton.customView = trashNavButton
self.navigationItem.rightBarButtonItem = rightBarButton
What I'm trying to do is to have a button on the right at the navigation bar, and I want that button to also have a label on it's left (you can see a great example on the question I mentioned above), and well this code works very well with the exception that the image is on the left and the label on the right and I want it to be the other way around, I'll appreciate your help :)
Just as an example
let containView = UIView(frame: CGRectMake(0, 0,70, 40))
let label = UILabel(frame: CGRectMake(0, 0, 50, 40))
label.text = "Right"
label.textAlignment = NSTextAlignment.Center
containView.addSubview(label)
let imageview = UIImageView(frame: CGRectMake(50, 10, 20, 20))
imageview.image = UIImage(named: "memoAccess")
imageview.contentMode = UIViewContentMode.ScaleAspectFill
containView.addSubview(imageview)
self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: containView)