I am working on implementing new Screen Time API (from WWDC 22) in my app and I am trying to show app icons in the report by using Label(:ApplicationToken) initialiser and it works fine. However, all the app icons are very small unlike in the video from WWDC. If you take a look on the screenshot, I have app icons like on the right-most phone, but want smith like on the left-most.
Here is the code I have in my View in the Device Activity Report Extension:
#ViewBuilder
private func appIcon(for applicationToken: ApplicationToken?) -> some View
{
if let applicationToken
{
Label(applicationToken)
.labelStyle(BigAppIconLabelStyle())
}
}
struct BigAppIconLabelStyle: LabelStyle
{
func makeBody(configuration: Configuration) -> some View {
configuration.icon
.scaleEffect(2) // Scale Effect increases the icon but destroys the quality
.frame(width: 50, height: 50) // Frame The frame changes, but the icon is still tiny.
}
}
I tried to adjust the frame and font, but the only thing that works is scaleEffect, but, as you can imagine, the quality of the icon is terrible in this case.
Apple's documentation is also not helping, so I was wondering how can I make this app icons bigger?
Related
can anyone tell how to make Responsive UI in Swift UI, which is compatible on all Device , and using figma Text like 24 then it shows iphone 8 and iphone 11 same view
You'll want to minimize the amount of hardcoded sizes or frames in your app as that will make your app less responsive across different phone models and orientations. Here are some links you can check out to learn responsive UI:
https://www.youtube.com/watch?v=67ZCQ5ihj_I&t=186s
https://www.youtube.com/watch?v=ALzrixd_hd8
Consider trying out geometry reader as well. Here's an article that goes into depth on what it is and how to use it: https://www.hackingwithswift.com/quick-start/swiftui/how-to-provide-relative-sizes-using-geometryreader
For images you can do something like this. You can use GeometryReader class to make your images responsive. Do not use hardcoded size for images. In this snippet I used 50% width of the screen and for height it will also take 50% of the height.
Also Be careful using GeometryReader class. The GeometryProxy returns the current view width and height.
var body: some View {
GeometryReader { reader in
VStack {
Image(contact.imageName)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: reader.size.width * 0.5, height: reader.size.width * 0.5)
.clipped()
.cornerRadius(reader.size.width)
.shadow(radius: 10)
}
}
}
A better way to do it without wrapping all your views in a geometry reader is to make an extension to get the screen with and height, which is also callable on all pages without having to do the extension on every page like a geometryreader.
extension View{
func getScreenBounds() -> CGRect{
return UIScreen.main.bounds
}
}
and to call it is the same as geometry reader:
.frame(width: getScreenBounds().width * 0.5, height: getScreenBounds().width * 0.5
Hello developers!
I encountered a situation, where I like to get some feedback from experienced Swift developers at the pulse of time.
For an iOS app I need some user inputs, three to be precise. These can be seen as a whole number in the current state. So I thought, to put them in an integer variable. I decided to use Swift as the language and SwiftUI for the Interface.
Table of contents:
Story
Situation (Problem)
Question
Hardware
Example Code
THE STORY (in short):
I tried to find a way to get the user input into the variable. TextField() handles String. On TextFields()s tap some screen keyboard appears. After input the user can hit the 'return' button and the keyboard disappears. My goal was intercept all characters that did not belong to an integer. So I added a filter function which only allowed numbers from 0 to 9. Fine, but at the default keyboard the user had to hit the symbols button to get a number pad provided.
So I picked a 'Number Pad'. That one has, despite the unpopulated space, no 'return' button. Further the keyboard blocks the view to the Interface. Well, perhaps implementing something like IQKeyboardManager from 'Iftekhar Qurashi' (see: https://cocoapods.org/pods/IQKeyboardManager) can counter the insufficiency, But I asked myself, if such a basic task requires an external library. There should be a native way, right?
THE SITUATION:
After the described and discarded idea, I looked around a went for some Picker()s, which went well... visually. If you grab a picker wheel which has a neighbor to right, you will move the right neighbors wheel. This is shown is a video (just below 'Step 4:'): https://blckbirds.com/post/swiftui-how-to-create-a-multi-component-picker/
Same on the physical devices when in portrait mode(iPhone 6S, X and 13). Landscape offers enough space.
The suggested method to cure the unwanted behavior, namely to add '.compositingGroup().clipped()' to the end of each Picker()s closure does not work for me (iOS 15). As mentioned in the comments by 'Dave Reed', the fact, that the pickers work fine on my Intel MacBooks Xcode (preview and simulators) could be that im running currently 13.1. over there.
For the screenshot I commented the 'compositingGroup().clipped()' lines as shown in the example code. There are two gray color shades, where I think the touch area is (roughly?) positioned. The same can be said if 'compositingGroup().clipped()' are active at position 1.1 and 2.1 (see comment). If 'compositingGroup().clipped()' get active at position 1.2 and 2.2 the gray bars get cut but the touch area is still wide and overlaps the left neighbor.
See some screenshots:
iPhone13portrait
iPhone13landscape
THE QUESTION:
Is there a way of cutting or stretching the touch area for a Picker() object to fit its current stack?
Are there any ideas of using a number only keyboard with a return button?
THE HARDWARE:
Development Platforms:
MacBook Pro (Retina 13", Early 2015, Dual-Core Intel Core i5), FINE ON SIMULATORs AND PREVIEW (Canvas)(iPhone8, 13), Xcode 13.1
MacBook Pro (16", 2021, Apple M1 Pro), Situation occurs on simulators and Preview (Canvas)(iPhone8, 13), Xcode: now 13.2.1
Hardware Test Devices:
iPhone 6s, iOS Version: 15.2, Situation occurs
iPhone X, iOS Version: 15.2, Situation occurs
iPhone 13, iOS Version: 15.1.1, Situation occurs
THE FULL EXAMPLE CODE (incl. Preview):
// demonstration file for bad multiple picker touch area overlay
import SwiftUI
struct ContentView: View {
#State var rice: Int = 51
#State var corn: Int = 20
let range: ClosedRange<Int> = 0...99
var body: some View {
VStack{
HStack(alignment: .center, spacing: 0){
Spacer()
VStack(){//picker 1
Text("rice")
VStack(){
Picker("", selection: $rice) {
ForEach(range, id: \.self){ Text("\($0)").tag($0) }
}
//POSITION 1.1
.pickerStyle(.wheel)
//.compositingGroup()
//.clipped(antialiased: true)
}
//POSITION 1.2
.frame(width: 40, height: 100)
//.compositingGroup()
//.clipped(antialiased: true)
.border(Color.red)
}
Spacer()
VStack(){//picker 2
Text("corn")
VStack(){
Picker("", selection: $corn) {
ForEach(range, id: \.self){ Text("\($0)").tag($0) }
}
//POSITION 1.2
.pickerStyle(.wheel)
//.compositingGroup()
//.clipped(antialiased: true)
}
//POSITION 2.2
.frame(width: 40, height: 100)
//.compositingGroup()
//.clipped(antialiased: true)
.border(Color(UIColor.secondaryLabel))
}
Spacer()
}// End of HStack
.padding()
}.overlay(
RoundedRectangle(cornerRadius: 15)
.stroke(lineWidth: 2)
).padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
In my app I have a button that I want to animate to scale down when it's touched. To do this, I created a custom ButtonStyle with an explicit animation. This works as intended but it introduced a problem when switching between dark/light mode system appearances. If you change it while the app is open, the Color updates as expected, but if the app is not open, the snapshot in the App Switcher shows the wrong color for the new system appearance. The following code should be a black box on top of a white background in light mode and white on black in dark mode. The background always properly updates, but the box remains the old color in the snapshot and thus you cannot see it - black on black or white on white - at least as of iOS 14.2. The issue is the animation - if I remove that the snapshot appears as expected. Why is that and how can I fix it?
struct ContentView: View {
var body: some View {
Button(action: {}) {
Color.primary
.frame(height: 100)
}
.buttonStyle(MyButtonStyle())
.padding()
}
}
struct MyButtonStyle: ButtonStyle {
func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
.scaleEffect(configuration.isPressed ? 0.8 : 1)
.animation(.easeOut(duration: 0.5)) //FIXME: Removing this fixes it
}
}
Here I am running the app in light mode, then I closed it, enabled dark mode, then opened App Switcher to find the box is black on the black background. The box should be white, as it is when I tap the app to return it to the foreground.
Works fine with iOS 14.1, so I assume it is another 14.2 defect.
Try to link animation to value (not tested, just idea):
struct MyButtonStyle: ButtonStyle {
func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
.scaleEffect(configuration.isPressed ? 0.8 : 1)
.animation(.easeOut(duration: 0.5), value: configuration.isPressed)
}
}
I'm struggling to find documentation to support this but it seems as though the values of
GeometryReader.size.width & height change when the keyboard opens. This can be proven through something like:
var body: some View {
TabView {
GeometryReader { g in
Rectangle()
.frame(width:g.size.width/2,height:g.size.height/20)
TextField(...)
}
}
}
which shows the rectangle resizing when the keyboard opens by clicking on the textfield.
How would I prevent this from happening? I want to specify the frame size relative to screen size to support many screen sizes...
You don't need a geometry reader to know the screen's size. you can get screen's dimensions using UIScreen.main.bounds.width and UIScreen.main.bounds.height.
Note width always shows the horizontal-dimension's size, and height always shows the vertical one (incase of screen rotation)
Add this to the GeometryReader:
.ignoresSafeArea(.keyboard)
I have recently inherited an an iOS app made in Swift 3.0 from a developer that no longer works here.
The app is made in Xcode and uses storyboards for some of the screens, but not all of them.
On a iPad in landscape orientation the main screen contains an image taking op 2/3 of the width, with a text column next to it taking up 1/3 of the screen. Below are three images each up 1/3 wide. On smaller screens all these items take up 100% of the available width and are displayed underneath each other as a long list.
This is done using the following code in MainController.swift:
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews();
// On small screens, columnify the layout
let mainContent = view.viewWithTag(1) as! UIStackView; //contains large image and text
let thumbnails = view.viewWithTag(3) as! UIStackView; //three images
mainContent.axis = .horizontal
mainContent.distribution = .fillProportionally
thumbnails.axis = .horizontal
if(self.view.bounds.width < 1000) {
mainContent.axis = .vertical
mainContent.distribution = .equalSpacing
thumbnails.axis = .vertical
} else {
mainContent.axis = .horizontal
mainContent.distribution = .fillProportionally
thumbnails.axis = .horizontal
}
}
This all works well, unless the user performs the following actions:
Start in landscape orientation on iPad. Image is 2/3, text 1/3
Tap on thumbnail and navigate to a different panel.
Rotate iPad to portrait.
Navigate back to first panel.
Observe that all items are places underneath each other, the image is 100%, but text is only 1/3 of the screen, while it should be 100%
Rotate to landscape, text moves next to image.
Rotate to portrait, text now spans 100% (as it should be)
My hunch would be that manually triggering a re-layout after navigating back to the first panel would solve it, but I cannot find code related to the navigation. This seems all handled by some "Apple magic?". There is probably a way to hook into it, but without any code I don't have any pointers. My only other solution would be to try and refactor the entire application with storyboards, but before I start with that, I was hoping on getting some insights here.