I am attempting to customise the colour scheme of the default Firebase AuthUI screens on iOS. I can change the NavigationBar text colour however I cannot not change the left LeftNavigationBarItem text properties or the main view background colour.
This is the code that I've used to change the main text properties on the NavigationBar:
let authVC = authUI!.authViewController()
authVC.navigationBar.barTintColor = UIColor.black
authVC.navigationBar.barStyle = .blackTranslucent
authVC.navigationBar.titleTextAttributes = [NSAttributedStringKey.foregroundColor: UIColor (displayP3Red: 255/255, green: 212/255, blue: 121/255, alpha: 1.0)]
I have tried the following code, a line at a time, to change the NavigationBarItem text properties:
authVC.navigationBar.backItem?.backBarButtonItem?.setTitleTextAttributes([NSAttributedStringKey.foregroundColor: UIColor (displayP3Red: 255/255, green: 212/255, blue:121/255, alpha: 1.0) ], for: .normal)
authVC.navigationItem.backBarButtonItem?.setTitleTextAttributes([NSAttributedStringKey.foregroundColor: UIColor (displayP3Red: 255/255, green: 212/255, blue: 121/255, alpha: 1.0) ], for: .normal)
I have tried this to change the view background properties, again a line at a time:
authVC.visibleViewController?.view.backgroundColor = UIColor.black
authVC.view.backgroundColor = UIColor.black
authVC.view.layer.backgroundColor = UIColor.black.cgColor
authVC.visibleViewController?.view.layer.backgroundColor = UIColor.black.cgColor
I'm using FirebaseUI (5.2.0), FirebaseAuth (5.0.3) & Xcode 9.4.1.
Any pointers will be appreciated.
Thanks
code below is how you would change the background color as scoobydoo pointed out, also I was able to modify my authViewController after I added the custom controller as the root like so
let authViewController = MyAuthPickerViewController(authUI: authUI)
nav = UINavigationController(rootViewController: authViewController)
import UIKit
import FirebaseUI
class MyAuthPickerViewController : FUIAuthPickerViewController {
override func viewDidLoad() {
super.viewDidLoad()
let scrollView = view.subviews[0]
scrollView.backgroundColor = .clear
let contentView = scrollView.subviews[0]
contentView.backgroundColor = .clear
let width = UIScreen.main.bounds.size.width
let height = UIScreen.main.bounds.size.height
let backgroundImage = UIImageView(frame: CGRect(x: 0, y: -1, width: width, height: height))
backgroundImage.image = UIImage(named: "switchStarback")
backgroundImage.alpha = 0.6
view.backgroundColor = UIColor.init(named: "MatteBlack")
backgroundImage.contentMode = UIView.ContentMode.scaleAspectFill
view.insertSubview(backgroundImage, at: 0)
}
}
This has been sorted by subclassing FUIAuthPickerViewController and setting the view.backgroundColor in viewDidLoad method
Related
I have two css classes on a tornadofx label bound to a SimpleBooleanProperty. One which has a background image and a blue border and one which has no background image and a yellow border.
Snippet from View containing label:
val switch: SimpleBooleanProperty = SimpleBooleanProperty(false)
label("my label"){
toggleClass(UIAppStyle.style1, switch.not())
toggleClass(UIAppStyle.style2, switch)
}
Snippet from UIAppStyle:
s(style1){
textFill = Color.YELLOW
maxWidth = infinity
maxHeight = infinity
alignment = Pos.CENTER
backgroundImage += this::class.java.classLoader.getResource("img.png")!!.toURI()
backgroundPosition += BackgroundPosition.CENTER
backgroundRepeat += Pair(BackgroundRepeat.NO_REPEAT, BackgroundRepeat.NO_REPEAT)
borderColor += box(Color.BLUE)
}
s(style2){
textFill = Color.YELLOW
maxWidth = infinity
maxHeight = infinity
alignment = Pos.CENTER
borderColor += box(Color.YELLOW)
}
When switch = false, there is a background image and a blue border. When switch = true, there is the same background image and a yellow border. I'm not finding out how to get the background image to remove. Interestingly enough, if I add a different background image to style2, it changes correctly.
Edit: To remove two toggleClasses and introduce new strange problem:
class MyView : View(){
...
init{
...
row{
repeat(myviewmodel.numSwitches){
val switch = myviewmodel.switches[it]
val notSwitch = switch.not()
label("my label"){
addClass(UIAppStyle.style2)
toggleClass(UIAppStyle.style1, notSwitch)
}
}
}
}
This code snippet does not work for me. However, if I add private var throwsArray = mutableListOf<ObservableValue<Boolean>>() as a field of MyView and add notSwitch to the array, then the same exact code works. It's almost as if notSwitch is going out of scope and becoming invalidated unless I add it to a local array in the class?
I don’t understand why you want to have two different toggleClass for the same control. As you pointed out, the problem in your case is that when the backgroundImage is set, you need to set a new one in order to change it. But in your case, you only have to add the style without backgroundImage first and them set toggleClass with the style with backgroundImage. Like this:
label("my label"){
addClass(UIAppStyle.style2)
toggleClass(UIAppStyle.style1, switch)
}
button {
action {
switch.value = !switch.value;
}
}
Edit: This ilustrate what I'm talking about in comments:
class Example : View("Example") {
override val root = vbox {
val switch = SimpleBooleanProperty(false)
val notSwitch = switch.not()
label("my label"){
addClass(UIAppStyle.style2)
toggleClass(UIAppStyle.style1, notSwitch)
}
button("One") {
action {
switch.value = !switch.value;
}
}
button("Two") {
action {
notSwitch.get()
}
}
}
}
You can put the notSwitch.get() in any action and without trigger that action it does the work. Check how I put it in the action of button Two, but without clicking that button even once, it works.
This is actually some kind of hack, in order to achieve what you want. But I don’t see the reason why my initial solution with true as default value for property shouldn’t work.
Edited to do inverse of status
Here is simple example of a working toggle class using your styling:
class TestView : View() {
override val root = vbox {
val status = SimpleBooleanProperty(false)
label("This is a label") {
addClass(UIAppStyle.base_cell)
val notStatus = SimpleBooleanProperty(!status.value)
status.onChange { notStatus.value = !it } // More consistent than a not() binding for some reason
toggleClass(UIAppStyle.smiling_cell, notStatus)
}
button("Toggle").action { status.value = !status.value }
}
init {
importStylesheet<UIAppStyle>()
}
}
As you can see, the base class is added as the default, while styling with the image is in the toggle class (no not() binding). Like mentioned in other comments, the toggleClass is picky, additive in nature, and quiet in failure so it can sometimes be confusing.
FYI I got to this only by going through your github code and I can say with confidence that the not() binding is what screwed you in regards to the toggleClass behaviour. Everything else causing an error is related to other problems with the code. Feel free to ask in the comments or post another question.
I am trying to integrate dark mode support to my app. But when setting image icon for UIBarButtonItem, it seem only works when the first time UIBarButtonItem is shown, it is not changed when I switch between dark mode/light mode.
When using that image with other UIButton, it works fine.
So I wonder if I am missing something?
P/s: I have to use that trick for updating image:
let item: UIBarButtonItem = UIBarButtonItem()
let button: UIButton = UIButton(frame: CGRect(x: 0, y: 0, width: 26, height: 19))
button.setImage(UIImage(named: "hamburger"), for: .normal)
button.addTarget(self, action: action, for: .touchUpInside)
item.customView = button
Seems to be a bug in iOS, but one way around this is, to use traitCollection delegate method to set the correct image manually.
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
let imageAsset = UIImage(named: "YOUR_IMAGE_NAME")?.imageAsset
let resolvedImage = imageAsset?.image(with: traitCollection)
self.YOUR_BUTTON.image = resolvedImage
}
Currently I couldn't find any method to change the color/background of the navigation bar in SwiftUI. Any tips?
In order to change color of navigation bar for all view controllers, you have to set it in AppDelegate.swift file
Add following code to didFinishLaunchingWithOptions function in AppDelegate.swift
var navigationBarAppearace = UINavigationBar.appearance()
navigationBarAppearace.tintColor = uicolorFromHex(0xffffff)
navigationBarAppearace.barTintColor = uicolorFromHex(0x034517)
In here tintColor attribute change the background color of the navigation bar.
barTintColor attribute affect to the color of the:
back indicator image
button titles
button images
Bonus:
Change color of navigation bar title:
// change navigation item title color
navigationBarAppearace.titleTextAttributes =[NSForegroundColorAttributeName:UIColor.whiteColor()]
titleTextAttributes affect to the title text
I hope it helps. :)
In SwiftUI, at this point we can not change it directly, but you can change navigationBar appearance like this,
struct YourView: View {
init() {
UINavigationBar.appearance().backgroundColor = .orange
//Use this if NavigationBarTitle is with Large Font
UINavigationBar.appearance().largeTitleTextAttributes = [.font : UIFont(name: "Georgia-Bold", size: 20)!]
//Use this if NavigationBarTitle is with displayMode = .inline
//UINavigationBar.appearance().titleTextAttributes = [.font : UIFont(name: "Georgia-Bold", size: 20)!]
}
var body: some View {
NavigationView {
Text("Hello World!")
.navigationBarTitle(Text("Dashboard").font(.subheadline), displayMode: .large)
//.navigationBarTitle (Text("Dashboard"), displayMode: .inline)
}
}
}
I hope this will help you. Thanks!!
Till now there is no definitive API in SwiftUI for this purpose. But you can use the appearance API. Here is a sample code.
import SwiftUI
struct ContentView : View {
init() {
UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor:UIColor.red]
UINavigationBar.appearance().backgroundColor = .green
}
var body: some View {
NavigationView {
NavigationButton(destination: SecondPage(), label: {
Text("Click")
})
.navigationBarTitle(Text("Title"), displayMode: .inline)
}
}
}
Put a Rectangle behind your NavigationView inside a ZStack:
ZStack {
Rectangle().foregroundColor(.red)
NavigationView {
...
}
}
Please see this answer for a solution that does not use .appearance().
In short use UIViewControllerRepresentable
func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<NavigationConfigurator>) {
uiViewController.navigationController?.navigationBar...
}
With Introspect you could do it this way:
NavigationView {
Text("Item 2")
.introspectNavigationController { navigationController in
navigationController.navigationBar.backgroundColor = .red
}
}
One thing to note that I didn't at first understand: SwiftUI will change the appearance of things like NavigationBar based on whether you are in night mode.
If you want to default it to a different color scheme add
.colorScheme(.dark)
If you create a color scheme using the color set system as outlined in this post: https://www.freecodecamp.org/news/how-to-build-design-system-with-swiftui/ it would apply to the main elements like navigations and tab bars, and allow you to apply different schemes for night/day mode.
The NavigationView is managing full screens of content. Each of those screens has its own background color. Therefore you can use the following approach to apply your Background color onto the screens:
let backgroundColor = Color(red: 0.8, green: 0.9, blue: 0.9)
extension View {
func applyBackground() -> some View {
ZStack{
backgroundColor
.edgesIgnoringSafeArea(.all)
self
}
}
}
Then you apply it to all your screens:
NavigationView {
PrimaryView()
.applyBackground()
DetailView(title: selectedString)
.applyBackground()
}
Be aware: some SwiftUI views have their own background color which is overriding yours (e.g. Form and List depending on context)
iOS 16
You can set any color to the background color of any toolbar background color (including the navigation bar) for the inline state with a simple native modifier:
Xcode 14 beta 5 (Not working 🤦🏻♂️, waiting for beta 6...)
.toolbarBackground(.yellow, for: .navigationBar)
Xcode 14 beta 1,2,3,4
.toolbarBackground(.yellow, in: .navigationBar)
Note that the color will set on the entire bar (up to the top edge of the screen).
Also, the color will be animated during the transition between Large and Inline modes of the bar.
I have a UICollectionView in my tvOS app that has a image and a caption text. I've setup a constraint to pin the caption text just under the image.
When the cell is focused and the images grows, the text does not move and stays over the image. Is there a way to set a constraint that takes in account the focused image size?
You can use a UIImageView property focusedFrameGuide for that. It returns a UILayoutGuide object, which unfortunately can't be used in Interface Builder, but you can create constraints with it in code. Note that this constraint makes sense only when the view is focused, so you have to set its active property according to the self.focused property.
First create the constraint on view initialization:
self.focusedSpacingConstraint = NSLayoutConstraint(item: imageView.focusedFrameGuide, attribute: .BottomMargin, relatedBy: .Equal, toItem: label, attribute: .Top, multiplier: 1, constant: 0)
//add it to the view and set active to false
Then activate either this constraint or the default one depending on the focus:
override func didUpdateFocusInContext(context: UIFocusUpdateContext, withAnimationCoordinator coordinator: UIFocusAnimationCoordinator) {
coordinator.addCoordinatedAnimations({
self.focusedSpacingConstraint.active = self.focused
self.spacingConstraint.active = !self.focused
//set label's transform and animate layout changes
}
You can also use the focusedFrameGuide to set label's height (as a percentage of image's height).
The advantage of this approach is that you don't have to change the (hardcoded) constant whenever the image size changes.
I ended up setting a #IBOutlet to my spacing constraint and I update it in the didUpdateFocusInContext method. To add some effect, I also transform the label.
In my collection cell:
override func didUpdateFocusInContext(context: UIFocusUpdateContext, withAnimationCoordinator coordinator: UIFocusAnimationCoordinator) {
coordinator.addCoordinatedAnimations({
if self.focused {
self.spacingConstraint.constant = 30
UIView.animateWithDuration(0.3) {
self.label.transform = CGAffineTransformMakeScale(1.15, 1.15)
self.layoutIfNeeded()
}
}
else {
self.spacingConstraint.constant = 0
UIView.animateWithDuration(0.3) {
self.label.transform = CGAffineTransformMakeScale(1, 1)
self.layoutIfNeeded()
}
}
}, completion: nil)
}
Use this code, I hope it help you. This code write into the custom cell class.
override func didUpdateFocusInContext(context: UIFocusUpdateContext, withAnimationCoordinator coordinator: UIFocusAnimationCoordinator) {
if (self.focused) {
self.custom_ImageView.adjustsImageWhenAncestorFocused = true
self.custom_LabelView1.frame = CGRectMake(0, 279, 548, 29)
}
else {
self.custom_ImageView.adjustsImageWhenAncestorFocused = false
self.custom_LabelView1.frame = CGRectMake(0, 259, 548, 29)
}
}
I have this black background displayed on the cells in my UIImagePickerController
Here's how I'm presenting. No rocket science here:
let imagePicker = UIImagePickerController()
imagePicker.allowsEditing = false
imagePicker.delegate = self
imagePicker.modalPresentationStyle = .Popover
imagePicker.sourceType = UIImagePickerControllerSourceType.PhotoLibrary
imagePicker.popoverPresentationController?.sourceView = self.view;
presentViewController(imagePicker, animated: true, completion: nil)
Obviously I just want the white background.....?
For future reference, this app was using the Appearance Manager and had globally set all UITableViewCells to black like this:
UITableView.appearance().backgroundColor = .blackColor()