White background in table section header in iOS14 - swift

This issue appeared after building to iOS14 with xcode12.
I have a section header with transparent background, on iOS14 it becomes white with new _UISystemBackgroundView added to the hierarchy.

iOS 14 comes with new two cell configurations:
Content configurations. UIContentConfiguration
As the name suggests, content configurations can help you manipulate the content of the cell like image, text, secondary text, layout metrics and behaviors.
Background configurations UIBackgroundConfiguration
can help with the manipulation of background color, visual effect, stroke, insets and corner radius. All cells will inherit a default background configuration even if we don’t specify one.
The Solution
To get rid of the default iOS14 white background you need to change the UITableViewCell or UITableViewHeaderFooterView backgroundConfiguration as follows
// Add this code in your AppDelegate didFinishLauncingWithOptions
// or you can change configuration of certain subclass using self. backgroundConfiguration = ...
if #available(iOS 14.0, *) {
var bgConfig = UIBackgroundConfiguration.listPlainCell()
bgConfig.backgroundColor = UIColor.clear
UITableViewHeaderFooterView.appearance().backgroundConfiguration = bgConfig
//For cell use: UITableViewCell.appearance().backgroundConfiguration = bgConfig
}
Read this article for more

In your UITableViewHeaderFooterView / UITableViewCell custom class - override next method with implementation example:
Swift:
#available(iOS 14.0, *)
override func updateConfiguration(using state: UICellConfigurationState) {
backgroundConfiguration = UIBackgroundConfiguration.clear()
}
Objective-C:
- (void)updateConfigurationUsingState:(UICellConfigurationState *)state {
self.backgroundConfiguration = [UIBackgroundConfiguration clearConfiguration];
}

Objective-C version of #Husam solution:
if (#available(iOS 14.0, *)) {
UIBackgroundConfiguration *bgConfig = [UIBackgroundConfiguration listPlainCellConfiguration];
bgConfig.backgroundColor = UIColor.clearColor;
[UITableViewHeaderFooterView appearance].backgroundConfiguration = bgConfig;
}

Use iOS 14's configuration based APIs may disable the functions of those legacy APIs (e.g. cell.textLabel, cell.detailTextLabel).
To prevent this system behavior, you can set a backgroundView (legacy API) to your header/footer/cell, and then set a custom backgroundColor for that view.

Related

Disable Border of cell in iOS 16 / Xcode 14

iOS 16/Xcode 14 adds a blue border around cells in sidebar. How can this be removed?
My cell is a custom class derived from UICollectionViewListCell.
allowsFocus is a new property in iOS 15. Its use is covered in this WWDC video: Build Desktop-class iPad app (see minute ~15:25). Perhaps the default (or the implementation) changed in iOS 16. In any case, setting it to false removes the border.
if #available(iOS 15.0, *) {
collectionView.allowsFocus = false
}
To add to #Phantom59's answer. You can still use allowsFocus without the focus border by setting the UICollectionViewCell's focusEffect to nil:
if #available(iOS 15, *) {
cell.focusEffect = nil
}
More info: Focus-based navigation

How to implement DarkMode Into app in Swift

sorry if that question was asked but couldn't find the right answer across stackOverFlow so I'm asking ..
I'm trying to implement dark mode into my app, but unfortunately it doesn't work well for me while using tableviews, it does changes my background and stuff, but I can't change the color of my groups in my tableview.
Here's an image to illustrate the problem:
https://imgur.com/a/h4A3zOZ (can't upload it here cause its too big).
Also Here is my Code:
// MARK: - Premium Section - DarkMode + Graph:
#IBAction func darkModeSwitch(_ sender: UISwitch) {
let current = sender.isOn ? Theme.dark : Theme.light
if #available(iOS 13.0, *) {
// overrideUserInterfaceStyle = UIUserInterfaceStyle(rawValue: current.stateMode)!
//STEP1: Saving User Defaults Switcher:
saveSwitchToggleDarkMode(switcherState: sender.isOn)
//STEP2: Setting UI Colors Of Settings View:
self.tableView.backgroundColor = current.backgroundColor
///Setting up the barTint Color:
self.navigationController?.navigationBar.barTintColor = current.barTintColor
///Setting up the title text color:
self.navigationController?.navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor:current.textColor]
///Changing back color in navigation controller:
self.navigationController?.navigationBar.backItem?.backBarButtonItem?.tintColor = current.backItemColor
}
}
You should change the mode on the window's level to apply changes to all your controls e.g:
if #available(iOS 13, *) {
UIApplication.shared.delegate?.window??.overrideUserInterfaceStyle = .dark
}
An alternative (and perhaps easier) method to implement dark mode is to use the iOS dark mode feature that you can trigger in settings.If you want to implement this you can create a custom color set by going to your Assets.xcassets and pressing the plus mark on the bottom -> new color set. On the attributes inspector, name your color under name, and under Appearances, select 'Any, Light, Dark' now you will have a place for 3 different colors. Under Light, put the light mode color, on the dark, the dark mode color.
Then on the place where you wish to implement this color,you can change the color to your custom color in the storyboard like so :-
or you can change it in code with something like
myButton.backgroundColor = UIColor(named: "TestColor")
When the user triggers the Dark mode through their control center or settings, the app will also automatically change accordingly. You can test this by going to settings -> Developer -> Dark appearance or by going to Features -> Toggle Appearance or simply press Shift + Command + A
However this method means that you will not have an independent dark mode because it will only be triggered if the device itself is dark-mode enabled.

Default tableview cells don't respond to dark mode

Using a custom cell I'm able to get dark mode/normal mode to work properly. But when using the default framework cell Apple has provided it remains white regardless of what mode I enable. I read here
ios13 Dark Mode change not recognized by tableview Cell?
about the same problem. The answer tells me to use this:
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) {
removeAndReaddGradientIfNeeded()
}
}
But I'm unsure how exactly I'm supposed to use this and how it relates to my cells. My code right now for my cells is this:
if #available(iOS 13, *) {
cell.backgroundColor = UIColor.systemBackground
cell.textLabel?.textColor = UIColor(named: "MainLabelColor")
cell.detailTextLabel?.textColor = UIColor(named: "SubLabelColor")
}
I use system color and custom colors in assets with two modes, one for light and one for dark. Now, this works fine in custom cell, but not in default.
Could anyone show me how to use the delegate function with cells?
Did you try to change the contentView background color? because the content view sits on top of the cell.
if #available(iOS 13, *) {
cell.contentView.backgroundColor = UIColor.systemBackground
//For named color you have to resolve it.
cell.textLabel?.textColor = UIColor(named: "MainLabelColor")?.resolvedColor(with: self.traitCollection)
cell.detailTextLabel?.textColor = UIColor(named: "SubLabelColor")?.resolvedColor(with: self.traitCollection)
//MARK:- Even If your Viewcontroller disabled dark mode, tableView cell will be enabled.
self.overrideUserInterfaceStyle = .unspecified
}
To Support Dark Mode make sure you removed following overrides:-
UserInterfaceStyle default value is unspecified . So, You might have enabled userInterfaceStyle to light in somewhere in your code or list file.
In Plist file check for following key-value and remove them:-
<key>UIUserInterfaceStyle</key>
<string>light</string>
In Code check for the following the line and remove them.
i) If the key window is overridden to light mode, your entire app will be forced to light mode.
UIApplication.shared.keyWindow?.overrideUserInterfaceStyle = .light
ii) If View Controller is overridden to light mode, your entire ViewController will be forced to light mode.
self.overrideUserInterfaceStyle = .light

Is this new navigation bar behaviour in xcode 11 beta a bug or intended?

I noticed after compiling one of my apps in Xcode 11 beta, that navigation bars have no background when prefersLargeTitles is set. Is this intended behavior?
I noticed this is how the messages app works now when scrolling down and a large title is visible there is no nav bar background.
Here is the code used to set up the navBar attributes:
override func viewWillAppear(_ animated: Bool) {
let textAttributes = [NSAttributedString.Key.foregroundColor:ThemeManager.shared.default1]
self.navigationController?.navigationBar.largeTitleTextAttributes = textAttributes
self.navigationController?.navigationBar.titleTextAttributes = textAttributes
self.navigationController?.navigationBar.tintColor = ThemeManager.shared.default1
self.navigationController?.setNavigationBarHidden(false, animated: true)
self.navigationController?.navigationBar.prefersLargeTitles = true
let nav = self.navigationItem
nav.title = "My Profile"
}
Here are a couple of images showing the difference:
left, compiled on Xcode 10, right, Xcode 11 beta:
Once you scroll up on the 11 Beta version, the background fades back in. Note that apps that are not compiled in Xcode 11 beta will still behave in the normal way, only changes after compiling for some reason. Is this intended, and how would I bring back the original behavior?
This is intended behavior for iOS 13.
Apple's idea (terrible in my opinion) is that the title should merge with the content to show that it is related. Once you start scrolling, when content goes behind the title bar then the title bar will take the "correct" appearance.
The reason this is terrible is because everyone has currently planned all of their UI without this behavior. So the new behavior should be opt-in instead of forcing everyone to opt-out (i.e. the change breaks everyone's code and if you're going to break everyone's code at least you should be clear about how to keep the tried and true behavior of the last 10 years).
As in your case, the result looks horrible. The result looks horrible in my case too.
Apple doesn't give answers but says that you should be using
- scrollEdgeAppearance
From UINavigationBar in order to control the appearance of the bar when content is aligned top-of-content to bottom-of-navbar ... in my case this method returns nil though so I'm currently unsure how we're supposed to use this.
This seems to be discussed here as well:
New UINavigationBar appearance in detail pane of UISplitViewController in iOS 13
So the current workaround would seem to be this in your view controller:
- (void)viewDidLoad;
{
[super viewDidLoad];
if (#available(iOS 13,*)){
UINavigationBar *bar =self.navigationController.navigationBar;
bar.scrollEdgeAppearance = bar.standardAppearance;
}
}
It works, but if it's the intended approach, I don't know...
EDIT:
Doing this does seem to block any additional direct customization to the UINavigationBar as has been noted. Possible that adjusting the scrollEdgeAppearance from here is the way to go. Ugly. Ugly. Ugly.
EDIT: Progress... this is working now for managing the background. You need to call this instead of setting barTint directly.
#interface UINavigationBar (Compatibility)
- (void)setCompatibleTint:(UIColor *)fg andBarTint:(UIColor *)bg;
#end
#implementation UINavigationBar (Compatibility)
- (void)setCompatibleTint:(UIColor *)fg andBarTint:(UIColor *)bg;
{
self.tintColor = fg;
self.barTintColor = bg;
if (#available(iOS 13,*)){
// we need to tell it to adopt old style behavior first
UINavigationBarAppearance *appearance = self.standardAppearance;
appearance.backgroundColor = bg;
NSDictionary *attributes = self.titleTextAttributes;
appearance.titleTextAttributes = attributes;
attributes = self.largeTitleTextAttributes;
appearance.largeTitleTextAttributes = attributes;
self.scrollEdgeAppearance = appearance;
self.standardAppearance = appearance;
self.compactAppearance = appearance;
}
}
#end
I'm not entirely sure yet on the text attributes but it seems to flow from the background color. It's a complete PITA.
It would be nicer to set this as a subclass and override barTint but of course a lot of the UIKit objects create these bars themselves so you won't get the subclass.
Swift version of dbquarrel's solution.
First declare your textAttributes:
let textAttributes = [NSAttributedString.Key.foregroundColor:UIColor.red]
Use these in a UINavigationBarAppearance() to enable you to change the colour of the text in 3 different modes (scollEdge, standard and compact).
override func viewDidLoad() {
super.viewDidLoad()
if #available(iOS 13.0, *) {
let appearance = UINavigationBarAppearance()
appearance.largeTitleTextAttributes = textAttributes
appearance.titleTextAttributes = textAttributes
let bar = self.navigationController?.navigationBar
bar?.scrollEdgeAppearance = appearance
bar?.standardAppearance = appearance
bar?.compactAppearance = appearance
} else {
// Fallback on earlier versions
}
}

UITableview adding white space at top of view

I am running into a weird issue with a tableview adding an empty "white space" at the top. I have the table view constraint bound to 5 of the segmented control field above.
I am new to Swift and I am not sure how to further debug these types of UI issues. I have checked the constraints and I do not think that is the issue. The storyboard does not show this additional white space... where is it coming from?
EDIT: It appears to only create the whitespace on iOS10. Looks fine on iOS11.
EDIT: xCode screen
EDIT: I see someone else took my code and got selected already but for the sake of providing full answer here it is.
This behavior is caused by automatic insets by the ios platform. There are two options here:
If you snap your table view to bottom edge of navbar be sure to execute the code below. It will disable automatic insets on both iOS 11 and older iOS versions.
Otherwise you can snap your tableview to edge of the view and omit the code, because the purpose of the code is to compensate the size of navbar/tabbar, and since you snap your tableview behind/under them, you need that compensation to happen.
Code in case of #1 scenario that works on iOS 11 and older platforms.
Objective-c:
if (#available(iOS 11, *)) {
self.tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
} else {
self.automaticallyAdjustsScrollViewInsets = NO
}
Swift:
if #available(iOS 11.0, *) {
tableView.contentInsetAdjustmentBehavior = .never
} else {
automaticallyAdjustsScrollViewInsets = false
}
It seems that the automatic content insets on the table view are activated, you can stop this behavior by adding this code to your view controller.
if #available(iOS 11, *) {
self.tableView.contentInsetAdjustmentBehavior = .never;
}else{
self.automaticallyAdjustsScrollViewInsets = false
}
Try to look in the 'attribute inspector' (in the right menu) of the Participants ViewController. Check for the option 'Extend Edges' and uncheck the 'Under Top Bars', and then relocate your tableview.
This is the updated 2022 iOS 15 solution
if #available(iOS 15.0, *) {
UITableView.appearance().sectionHeaderTopPadding = CGFloat(0)
}