iOS 10 custom navigation bar height - ios

I implemented custom navigation bar height, by subclassing it with following code
class TMNavigationBar: UINavigationBar {
///The height you want your navigation bar to be of
static let navigationBarHeight: CGFloat = 44.0
///The difference between new height and default height
static let heightIncrease:CGFloat = navigationBarHeight - 44
override init(frame: CGRect) {
super.init(frame: frame)
initialize()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
initialize()
}
private func initialize() {
let shift = TMNavigationBar.heightIncrease/2
///Transform all view to shift upward for [shift] point
self.transform =
CGAffineTransformMakeTranslation(0, -shift)
}
override func layoutSubviews() {
super.layoutSubviews()
let shift = TMNavigationBar.heightIncrease/2
///Move the background down for [shift] point
let classNamesToReposition: [String] = ["_UINavigationBarBackground"]
for view: UIView in self.subviews {
if classNamesToReposition.contains(NSStringFromClass(view.dynamicType)) {
let bounds: CGRect = self.bounds
var frame: CGRect = view.frame
frame.origin.y = bounds.origin.y + shift - 20.0
frame.size.height = bounds.size.height + 20.0
view.frame = frame
}
}
}
override func sizeThatFits(size: CGSize) -> CGSize {
let amendedSize:CGSize = super.sizeThatFits(size)
let newSize:CGSize = CGSizeMake(amendedSize.width, TMNavigationBar.navigationBarHeight);
return newSize;
}
}
Following problem occurs only on iOS 10: (black space between bar & view)
No idea what's happening there. But in storyboard it's generated this warning, and there's no way to fix it in IB (warning only appears when i change subclass of navigation bar in IB).

Works on iOS 10, Swift 3.0:
extension UINavigationBar {
open override func sizeThatFits(_ size: CGSize) -> CGSize {
let screenRect = UIScreen.main.bounds
return CGSize(width: screenRect.size.width, height: 64)
}
}

I checked Interface debugger and this is what i see (so basically it's trying to change navigation bar height, bit it's stays same and it's showing just black space - which is window color):
With later investigation i noticed that it's not calling: "_UINavigationBarBackground"
Then i checked view.classForCoder from fast enumeration, and discovered that key is changed to "_UIBarBackground", so i updated layoutSubviews():
override func layoutSubviews() {
super.layoutSubviews()
let shift = TMNavigationBar.heightIncrease/2
///Move the background down for [shift] point
let classNamesToReposition = isIOS10 ? ["_UIBarBackground"] : ["_UINavigationBarBackground"]
for view: UIView in self.subviews {
if classNamesToReposition.contains(NSStringFromClass(view.classForCoder)) {
let bounds: CGRect = self.bounds
var frame: CGRect = view.frame
frame.origin.y = bounds.origin.y + shift - 20.0
frame.size.height = bounds.size.height + 20.0
view.frame = frame
}
}
}
Cheers.

Related

How to increase height for a custom UINavigationBar class in Swift

Update: I ended up by hiding the default navigation bar and added a UIView which looks same as the navigation bar. This may not sound good but instead of patching into the UINavigationBar this is good.
This is my custom UINavigationBar class which I have created to increase the height of navigation bar in my app. It doesn't work for me. Here's the code.
class PPBaseNavigationBar: UINavigationBar {
///The height you want your navigation bar to be of
static let navigationBarHeight: CGFloat = 83.0
///The difference between new height and default height
static let heightIncrease: CGFloat = navigationBarHeight - 44
override init(frame: CGRect) {
super.init(frame: frame)
initialize()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
initialize()
}
private func initialize() {
let shift = PPBaseNavigationBar.heightIncrease/2.0
///Transform all view to shift upward for [shift] point
self.transform = CGAffineTransform(translationX: 0, y: -shift)
}
override func layoutSubviews() {
super.layoutSubviews()
let shift = PPBaseNavigationBar.heightIncrease/2.0
///Move the background down for [shift] point
var classNamesToReposition: Array<String>?
if #available(iOS 10.0, *) {
classNamesToReposition = ["_UIBarBackground"]
} else {
classNamesToReposition = ["_UINavigationBarBackground"]
}
for view: UIView in self.subviews {
if (classNamesToReposition?.contains(NSStringFromClass(view.classForCoder)))! {
let bounds: CGRect = self.bounds
var frame: CGRect = view.frame
frame.origin.y = bounds.origin.y + shift - 20.0
frame.size.height = bounds.size.height + 20.0
view.frame = frame
}
}
}
override func sizeThatFits(_ size: CGSize) -> CGSize {
let amendedSize:CGSize = super.sizeThatFits(size)
let newSize:CGSize = CGSize.init(width: amendedSize.width, height: PPBaseNavigationBar.navigationBarHeight)
return newSize;
}
}
All the method gets called except override func sizeThatFits(_ size: CGSize) -> CGSize {...} not sure, why?
It is not permissible to change the navigation bar object or modify its bounds, frame, or alpha values directly.
Modifying the Navigation Bar Object Directly
You can use custom view as navigation bar. Customize view as per your requirement(e.g change height) and hide the default navigation bar as
self.navigationController?.setNavigationBarHidden(true, animated: false)
layoutSubviews works as well override func sizeThatFits(_ size: CGSize).
so do not worry if it is not sizeThatFits called. I checked in layoutSubviews Navigationbar height are changing.
for view: UIView in self.subviews {
if (classNamesToReposition?.contains(NSStringFromClass(view.classForCoder)))! {
let bounds: CGRect = self.bounds
var frame: CGRect = view.frame
frame.origin.y = bounds.origin.y + shift - 20.0
frame.size.height = bounds.size.height + 150.0
view.frame = frame
}
}
Try like this, this worked for me in Swift 3:
extension UINavigationBar {
override open func sizeThatFits(_ size: CGSize) -> CGSize {
return CGSize(width: UIScreen.main.bounds.size.width, height: "Your custom height")
}
}
// MARK: - View life cycle methods
class DVNavigationController: UINavigationController {
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
navigationBar.frame.size.height = "Your custom height"
}
}
Finally assign this custom UINavigationController class to your navigationController.
Change your code like below
open override func sizeThatFits(_ size: CGSize) -> CGSize {
let amendedSize:CGSize = super.sizeThatFits(size)
let newSize:CGSize = CGSize.init(width: amendedSize.width, height: PPBaseNavigationBar.navigationBarHeight)
return newSize;
}
Might be worked for you.

iOS 11 navigation bar height customizing

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
}
}

Creating padding through Interface Builder

I was using this post as reference: Create space at the beginning of a UITextField. And in this post, there is a very helpful class adding padding in a textfield. However, the only way that I know how to use this class is for me to programmatically create a textfield. But instead, I would like to use this class with an IBOutlet. Here is the TextField Class:
class TextField: UITextField {
let padding = UIEdgeInsets(top: 0, left: 35, bottom: 0, right: 5);
override func textRectForBounds(bounds: CGRect) -> CGRect {
return self.newBounds(bounds)
}
override func placeholderRectForBounds(bounds: CGRect) -> CGRect {
return self.newBounds(bounds)
}
override func editingRectForBounds(bounds: CGRect) -> CGRect {
return self.newBounds(bounds)
}
private func newBounds(bounds: CGRect) -> CGRect {
print("paisjdpfij")
var newBounds = bounds
newBounds.origin.x += padding.left
newBounds.origin.y += padding.top
newBounds.size.height -= padding.top + padding.bottom
newBounds.size.width -= padding.left + padding.right
return newBounds
}
}
And here is my attempt to use it with my IBOutlet:
#IBOutlet weak var firstNameTextField: TextField!
override func viewDidLoad() {
super.viewDidLoad()
firstNameTextField = TextField()
}
However, the there is still no padding in the textfield. Anybody have a solution to this problem?
Now, I used this code:
let paddingView = UIView(frame: CGRect(x: 0.0, y: 10.0, width: 5.0, height: 20.0))
firstNameTextField.leftView = paddingView
firstNameTextField.leftViewMode = .Always
to add padding on the left side of the textfield. However, I would also like some padding on the bottom as well. And there doesn't seem to be a simple solution for adding a bottom padding.
you can create category/extension or create custom text field as you did. And implement this 2 methods and play with it by changing different bounds.
import UIKit
class CustomTextField: UITextField
{
required init?(coder aDecoder: NSCoder){
super.init(coder: aDecoder)
}
override func textRectForBounds(bounds: CGRect) -> CGRect
{
return CGRectMake(bounds.origin.x + 10, bounds.origin.y + 8, bounds.size.width - 20, bounds.size.height - 16);
}
override func editingRectForBounds(bounds: CGRect) -> CGRect
{
return self.textRectForBounds(bounds);
}
}
For more detail you can refer this Nate Flink's answer at here:Set padding for UITextField with UITextBorderStyleNone

Re-initialise a UIView subclass in SWIFT

I'm trying to make a iOS screen displaying a grid, the squares of which can be resized using a slider. currently i am just using a button to test incrementing the square size.
I have hacked some code from here:
Swift / UIView / drawrect - how to get drawrect to update when required
My problem is that, although drawrect IS being updated, I would like it to be initialised with each button press. The final response from the above link is beyond my meagre comprehension.
Here is my code:
import UIKit
let screenSize = UIScreen.mainScreen().bounds
var screenWidth = screenSize.width
var screenHeight = screenSize.height*0.9
var squareSize: Int = 10
class ViewController: UIViewController {
// create squares and initialise it with a frame
var squares = SquaresSubclass(frame: CGRectMake(0, 0, screenWidth, screenHeight))
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(squares)
}
#IBAction func buttonPressed(sender: AnyObject) {
squareSize = squareSize + 1
squares.setNeedsDisplay()
}
}
class SquaresSubclass: UIView {
// initialise with the frame specified above
override init(frame: CGRect) {
super.init(frame: frame)
}
// no clue - copied from example
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)!
}
// loop CGRects across and down the screen
override func drawRect(rect: CGRect) {
var xPos = 5
let numberX = Int(0.98*screenWidth)/squareSize
var yPos = 20
let numberY = Int(0.96*screenHeight)/squareSize
for var y = 0; y<numberY ; y++ {
for var x = 0; x<numberX ; x++ {
let color:UIColor = UIColor.yellowColor()
let drect = CGRect(x: CGFloat(xPos), y: CGFloat(yPos), width: CGFloat(squareSize),height: CGFloat(squareSize))
let bpath:UIBezierPath = UIBezierPath(rect: drect)
color.set()
bpath.stroke()
xPos = xPos + squareSize
}
yPos = yPos + squareSize
xPos = 5
}
}
}
You're drawing more lines on top of the existing graphics. Clear the graphics context before you redraw the the grid:
CGContextClearRect(UIGraphicsGetCurrentContext(),self.bounds)
Any time you want the system to call drawRect: on a view for you, you call setNeedsDisplay() on that view.

iOS custom view doesn't show image immediately

I made a simple custom view in Swift which has a background image view with a photo and some labels in front. I then added the custom view to my storyboard and it displays well, I can see the background image and labels.
But when I run my app on my device the image view doesn't show immediately, if I navigate to another view then back, it is displayed. I only have a timer which scheduled some tasks in background in my scene. Did I miss anything here?
Here is the code of my custom view
import UIKit
#IBDesignable class GaugeView: UIImageView {
#IBOutlet weak var speedLabel: UILabel!
let circlePathLayer = CAShapeLayer()
var circleRadius: CGFloat = 50.0
var speed: CGFloat {
get {
return circlePathLayer.strokeEnd
}
set {
speedLabel.text = String(format: "%.2f", newValue)
if newValue < 20.0 {
circlePathLayer.strokeColor = UIColor.blueColor().CGColor
} else if newValue >= 25.0 {
circlePathLayer.strokeColor = UIColor.redColor().CGColor
} else {
circlePathLayer.strokeColor = UIColor.yellowColor().CGColor
}
if (newValue > 50) {
circlePathLayer.strokeEnd = 1
} else if (newValue < 0) {
circlePathLayer.strokeEnd = 0
} else {
circlePathLayer.strokeEnd = newValue / 49.9
}
}
}
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
xibSetup()
}
override init(frame: CGRect) {
super.init(frame: frame)
xibSetup()
}
override func layoutSubviews() {
super.layoutSubviews()
circleRadius = bounds.width / 2 - 2.6
circlePathLayer.frame = bounds
circlePathLayer.path = circlePath().CGPath
}
// Our custom view from the XIB file
var view: UIView!
let nibName = "GaugeView"
func xibSetup() {
view = loadViewFromNib()
// use bounds not frame or it'll be offset
view.frame = bounds
// Make the view stretch with containing view
view.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight
// Adding custom subview on top of our view (over any custom drawing > see note below)
addSubview(view)
// Configure speed circle layer
configure()
}
func configure() {
speed = 0.0
circlePathLayer.frame = bounds
circlePathLayer.lineWidth = 6
circlePathLayer.fillColor = UIColor.clearColor().CGColor
circlePathLayer.strokeColor = UIColor.blueColor().CGColor
layer.addSublayer(circlePathLayer)
backgroundColor = UIColor.whiteColor()
}
func circleFrame() -> CGRect {
var circleFrame = CGRect(x: 0, y: 0, width: 2*circleRadius, height: 2*circleRadius)
circleFrame.origin.x = CGRectGetMidX(circlePathLayer.bounds) - CGRectGetMidX(circleFrame)
circleFrame.origin.y = CGRectGetMidY(circlePathLayer.bounds) - CGRectGetMidY(circleFrame)
return circleFrame
}
func circlePath() -> UIBezierPath {
let center: CGPoint = CGPointMake(CGRectGetMidX(circlePathLayer.bounds), CGRectGetMidY(circlePathLayer.bounds))
let start = CGFloat(1.33 * M_PI_2)
let end = CGFloat( 1.64 * M_2_PI)
return UIBezierPath(arcCenter: center, radius: circleRadius, startAngle: start, endAngle: end, clockwise: true)
}
func loadViewFromNib() -> UIView {
let bundle = NSBundle(forClass: self.dynamicType)
let nib = UINib(nibName: nibName, bundle: bundle)
let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView
return view
}
}
Then I added the custom view to my storyboard and navigate to the scene programatically with performSegueWithIdentifier("dashboardSegue", sender: nil). I just noticed not only the custome view, but two progress bar on the scene are not displayed as well.
It's better show your code, but i am guessing your timer stuck the main UI thread. When you navigate to another view, your timer.invalidate() was called. Try to remove the NSTimer to see if it works well.

Resources