I am updating button text based on values in a database and as these values may be very long or very short, I want the button size to remain constant and the text to resize dynamically depending on how big the value is, so it remains within the button and not truncated (The values will be sentences, it is a language learning app). I basically want to give the font size a minimum possible value and a maximum possible value.
I know how to do this in Android Studio.
autoSizeMinTextSize=14sp
autoSizeMaxTestSize=20sp
But when I tried to use suggestions like a large font size with minimumScaleFactor, it doesn't work. It just makes the text incredibly small.
Here is my button style.
struct SoundButton: ButtonStyle {
func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
.foregroundColor(Color.black)
.multilineTextAlignment(.center)
.font(.custom("arial", size: 20))
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(configuration.isPressed ? LinearGradient(gradient: Gradient(colors: [Color("DarkestGreen"), Color("LightGreen")]), startPoint: .top, endPoint: .bottom):LinearGradient(gradient: Gradient(colors: [Color("DarkGreen"), Color("LightGreen")]), startPoint: .top, endPoint: .bottom))
.cornerRadius(10)
.shadow(radius: 3.0)
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(Color.white, lineWidth:2))
.padding(2)
.scaleEffect(configuration.isPressed ? 0.975 : 1.0)
}
}
And here is the button code.
Button(action: {
playSound(sound: "\(self.category)_audio1", type: "mp3")
self.translation = self.btns[1][1]
}) {
if(gotValues==true) {
Text("\(self.btns[1][0])")
} else {
Text("\(self.btn1)")
}
}
Here is what my screen looks like in the app.
What can I add to this to achieve the desired effect? Thank you.
Also, here is the working android version.
As far as I understood your goal the following should give you required effect (or sort of)...
Tested with Xcode 11.4 / iOS 13.4
configuration.label
.padding(.horizontal, 8).lineLimit(1).minimumScaleFactor(0.4) // << this place !
.foregroundColor(Color.white)
Related
I understand that I can get to know if the width or height of a QML item changed using the slots onWidthChanged and onHeightChanged. This is by doing something like below.
import QtQuick 2.12
Item {
id: my_item
onWidthChanged: {
if (my_item.visible) {
console.log("Dimension chnaged")
}
}
onHeightChanged: {
if (my_item.visible) {
console.log("Dimension chnaged")
}
}
}
Above works well. But I am only interested to know if the dimension of my QML item changed. I just need a callback when width or the height changed. I don't need a callback for both.
Is there a QML signal to listen only for a dimension change?
I am using Qt 5.15.7 commercial version.
As a workaround, you can create a property which is bound to both width and height and connect a handler to the changed signal of that property:
property double dimensions: width * height
onDimensionsChanged: {
if(my_item.visible)
console.log("Dimension changed")
}
There is a small risk, namely the number won't change when swapping width & height, but that might be worth it in your situation
As mentioned in the comments no such signal currently exists by default.
You can create a size or rect type property and react on that instead though:
property size dimensions: Qt.size(width, height)
onDimensionsChanged: console.log("Dimension changed")
Here's a WASM example of it working to power an emitter:
https://www.canonic.com/#https://playground.canonic.com/525f6691-fe05-4824-a7f1-574bb8cabd8b/dimension-changed-signal-example
I have a very simple browser app based on WebEngineView and virtual keyboard made in Qt Quick.
Everything works fine - the keyboard is shown perfectly each time I click on an input in the webview, but what bothers me is that if I click on an input that is at the bottom, the keyboard covers it after opening and I cannot see what I'm typing.
I tried solving it by resizing the WebEngineView element to accomodate for the keyboard height, like most mobile apps work. It works, I can scroll the page under the keyboard but the keyboard still covers the input and I need to scroll manually.
Is there any way I could adjust the web view scroll position so the keyboard doesn't cover the focused input from QML?
I cannot do it at a single website because I allow navigation to any website user wants, so I need some universal method.
Here is my qml code:
import QtQuick 2.12
import QtQuick.Window 2.12
import FreeVirtualKeyboard 1.0
import QtWebEngine 1.8
Window {
id: appContainer;
visible: true
width: 1280
height: 600
title: qsTr("WebEngineView")
property string pathUrl: "https://www.w3schools.com/html/html_forms.asp"
WebEngineView {
id: webview
width: appContainer.width
url: appContainer.pathUrl
height: appContainer.height
}
/*
Virtual keyboard
*/
InputPanel {
id: inputPanel
z: 99
y: appContainer.height
anchors.left: parent.left
anchors.right: parent.right
states: State {
name: "visible"
when: Qt.inputMethod.visible
PropertyChanges {
target: inputPanel
y: appContainer.height - inputPanel.height
}
}
transitions: Transition {
from: ""
to: "visible"
reversible: true
ParallelAnimation {
NumberAnimation {
properties: "y"
duration: 150
easing.type: Easing.InOutQuad
}
}
onRunningChanged: {
if(!running && inputPanel.state == "visible") {
// finished showing keyboard
webview.height = appContainer.height - inputPanel.height
console.log('Keyboard shown')
} else if(running && inputPanel.state != "visible") {
// begins to hide keyboard
webview.height = appContainer.height
console.log('Keyboard starts to hide');
}
}
}
}
}
So far the resizing part works okay - I do it in onRunningChanged so the webview resizes before the transition starts and after it ends - this prevents ugly empty space showing during transition.
Update
I have achieved the effect I wanted using webview.runJavaScript together with scrollIntoView after showing the keyboard:
webview.runJavaScript("document.activeElement.scrollIntoView({block: 'nearest', inline: 'nearest', behavior: 'smooth'})");
However I'm not sure if this is solution is the best, as I don't like the fact of involving javascript evaluation into the process. I'd like to know if there's any more "native" way of doing this.
Resize WebEngineView, scroll into view
The problem with resizing the WebEngineView is that HTML will see that your device screen suddenly shrunk and may decide to present a vastly different layout, for example move menu from top to side of the screen.
Even if this has not happened, layout has changed. The position on the new "screen" does not correspond to the position on the old one, there is no 1:1 relation, which is why it scrolls to a seemingly random spot in the first place.
We can tell webpage to scroll a focused element into view of new viewport:
If it was already onscreen than nothing happens.
If not, webpage scrolls so that the element fits on the screen if possible. scrollIntoView has parameters to scroll to the top/bottom of the screen as desired
So when onscreen keyboard is opened:
Save original scrollPosition
Resize WebEngineView
Optionally assign scrollPosition to saved value - although it probably won't do you any good
Use runJavaScript to determine activeElement and make it scrollIntoView
Repeat same steps when onscreen keyboard is dismissed.
Do not resize, scroll manually
Another approach would be to not resize the "screen" and just scroll the element into view if it got covered.
This would require Qt to change VisualViewport while leaving LayoutViewport intact (see this and this for more information) but it seems that Qt cannot do that, at least not through QML alone.
That leaves us with having to do it manually: determine position with getBoundingClientRect, calculate how much space does keyboard cover, and if it is not inside our calculated uncovered view area - scrollTo it.
(you will still need runJavaScript to get inside the webpage)
Perhaps this and this SO questions can help
Other options
#Hazelnutek reported some success with document.activeElement.scrollIntoViewIfNeeded()
Please see discussion in comments to this answer below:
public var body: some View
{
ZStack{
GeometryReader { geometry in
RoundedRectangle(cornerRadius: 25, style: .continuous)
.frame(width: geometry.size.width*1.00, height: geometry.size.height*1.00)
.zIndex(0)
}
}
}
I'm using GeometryReader to draw a rounded rectangle to fill up the entire watch screen, this looks fine on a 38mm watch simulator, but as I increase the watch size to 40, 42, 44mm I noticed that the height is not filling up the whole screen. I have to adjust my multiple to say 1.1 for example to fill up more of the screen.
Can someone tell me if I am using GeometryReader incorrectly?
Unless you really need the full functionality of the geometry reader, to actually measure the size of the object of the screen, then I think you could achieve the effect you want by setting the frame's maxWidth and maxHeight to .infinity and by ignoring the safe area on the bottom.
var body: some View {
ZStack {
RoundedRectangle(cornerRadius: 25, style: .continuous)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.edgesIgnoringSafeArea(.bottom)
}
}
Note that when you use a ZStack the order of the items in it determine the order on the screen. The first item in the stack will be at the bottom, and then each item will be layered on top.
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.
Xcode 10.1, Swift 4.2, macOS 10.14.2
I am trying to make a simple to do list app for macOS where there are a series of NSTableView rows and inside each one is an NSTextField. Each field is a to-do item. I want the NSTableView rows to expand to fit the size of the text within each NSTextField.
I have all of the following working:
Setting the text in the NSTextField makes the NSTableView row expand as needed. Auto layout constraints are set in my storyboard.
Using tableView.reloadData(forRowIndexes: ..., columnIndexes: ...) sets the text and resizes the table row correctly.
But doing tableView.reloadData() always resets every NSTextField to a single line of text as shown here:
Interestingly, if you click into the NSTextField after reloading the whole table, the field resizes to fit its content again:
I believe I have set all the appropriate auto layout constraints on my NSTextField and I'm using a custom subclass for it as well (from a helpful answer here):
class FancyField: NSTextField{
override var intrinsicContentSize: NSSize {
// Guard the cell exists and wraps
guard let cell = self.cell, cell.wraps else {return super.intrinsicContentSize}
// Use intrinsic width to jibe with autolayout
let width = super.intrinsicContentSize.width
// Set the frame height to a reasonable number
self.frame.size.height = 150.0
// Calcuate height
let height = cell.cellSize(forBounds: self.frame).height
return NSMakeSize(width, height)
}
override func textDidChange(_ notification: Notification) {
super.textDidChange(notification)
super.invalidateIntrinsicContentSize()
}
}
⭐️Here is a sample project: https://d.pr/f/90CTEh
I'm at a loss as to what else I can try. Any ideas?
I think there is some basic problems with the constraints in interface builder. Resizing the window makes everything wonky. Also you should call validateEditing() in the textDidChange(forBounds:) in your FancyField class.
I created a sample project, that does what you want on Github
Write a comment if you have any problems with it.
Thinking a little about it, thought i would add the meat of the code here. Only thing that really needs to work, is the update on the NSTextField when the "Tasks" is being updated. Following is the code required for the NSTextField.
public class DynamicTextField: NSTextField {
public override var intrinsicContentSize: NSSize {
if cell!.wraps {
let fictionalBounds = NSRect(x: bounds.minX, y: bounds.minY, width: bounds.width, height: CGFloat.greatestFiniteMagnitude)
return cell!.cellSize(forBounds: fictionalBounds)
} else {
return super.intrinsicContentSize
}
}
public override func textDidChange(_ notification: Notification) {
super.textDidChange(notification)
if cell!.wraps {
validatingEditing()
invalidateIntrinsicContentSize()
}
}
}
Hope it helps.