Replacing edgesForExtendedLayout with safeAreaInsets or LayoutGuide **WITHOUT** interface builder - ios

Preface: I'm doing everything programmatically. 0 interface builder.
Previously, when pushing a VC onto a navVC stack, the pushed VC would have the upper edge occluded by the navbar. I want it so the top edge of the pushed VC is under the nav bar. I found that "edgesForExtendedLayout" did what I wanted to. Except Apple says:
"Instead of this property, use the safe area of your view to determine which parts of your interface are occluded by other content. For more information, see the safeAreaLayoutGuide and safeAreaInsets properties of UIView."
I have no idea how to translate the following code:
if let nextVC = getNextVC() {
nextVC.edgesForExtendedLayout = .init(rawValue: 0)
pushViewController(nextVC, animated: true)
}
To use safeAreaLayoutGuide or safeAreaInsets. I can't use constraints because the pushed view is not in the view hierarchy yet?
I've attached some images to give an idea of what I'm dealing with.
Green = border of UINavigation controller
Yellow = border of 'nextVC'
Red = border of table inside 'nextVC'
With edgesForExtendedLayout set to "none" - right, but changing value Apple says not to change:
With edgesForExtendedLayout set to "all" - wrong, but default value Apple says to keep:

Related

Bar section in iOS is extended unnecessarily

In the image shared, the orange section is the bar section , which is having unnecessary height, I am not able to resolve this issue by myself.
the views are like this
Parent Controller = View Controller
Child views = green view, black tableview
Please help to correct the height of the orange bar.
Seems like you have enabled prefersLargeTitles.
Make it false in your viewWillAppear()
self.navigationController?.navigationBar.prefersLargeTitles = false
You can also disable it from the storyboard.
Select your Navigation Controller -> Navigation Bar -> Uncheck prefers large titles
it seems like you're using the largeTitles on the navigationBar,
var prefersLargeTitles: Bool { get set }
When this property is set to true, the navigation bar allows the
title to be displayed out-of-line and using a larger font. The
navigation item used to build the bar must specify whether it wants
its title displayed in the large or small format. Use the
largeTitleDisplayMode property to configure the title's appearance.
When the property is set to false, the navigation bar displays the
title inline with the other bar button items.
try to disable it by:
navigationController?.navigationBar.prefersLargeTitles = false
or you can do this as well:
navigationItem.largeTitleDisplayMode = .never
hope this helps:)
https://developer.apple.com/documentation/uikit/uinavigationbar/2908999-preferslargetitles

Gap between status bar and toplayout guide bottom anchor even though `edgesForExtendedLayout` set to `top`

I have a simple view controller which is being rendered modally simply by using
viewController.present(myVC, animated: true, completion: nil)
myVC view controller does not have any embedded navigation controller and in viewDidLoad of myVC I am setting view which is supposed to behave like navigation bar view (I can't use navigation bar / navigation controller unfortunately)
Here is how I add the view programmatically
self.view.addSubview(topView)
topView.translatesAutoresizingMaskIntoConstraints = false
topView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
topView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
topView.topAnchor.constraint(equalTo: self.topLayoutGuide.bottomAnchor).isActive = true
topView.heightAnchor.constraint(equalToConstant: 70).isActive = true
I have specified extended edges as top in my viewDidLoad of myVC
self.edgesForExtendedLayout = .top
And the UI looks like
There is a gap between status bar and view added highlighted by yellow border which I am not sure how to fix :(
Please help
You get the gap because you are adding your topView's top constraint to the view's topLayoutGuide.bottom (which sits a bit below the notch). So that is intended behavior.
The cleanest way to get rid of that gap is to embed you view controller in a UINavigationController and use a real navigation bar.
But if you cannot do that you have to get rid of the gap yourself.
I cannot think of an elegant way to get rid of this gap but you could add a negative constant to the constraint that is as high as the gap:
topView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: -14).isActive = true
But you would have to make sure that this is only done on devices that have a safeAreaLayoutGuide.topAnchor > 0. (iPhoneX etc.). On all other devices the constant has to be 0.
As I said this is not a very stable or elegant solution but it would work.
BTW If possible you should change self.topLayoutGuide.bottomAnchor (deprecated) to view.safeAreaLayoutGuide.topAnchor.

How do I make a view controller be presented with partial transparency?

I have the code below which shows a popup. The popup has a main view which is black, and one subview which is white, and that subview has some labels, button and stuff the user interacts with. I want the surrounding black part to be partially transparent (alpha = 0.7), but the white part inside it to be fully opaque (alpha = 1.0). I could not achieve that, for some reason the value of the parent overrides its child values, and I get either a fully opaque view, or a view where also the labels and buttons are partially transparent.
What Can I do?
The code which shows the popup:
#IBAction func getLocation(sender: AnyObject) {
var p = PopupViewConrtoller(list: list, callback)
var x = UINib(nibName: "PickerPopup", bundle: nil).instantiateWithOwner(p, options: nil)
self.presentViewController(p, animated: false, completion: nil)
}
I changed opacity only in the attributes inspector.
It seems, it is not possible to make main view partially transparent without affecting the subviews added to main view.
What you can do is,
-set mainView background color as clear color
-add one more subview1 to mainView with size same as main view and set the background color as blackColor with desired transparency(alpha=0.7 as in required)
-add your subview2(which is having labels, buttons etc.) to mainView but above subview1 in layer order.
I hope it will help you to achieve what you want.
I figurred it is impossible to do it the way I was trying to. Rajeev has a good idea, but the best (and the one that apple reviewers will probably approve) is using popovers. This tutorial and this tutorial were helpful.

Custom modal window with image in header

i would ask if it is possible to change to base modal window to look like my image? (only layout test)
I can easiliy set up an image with:
var barButtonImage:UIImage = UIImage(named: "header_test.png")
var barButtonImageView = UIImageView(image: barButtonImage)
self.navigationItem.titleView = barButtonImageView
But i am not able to set it outside the view - is that possible? And if, how?
EDIT:
Thanks for the info about using clipsToBounds. I set it to titleview and bar to false, but the image is not outside the modal (but it is over the top of my UITableView in the modal window)
self.navigationItem.titleView.clipsToBounds = false
self.navigationController.navigationBar.clipsToBounds = false
You're going to have to embed your visual stuff inside another view, with that view's background set to transparent.
Or, you could play around with the "clips subviews" property of your view, to allow the round graphic to not get clipped at the edges of the superview that contains it.

IOS:UITabbar item click again and again it is reducing the UITabbar button item size in IOS 7

I'm took the Tabbar viewcontroller in this ,I added the 5 item and .I given the image insects is (24,0,0,6).
All button images are added in xib [under the Bar item -->image]Please help.
Thanks.
Adding to a similar answer here:
iOS Tab Bar icons keep getting larger
Not sure if this is an iOS7 bug but I've noticed that image insets need to be balanced.
You have specified insets for top and right but:
if you set a top inset, in order to balance it, you need to set the negative of it to the bottom inset
if you set a right inset, in order to balance it, you need to set the negative of it to the left inset
So, instead of having image insets like (24,0,0,6), use balanced image insets such as UIEdgeInsetsMake(24,-6,-24,6)
Doing so should protect your tabBarItem image from getting whacked on every tap.
If this doesn't suit your requirements, then redesign your tabBarItem image so you can have balance insets or... no insets at all.
Here's the workaround for a bug I've encountered with UITabBarController's UITabBar. If I tap a UITabBarItem once after it's selected, the icon shrinks. What I'd like to do is disable touches. UITabBarItem only has a setting for isEnabled, which grays it out if I set it to false...not what I was looking for.
I used a derivative of this answer to figure it out. With a UITabBarController with 3 tabs, printing tabBarController.subviews, I saw 3 UITabBarButtons and a UIBarBackground. The origin of UIBarBackground's frame was always (0, 0), putting it at the front of the sorted array, so I really don't need to know what the subview is, just "where it is" and whether it will always be there. The UIBarBackground is always going to be at the front of an array of tabBarController.subviews sorted by frame.minX, so I just need to remove it from the front.
Solution
Here's what the extension looks like:
extension UITabBarController {
var buttonViews: [UIView] {
var tabBarButtons = tabBar.subviews.sorted(by: {$0.frame.minX < $1.frame.minX})
tabBarButtons.removeFirst()
return tabBarButtons
}
}
I also created a struct in my Constants file, so I don't have to remember tab names:
struct TabBarItem {
static let firstTab = 0
static let secondTab = 1
static let thirdTab = 2
}
...and finally, where to use it:
In viewDidAppear (NOT viewDidLoad), add the following line to disable the UITabBarItem that you don't want to disable, but not gray out:
tabBarController?.buttonViews[TabBarItem.firstTab].isUserInteractionEnabled = false
In viewWillDisappear, re-enable the tab, as follows:
tabBarController?.buttonViews[TabBarItem.firstTab].isUserInteractionEnabled = true

Resources