I have 5 tabs in UITabBarController and each of them is embedded in a UINavigationController. I would like to set the height of this tab to 8% of the screen, but I cannot set constraints to StoryBoard, also if I try to set it from code it turns black and break UI controls.
The code for my UINavigationController is this:
class NavBarController: UINavigationController {
override func viewDidLayoutSubviews() {
self.navigationBar.topItem?.titleView = UIImageView(image: UIImage(named: "image"))
self.navigationBar.topItem?.titleView?.contentMode = .scaleAspectFit
let gradient = CAGradientLayer()
var bounds = self.navigationBar.bounds
bounds.size.height += self.view.window?.windowScene?.statusBarManager?.statusBarFrame.height ?? 0
bounds.origin.y -= self.view.window?.windowScene?.statusBarManager?.statusBarFrame.height ?? 0
gradient.frame = bounds
gradient.colors = [UIColor.black, UIColor.white]
gradient.locations = [0.0, 1.0]
self.navigationBar.setBackgroundImage(image(fromLayer: gradient), for: .default)
}
func image(fromLayer layer: CALayer) -> UIImage {
UIGraphicsBeginImageContext(layer.frame.size)
layer.render(in: UIGraphicsGetCurrentContext()!)
let outputImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return outputImage!
}
}
I tried by setting:
self.navigationBar.frame.size.height = (self.view.superview?.frame.height)! * 0.08
self.navigationBar.layoutIfNeeded()
at the beginning of viewDidLayoutSubviews, but it does not work and also breaks the gradient background. Can someone help me? The ideal solution would be through storyboard, but I cannot simply set the UINavigationItem height constraint to its view height.
After spending some time looking into this, I found that UINavigationBar is given a height of 44pts several times throughout the transition process. Since UIKit is insisting on a height of 44, I decided to employ some trickery with a custom setter.
class NavigationBar: UINavigationBar {
private var _frame: CGRect!
override var frame: CGRect {
set {
_frame = CGRect(origin: newValue.origin, size: CGSize(width: newValue.width, height: 22))
}
get {
_frame
}
}
}
Here I'm forcing the height of the navigation bar to 22 pts. However, after compiling and running the nav bar is still 44. Why? Because UIKit is also setting a constraint, forcing the height to 44. This means that AutoLayout is reverting the height to 44 upon layout. Seems that this is something Apple really doesn't want you to change.
Related
I have a tab bar. I changed its colour, gave it a corner radius, set its border width and colour, and everything is working good. Until now, everything is done in a storyboard.
Now I want to give it left and right margins, as by default it is sticking to the screen's edges.
This is the tab bar's current look:
The black arrows point to the lines that stick to the screen's edges. I want space between this line and the edges.
You can create this placeholder view inside a custom UITabBar as below,
class CustomTabBar: UITabBar {
let roundedView = UIView(frame: .zero)
override func awakeFromNib() {
super.awakeFromNib()
roundedView.layer.masksToBounds = true
roundedView.layer.cornerRadius = 12.0
roundedView.layer.borderWidth = 2.0
roundedView.isUserInteractionEnabled = false
roundedView.layer.borderColor = UIColor.black.cgColor
self.addSubview(roundedView)
}
override func layoutSubviews() {
super.layoutSubviews()
let margin: CGFloat = 12.0
let position = CGPoint(x: margin, y: 0)
let size = CGSize(width: self.frame.width - margin * 2, height: self.frame.height)
roundedView.frame = CGRect(origin: position, size: size)
}
}
Set this class for TabBar in storyboard/xib. It should give you the following,
I am relatively new to Swift. I'm just messing around trying to design a taxi app.
I discovered CGGradientLayer and thought it would add a nice effect to the top bar on the app.
I've added it and for some reason, it's not fully stretching to the views width.
This is my subclass:
import UIKit
class GradientView: UIView {
let gradient = CAGradientLayer()
override func awakeFromNib() {
setupGradientView()
}
func setupGradientView() {
gradient.frame = self.frame
gradient.colors = [UIColor.white.cgColor, UIColor.init(white: 1.0, alpha: 0.0).cgColor]
gradient.startPoint = CGPoint.zero
gradient.endPoint = CGPoint(x: 0, y: 1)
gradient.locations = [0.9, 1.0]
self.layer.addSublayer(gradient)
}
}
And this is the result.
The green background is actually the width of the UIView which the sub class is applied too.
You are setting the frame of the gradient too early. You should set it up in an override of layoutSubviews:
override func layoutSubviews() {
super.layoutSubviews()
gradient.frame = self.bounds
}
Notes:
You should be setting the gradient frame to self.bounds. That is the coordinate system used inside of the view. The gradient is placed relative to the GradientView and doesn't change if the GradientView is placed in another location on the screen (because the bounds do not change in that case, but the frame does).
At the time your view is first created, Auto Layout has not established the size of your view for your current device (or orientation). By setting the frame in layoutSubviews you always get the latest value for the size of the view.
I'm having an issue with my app when testing for iPhone X. I'm not sure how to adjust this issue, as well as not make it an issue for non iPhone X sizes. This only seems to be an issue on the iPhone X simulator.
On iOS 12.1 I've solved this issue by overriding safeAreaInsets in the UITabBar subclass:
class TabBar: UITabBar {
private var cachedSafeAreaInsets = UIEdgeInsets.zero
override var safeAreaInsets: UIEdgeInsets {
let insets = super.safeAreaInsets
if insets.bottom < bounds.height {
cachedSafeAreaInsets = insets
}
return cachedSafeAreaInsets
}
}
For iOS 13.0 onward,
class TabBar: UITabBar {
private var cachedSafeAreaInsets = UIEdgeInsets.zero
let keyWindow = UIApplication.shared.connectedScenes
.filter { $0.activationState == .foregroundActive }
.compactMap { $0 as? UIWindowScene }
.first?.windows
.filter { $0.isKeyWindow }
.first
override var safeAreaInsets: UIEdgeInsets {
if let insets = keyWindow?.safeAreaInsets {
if insets.bottom < bounds.height {
cachedSafeAreaInsets = insets
}
}
return cachedSafeAreaInsets
}
}
Create a separate file with the following code:
extension UITabBar {
override open func sizeThatFits(_ size: CGSize) -> CGSize {
super.sizeThatFits(size)
guard let window = UIApplication.shared.keyWindow else {
return super.sizeThatFits(size)
}
var sizeThatFits = super.sizeThatFits(size)
sizeThatFits.height = window.safeAreaInsets.bottom + 40
return sizeThatFits
}
}
"File inspector" from right of Xcode storyboard, enable Safe Area guide layout to support your app in iPhone
This post describes it really well.
For iOS 11.3 this worked for me:
func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
tabBar.invalidateIntrinsicContentSize()
}
In Constraints -
If you are giving bottom space with "Bottom Layout Guide", then this issue will occur.
Solution:
Give bottom space with respect to superview. This will work 100% perfect.
This worked for me.
[self.tabBar.bottomAnchor constraintEqualToAnchor:self.view.layoutMarginsGuide.bottomAnchor].active = YES;
I had a a similar issue. I was setting the selectionIndicatorImage in viewDidLoad(). Moving the code to viewDidLayoutSubviews() fixed my issue.
Just align the bottom of the UITabBar to the superview, not to the safe area. If you align it to safe area it will be like this:
And when aligned to the superview, it will show correctly:
I think this is because Apple gave the tab bar items a default margin to the bottom if it is on iPhone X as they want the tab bar to be extended to the bottom of the screen to avoid a floating bar.
Follow below guidelines for setting the UITabbar selectionIndicatorImage.
UITabBar.appearance().selectionIndicatorImage = #YOUR_IMAGE
Make sure your image height is 48.
The default height of tabbar selectionIndicatorImage is 49, But in iPhone X set image height equals to 48.
The solution for me was that I had a custom UITabBar height set, something like this:
override func viewWillLayoutSubviews() {
var tabFrame = tabBar.frame
tabFrame.size.height = 60
tabFrame.origin.y = self.view.frame.size.height - 60
tabBar.frame = tabFrame
}
Remove it and the tab bar will display correctly on iPhone X.
Add this code in viewDidLoad
DispatchQueue.main.async {
let size = CGSize(width: self.tabBar.frame.width / numberOfTabsFloat,
height: self.tabBar.frame.height)
let image = UIImage.drawTabBarIndicator(color: UIColor.white,
size: size,
onTop: false)
UITabBar.appearance().selectionIndicatorImage = image
self.tabBar.selectionIndicatorImage = image
}
and add this extension
extension UIImage{
//Draws the top indicator by making image with filling color
class func drawTabBarIndicator(color: UIColor, size: CGSize, onTop: Bool) -> UIImage {
let indicatorHeight = size.height
let yPosition = onTop ? 0 : (size.height - indicatorHeight)
UIGraphicsBeginImageContextWithOptions(size, false, 0)
color.setFill()
UIRectFill(CGRect(x: 0, y: yPosition, width: size.width, height: indicatorHeight))
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image!
}
}
Put this into your UITabBarViewController to correct the TabBar height if your UIViewController is rotatable.
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
super.viewWillTransition(to: size, with: coordinator)
tabBar.sizeToFit()
}
invalidateIntrinsicContentSize of UITabBar in viewWillLayoutSubviews that may help you.
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
self.tabBar.invalidateIntrinsicContentSize()
}
There is UITabBar subclass that solves all my issues with iPhone X iOS 11 / iOS 12
class TabBar: UITabBar {
private var _safeAreaInsets = UIEdgeInsets.zero
private var _subviewsFrames: [CGRect] = []
#available(iOS 11.0, *)
override func safeAreaInsetsDidChange() {
super.safeAreaInsetsDidChange()
if _safeAreaInsets != safeAreaInsets {
_safeAreaInsets = safeAreaInsets
invalidateIntrinsicContentSize()
superview?.setNeedsLayout()
superview?.layoutSubviews()
}
}
override func sizeThatFits(_ size: CGSize) -> CGSize {
var size = super.sizeThatFits(size)
if #available(iOS 12.0, *) {
let bottomInset = safeAreaInsets.bottom
if bottomInset > 0 && size.height < 50 && (size.height + bottomInset < 90) {
size.height += bottomInset
}
}
return size
}
override var frame: CGRect {
get {
return super.frame
}
set {
var tmp = newValue
if let superview = superview, tmp.maxY !=
superview.frame.height {
tmp.origin.y = superview.frame.height - tmp.height
}
super.frame = tmp
}
}
override func layoutSubviews() {
super.layoutSubviews()
let state = subviews.map { $0.frame }
if (state.first { $0.width == 0 } == nil) {
_subviewsFrames = state
} else {
zip(subviews, _subviewsFrames).forEach { (view, rect) in
view.frame = rect
}
}
}
}
Apple has now fixed this issue in iOS 12.1.1
It's look crazy but I just need to remove this line in my code
self.view.layoutIfNeeded()
I just guess that call layoutIfNeeded on a view that doesn't appear in screen will make this problem happen.
Anyway, solution from #mohamed-ali also work correctly. Thanks you so much.
This worked for me as I am using a selection image.
tabBar.selectionIndicatorImage = UIImage.imageWithColor(color: UIColor.NewDesignColor.yellow, size: tabBarItemSize).resizableImage(withCapInsets: UIEdgeInsets.init(top: 0, left: 0, bottom: 20, right: 0))
Adding a bottom inset helps in my case.
Hope this works for your as well.
Thanks.
Although my answer is late, But let me ensure you, if you are facing any issue like this on iphone x, xs or max screen, Make sure the image size you are uploading as selection must have height = width * 48pxHeight.
After trying a few solutions, what worked for me was adding the following line to viewDidLoad:
[self.tabBar.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor].active = YES;
Jonah's and Mehul Thakkar's answers pointed me in the right direction.
Note: I only had a blank tab bar controller in storyboard. The tab bar images and view controllers were setup using the tabBarItem properties (e.g., tabBarItem.title on the view controllers).
I was facing this cosmetic problem above iOS 11.0 and below 12.0 only.
I was having a CustomTabBar class inherited from UITabBar.
I override the frame method like below:
- (CGRect)frame{
return self.bounds;
}
It resolved this issue in most of the iOS version 11.0 *
I have a method for repeating or tiling an image across a view using UIColor patternImage:
view.backgroundColor = UIColor(patternImage: UIImage(named:imageName))
The default behaviour of UIColor patternImage is to start the pattern from the top left, the result shown in Image 1.
Question:
How can I get UIColor patternImage to start always from the very center of a view, patterning outwards to give the result shown in Image 2?
This works. It is a generalised method that applies more broadly, adapting dynamically to both pattern images and views of different heights and widths. It gives the desired result in the question and is tested on different iOS simulators.
view.backgroundColor = UIColor(patternImage: UIImage(named: "imageName")!)
view.bounds.origin.x = (UIImage(named: "imageName")!.size.width/2) - (view.bounds.size.width/2)
view.bounds.origin.y = (UIImage(named: "imageName")!.size.height/2) - (view.bounds.size.height/2)
If your image size is 50*50 then you can do something like this,
myView = UIVIew(frame: CGRect(x: (self.view.frame.size.width/2)-25, y: (self.view.frame.size.height/2)-25, width: 50, height: 50))
So this view(imageview in yourcase may be) will be place at exact middle of view. Like wise you can arrange other view by adding or substracting view's width and height to center view's x and y origin. Hope this will help you. :)
I created reusable class PatternView, reusing idea of #user4806509. It's really drop-in component for showing patterns. Also, patternImage can be set via Interface Builder
class PatternView: UIView {
#IBInspectable var patternImage: UIImage?
override func awakeFromNib() {
super.awakeFromNib()
self.setupBackgroundColor()
}
private func setupBackgroundColor() {
guard let patternImage = self.patternImage else {
return
}
self.backgroundColor = UIColor(patternImage: patternImage)
}
override func layoutSubviews() {
super.layoutSubviews()
self.centerPattern()
}
private func centerPattern() {
guard let patternSize = self.patternImage?.size,
patternSize.width > 0, patternSize.height > 0 else {
return
}
let x = -self.bounds.width.remainder(dividingBy: patternSize.width)/2
let y = -self.bounds.height.remainder(dividingBy: patternSize.height)/2
self.bounds.origin = CGPoint(x: x, y: y)
}}
How do I turn a rectangular image view into a circular image view that can hold shape in auto layout without setting width and height restraints? Thereby allowing the imageView to define it’s size, and size bigger and smaller relative to objects around it with leading, trailing, top, and bottom constraints.
I asked a similar question the other day, but I think this might be posed in a more concise way. Thanks so much!
EDIT
Ok, I started over to make this as simple as possible. I have a view named "Cell" and a UIImageView named "dog" within the cell, and that's it. I don't have "unable to simultaneously satisfy constraints" in the console anymore, just two simple views using auto layout. I'm still trying to use this code to round the UIImageView:
profileImageView.layer.cornerRadius = profileImageView.frame.size.width / 2
profileImageView.clipsToBounds = true
Here is the cell constraint setup:
Here is the profile pic constraint setup:
Here is the result without the code, no rounding, but nice and square:
Here is the result with the code to round:
This makes no sense to me, because without the rounding code the image is square, and with the code it's diamond shaped. If it's square shouldn't it be a circle with no issues?
EDIT 2
Here's what happens when I remove the bottom constraint and add a multiplier of .637 for equal height to superview.
Unfortunately you cannot do this using cornerRadius and autolayout — the CGLayer is not affected by autolayout, so any change in the size of the view will not change the radius which has been set once causing, as you have noticed, the circle to lose its shape.
You can create a custom subclass of UIImageView and override layoutSubviews in order to set the cornerRadius each time the bounds of the imageview change.
EDIT
An example might look something like this:
class Foo: UIImageView {
override func layoutSubviews() {
super.layoutSubviews()
let radius: CGFloat = self.bounds.size.width / 2.0
self.layer.cornerRadius = radius
}
}
And obviously you would have to constrain the Foobar instance's width to be the same as the height (to maintain a circle). You would probably also want to set the Foobar instance's contentMode to UIViewContentMode.ScaleAspectFill so that it knows how to draw the image (this means that the image is likely to be cropped).
Setting radius in viewWillLayoutSubviews will solve the problem
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
profileImageView.layer.cornerRadius = profileImageView.frame.height / 2.0
}
create new interface in your .h file like
#interface CornerClip : UIImageView
#end
and implementation in .m file like
#implementation cornerClip
-(void)layoutSubviews
{
[super layoutSubviews];
CGFloat radius = self.bounds.size.width / 2.0;
self.layer.cornerRadius = radius;
}
#end
now just give class as "CornerClip" to your imageview.
100% working... Enjoy
First of all, I should mention that u can get a circle shape for your UIView/UIImageView only if the width and height will be equal. It's important to understand. In all other cases (when width != height), you won't get a circle shape because the initial shape of your UI instance was a rectangle.
OK, with this so UIKit SDK provides for developers a mechanism to manipulate the UIview's layer instance to change somehow any of layer's parameters, including setting up a mask to replace the initial shape of UIView element with the custom one. Those instruments are IBDesignable/IBInspectable. The goal is to preview our custom views directly through Interface Builder.
So using those keywords we can write our custom class, which will deal only with the single condition whether we need to round corners for our UI element or not.
For example, let's create the class extended from the UIImageView.
#IBDesignable
class UIRoundedImageView: UIImageView {
#IBInspectable var isRoundedCorners: Bool = false {
didSet { setNeedsLayout() }
}
override func layoutSubviews() {
super.layoutSubviews()
if isRoundedCorners {
let shapeLayer = CAShapeLayer()
shapeLayer.path = UIBezierPath(ovalIn:
CGRect(x: bounds.origin.x, y: bounds.origin.y, width: bounds.width, height: bounds.height
)).cgPath
layer.mask = shapeLayer
}
else {
layer.mask = nil
}
}
}
After setting the class name for your UIImageView element (where the dog picture is), in your storyboard, you will get a new option, appeared in the Attributes Inspector menu (details at the screenshot).
The final result should be like this one.
It seems when you add one view as a subview of another that netted view will not necessarily have the same height as its superview. That's what the problem seems like. The solution is to not add your imageView as a subview, but have it on top of your backgroundView. In the image below I'm using a UILabel as my backgroundView.
Also in your case, when you're setting the cornerRadius use this: let radius: CGFloat = self.bounds.size.height / 2.0.
With my hacky solution you'll get smooth corner radius animation alongside frame size change.
Let's say you have ViewSubclass : UIView. It should contain the following code:
class ViewSubclass: UIView {
var animationDuration : TimeInterval?
let imageView = UIImageView()
//some imageView setup code
override func layoutSubviews() {
super.layoutSubviews()
if let duration = animationDuration {
let anim = CABasicAnimation(keyPath: "cornerRadius")
anim.fromValue = self.imageView.cornerRadius
let radius = self.imageView.frame.size.width / 2
anim.toValue = radius
anim.duration = duration
self.imageView.layer.cornerRadius = radius
self.imageView.layer.add(anim, forKey: "cornerRadius")
} else {
imageView.cornerRadius = imageView.frame.size.width / 2
}
animationDuration = nil
}
}
An then you'll have to do this:
let duration = 0.4 //For example
instanceOfViewSubclass.animationDuration = duration
UIView.animate(withDuration: duration, animations: {
//Your animation
instanceOfViewSubclass.layoutIfNeeded()
})
It's not beautiful, and might not work for complex multi-animations, but does answer the question.
Swift 4+ clean solution based on omaralbeik's answer
import UIKit
extension UIImageView {
func setRounded(borderWidth: CGFloat = 0.0, borderColor: UIColor = UIColor.clear) {
layer.cornerRadius = frame.width / 2
layer.masksToBounds = true
layer.borderWidth = borderWidth
layer.borderColor = borderColor.cgColor
}
}
Sample usage in UIViewController
1.Simply rounded UIImageView
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
imageView.setRounded()
}
2.Rounded UIImageView with border width and color
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
imageView.setRounded(borderWidth: 1.0, borderColor: UIColor.red)
}
write this code
override viewDidLayoutSubViews() {
profileImageView.layer.cornerRadius = profileImageView.frame.size.width / 2
profileImageView.clipsToBounds = true
}
in this case it will called after calculating the autolayout calculations in the first code you called the cornerradius code before calculating the actual size of the view cuz it's dynamically calculated using aspect ratio , the actual corner radius is calculated before equaling the width and the height of the view
I have same problem, and Now I get what happened here, hope some ideas can help you:
there are something different between the tows:
your profileImageView in storyboard
your profileImageView in viewDidLoad
the size of bound and frame is different when viewDidLoad and in storyboard,just because view is resize for different device size.
You can try it print(profileImageView.bounds.size) in viewDidLoad and viewDidAppear you will find the size in viewDidLoad you set cornerRadius is not the real "running" size.
a tips for you:
you can use a subClass of ImageView to avoid it, or do not use it in storyboard,
If you have subclassed the UIImageView. Then just add this piece of magical code in it.
Written in : Swift 3
override func layoutSubviews() {
super.layoutSubviews()
if self.isCircular! {
self.layer.cornerRadius = self.bounds.size.width * 0.50
}
}
I am quite new to iOS native development, but I had the same problem and found a solution.
So the green background has this constraints:
backgroundView.translatesAutoresizingMaskIntoConstraints = false
backgroundView.topAnchor.constraint(equalTo: superview!.safeAreaLayoutGuide.topAnchor).isActive = true
backgroundView.leftAnchor.constraint(equalTo: superview!.leftAnchor).isActive = true
backgroundView.widthAnchor.constraint(equalTo: superview!.widthAnchor).isActive = true
backgroundView.heightAnchor.constraint(equalTo: superview!.heightAnchor, multiplier: 0.2).isActive = true
The image constraints:
avatar.translatesAutoresizingMaskIntoConstraints = false
avatar.heightAnchor.constraint(equalTo: backgroundView.heightAnchor, multiplier: 0.8).isActive = true
avatar.widthAnchor.constraint(equalTo: backgroundView.heightAnchor, multiplier: 0.8).isActive = true
avatar.centerYAnchor.constraint(equalTo: backgroundView.centerYAnchor, constant: 0).isActive = true
avatar.leadingAnchor.constraint(equalTo: backgroundView.leadingAnchor, constant: 20).isActive = true
on viewWillLayoutSubviews() method I set the corner radius
to
avatar.layer.cornerRadius = (self.frame.height * 0.2 * 0.8) / 2
Basically, I am simply calculating the height of the image and then divide it by 2. 0.2 is the backgroungView height constraint multiplier and 0.8 the image width/height constraint multiplier.
Solution: Crop the image
[imageView setImage:[[imageView image] imageWithRoundedCorners:imageView.image.size.width/2]];
imageView.contentMode = UIViewContentModeScaleAspectFill;
I was looking for the same solution for profile pictures. After some hit and try and going through available functions, I came across something which works and is a nice way to ensure its safe. You can use the following function to crop out a round image from the original image and then you need not worry about the corner radius.
Post this even if your view size changes the image remains round and looks good.
Add a 1:1 aspect ratio constraint to the imageView for it to remain circular, despite any height or width changes.
I added custom IBInspectable cornerRadiusPercent, so you can do it without any code.
class RoundButton: UIButton {
override var bounds: CGRect {
didSet {
updateCornerRadius()
}
}
//private var cornerRadiusWatcher : CornerRadiusPercent?
#IBInspectable var cornerRadiusPercent: CGFloat = 0 {
didSet {
updateCornerRadius()
}
}
func updateCornerRadius()
{
layer.cornerRadius = bounds.height * cornerRadiusPercent
}
}
Can be easily done by creating an IBOutlet for the constraint which needs to be changed at runtime. Below is the code:
Create a IBOutlet for the constraint that needs to be changed at run time.
#IBOutlet var widthConstraint: NSLayoutConstraint!
Add below code in viewDidLoad():
self.widthConstraint.constant = imageWidthConstraintConstant()
Below function determines for device types change the width constraint accordingly.
func imageWidthConstraintConstant() -> CGFloat {
switch(self.screenWidth()) {
case 375:
return 100
case 414:
return 120
case 320:
return 77
default:
return 77
}
}