I need to create a UIView programmaticaly in swift, that view should contain an image and a label. Also I need to embed that label and the imageview inside that created view so that as I animate the constraints of the view, the label and the image shold also reposition itseld relative to the view. This is my code co far -
func banner(viewController:UIViewController){
let width = UIScreen.main.bounds.width
let dynamicView=UIView(frame: CGRect(x:0,y: -70, width:width, height:70))
let label = UILabel(frame: CGRect(x:0,y: 35, width:width, height:20))
dynamicView.backgroundColor=UIColor.green
label.center = CGPoint(x: width/2, y: 35)
label.textAlignment = .center
label.text = "I'am a test label"
UIView.animate(withDuration: 1) {
dynamicView.frame = dynamicView.frame.offsetBy( dx: 0, dy: 70 )
viewController.view.addSubview(DynamicView)
viewController.view.addSubview(label)
}
UIView.animate(withDuration: 1, delay: 3, usingSpringWithDamping: 1, initialSpringVelocity: 4, options: .curveEaseIn, animations: {
dynamicView.frame = DynamicView.frame.offsetBy( dx: 0, dy: -70 )
}, completion: nil)
}
}
I could achieve that by changing x and y position of each views,labels etc separately. But that code would not be clean and consise.
From the question, it is seen that you are adding the label as subview to the viewController's view. Since you wish to embed the label to the Dynamic view try adding the label to Dynamic view like
UIView.animate(withDuration: 1) {
dynamicView.frame = dynamicView.frame.offsetBy( dx: 0, dy: 70 )
viewController.view.addSubview(DynamicView)
dynamicView.addSubview(label)
}
Related
I'm trying to create a popup label over the imageview. But in my application it doesn't work. I've made a test application with the same screen: UIImageView and below a UIView with a UIButton on the view.
So, where are two questions.
What could be difference in a code for such a different behaviour?
Why in my application the UILabel doesn't conforms to the initial frame?
The code of the function inside my viewController is the same:
private func showBanner(startY: CGFloat, targetView: UIView) {
let height: CGFloat = 42
let finishY = startY - height
let bannerLabel = UILabel(frame: CGRect(x: 0, y: startY, width: self.view.frame.width, height: height))
bannerLabel.translatesAutoresizingMaskIntoConstraints = false
bannerLabel.font = UIFont.systemFont(ofSize: 13, weight: .regular)
bannerLabel.textColor = .lightGray
bannerLabel.backgroundColor = .black
bannerLabel.textAlignment = .center
bannerLabel.numberOfLines = 1
bannerLabel.text = "You've added the item to the favorites"
targetView.addSubview(bannerLabel)
UIView.animate(withDuration: 0.5, animations: {
bannerLabel.frame = CGRect(x: 0,
y: finishY,
width: self.view.frame.width,
height: height
)
}) {
_ in
UIView.animate(withDuration: 0.5, delay: 1.0, options: .curveLinear, animations: {
bannerLabel.frame = CGRect(x: 0,
y: startY,
width: self.view.frame.width,
height: height
)
}, completion: {
_ in
bannerLabel.removeFromSuperview()
})
}
}
The function is being called so:
showBanner(startY: itemsImageView.frame.maxY, targetView: itemsImageView)
The problem was in the line:
bannerLabel.translatesAutoresizingMaskIntoConstraints = false
As soon as this line was removed, the problem has dissapeared.
Im made and DropDown Menu to select Action like the GIF below.
Therefore I made a Subview and animated it in.
When animating the Subview out, it looks really weird.
In particular the problem is that it just looks like a blank small bar and not like the Menu.
Does anyone know where the problem might be?
The ViewController I'm making the Subview of is a simple ViewController with a TableView inside and 1 prototype cell.
Code:
let blackView = UIView()
var tvx: OptionsVC = OptionsVC()
var h: CGFloat!
.
func optionsClicked() {
self.h = CGFloat(70 + (52 * (OptionsVC().arrayFunctionCellNames.count)))
navigationController?.hidesBarsOnTap = false
tvx = self.storyboard?.instantiateViewController(withIdentifier: "options") as! OptionsVC
if let window = UIApplication.shared.keyWindow {
blackView.backgroundColor = UIColor(white: 0, alpha: 0.5)
blackView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleDismiss)))
view.addSubview(blackView)
view.addSubview(tvx.view)
let y = (self.navigationController?.navigationBar.frame.size.height)! + UIApplication.shared.statusBarFrame.height
tvx.view.frame = CGRect(x: 0, y: (y - self.h), width: view.frame.width, height: h)
blackView.frame = CGRect(x: 0, y: y, width: view.frame.width, height: view.frame.height)
blackView.alpha = 0
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
self.blackView.alpha = 1
self.tvx.view.frame = CGRect(x: 0, y: y, width: self.view.frame.width, height: self.h)
self.blackView.frame = CGRect(x: 0, y: (y + self.h), width: self.view.frame.width, height: self.view.frame.height)
}, completion: nil)
}
}
.
func handleDismiss() {
UIView.animate(withDuration: 5.5, animations: {
let y = (self.navigationController?.navigationBar.frame.size.height)! + UIApplication.shared.statusBarFrame.height
self.blackView.alpha = 0
if let window = UIApplication.shared.keyWindow {
self.blackView.frame = CGRect(x: 0, y: y, width: self.view.frame.width, height: self.view.frame.height)
self.tvx.view.frame = CGRect(x: 0, y: (y - self.h), width: self.view.frame.width, height: self.h)
}
}, completion: {(finished:Bool) in
self.blackView.removeFromSuperview()
self.tvx.view.removeFromSuperview()
self.navigationController?.hidesBarsOnTap = true
})
}
GIF of BUG:
I made it so slow so you can better see it
Edit: My Solution
The problem was the constraints I set on my subview controller. Normally you set them to all sides, in my case, with was really weird I had to set them only to the bottom and sides. If I set some to the top, it would always do this bug.
You haven't really provided enough information for us to understand what's going on. What are tvx, blackView and self? What is the self.h variable? (From the animation it looks like you're changing the height of your "menu" view to be much shorter before you begin the animation code.)
Do you have a view controller contained inside another one using an embed segue?
If so, you should probably animate the constraints on the container view, not the child view controller's view.
As Glenn and D. Greg say in their comments, you should really be adding constraints to your views, hooking up outlets to those constraints, and animating changes to the constraint's constants rather than manipulating your view's frames directly. Animating changes to your view's frames isn't reliable when you're using AutoLayout, since AutoLayout can change your view's size and position out from under your animation code. That code looks like this, (in broad terms, no specific to your code)
myViewAConstraint.constant = someNewValue
myViewBConstraint.constant = someOtherValue
UIView.animate(withDuration: 5.5,
animations: {
someView.alpha = 0 //If you want the view to fade as it animates
self.view.layoutIfNeeded()
},
completion: { (finished:Bool) in
}
)
I'm trying to make a cool launch screen but it's a little bit hard. I would like to make my image appear the way this appears:
what I would like
But for the moment the only animation I succeeded to do is this:
what I've made
The image I use is a PNG with transparent border and the yellow drawing.
The code I use to have the animation I have
( "yellowSide" is actually the name of the outlet from the imageView that hold my image with the yellow drawing):
func animation() {
yellowSide.frame = CGRect(x: yellowSide.frame.origin.x, y: yellowSide.frame.origin.y, width: 0, height: 47)
yellowSide.alpha = 0
UIView.animate(withDuration: 0.5, delay: 2.0, options: .curveEaseIn, animations: {
var yellowSideFrame = self.yellowSide.frame
self.yellowSide.frame = CGRect(x: yellowSideFrame.origin.x, y: yellowSideFrame.origin.y, width: 243, height: 47)
self.yellowSide.alpha = 1
}, completion: nil)
}
As you guess the width / value I enter are the value that I need to have so the image looks the way I want when it's fully appeared.
You are changing the frame but you are not clipping out of frame image . you need to do like below .
// in ViewDidLoad method
yellowSide.clipsToBounds=true
func animation() {
yellowSide.frame = CGRect(x: yellowSide.frame.origin.x, y: yellowSide.frame.origin.y, width: 0, height: 47)
yellowSide.alpha = 0
UIView.animate(withDuration: 0.5, delay: 2.0, options: .curveEaseIn, animations: {
var yellowSideFrame = self.yellowSide.frame
self.yellowSide.frame = CGRect(x: yellowSideFrame.origin.x, y: yellowSideFrame.origin.y, width: 243, height: 47)
self.yellowSide.alpha = 1
}, completion: nil)
}
I have a UIButton, and I would like to change its text by accessing its titleLabel attribute. However, the way I want the button to change text is by first shrinking down to a very tiny size, then changing instantly while it's invisible, then scaling back up. After looking through multiple posts on here, I have reached this:
let changeText = CATransition();
changeText.type = kCATransitionReveal;
changeText.duration = 0.0;
changeText.timingFunction = CAMediaTimingFunction(name:kCAMediaTimingFunctionLinear);
submitButton.titleLabel?.layer.add(changeText, forKey: "changeTextTransition");
UIView.animateKeyframes(withDuration: 0.6, delay: 0, options: .calculationModeLinear, animations: {
//Zzzeeeewwwwwwwwww
UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.5, animations: {
self.submitButton.titleLabel?.transform = self.submitButton.titleLabel!.transform.scaledBy(x: 0.001, y: 0.001);
})
UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.0, animations: {
self.submitButton.titleLabel?.text = "Green";
})
//Wwwwwweeeeeeyyyyyppp
UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5, animations: {
self.submitButton.titleLabel?.transform = self.submitButton.titleLabel!.transform.scaledBy(x: 1000, y: 1000);
})
}, completion: nil)
The problem is that this doesn't work. What I get is a quick flash of the words "New Text" as the label shrinks, and then when it scales back up, it's still "Old Text". It's so weird I can't even begin to wrap my head around what might be the cause. I think what's happening is that it plays the reveal transition on the new text before it even shrinks down (No idea why since I specified duration=0), then grows back the old text.
Here is what it looks like (with some background color change that I omitted above):
First off, congratulations for including sound effects in your code comments, glad it's not just me that does that.
The text property of a label cannot be animated, so it is applied immediately, spoiling your animation.
One solution, which I use a lot for complex animations, is to use snapshots. At the start of the animation, create a snapshot of the label, then set the alpha of the label to zero and update the text. Then, animate the transforms of the label and snapshot together, when they're small, make the label visible and the snapshot invisible, then animate back up.
That sounds more complicated than it is, here's code to run it in a playground:
import UIKit
import PlaygroundSupport
let view = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 400))
view.backgroundColor = .blue
PlaygroundPage.current.liveView = view
let label = UILabel(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
label.text = "Hello"
label.font = UIFont.systemFont(ofSize: 50)
label.textAlignment = .center
label.textColor = .white
view.addSubview(label)
let snapshot = label.snapshotView(afterScreenUpdates: true)!
view.addSubview(snapshot)
snapshot.frame = label.frame
label.alpha = 0
label.text = "Goodbye"
UIView.animateKeyframes(withDuration: 2, delay: 0, options: [.repeat, .autoreverse], animations: {
UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.45) {
label.transform = CGAffineTransform(scaleX: 0.01, y: 0.01)
snapshot.transform = label.transform
}
UIView.addKeyframe(withRelativeStartTime: 0.45, relativeDuration: 0.1) {
label.alpha = 1.0
snapshot.alpha = 0.0
}
UIView.addKeyframe(withRelativeStartTime: 0.55, relativeDuration: 0.45) {
label.transform = CGAffineTransform.identity
}
}) { _ in
snapshot.removeFromSuperview()
}
Which gives you this result:
It's not clear to me what you are trying to do with the CATransition - unless there's another effect you're looking for as well, that isn't helping your cause.
Currently there is a view I'm trying to translate(move), rotate and scale a view at the same time. For so strange reason it's only scaling it when I put scale at the bottom. But when I change the order and put the scaling first it rotates and translates the view properly but the scale of the view changes briefly to its correct scale before changing back to its original size. I need it to stay in it's scaled form. Here is the code:
class ViewController: UIViewController {
let newView = UIView(frame: CGRect(x: 10, y: 10, width: 100, height: 100))
override func viewDidLoad() {
super.viewDidLoad()
self.view.addSubview(newView)
UIView.animate(withDuration: 1.0, animations: {
self.newView.transform = CGAffineTransform(translationX: 50, y: 70)//translation
self.newView.transform = CGAffineTransform(rotationAngle: -CGFloat.pi / 2)//rotation
self.newView.transform = CGAffineTransform(scaleX: 1, y: 0.5)//scale
})
}
}
Try combine the transforms first, then apply them at a time:
let translate = CGAffineTransform(translationX: 50, y: 70)
UIView.animate(withDuration: 1.0, animations: {
self.view.transform = translate.rotated(by: -CGFloat.pi / 2).scaledBy(x: 1, y: 0.5)
})