how can I do fade in and out when button is pressed.
I am looking for most simple and best practice Swift 4 solution as possible.
Something like Apple iOS 11 Calculator button fade...
So far I have this...
myButton.setTitleColor(UIColor.red, for: UIControlState.normal)
myButton.backgroundColor=UIColor.gray
myButton.setTitleColor(UIColor.gray, for: UIControlState.highlighted)
myButton.backgroundColor=UIColor.red
I am kinda lost. Many thanks for any answer.
I don't know about fade in/out for calculator but you will get similar effect by this:
Set UIButton type as Custom and set Text Color as White from storyboard.
Set BackgroundColor of UIButton as Tungsten(take e.g. Calculator app)
Create custom class for UIButton and set customButton class to UIButton from Identity Inspector.
class customButton: UIButton {
override open var isHighlighted: Bool {
didSet {
//Set colors for Highlighted & Unhighlighted
backgroundColor = isHighlighted ? UIColor.lightGray.withAlphaComponent(0.7) : UIColor(red: 51/255, green: 51/255, blue: 51/255, alpha: 1.0)
}
}
}
Result:
Related
I am using NavigationSplitView, introduced in iOS16, with a basic list and attempting to color a system image with standard colors. I am noticing that when the navigationSplitViewStyle is .automatic or .prominentDetail and the color scheme is dark, that the colors are muted. I have not been able to figure out how to not-mute them, and thus stick with the original color as it's used in light mode. I'm wondering if this is possible to override? Or is there a way to drop down to UIKit and override this odd behavior?
Here is an example:
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationSplitView {
List {
ForEach([1, 2, 3], id: \.self) { item in
Button {
} label: {
HStack {
Image(systemName: "sunset.circle.fill")
.foregroundColor(.green)
Text("Item \(item)")
}
.font(.system(size: 40))
.padding()
}
}
}
} detail: {
Text("Detailed Content")
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Group {
ContentView()
.previewInterfaceOrientation(.portrait)
.preferredColorScheme(.dark)
ContentView()
.previewInterfaceOrientation(.portrait)
.preferredColorScheme(.light)
}
}
}
And you can see the different in the color between schemes here:
If you meant that in dark mode, the sun in the symbol is black and you want to keep it white, then you can achieve this by setting symbolRenderingMode modifier on the image to .palette and give it two colors, the green one as well as white using the foregroundStyle modifier.
Image(systemName: "sunset.circle.fill")
.symbolRenderingMode(.palette)
.foregroundStyle(.white, .green)
Refer to the following session from WWDC 2021 for more about using rendering modes for SF Symbols in SwiftUI: https://developer.apple.com/wwdc21/10349
If you want the colors to be exactly the same and don’t change. You can use UIKit’s colors or define your own custom colors that don’t support dark mode.
.foregroundStyle(.white, Color(uiColor: .green))
.foregroundStyle(.white, Color(red: 0, green: 1, blue: 0))
See the Fixed Colors section in this link:
https://developer.apple.com/documentation/uikit/uicolor/standard_colors
I am making a simple 'Simon Says' style app in Swift and I would like to flash buttons to show the sequence the user has to follow.
I have made this function which iterates over an array of the buttons to just change the background colour for now.
func animateButtons() {
for (index, button) in buttonSequence.enumerated() {
UIButton.animate(withDuration: 1, delay: TimeInterval(index)) {
button.backgroundColor = UIColor(red: 63/255, green: 255/255, blue: 0/255, alpha: 1.0)
button.backgroundColor = UIColor(red: 168/255, green: 61/255, blue: 164/255, alpha: 0.85)
}
}
}
Right now though when the function is called it lights up all the buttons at once but animates them returning back to their normal colour one by one. Ideally I want it to animate one button completely, then the next etc.
I looked into using a Timer for this but couldn't find exactly how to use it properly when searching documentation.
The problem with your code is that you set the button color to 2 different values inside your animation block. The first color will be overridden and have no effect.
If you want each button to change to the first color in your animation block, hold for 1 second, and then revert to the 2nd color, change your code like this:
func animateButtons() {
for (index, button) in buttonSequence.enumerated() {
UIButton.animate(
withDuration: 1,
delay: TimeInterval(index),
animations: {
button.backgroundColor = UIColor(red: 63/255, green: 255/255, blue: 0/255, alpha: 1.0)
},
completion: { finished in
button.backgroundColor = UIColor(red: 168/255, green: 61/255, blue: 164/255, alpha: 0.85)
}
)
}
}
My view controller programmatically creates several image views in a grid inside a scroll view. I want to be able to pinch to zoom in/out. I have pasted some similar code below which I found on stack overflow trying to do the same thing. The issue is that viewForZooming returns only one image. How do I get pinch to zoom to work for all of the image views in the scroll view? I just want to adjust the zoom scale of the scroll view as you pinch in/out.
Following code is what I have tried to achieve the required functionality:
class PhotoViewController: UIViewController, UIScrollViewDelegate {
#IBOutlet weak var scrollView: UIScrollView!
#IBOutlet weak var image: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
scrollView.minimumZoomScale = 1.0
scrollView.maximumZoomScale = 6.0
scrollView.delegate = self
}
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return image
}
}
If you want to zoom multiple image views (or other UI elements) as a whole, you need to embed them in a UIView. Then, return that view in viewForZooming.
Here's a simple example:
The Yellow rectangle is a UIView, which I've connected via #IBOutlet as myContentView. It has 3 image views as subviews.
The scroll view has a red background, not seen here because myContentView is set to equal width and height to the scroll view frame (but you'll see it in the zoomed-out screen cap below).
Here's the code:
class MultiZoomViewController: UIViewController, UIScrollViewDelegate {
#IBOutlet var scrollView: UIScrollView!
#IBOutlet var myContentView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
scrollView.minimumZoomScale = 0.5
scrollView.maximumZoomScale = 6.0
scrollView.delegate = self
}
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return myContentView
}
}
and the results - start / zoomed out / zoomed in:
I just updated to Xcode 9 and run to an iOS11 simulator. My custom view for the navaagation bar title is shifted down.
This code was working before i updated; it was vertically centered before
companyCountryView = CompanyNameView(frame: CGRect(x: 0, y: 0, width: Utils.getScreenWidth() - 150, height: 35))
companyCountryView.companyLbl.text = ""
companyCountryView.countryLbl.text = ""
self.navigationItem.titleView = companyCountryView
Even though I change values for y and height, no effect at all.
It seems the width value i used does not do any effect too.
I have solved it! You need to override the intrinsicContentSize in your custom view class and put the size of the view there:
class CustomView: UIView {
override var intrinsicContentSize: CGSize {
return CGSize(width: Utils.getScreenWidth() - 150.0, height: 35.0)
}
}
with the tutorials on qooxdoo.org I found out how to theme my widgets. This works great for overall styling.
If I configure "label", all my labels become a yellow textcolor. If I configure "button/label", all labels on my buttons become a red textcolor while every other remains yellow. Good so far.
What's not working is if I try to set a textcolor for labels inside a window:
"window/label", "window/pane/label", "window/widget/label" With none of these keys I can change the style for label-widget inside my window.
What is the correct key to give labels as child-elements inside my window a different style?
Thanks a lot
Ricky
A qx.ui.window.Window is a container wich implements RemoteChildrenHandling. That means, that the chain of child controls stops when it comes to the window content.
Depending on what you want to achieve, you can:
add a Label to a Window and set the Label appearance directly
inherit from Window (i.e. a custom Dialog class of your own), add a content label as a childControl of your dialog and adjust the Label color in your theme by using the choosen child control path
The first option would lead to this code:
var win = new qx.ui.window.Window("My Title");
win.setLayout(new qx.ui.layout.VBox(10));
win.add(new qx.ui.basic.Label("My content").set({
appearance: 'custom-label-appearance'
}));
If you've just some appearances for Label objects and you don't want to add the appearance every time, you also could subclass it:
qx.Class.define("my.Label", {
extend: qx.ui.basic.Label,
properties: {
appearance: {
refine: true,
init: 'custom-label-appearance'
}
}
});
var win = new qx.ui.window.Window("My Title");
win.setLayout(new qx.ui.layout.VBox(10));
win.add(new my.Label("My content"));
Here is an example for the second option:
qx.Class.define("my.Dialog", {
extend: qx.ui.window.Window,
construct: function(title, label) {
this.base(arguments, title);
this.setLayout(new qx.ui.layout.Atom());
this.getChildControl('my-label').setValue(label);
},
members: {
//overridden
_createChildControlImpl : function(id)
{
var control;
switch (id)
{
case "my-label":
control = new qx.ui.basic.Label();
this.add(control);
break;
}
return control || this.base(arguments, id);
}
}
});
You can then set the appearance path window/my-label in this case.
Note that both solutions will not keep you away from setting appearances to all labels that you add to the window.