I am rotating UIView by using UISLider Values. If slider values either get increase or decrease, according to that rotation happen. My code is working fine.
Rotation Action:
#IBAction func sliderToolAction(sender: UISlider) {
if sender.tag == 1
{
let radians = CGFloat(sender.value) * 22 / (7 * 180)
rotatingView.transform = CGAffineTransformMakeRotation(radians)
}
}
Output:
Rotating Frame: (100, 20, 103.9990, 127.8889)
After rotating that UIView, I tried to increase width and height of that view, its not working.
Resize Action
#IBAction func sliderToolAction(sender: UISlider) {
if sender.tag == 2
{
rotatingView.frame.size.width = CGFloat(sender.value) * viewWidth
rotatingView.frame.size.height = CGFloat(sender.value) * viewHeight
}
}
Output:
Rotating Frame: (80, 40, 207.8888, 255.6667) //ATTEMPT 1
Rotating Frame: (50, 60, 207.8888, 255.6667) //ATTEMPT 2
Rotating Frame: (20, 90, 207.8888, 255.6667) //ATTEMPT 3
Rotating Frame: (-10, 120, 207.8888, 255.6667) //ATTEMPT 4
I am increasing width and height alone, but UIView position is moving out of screen. Kindly guide me on this.
Straight from Apple's documentation:
Warning
If the transform property is not the identity transform, the value of
this property is undefined and therefore should be ignored.
and:
Changes to this property can be animated. However, if the transform
property contains a non-identity transform, the value of the frame
property is undefined and should not be modified. In that case, you
can reposition the view using the center property and adjust the size
using the bounds property instead.
Instead of changing the frame size, change the bounds size.
Related
When print(uiimage.size) is called it only gives the width and the height of the original image before it was scaled up or down. Is there anyway to get the dimensions of the aspect fitted image?
Actually, there is a function in AVFoundation that can calculate this for you:
import AVFoundation
let fitRect = AVMakeRect(aspectRatio: image.size, insideRect: imageView.bounds)
now fitRect.size is the size inside the imageView bounds by maintaining the original aspect ratio.
You're going to need to calculate the resulting image size in Points yourself*.
* It turns out you don't. See Alladinian's answer. I'm going to
leave this answer here to explain what the library function is doing.
Here's the math:
let imageAspectRatio = image.size.width / image.size.height
let viewAspectRatio = imageView.frame.width / imageView.frame.height
var fitWidth: CGFloat // scaled width in points
var fitHeight: CGFloat // scaled height in points
var offsetX: CGFloat // horizontal gap between image and frame
var offsetY: CGFloat // vertical gap between image and frame
if imageAspectRatio <= viewAspectRatio {
// Image is narrower than view so with aspectFit, it will touch
// the top and bottom of the view, but not the sides
fitHeight = imageView.frame.height
fitWidth = fitHeight * imageAspectRatio
offsetY = 0
offsetX = (imageView.frame.width - fitWidth) / 2
} else {
// Image is wider than view so with aspectFit, it will touch
// the sides of the view but not the top and bottom
fitWidth = imageView.frame.width
fitHeight = fitWidth / imageAspectRatio
offsetX = 0
offsetY = (imageView.frame.height - fitHeight) / 2
}
Explanation:
It helps to draw the pictures. Draw a rectangle that represents the
imageView. Then draw a rectangle that is narrow but extends from the
top of the image view to the bottom. That is the first case. Then draw
one where the image is short but extends to the two side of the image
view. That is the second case. At that point, we know one of the
dimensions. The other is just that value multiplied or divided by the
image's aspect ratio because we know that the .aspectFit keeps the
image's original aspect ratio.
A note about frame vs. bounds. The frame is in the coordinate system of the view's superview. The bounds are in the coordinate system of the view itself. I chose to use the frame in this example, because the OP was interested in how far to move the imageView in it's superview's coordinates. For a standard imageView that has not been rotated or scaled further, the width and height of the frame will match the width and height of the bounds. Things get interesting though when a rotation is applied to an imageView. The frame expands to show the whole imageView, but the bounds remain the same.
I have a UIView on top of another UIView. In that top view I have a UIImageView and on top of that there is a scrollVIew. When scrolling it used to stretch the imageView frame calculating the scroll offset. Now updating to Xcode 11.0 (11A420a) this feature is not working even though nothing has changed. Any suggestion why ? Here is my imageView constraints:
and my scrollViewDidScroll function:
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let y = 135 - (self.scrollView.contentOffset.y + 135)
let h = max(120, 160 + y)
let rect = CGRect(x: 0, y: 0, width: view.bounds.width, height: h)
NHBannerImageView.frame = rect
}
As you can see there is a rect variable which value changes depending on scroll but after that image frame is not changing.
I have downloaded the Xcode 10.3 and its working straight away, with the same configuration.
Update your view layout might be solve this problem. Add -
self.view.layoutIfNeeded()
in scrollViewDidScroll
Rather than using a normal button, I subclassed a UIControl because I needed to add a gradient to it. I also have a way to add a shadow and an activity indicator (not visible in the image below) as a stateful button to stop users hammering the button if (for example) an API call is being made.
It was really tricky to try to get the UIControl to rotate, and to be able to do this I added the shadow as a separate view to a container view containing the UIControl so a shadow could be added.
Now the issue is the control does not behave quite like a view on rotation - let me show you a screen grab for context:
This is mid-rotation but is just about visible to the eye - the image shows that the Gradient is 75% of the length of a blue UIView in the image.
https://github.com/stevencurtis/statefulbutton
In order to perform this rotation I remove the shadowview and then change the frame of the gradient frame to its bounds, and this is the problem.
func viewRotated() {
CATransaction.setDisableActions(true)
shadowView!.removeFromSuperview()
shadowView!.frame = self.frame
shadowView!.layer.masksToBounds = false
shadowView!.layer.shadowOffset = CGSize(width: 0, height: 3)
shadowView!.layer.shadowRadius = 3
shadowView!.layer.shadowOpacity = 0.3
shadowView!.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: 20, height: 20)).cgPath
shadowView!.layer.shouldRasterize = true
shadowView!.layer.rasterizationScale = UIScreen.main.scale
self.gradientViewLayer.frame = self.bounds
self.selectedViewLayer.frame = self.bounds
CATransaction.commit()
self.insertSubview(shadowView!, at: 0)
}
So this rotation method is called through the parent view controller:
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
super.viewWillTransition(to: size, with: coordinator)
coordinator.animate(alongsideTransition: { context in
context.viewController(forKey: UITransitionContextViewControllerKey.from)
//inform the loginButton that it is being rotated
self.loginButton.viewRotated()
}, completion: { context in
// can call here when completed the transition
})
}
I know this is the problem, and I guess it is not happening at quite the right time to act the same way as a UIView. Now the issue is that I have tried many things to get this to work, and my best solution (above) is not quite there.
It isn't helpful to suggest to use a UIButton, to use an image for the gradient (please don't suggest using a gradient image as a background for a UIButton, I've tried this) or a third party library. This is my work, it functions but does not work acceptably to me and I want to get it to work as well as a usual view (or at least know why not). I have tried the other solutions above as well, and have gone for my own UIControl. I know I can lock the view if there is an API call, or use other ways to stop the user pressing the button too many times. I'm trying to fix my solution, not invent ways of getting around this issue with CAGradientLayer.
The problem: I need to make a UIControlView with a CAGradientLayer as a background rotate in the same way as a UIView, and not exhibit the issue shown in the image above.
Full Example:
https://github.com/stevencurtis/statefulbutton
Here is working code:
https://gist.github.com/alldne/22d340b36613ae5870b3472fa1c64654
These are my recommendations to your code:
1. A proper place for setting size and the position of sublayers
The size of a view, namely your button, is determined after the layout is done. What you should do is just to set the proper size of sublayers after the layout. So I recommend you to set the size and position of the gradient sublayers in layoutSubviews.
override func layoutSubviews() {
super.layoutSubviews()
let center = CGPoint(x: self.bounds.width / 2, y: self.bounds.height / 2)
selectedViewLayer.bounds = self.bounds
selectedViewLayer.position = center
gradientViewLayer.bounds = self.bounds
gradientViewLayer.position = center
}
2. You don’t need to use an extra view to draw shadow
Remove shadowView and just set the layer properties:
layer.shadowOffset = CGSize(width: 0, height: 3)
layer.shadowRadius = 3
layer.shadowOpacity = 0.3
layer.shadowColor = UIColor.black.cgColor
clipsToBounds = false
If you have to use an extra view to draw shadow, then you can add the view once in init() and set the proper size and position in layoutSubviews or you can just programmatically set auto layout constraints to the superview.
3. Animation duration & timing function
After setting proper sizes, your animation of the gradient layers and the container view doesn’t sync well.
It seems that:
During the rotation transition, coordinator(UIViewControllerTransitionCoordinator) has its own transition duration and easing function.
And the duration and easing function are applied automatically to all the subviews (UIView).
However, those values are not applied to the CALayer without an associated UIView. Consequently, it uses the default timing function and duration of CoreAnimation.
To sync the animations, explicitly set the animation duration and the timing function like below:
class ViewController: UIViewController {
...
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
super.viewWillTransition(to: size, with: coordinator)
CATransaction.setAnimationDuration(coordinator.transitionDuration)
CATransaction.setAnimationTimingFunction(coordinator.completionCurve.timingFunction)
}
...
}
// Swift 4
extension UIView.AnimationCurve {
var timingFunction: CAMediaTimingFunction {
let functionName: CAMediaTimingFunctionName
switch self {
case .easeIn:
functionName = kCAMediaTimingFunctionEaseIn as CAMediaTimingFunctionName
case .easeInOut:
functionName = kCAMediaTimingFunctionEaseInEaseOut as CAMediaTimingFunctionName
case .easeOut:
functionName = kCAMediaTimingFunctionEaseOut as CAMediaTimingFunctionName
case .linear:
functionName = kCAMediaTimingFunctionLinear as CAMediaTimingFunctionName
}
return CAMediaTimingFunction(name: functionName as String)
}
}
I need to resize image using slider, that way that while the sliders value is being changed the image shrinks or becomes larger accordingly.
Is there any way to optimize this and not redraw image each time the value changes?
You can simply scale up/down when the slider value changes as below,
let sliderValue: CGFloat = 0.5
imageView.transform = CGAffineTransform(scaleX: sliderValue, y: sliderValue)
you can use transform
#IBAction func zoomSlider(_ sender: UISlider) {
yourImgView.transform = CGAffineTransform(scaleX: sender.value, y: sender.value)
}
set the value between 0.1 to 2 in slider and test it.Accordingly change the values you want.
to get original size
yourImgView = CGAffineTransform.identity
I have added a UIButton to storyboard and then added my image to the button. What I am looking to do is when you tap on the button the height increases slightly and then the button decreases in height by about a quarter.
#IBAction func StopsClick(sender: UIView) {
//Get the y coordinates of Image
let origin = sender.bounds.origin.y
//This decreases the height of Image but the image moved. I want the image to remain stationary and only the top of the image to increase in height.
UIView.animateWithDuration(0.5) {
sender.bounds = CGRectMake(0, origin, sender.bounds.width, sender.bounds.height * 1.2)
}
UIView.animateWithDuration(1.0) {
sender.bounds = CGRectMake(0, orgin, sender.bounds.width, sender.bounds.height * 0.4)
}
}
You should be able to get the effect you're after using transforms.
I would do the following:
Start with the identity transform.
Shift the origin of the transform down to the bottom of the image.
Increase the transform's scale.y as desired.
Shift the transform's origin back to the center of the image
Apply that transform to the button in your animation. Then animate it back to the identity transform.
If you don't shift the transform and only scale it it will grow in all directions from the center. (or only up and down if you only increase the scale.y)
Edit:
The code might look like this:
let halfHeight = button.bounds.height / 2
//Make the center of the grow animation be the bottom center of the button
var transform = CGAffineTransformMakeTranslation(0, -halfHeight)
//Animate the button to 120% of it's normal height.
tranform = CGAffineTransformScale( transform, 1.0, 1.2)
tranform = CGAffineTransformTranslate( transform, 0, halfHeight)
UIView.animateWithDuration(0.5)
{
button.transform = transform
}
The above code animates the button to 120% height, and leaves it there.
You could use one of the longer variants of animateWithDuration that takes options to make the animation auto-reverse. I leave that as an exercise for you.
Edit #2:
I banged out some code to do a 3-step animation:
func animateButton(step: Int)
{
let localStep = step - 1
let halfHeight = aButton.bounds.height / 2
var transform: CGAffineTransform
switch step
{
case 2:
//Make the center of the grow animation be the bottom center of the button
transform = CGAffineTransformMakeTranslation(0, -halfHeight)
//Animate the button to 120% of it's normal height.
transform = CGAffineTransformScale( transform, 1.0, 1.2)
transform = CGAffineTransformTranslate( transform, 0, halfHeight)
UIView.animateWithDuration(0.5, animations:
{
aButton.transform = transform
},
completion:
{
(finshed) in
animateButton(step)
})
case 1:
//In the second step, shrink the height down to .25 of normal
transform = CGAffineTransformMakeTranslation(0, -halfHeight)
//Animate the button to 120% of it's normal height.
transform = CGAffineTransformScale( transform, 1.0, 0.25)
transform = CGAffineTransformTranslate( transform, 0, halfHeight)
UIView.animateWithDuration(0.5, animations:
{
aButton.transform = transform
},
completion:
{
(finshed) in
animateButton(step)
})
case 0:
//in the final step, animate the button back to full height.
UIView.animateWithDuration(0.5)
{
aButton.transform = CGAffineTransformIdentity
}
default:
break
}
}
You'd invoke it with
animateButton(3)
It would be cleaner to use an enum for the step number, and it could use some range checking to make sure the input value is 3, 2, or 1, but you get the idea...