In a UIView subclass, I have the following property override for override var bounds: CGRect:
#IBDesignable
class GEView: UIView {
private var shadowView: UIView? {
didSet {
guard let superview = superview else { return }
guard let shadowView = self.shadowView else { return }
// Add the shadow to the superview, as the shadow cannot
// also allow rounded corners simultaneously
superview.addSubview(shadowView)
shadowView.layer.zPosition = layer.zPosition - 1
shadowView.edges(to: self)
}
}
// CALLED WHEN SETTING #IBInspectable PROPERTIES
/// Creates a shadow if one has not yet been created.
private func createShadowIfNeeded() {
guard shadowView == nil else { return }
shadowView = UIView()
shadowView?.layer.shadowPath = UIBezierPath(roundedRect: bounds,
cornerRadius: cornerRadius).cgPath
shadowView?.layer.shouldRasterize = true
}
// THE PROPERTY TO ATTEMPT THE SHADOW MOVING
override var bounds: CGRect {
didSet {
shadowView?.layer.shadowPath = UIBezierPath(roundedRect: bounds,
cornerRadius: cornerRadius).cgPath
}
}
}
The attempt was to re-draw the shadow many times as the bounds change when the view constraints are animated (leading to the view changing size).
However, the bounds change instantly, as the animation is just visual. Is there a way I can get this shadow to follow the view as it animates? It would be better if this can be in the UIView subclass instead of the animation block, which is UIView.animate.
Here is what the problem looks like:
I want the shadow to follow along whilst the view moves. At the end of the gif, the shadow position and view position are correct, because the override ignores animations and pretends it has already animated.
How can I fix this?
Try updating the shadow in layoutSubviews() of CustomView, i.e.
class CustomView: UIView {
override func layoutSubviews() {
super.layoutSubviews()
self.layer.shadowRadius = 10.0
self.layer.shadowOpacity = 1.0
self.layer.shadowColor = UIColor.black.cgColor
let oldPath = self.layer.shadowPath
let newPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: 0.0).cgPath
if oldPath != nil {
let shadowPathAnimation: CABasicAnimation = CABasicAnimation(keyPath: "shadowPath")
shadowPathAnimation.fromValue = oldPath
shadowPathAnimation.toValue = newPath
self.layer.add(shadowPathAnimation, forKey: "shadowAnimation")
self.layer.shadowPath = newPath
}
}
}
class ViewController: UIViewController {
#IBOutlet weak var customView: CustomView!
#IBOutlet weak var trailingConstraint: NSLayoutConstraint!
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
UIView.animate(withDuration: 3.0) {
self.trailingConstraint.constant = 200.0
self.view.layoutIfNeeded()
}
}
}
I've make a custom class for UIButton but in small screen devices e.g. iPhone 5s cornerRadius not working properly
You've to looks closer to see the UiButton's cornerRadius is not perfectly rounded
class customRoundButton: UIButton
{
override func awakeFromNib()
{
self.layer.cornerRadius = (self.layer.frame.height / 2)
self.layer.borderColor = fontColor.defualtBlue.cgColor
self.layer.borderWidth = 1
self.layer.clipsToBounds = true
self.layer.layoutIfNeeded()
}
}
Setting the cornerRadius in awakeFromNib is too early. Use layoutSubviews instead:
class CustomRoundButton: UIButton {
override func awakeFromNib() {
super.awakeFromNib()
layer.borderColor = UIColor.blue.cgColor
layer.borderWidth = 1
}
override func layoutSubviews() {
super.layoutSubviews()
layer.cornerRadius = layer.frame.height / 2
}
}
Try
override func layoutSubviews() {
super.layoutSubviews()
self.layer.cornerRadius = self.bounds.height * 0.50
}
So by the time your custom UIButton is going to be added to the subviews it will know it bounds and you just have to assign the corner radius to be the half of bounds height.
Better use IBDesignable for this :
#IBDesignable
class RoundedButton: UIButton {
#IBInspectable var cornerRadius: CGFloat = 3.0 {
didSet {
self.layer.cornerRadius = cornerRadius
}
}
override func prepareForInterfaceBuilder() {
super.prepareForInterfaceBuilder()
self.setupView()
}
override func awakeFromNib() {
super.awakeFromNib()
self.setupView()
}
func setupView() {
self.layer.masksToBounds = false
self.layer.cornerRadius = cornerRadius
}
}
I stumbled upon this question here and found for me what worked best in Swift 5 is setting the corner radius in awakeFromNib inside Disptatch.main.async When using layoutSubviews or setNeedsLayout the closure is called for every little change or movement. This might work for some use cases. I have not tried that with the above example.
My code looks like this:
override func awakeFromNib() {
super.awakeFromNib()
imageView.layer.masksToBounds = false
imageView.clipsToBounds = true
DispatchQueue.main.async {
self.imageView.layer.cornerRadius = self.imageView.bounds.height / 2.0
}
}
Hi guys please am trying to make a view inherit from a gradient UIView with a background to it but for one or two reasons its not inheriting. Here is my code:
// The gradient class I want to be inherited from
class GradientView: UIView {
var gradient = CAGradientLayer()
override func awakeFromNib() {
super.awakeFromNib()
setupGradientView()
}
func setupGradientView(){
gradient.frame = self.bounds
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.8,1.0]
self.layer.addSublayer(gradient)
}
}
let headerHolder: GradientView = {
let view = GradientView()
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
//Where i set up the views
func setupViews() {
view.addSubview(headerHolder)
headerHolder.rightAnchor.constraint(equalTo: view.rightAnchor, constant: 0).isActive = true
headerHolder.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 0).isActive = true
headerHolder.topAnchor.constraint(equalTo: view.topAnchor, constant: 0).isActive = true
headerHolder.heightAnchor.constraint(equalToConstant: 80).isActive = true
}
You need to call it inside
override init(frame: CGRect)
as awakeFromNib is not called in such init cases it's called when the view loaded from xib / stroryboard
and set the frame inside
override func layoutSubviews{}
as it's the place where the view gets it's correct bounds
//
class GradientView: UIView {
var gradient = CAGradientLayer()
override init(frame: CGRect) {
super.init(frame: frame)
setupGradientView()
}
override func layoutSubviews() {
super.layoutSubviews()
gradient.frame = self.bounds
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func setupGradientView(){
gradient.colors = [UIColor.black.cgColor, UIColor.red.cgColor]
gradient.startPoint = CGPoint.zero
gradient.endPoint = CGPoint(x: 0, y: 1)
gradient.locations = [0.8,1.0]
self.layer.addSublayer(gradient)
}
}
The first problem is that you override awakeFromNib method, but it's never called, because you create your GradientView programmatically. You see, awakeFromNib is called onle the view loaded from Xib or Storyboard file. Here is quote from Apple Documentation.
The nib-loading infrastructure sends an awakeFromNib message to each object recreated from a nib archive, but only after all the objects in the archive have been loaded and initialized.
So if you want to create your view programmatically, you need to override init(frame: CGRect).
The second problem is that in setupGradientView method you're using self.bounds, but your view bounds has not been computed yet, because layout was not called. You may setup gradient layer frame at layoutSubviews method.
class GradientView: UIView {
var gradient = CAGradientLayer()
override init(frame: CGRect) {
super.init(frame: frame)
setupGradientView()
}
override func layoutSubviews() {
super.layoutSubviews()
gradient.frame = self.bounds
}
func setupGradientView() {
let colorFrom = UIColor.white.cgColor
let colorTo = UIColor.init(white:1.0, alpha: 0.0).cgColor
gradient.colors = [colorFrom, colorTo]
gradient.startPoint = CGPoint.zero
gradient.endPoint = CGPoint(x: 0, y: 1)
gradient.locations = [0.8, 1.0]
self.layer.addSublayer(gradient)
}
}
Hope it helps you.
The problem is that, because you created the CAGradientLayer directly, it doesn’t participate in UIKit’s layout system. You’re setting the gradient layer’s frame before the GradientView has been resized for the current device.
Instead of creating the gradient layer directly and making it a sublayer of the GradientView’s layer, tell GradientLayer that it’s own layer should be a CAGradientLayer:
class GradientView: UIView {
override class var layerClass: AnyClass {
return CAGradientLayer.self
}
var gradientLayer: CAGradientLayer {
return self.layer as! CAGradientLayer
}
...
}
Now in iOS 11, the sizeThatFits method is not called from UINavigationBar subclasses. Changing the frame of UINavigationBar causes glitches and wrong insets.
So, any ideas how to customize navbar height now?
According to Apple developers (look here, here and here), changing navigation bar height in iOS 11 is not supported. Here they suggest to do workarounds like having a view under the navigation bar (but outside of it) and then remove the nav bar border. As a result, you will have this in storyboard:
look like this on the device:
Now you can do a workaround that was suggested in the other answers: create a custom subclass of UINavigationBar, add your custom large subview to it, override sizeThatFits and layoutSubviews, then set additionalSafeAreaInsets.top for the navigation's top controller to the difference customHeight - 44px, but the bar view will still be the default 44px, even though visually everything will look perfect. I didn't try overriding setFrame, maybe it works, however, as Apple developer wrote in one of the links above: "...and neither is [supported] changing the frame of a navigation bar that is owned by a UINavigationController (the navigation controller will happily stomp on your frame changes whenever it deems fit to do so)."
In my case the above workaround made views to look like this (debug view to show borders):
As you can see, the visual appearance is quite good, the additionalSafeAreaInsets correctly pushed the content down, the big navigation bar is visible, however I have a custom button in this bar and only the area that goes under the standard 44 pixel nav bar is clickable (green area in the image). Touches below the standard navigation bar height doesn't reach my custom subview, so I need the navigation bar itself to be resized, which the Apple developers say is not supported.
Updated 07 Jan 2018
This code is support XCode 9.2, iOS 11.2
I had the same problem. Below is my solution. I assume that height size is 66.
Please choose my answer if it helps you.
Create CINavgationBar.swift
import UIKit
#IBDesignable
class CINavigationBar: UINavigationBar {
//set NavigationBar's height
#IBInspectable var customHeight : CGFloat = 66
override func sizeThatFits(_ size: CGSize) -> CGSize {
return CGSize(width: UIScreen.main.bounds.width, height: customHeight)
}
override func layoutSubviews() {
super.layoutSubviews()
print("It called")
self.tintColor = .black
self.backgroundColor = .red
for subview in self.subviews {
var stringFromClass = NSStringFromClass(subview.classForCoder)
if stringFromClass.contains("UIBarBackground") {
subview.frame = CGRect(x: 0, y: 0, width: self.frame.width, height: customHeight)
subview.backgroundColor = .green
subview.sizeToFit()
}
stringFromClass = NSStringFromClass(subview.classForCoder)
//Can't set height of the UINavigationBarContentView
if stringFromClass.contains("UINavigationBarContentView") {
//Set Center Y
let centerY = (customHeight - subview.frame.height) / 2.0
subview.frame = CGRect(x: 0, y: centerY, width: self.frame.width, height: subview.frame.height)
subview.backgroundColor = .yellow
subview.sizeToFit()
}
}
}
}
Set Storyboard
Set Custom NavigationBar class
Add TestView + Set SafeArea
ViewController.swift
import UIKit
class ViewController: UIViewController {
var navbar : UINavigationBar!
#IBOutlet weak var testView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
//update NavigationBar's frame
self.navigationController?.navigationBar.sizeToFit()
print("NavigationBar Frame : \(String(describing: self.navigationController!.navigationBar.frame))")
}
//Hide Statusbar
override var prefersStatusBarHidden: Bool {
return true
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(false)
//Important!
if #available(iOS 11.0, *) {
//Default NavigationBar Height is 44. Custom NavigationBar Height is 66. So We should set additionalSafeAreaInsets to 66-44 = 22
self.additionalSafeAreaInsets.top = 22
}
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
SecondViewController.swift
import UIKit
class SecondViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
// Create BackButton
var backButton: UIBarButtonItem!
let backImage = imageFromText("Back", font: UIFont.systemFont(ofSize: 16), maxWidth: 1000, color:UIColor.white)
backButton = UIBarButtonItem(image: backImage, style: UIBarButtonItemStyle.plain, target: self, action: #selector(SecondViewController.back(_:)))
self.navigationItem.leftBarButtonItem = backButton
self.navigationItem.leftBarButtonItem?.setBackgroundVerticalPositionAdjustment(-10, for: UIBarMetrics.default)
}
override var prefersStatusBarHidden: Bool {
return true
}
#objc func back(_ sender: UITabBarItem){
self.navigationController?.popViewController(animated: true)
}
//Helper Function : Get String CGSize
func sizeOfAttributeString(_ str: NSAttributedString, maxWidth: CGFloat) -> CGSize {
let size = str.boundingRect(with: CGSize(width: maxWidth, height: 1000), options:(NSStringDrawingOptions.usesLineFragmentOrigin), context:nil).size
return size
}
//Helper Function : Convert String to UIImage
func imageFromText(_ text:NSString, font:UIFont, maxWidth:CGFloat, color:UIColor) -> UIImage
{
let paragraph = NSMutableParagraphStyle()
paragraph.lineBreakMode = NSLineBreakMode.byWordWrapping
paragraph.alignment = .center // potentially this can be an input param too, but i guess in most use cases we want center align
let attributedString = NSAttributedString(string: text as String, attributes: [NSAttributedStringKey.font: font, NSAttributedStringKey.foregroundColor: color, NSAttributedStringKey.paragraphStyle:paragraph])
let size = sizeOfAttributeString(attributedString, maxWidth: maxWidth)
UIGraphicsBeginImageContextWithOptions(size, false , 0.0)
attributedString.draw(in: CGRect(x: 0, y: 0, width: size.width, height: size.height))
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image!
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
Yellow is barbackgroundView. Black opacity is BarContentView.
And I removed BarContentView's backgroundColor.
That's It.
this works for me :
- (CGSize)sizeThatFits:(CGSize)size {
CGSize sizeThatFit = [super sizeThatFits:size];
if ([UIApplication sharedApplication].isStatusBarHidden) {
if (sizeThatFit.height < 64.f) {
sizeThatFit.height = 64.f;
}
}
return sizeThatFit;
}
- (void)setFrame:(CGRect)frame {
if ([UIApplication sharedApplication].isStatusBarHidden) {
frame.size.height = 64;
}
[super setFrame:frame];
}
- (void)layoutSubviews
{
[super layoutSubviews];
for (UIView *subview in self.subviews) {
if ([NSStringFromClass([subview class]) containsString:#"BarBackground"]) {
CGRect subViewFrame = subview.frame;
subViewFrame.origin.y = 0;
subViewFrame.size.height = 64;
[subview setFrame: subViewFrame];
}
if ([NSStringFromClass([subview class]) containsString:#"BarContentView"]) {
CGRect subViewFrame = subview.frame;
subViewFrame.origin.y = 20;
subViewFrame.size.height = 44;
[subview setFrame: subViewFrame];
}
}
}
Added:
The problem is solved in iOS 11 beta 6 ,so the code below is of no use ^_^
Original answer:
Solved with code below :
(I always want the navigationBar.height + statusBar.height == 64 whether the hidden of statusBar is true or not)
#implementation P1AlwaysBigNavigationBar
- (CGSize)sizeThatFits:(CGSize)size {
CGSize sizeThatFit = [super sizeThatFits:size];
if ([UIApplication sharedApplication].isStatusBarHidden) {
if (sizeThatFit.height < 64.f) {
sizeThatFit.height = 64.f;
}
}
return sizeThatFit;
}
- (void)setFrame:(CGRect)frame {
if ([UIApplication sharedApplication].isStatusBarHidden) {
frame.size.height = 64;
}
[super setFrame:frame];
}
- (void)layoutSubviews
{
[super layoutSubviews];
if (![UIApplication sharedApplication].isStatusBarHidden) {
return;
}
for (UIView *subview in self.subviews) {
NSString* subViewClassName = NSStringFromClass([subview class]);
if ([subViewClassName containsString:#"UIBarBackground"]) {
subview.frame = self.bounds;
}else if ([subViewClassName containsString:#"UINavigationBarContentView"]) {
if (subview.height < 64) {
subview.y = 64 - subview.height;
}else {
subview.y = 0;
}
}
}
}
#end
Simplified with Swift 4.
class CustomNavigationBar : UINavigationBar {
private let hiddenStatusBar: Bool
// MARK: Init
init(hiddenStatusBar: Bool = false) {
self.hiddenStatusBar = hiddenStatusBar
super.init(frame: .zero)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
// MARK: Overrides
override func layoutSubviews() {
super.layoutSubviews()
if #available(iOS 11.0, *) {
for subview in self.subviews {
let stringFromClass = NSStringFromClass(subview.classForCoder)
if stringFromClass.contains("BarBackground") {
subview.frame = self.bounds
} else if stringFromClass.contains("BarContentView") {
let statusBarHeight = self.hiddenStatusBar ? 0 : UIApplication.shared.statusBarFrame.height
subview.frame.origin.y = statusBarHeight
subview.frame.size.height = self.bounds.height - statusBarHeight
}
}
}
}
}
Along with overriding -layoutSubviews and -setFrame: you should check out the newly added UIViewController's additionalSafereaInsets property (Apple Documentation) if you do not want the resized navigation bar hiding your content.
Although it's fixed in beta 4, it seems the background image of the nav bar does not scale with the actual view (you can verify this by looking at at in the view-hierarchy viewer). A workaround for now is to override layoutSubviews in your custom UINavigationBar and then use this code:
- (void)layoutSubviews
{
[super layoutSubviews];
for (UIView *subview in self.subviews) {
if ([NSStringFromClass([subview class]) containsString:#"BarBackground"]) {
CGRect subViewFrame = subview.frame;
subViewFrame.origin.y = -20;
subViewFrame.size.height = CUSTOM_FIXED_HEIGHT+20;
[subview setFrame: subViewFrame];
}
}
}
If you notice, the bar background in fact has an offset of -20 to make it appear behind the status bar, so the calculation above adds that in.
on Xcode 9 Beta 6 I still have the issue. The Bar always looks 44 pixel height and it is pushed under the status bar.
In order to solve that I made a subclass with #strangetimes code (in Swift)
class NavigationBar: UINavigationBar {
override func layoutSubviews() {
super.layoutSubviews()
for subview in self.subviews {
var stringFromClass = NSStringFromClass(subview.classForCoder)
print("--------- \(stringFromClass)")
if stringFromClass.contains("BarBackground") {
subview.frame.origin.y = -20
subview.frame.size.height = 64
}
}
}
}
and I place the bar lower than the status bar
let newNavigationBar = NavigationBar(frame: CGRect(origin: CGPoint(x: 0,
y: 20),
size: CGSize(width: view.frame.width,
height: 64)
)
)
This works well for the regular navigation bar. If your using the LargeTitle this wont work well because the titleView size isn't going to be a fixed height of 44 points. But for the regular view this should be suffice.
Like #frangulyan apple suggested to add a view beneath the navBar and hide the thin line (shadow image). This is what I came up with below. I added an uiview to the navigationItem's titleView and then added an imageView inside that uiview. I removed the thin line (shadow image). The uiview I added is the same exact color as the navBar. I added a uiLabel inside that view and that's it.
Here's the 3d image. The extended view is behind the usernameLabel underneath the navBar. Its gray and has a thin line underneath of it. Just anchor your collectionView or whatever underneath of the thin separatorLine.
The 9 steps are explained above each line of code:
class ExtendedNavController: UIViewController {
fileprivate let extendedView: UIView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
view.backgroundColor = .white
return view
}()
fileprivate let separatorLine: UIView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
view.backgroundColor = .gray
return view
}()
fileprivate let usernameLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.font = UIFont.systemFont(ofSize: 14)
label.text = "username goes here"
label.textAlignment = .center
label.lineBreakMode = .byTruncatingTail
label.numberOfLines = 1
return label
}()
fileprivate let myTitleView: UIView = {
let view = UIView()
view.backgroundColor = .white
return view
}()
fileprivate let profileImageView: UIImageView = {
let imageView = UIImageView()
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.clipsToBounds = true
imageView.backgroundColor = .darkGray
return imageView
}()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .white
// 1. the navBar's titleView has a height of 44, set myTitleView height and width both to 44
myTitleView.frame = CGRect(x: 0, y: 0, width: 44, height: 44)
// 2. set myTitleView to the nav bar's titleView
navigationItem.titleView = myTitleView
// 3. get rid of the thin line (shadow Image) underneath the navigationBar
navigationController?.navigationBar.setValue(true, forKey: "hidesShadow")
navigationController?.navigationBar.layoutIfNeeded()
// 4. set the navigationBar's tint color to the color you want
navigationController?.navigationBar.barTintColor = UIColor(red: 249.0/255.0, green: 249.0/255.0, blue: 249.0/255.0, alpha: 1.0)
// 5. set extendedView's background color to the same exact color as the navBar's background color
extendedView.backgroundColor = UIColor(red: 249.0/255.0, green: 249.0/255.0, blue: 249.0/255.0, alpha: 1.0)
// 6. set your imageView to get pinned inside the titleView
setProfileImageViewAnchorsInsideMyTitleView()
// 7. set the extendedView's anchors directly underneath the navigation bar
setExtendedViewAndSeparatorLineAnchors()
// 8. set the usernameLabel's anchors inside the extendedView
setNameLabelAnchorsInsideTheExtendedView()
}
override func viewWillDisappear(_ animated: Bool) {
super.viewWillDisappear(true)
// 9. **Optional** If you want the shadow image to show on other view controllers when popping or pushing
navigationController?.navigationBar.setBackgroundImage(nil, for: .default)
navigationController?.navigationBar.setValue(false, forKey: "hidesShadow")
navigationController?.navigationBar.layoutIfNeeded()
}
func setExtendedViewAndSeparatorLineAnchors() {
view.addSubview(extendedView)
view.addSubview(separatorLine)
extendedView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
extendedView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
extendedView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
extendedView.heightAnchor.constraint(equalToConstant: 29.5).isActive = true
separatorLine.topAnchor.constraint(equalTo: extendedView.bottomAnchor).isActive = true
separatorLine.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
separatorLine.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
separatorLine.heightAnchor.constraint(equalToConstant: 0.5).isActive = true
}
func setProfileImageViewAnchorsInsideMyTitleView() {
myTitleView.addSubview(profileImageView)
profileImageView.topAnchor.constraint(equalTo: myTitleView.topAnchor).isActive = true
profileImageView.centerXAnchor.constraint(equalTo: myTitleView.centerXAnchor).isActive = true
profileImageView.widthAnchor.constraint(equalToConstant: 44).isActive = true
profileImageView.heightAnchor.constraint(equalToConstant: 44).isActive = true
// round the profileImageView
profileImageView.layoutIfNeeded()
profileImageView.layer.cornerRadius = profileImageView.frame.width / 2
}
func setNameLabelAnchorsInsideTheExtendedView() {
extendedView.addSubview(usernameLabel)
usernameLabel.topAnchor.constraint(equalTo: extendedView.topAnchor).isActive = true
usernameLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
usernameLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
}
}
This is what I use. It works for regular content (44.0 px) if you use UISearchBar as title or other views that modify the size of the bar content, you must update the values accordingly. Use this at your own risk since it might brake at some point.
This is the navbar with 90.0px height hardcoded, working on both iOS 11 and older versions. You might have to add some insets to the UIBarButtonItem for pre iOS 11 to look the same.
class NavBar: UINavigationBar {
override init(frame: CGRect) {
super.init(frame: frame)
if #available(iOS 11, *) {
translatesAutoresizingMaskIntoConstraints = false
}
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func sizeThatFits(_ size: CGSize) -> CGSize {
return CGSize(width: UIScreen.main.bounds.width, height: 70.0)
}
override func layoutSubviews() {
super.layoutSubviews()
guard #available(iOS 11, *) else {
return
}
frame = CGRect(x: frame.origin.x, y: 0, width: frame.size.width, height: 90)
if let parent = superview {
parent.layoutIfNeeded()
for view in parent.subviews {
let stringFromClass = NSStringFromClass(view.classForCoder)
if stringFromClass.contains("NavigationTransition") {
view.frame = CGRect(x: view.frame.origin.x, y: frame.size.height - 64, width: view.frame.size.width, height: parent.bounds.size.height - frame.size.height + 4)
}
}
}
for subview in self.subviews {
var stringFromClass = NSStringFromClass(subview.classForCoder)
if stringFromClass.contains("BarBackground") {
subview.frame = CGRect(x: 0, y: 0, width: self.frame.width, height: 90)
subview.backgroundColor = .yellow
}
stringFromClass = NSStringFromClass(subview.classForCoder)
if stringFromClass.contains("BarContent") {
subview.frame = CGRect(x: subview.frame.origin.x, y: 40, width: subview.frame.width, height: subview.frame.height)
}
}
}
}
And you add it to a UINavigationController subclass like this:
class CustomBarNavigationViewController: UINavigationController {
init() {
super.init(navigationBarClass: NavBar.self, toolbarClass: nil)
}
override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?) {
super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
}
override init(rootViewController: UIViewController) {
super.init(navigationBarClass: NavBar.self, toolbarClass: nil)
self.viewControllers = [rootViewController]
}
required public init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
I was doubling the height of my navigation bar so I could add a row of status icons above the default navigation controls, by subclassing UINavigationBar and using sizeThatFits to override the height. Fortunately this has the same effect, and is simpler, with fewer side effects. I tested it with iOS 8 through 11. Put this in your view controller:
- (void)viewDidLoad {
[super viewDidLoad];
if (self.navigationController) {
self.navigationItem.prompt = #" "; // this adds empty space on top
}
}
I'm trying to create a custom UIImageView class that accomplishes two things, it makes the image view round and add a shadow to it.
This is what i have:
RoundImage.swift
class RoundImage: UIImageView {
override func awakeFromNib() {
}
func setImageAndShadow(image: UIImage) {
self.image = image
self.superview?.layoutIfNeeded()
print("Image size \(self.frame.size)")
self.clipsToBounds = true
layer.masksToBounds = true
layer.cornerRadius = self.frame.height / 2
layer.shadowOffset = CGSize(width: 0, height: 3.0)
layer.shadowColor = UIColor.black.cgColor
layer.shadowOpacity = 0.7
layer.shadowRadius = 4
}
}
ViewController.Swift
Class ViewController : UIViewController {
#IBOutlet weak var userImageView: RoundImage!
override func viewDidLoad() {
self.userImageView.setImageAndShadow(image: User.sharedInstance.profileImage!)
}
}
As a result of this a get a round image in the app, but there's no shadow in it.
Thanks in advance for any help.
Swift 3 You can use CAShapeLayer:
func setImageAndShadow(image: UIImage, myView : UIView) {
self.image = image
self.superview?.layoutIfNeeded()
print("Image size \(self.frame.size)")
self.clipsToBounds = true
layer.masksToBounds = true
layer.cornerRadius = self.frame.height / 2
let Shape = CAShapeLayer()
let myPath = UIBezierPath(ovalIn: self.frame)
Shape.shadowPath = myPath.cgPath
Shape.shadowColor = UIColor.black.cgColor
Shape.shadowOffset = CGSize(width: 0, height: 3)
Shape.shadowRadius = 7
Shape.shadowOpacity = 0.7
myView.layer.insertSublayer(Shape, at: 0)
}
and in VC
let image = UIImage(named: "IMG_4040.jpg")
self.userImageView.setImageAndShadow(image: image!, myView : view)
You don't see the shadow because it is cropped with cornerRadius. In order to make it visible you should create a UIView with UIImageView inside, apply cornerRadius to UIImageView and shadow to it's container (superview)