I am new to swift coding, when I am trying to add a button by code, it does not show up in the Simulator.
I changed the dimension of the View in main.storyboard to 375*1114
there are scroll view and view inside with the same dimension as well.
there are also 5 collection views too.
These are all setup by the storyboard.
The code I used:
let fullScreenSize = UIScreen.main.bounds.size
let plusButton = UIButton(type: .custom)
plusButton.frame = CGRect(x: 300, y: 600, width: 50, height: 50)
plusButton.layer.cornerRadius = 0.5 * plusButton.bounds.size.width
plusButton.clipsToBounds = true
plusButton.setImage(UIImage(named: "plus.png"), for: .normal)
plusButton.center = CGPoint(x: fullScreenSize.width * 0.9, y: fullScreenSize.height * 0.9)
plusButton.addTarget(self, action: #selector(plusButtonPressed), for: .touchUpInside)
self.view.addSubview(plusButton)
I was trying to let the button to stay at the right bottom corner of the simulator all the time. How can I do that? Thanks.
your code is fine and correct add the background color and check once the button will be visibile else check your plusButton.setImage(UIImage(named: "plus.png"), for: .normal) plus.png is correct or not
plusButton.backgroundColor = UIColor.red
for full code
let fullScreenSize = UIScreen.main.bounds.size
let plusButton = UIButton(type: .custom)
plusButton.frame = CGRect(x: 300, y: 600, width: 50, height: 50)
plusButton.layer.cornerRadius = 0.5 * plusButton.bounds.size.width
plusButton.clipsToBounds = true
plusButton.setImage(UIImage(named: "normal.jpg"), for: .normal)
plusButton.backgroundColor = UIColor.red
plusButton.center = CGPoint(x: fullScreenSize.width * 0.9, y: fullScreenSize.height * 0.9)
// plusButton.addTarget(self, action: #selector(plusButtonPressed), for: .touchUpInside)
self.view.addSubview(plusButton)
output
I think you have to take an Outlet of UIView inside UIScrollview you already have in you UIViewController and add that button as a subView of that UIView. That's why your button is hiding, why don't you check it by looking at the View Hierarchy!
Related
I use the extension to UIButton and I added it to my UIButton but I still can't see the line.
I'm missing something, please help
extension:
https://gist.github.com/Isuru-Nanayakkara/496d5713e61125bddcf5
my code:
let settingsButton : UIButton = {
let button = UIButton()
button.setTitle("Settings", for: .normal)
button.setTitleColor(.white, for: .normal)
button.addBorder(side: .Bottom, color: .white, width: 100)
return button
}()
I want to get something like this:
Add a UIView that has [x] points height and same width as the button, and its y position is the same as the height of the button.
let frame = CGRect(x: 0, y: button.frame.size.height, width: button.frame.size.width, height: 2)
let borderBottom = UIView(frame: frame)
borderBottom.backgroundColor= UIColor.white
button.addSubview(borderBottom)
When going to a secondary page, I'm trying to slide the back button in from the left over a period of 0.33 seconds. Right now the animation doesn't appear to be doing that, even after slowing duration down to 2 seconds for visual clarification. Was wondering if anyone could tell me what I've done wrong in my code and how to correct it?
Going to come out and say that I likely am just misunderstanding how some aspect of animation works.
func addBackButton() {
let backButton = UIButton(type: .custom)
backButton.setImage(#imageLiteral(resourceName: "backArrow"), for: .normal)
backButton.setTitle("", for: .normal)
backButton.setTitleColor(backButton.tintColor, for: .normal)
backButton.addTarget(self, action: #selector(backAction), for: .touchUpInside)
let backBarButtonItem = UIBarButtonItem(customView: backButton)
backBarButtonItem.customView?.transform = CGAffineTransform(translationX: -backButton.frame.width, y: 0)
navigationItem.leftBarButtonItems?.insert(backBarButtonItem, at: 0)
UIView.animate(withDuration: 2, delay: 0.5, animations: {
backBarButtonItem.customView?.transform = CGAffineTransform(translationX: 2 * backButton.frame.width, y: 0)
})
}
You just need to put this custom button inside a containerView and set that containerView as the UIBarButtonItem's custom view. Your setup will look like this,
let containerFrame = CGRect(origin: .zero, size: CGSize(width: 44.0, height: 44.0))
let container = UIView(frame: containerFrame)
let buttonFrame = CGRect(origin: CGPoint(x: -100, y: 0), size: CGSize(width: 44, height: 44))
let backButton = UIButton(frame: buttonFrame)
backButton.setImage(#imageLiteral(resourceName: "backArrow"), for: .normal)
backButton.setTitle("", for: .normal)
backButton.setTitleColor(backButton.tintColor, for: .normal)
backButton.addTarget(self, action: #selector(backAction), for: .touchUpInside)
container.addSubview(backButton)
let backBarButtonItem = UIBarButtonItem(customView: container)
UIView.animate(withDuration: 2, delay: 0.5, animations: {
backButton.transform = CGAffineTransform(translationX: 2 * backButton.frame.width, y: 0)
})
You can check why you need to wrap your custom button inside another UIView here.
UIBarButtonItem is not a UIView subclass for a reason. If this is the effect you want (platform consistency says you should use UINavigationItem.setLeftBarButtonItems(_:animated:)) then you should instead add the backButton to your view hierarchy, animate it in, then set it as the leftBarButtonItem in the completion block.
Keep in mind you will have to likely add it to the navigation bar view hierarchy so it appears on top of it. This approach also means you are basically duplicating layout code of the navigation bar and you'll have to figure out where it's supposed to end up.
navigationController?.navigationBar.addSubview(backButton)
// layout back button in it's final spot here, either via constraints or frame math
backButton.transform = CGAffineTransform(translationX: -(button.bounds.width + leadingSpacing), translationY: 0.0)
UIView.animate(duration: 0.3, animations: {
backButton.transform = .identity
} { completed in
self.navigationItem.leftBarButtonItem = UIBarButtonItem
}
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 want to resize a button as a square and here's my code:
let button = UIButton()
button.backgroundColor = UIColor.red
button.translatesAutoresizingMaskIntoConstraints = false
//method one
//button.widthAnchor.constraint(equalToConstant:44.0).isActive = true
//button.heightAnchor.constraint(equalToConstant: 44.0).isActive = true
//method two
button.frame.size = CGSize(width: 20.0, height: 20.0)
button.addTarget(self, action: #selector(ratingButtonTapped(button: )), for: .touchUpInside)
addArrangedSubview(button)
I have tried both method however none of them seem to work out fine with an error showing some mistakes in method one and nothing shown in method two. when i run the code, button is fulfilled in the container. what is wrong here?
Use addSubview() instead of addArrangedSubview().
I write here the playground with the same solution I posted in comments, in case someone encounters the same problem:
Swift 3.0:
//: Playground - noun: a place where people can play
import UIKit
import PlaygroundSupport
let view = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 400))
view.backgroundColor = UIColor.blue
let button = UIButton()
button.backgroundColor = UIColor.red
button.frame.size = CGSize(width: 40.0, height: 20.0)
button.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(button) // This does the trick
PlaygroundPage.current.liveView = view
Why not create the button and initialise it with the given size?
let btn = UIButton(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
And then change the x and y accordingly
I saw the answer for this question for adding an image to the left nav bar item. And I did it successfully.
But I also want to add a small text next to the image. For example I want to show how many coins the user have. So I need to show a coins image and the number of coins next to it. How can it be done?
I tried to set title (with "123"), but I only see the image and not the title. This my code:
let button = UIButton.init(type: .custom)
button.setImage(UIImage.init(named: "coins.png"), for: UIControlState.normal)
button.addTarget(self, action:#selector(self.callMethod), for: UIControlEvents.touchUpInside)
button.frame = CGRect.init(x: 0, y: 0, width: 30, height: 30)
button.setTitle("123", for: UIControlState.normal)
let barButton = UIBarButtonItem.init(customView: button)
self.navigationItem.leftBarButtonItem = barButton
Thanks.
Since the bar button item is initialized with a custom view, you can add a UIImage and a UILabel to one view, along with a UIButton to capture the touch event, and pass that into the initializer.
// the UIButton is simply there to capture touch up event on the entire bar button view.
let button = UIButton.init(type: .custom)
button.addTarget(self, action: #selector(buttonPressed), for: .touchUpInside)
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
imageView.image = UIImage(named: "coins")
let label = UILabel(frame: CGRect(x: 35, y: 0, width: 50, height: 30))
label.text = "1234"
let buttonView = UIView(frame: CGRect(x: 0, y: 0, width: 90, height: 30))
button.frame = buttonView.frame
buttonView.addSubview(button)
buttonView.addSubview(imageView)
buttonView.addSubview(label)
let barButton = UIBarButtonItem.init(customView: buttonView)
self.navigationItem.leftBarButtonItem = barButton
You might have to adjust the frames accordingly for your own uses, of course.
I think your problem is the width it's 30 try to make it bigger like 50
let buttonContainer:UIView = UIView()
buttonContainer.frame = CGRect(x: 0, y: 0, width: 50, height: 32)
let image = UIImage(named: "coins")
let button = UIButton.init(type: .system)
button.setImage(image, for: .normal)
button.frame = buttonContainer.frame
button.setTitle("sss", for: .normal)
button.addTarget(self, action: #selector(action(_:)), for: .touchUpInside)
buttonContainer.addSubview(button)
self.navigationItem.leftBarButtonItem = UIBarButtonItem(customView: buttonContainer)
You can use backgroundImage for image and setTitle for test to the button.
follow this link definitely you will get idea:
image for nav bar button item swift
Use self.navigationItem.leftBarButtonItems that is an array of UIBarButtonItem
let button = UIBarButtonItem()
let text = UIBarButtonItem()
self.navigationItem.leftBarButtonItems = [button, text]