Why is the .medium system font not showing for .title style in SwiftUI?
I have also tried explicitly setting the font with Font.custom...
Text("Text").font(Font.title.weight(.light))
Text("Text").font(Font.title.weight(.regular))
Text("Text").font(Font.title.weight(.medium))
Text("Text").font(Font.title.weight(.semibold))
Text("Text").font(Font.title.weight(.bold))
Here is my output:
I am expecting .medium to be heavier than .regular.
The best way to achieve this is by splitting up the font type and the font weight into two separate parts.
Text("Text")
.font(.title)
.fontWeight(.medium)
I hope this helps.
Text("Home")
.font(.system(size: 20, weight: .bold, design: .default))
Use like this
Related
We are using SwiftUI and custom view for List Section's header.
But when compiling with Xcode13/iOS15 SDK, there seems to be extra left/right 20px + top/bottom 6px padding fixed in the header container view. I even created the bare minimum testing app, it seems unable to be customized.
This is not related to the newly introduced sectionHeaderTopPadding, so setting it to 0 doesn't work for me. I also tried .environment(\.defaultMinListHeaderHeight, 16) from this post, it also doesn't change the padding.
Here is snippet and screenshot:
List {
Section(header:
Text("Big header")
.foregroundColor(.red)
.background(Color.gray)
.frame(height: 30)
.padding(0)
) {
Text("Hello, world! 1")
.padding()
Text("Hello, world! 2")
.padding()
Text("Hello, world! 3")
.padding()
}
}
.environment(\.defaultMinListHeaderHeight, 1)
.listStyle(PlainListStyle())
Thanks a lot for helping :) cheers
Finally found the answer myself.
In iOS15, to remove padding for section header, you need to use .listRowInsets(EdgeInsets()) just like list cell.
I have a text with a size of 80. When I put a border on this view, I see that there is additional space above and below the text. To save space in my application, I need to remove this space. But I don't know if it's possible properly?
Exemple of code:
import SwiftUI
struct ContentView: View {
var body: some View {
Text("360°")
.font(Font.system(size: 80, weight: .thin, design: .default).monospacedDigit())
.border(Color.red, width: 2)
}
}
The result:
I need the green result:
The vertical space is occupied by the Text itself. Adding fixed negative padding isn't recommended. Use this, only if both text and font are hardcoded.
Text("360°")
.font(Font.system(size: 80, weight: .thin, design: .default).monospacedDigit())
.padding(.vertical, -18)
.border(Color.red, width: 1),
My project is target for iOS 13 onwards hence could not use PageTabViewStyle(). I tried with Mr. John suggestion from this link
SwiftUI create image slider with dots as indicators
Now I need to open the detail view on clicking the image in the slideshow. But now when I try to move the images the detail view is opening and could not move the images as in Pageview. I implemented the below code. Please let me know the solution to fix this. Thanks in advance.
PagingView(index: $index.animation(), maxIndex: images.count - 1){
ForEach(articles, id: \.self) { article in
NavigationLink(destination: ArticleDetailUIView(article: articles[self.index], isBookmark: false) , isActive: $areYouGoingToArticleView)
{
Image(article.image)
.resizable()
.scaledToFill()
.accessibility(identifier: "articleImage")
}
}
}
.aspectRatio(4/3, contentMode: .fit)
.clipShape(RoundedRectangle(cornerRadius: 15))
After few browsing, the workaround was using the stepper to move around the slide show instead of scrolling the images. I added the below lines.
Stepper("Index: (index)", value: $index.animation(.easeInOut), in: 0...images.count-1)
.font(Font.body.monospacedDigit())
.labelsHidden()
I am attempting to build a soccer app. My main detail view shows match statistics. I cannot find any way to get the central text element showing the score of the match to stay in the absolute center, so that the colon in the text is perfectly centred over the guideline on the middle of the screen. With different numbers either side of the colon, it gets shifted slightly out of place.
Is there any way to fix this element to be exactly centered under any circumstances? I have attached a screenshot showing the misalignment.
Code:
VStack() {
HStack(alignment: .center) {
Text("\(matchItem.HomeGoals) : \(matchItem.AwayGoals)")
.font(.system(size: 35.0))
.fontWeight(.heavy)
.foregroundColor(Color.white)
.lineLimit(3)
.multilineTextAlignment(.center)
.fixedSize(horizontal: true, vertical: true)
.allowsTightening(false)
}.padding(15)
}.frame(width: 75, height: 80, alignment: .center)
Example:
You can put your View in a ZStack and the ":" on another Z-level, so it no longer depends on other elements in the same horizontal stack.
im trying to show a list of items. Every row should contain a stripe on the left in a specific color and a headline. This headline is sometimes more than a line long but only shows as one line and "...". When I remove the Stripe it shows as multiline text. I've attached the code and two pictures for comparison
Heres my code :
HStack {
Rectangle()
.foregroundColor(poll.outcome ? .green : .red)
.frame(width: 3)
VStack {
Text(poll.poll.title!).font(.headline)
.lineLimit(2)
}
}
This is how it looks without the Rectangle:
And with the Rectangle:
In a List or ScrollView the SwiftUI engine will compress back the text area. .lineLimit(x) give you a maximum of line, not a minimum ;)
To secure that the engine does not shrink back the Text height and goes up to the maximum limit, add .fixedSize(horizontal: false, vertical: true) as shown below
HStack {
Rectangle()
.foregroundColor(.red)
.frame(width: 3)
VStack {
Text("line1\nline2\nline3").font(.headline)
.lineLimit(2)
.multilineTextAlignment(.leading)
.fixedSize(horizontal: false, vertical: true)
}
}
SwiftUI has some bugs right now and it is one of them and there is some discussion on this answer that you can check out.
Although It works on my machine, if you have any trouble about sizing elements, you can use Spacers as a workaround until all SwiftUI bugs fix by Apple.
For this case, you can wrap your text between two spacers like this:
VStack {
Spacer()
Text("FirstLine\nSecondLine\nThirdLine")
.font(.headline)
.lineLimit(2)
Spacer()
}