I have a UIView that's centered vertically and horizontally in my storyboard and has a fixed height (100) and width (300). Now I want that uiview to be resized (100, 100) during runtime.
I have tried this so far but nothing worked.
let cgRect = CGRect(x: 0, y: 0, width: 100, height: 100)
sampleView.draw(cgRect)
and
sampleView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
and
sampleView.frame.size.height = 100
sampleView.frame.size.width = 100
Hook the width and height constraints as IBOutlet and in
#IBAction func btnClicked(_ sender: Any) {
self.widthCon.constant = 100
self.heightCon.constant = 100
self.view.layoutIfNeeded()
}
To change the constraints during runtime via a button press you need to add it in an IBAction. In order to animate the change rather than it just jump, put the code in the UIView animation method:
#IBAction func buttonPressed() {
self.widthCon.constant = 100
self.heightCon.constant = 100
UIView.animate(withDuration: 0.3, animations: {
self.view.layoutIfNeeded()
})
}
You can do this:
override func layoutSubviews() {
super.layoutSubviews()
// set hight and width by constraints.
}
or:
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
// set hight and width by constraints.
}
Related
I have a UILabel on the UICollectionViewCell. On the UILabel I've got a UITapGestureRecognizer attached. I'm trying to increase the tap area of the UITapGestureRecognizer on the UILabel when the width of the UILabel increases.
Here is the sample of the code:
class BusCell: UICollectionViewCell {
var bus: Bus!
var tapGesture: UITapGestureRecognizer!
#IBOutlet weak var nameLabel: UILabel!
override func awakeFromNib() {
super.awakeFromNib()
addTapGestureToNameLabel()
}
// MARK: - UI
func addTapGestureToNameLabel() {
tapGesture = UITapGestureRecognizer(target: self, action: #selector(nameLabelDoubleTap(gesture:)))
tapGesture.numberOfTapsRequired = 2
nameLabel.addGestureRecognizer(tapGesture)
nameLabel.isUserInteractionEnabled = true
}
func configure(_ bus: Bus, isStereo: Bool = false) {
self.bus = bus
loadCellUI(bus: bus)
bus.updateBlock = { [weak self] in
guard let strongSelf = self else {
return
}
strongSelf.loadCellUI(bus: bus)
}
}
func loadCellUI(bus: Bus) {
nameLabel.frame = CGRect(x: CGFloat(0), y: yPosition, width: 122, height: self.nameLabel.frame.height)
if bus.isStereo {
if bus.index % 2 == 0 {
let frame = nameLabel.frame
nameLabel.frame = CGRect(x: frame.origin.x, y: frame.origin.y, width: 244, height: frame.height)
nameLabel.isHidden = false
// Make the tap frame same as the nameLabel's frame
} else {
nameLabel.isHidden = true
}
} else {
let frame = nameLabel.frame
nameLabel.frame = CGRect(x: frame.origin.x, y: frame.origin.y, width: 122, height: frame.height)
nameLabel.isHidden = false
// Make the tap frame same as the nameLabel's frame
}
}
}
How do I make this work?
A tap gesture recognizer attaches to a view, and responds to taps inside the frame of the view. It doesn't have a tap area of its own. If you increase the size of the label then the tap area should increase in size as well.
I remember reading a recommendation from Apple that a tappable area be at least 40x40 points. You might want to put an invisible view (call it tapView) on top of your label that is slightly larger than the label (You could get the label's frame, and call CGRect.inset(by:) with negative values for all the edges. Use the resulting rect as the tapView's frame, and add the tap view on top of your label.) If you do that then you should put code in your view controller's viewDidLayoutSubviews() method (and any time you change your nameLabel label) to adjust the tapView's frame.
I have code to create animation:
var imageView: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
imageView = UIImageView(frame:CGRect(x: 10, y: 10, width: 10, height: 10))
imageView.image = UIImage(named:"2.png")
UIView.animate(withDuration: 5) {
self.imageView = UIImageView(frame:CGRect(x: 10, y: 10, width: 500, height: 500))
self.view.addSubview(self.imageView)
self.view.layoutIfNeeded()
}
}
But animation doesn't work. And imageView not showing.
You should set the constraint's constant before the animation block and inside just call layoutIfNeeded
self.imageViewWidth.constant = 500
self.imageViewHeight.constant = 500
UIView.animate(withDuration: 10) {
self.layoutIfNeeded()
}
Try this..
UIView.animate(withDuration: 10) {
self.imageViewWidth.constant = 500
self.imageViewHeight.constant = 500
self.view.updateConstraintsIfNeeded()
self.view.layoutIfNeeded()
}
To decrease and increase size you have to use the on completion handler
UIView.animate(withDuration: 2, animations: {
self.imageViewWidth.constant = 10
self.imageViewHeight.constant = 10
self.view.layoutIfNeeded()
}) { (true) in
UIView.animate(withDuration: 10, animations: {
self.imageViewWidth.constant = 500
self.imageViewHeight.constant = 500
self.view.layoutIfNeeded()
})
}
if you want the decrease to start immediately change the first withDuration to 0
There are things that makes sense within an animation block (here: UIView.animate). Creating a newer image view is not one of them. Neither is addSubView.
The problem is that you are completely reassigning to your imageview variable - creating a new one within animation block.
You should create your image view and add it to your main view completely before you execute UIView.animate.
Animation is changing the visible properties of your objects, not recreating them. If you want frame change, simply do the following within animation block:
self.imageView.frame = CGRect(x: 10, y: 10, width: 500, height: 500)
You can also call layoutSubviews() or layoutIfNeeded() depending upon your constraint requirements, within UIView.animate.
Where is your problem
Problem 1
imageView = UIImageView(frame:CGRect(x: 10, y: 10, width: 10, height: 10))
imageView.image = UIImage(named:"2.png")
Here, you created new instance of an image view which never has been added into viewcontroller's view stack. You should add this view into stack. These line of code doesn't have any effect on animation performance.
Problem 2
UIView.animate(withDuration: 5) {
self.imageView = UIImageView(frame:CGRect(x: 10, y: 10, width: 500, height: 500))
self.view.addSubview(self.imageView)
self.view.layoutIfNeeded()
}
}
You initialized another imageview and added as a subview. This image view doesn't have any image or background color and as a result you do not see anything happending in the device screen. You should not do these stuff here. View.animate block does not need these stuff. Few things you should learn about animation. How animation works
Solution:
Try these lines of code instead.
// initial frame
var frame:CGRect = CGRect(x: 10, y: 10, width: 10, height: 10)
// create imageview and add this into view stack
self.imageView = UIImageView(frame:frame)
self.imageView.image = UIImage(named:"2.png")
self.view.addSubview(self.imageView)
// set new height & width
frame.size.width = 500;
frame.size.height = 500;
// animate view
UIView.animate(withDuration: 5) {
self.imageView.frame = frame;
self.view.layoutIfNeeded()
}
Hope, it will work!
if you want to animate constraints than you can use this
self.imageViewWidth.constant = 500
self.imageViewHeight.constant = 500;
UIView.animate(withDuration: 10) {
// if you are doing this in View controller then
self.view.layoutSubviews()
// if you are doing this in View then
self.layoutSubviews()
}
I used the code below to create a label every time a button is pressed, then have the label move to a specific location, and then have it delete.
My problem is it can't create multiple labels because it's deleting the label way too soon, because it removes everything named label.
How can I fix this so it creates multiple labels that only get deleted when a label individually completes its animation?
A solution I've thought of, but can't figure out is where you have it create a label with a different name such as label1, label2, and so on, so that way it can delete a specific label when it completes it's animation, instead of deleting all of them.
let label = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
func createLabel() {
// Find the button's width and height
let labelWidth = label.frame.width
// Find the width and height of the enclosing view
let viewWidth = self.view.frame.width
// Compute width and height of the area to contain the button's center
let xwidth = viewWidth - labelWidth
// Generate a random x and y offset
let xoffset = CGFloat(arc4random_uniform(UInt32(xwidth)))
// Offset the button's center by the random offsets.
label.center.x = xoffset + labelWidth / 2
label.center.y = 300
label.font = UIFont(name:"Riffic Free", size: 18.0)
label.textColor = UIColor.white
label.textAlignment = .center
label.text = "+1"
self.view.addSubview(label)
}
func clearLabel() {
UIView.animate(withDuration: 0.9, delay: 0.4, usingSpringWithDamping: 1.0, initialSpringVelocity: 0.0, options: .curveLinear, animations: {
self.label.center = CGPoint(x: 265, y: 75 )
}, completion: { (finished: Bool) in
self.label.removeFromSuperview()
})
}
#IBAction func clicked(_ sender: Any) {
createLabel()
clearLabel()
}
The problem is with this code:
#IBAction func clicked(_ sender: Any) {
createLabel()
clearLabel()
}
There are two issues. The first is that you are doing the animation and removal before you even give the label a chance to become part of the interface. You need to introduce a delay (you can use my delay utility, https://stackoverflow.com/a/24318861/341994):
#IBAction func clicked(_ sender: Any) {
createLabel()
delay(0.1) {
clearLabel()
}
}
The second problem, as you have rightly said, is that you have one label instance variable, which you are using to share the label between createLabel and clearLabel. Thus another label cannot come along during the animation.
But you don't actually need any instance variable. So get rid of your label declaration completely! Instead, modify createLabel so that it actually creates the label (i.e. calls UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 100))) as a local variable, and then returns a reference to label it creates, like this:
func createLabel() -> UILabel {
let label = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
// ...
return label
}
... And then just have clearLabel take that same label as a parameter so that it moves that label and removes it at the end of the animation, like this:
func clearLabel(_ label : UILabel) {
// ...
}
Your clicked implementation will thus look like this, passing the label out of createLabel and into clearLabel:
#IBAction func clicked(_ sender: Any) {
let label = self.createLabel()
delay(0.1) {
self.clearLabel(label)
}
}
(The remaining details of modifying createLabel and clearLabel to make that work are left as an exercise for the reader.)
Now each tap on the button creates and animates and removes a new label, independently of whatever else may have happened before.
I have a UIButton subclass intended to show a selected state of a button. The selected state simply places a thick black line at the bottom of the button view and when unselected it hides the black line. However, when using this in a UIButton subclass, the black line view is offset. I have tried playing around with insets, but I don't think that is the problem. Here is my subclass:
class TabButton: UIButton {
private var height:CGFloat = 5
private var selectedIndicator:UIView?
override var isSelected: Bool {
didSet {
selectedIndicator?.isHidden = !isSelected
}
}
fileprivate func initializeSelector(_ frame: CGRect) {
selectedIndicator = UIView(frame: CGRect(x: 0, y: frame.size.height - height, width: frame.size.width, height: height))
selectedIndicator?.backgroundColor = UIColor.black
self.addSubview(selectedIndicator!)
}
override func awakeFromNib() {
super.awakeFromNib()
initializeSelector(self.frame)
}
}
The desired button should look like this:
But instead it looks like this:
Can anyone help me understand what is happening here and how to fix it? Thanks!
Try this, in layoutSubviews you get the final frame:
override layoutSubviews() {
super.layoutSubviews()
selectedIndicator.frame = CGRect(x: 0, y: frame.size.height - height, width: frame.size.width, height: height)
}
The frame of the selectedIndicator is set only once when initializeSelector is called. When the button changes its frame, it does not change the frame of subviews, you need to manually update the frame of selectedIndicator.
To do so, you need to override layoutSubviews() method of UIView.
override layoutSubviews() {
super.layoutSubviews()
selectedIndicator?.frame = CGRect(x: 0, y: frame.size.height - height, width: frame.size.width, height: height)
}
See this answer to know when layoutSubviews() is called.
I'm studying iOS' UIView!
And I found that I can't understand how bounds works.
For example,
Please run this code ... and see red box's moving.
The red box goes up! and white root view is static!
Why!? why red box goes up! ?? please let me know OTL!
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let childView : UIView = UIView(frame: CGRect(x: 50, y: 50, width: 200, height: 200) )
childView.backgroundColor = UIColor.red
self.view.addSubview(childView)
}
override func viewDidAppear(_ animated: Bool) {
UIView.animate(withDuration: 8, animations: {
// I cannot unnerstand how bounds works!!
self.view.bounds = CGRect(x: 0, y: -300, width:self.view.bounds.width, height: 700)
//I can understand how frame works
self.view.frame = CGRect(x: 200, y: 0, width: self.view.bounds.width, height: self.view.frame.height)
})
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
I read this article, but I can not understand
CompositedPosition.x = View.frame.origin.x - Superview.bounds.origin.x;
CompositedPosition.y = View.frame.origin.y - Superview.bounds.origin.y;
HERE! this is right ( according to what I tested, it was right. ) but, I don't know why. Why not "View.frame.origin.x + Superview.bounds.origin.x" ?
If we change the origin of view's bounds and the view moves on screen , what is the difference between "bounds" and "frame" in perspective of origin(or position) ? Is there a difference other than simply acting in reverse?
Basically, The bounds of an UIView is the rectangle, expressed as a location (x,y) and size (width,height) relative to its own coordinate system (0,0).
The frame of an UIView is the rectangle, expressed as a location (x,y) and size (width,height) relative to the superview it is contained within.
Please follow this link for clear example. Cocoa: What's the difference between the frame and the bounds?