I am trying to make an adaptive CommentViewRow for a social app where the whole comment text can be displayed within the row.
So far I am achieving this but I have 3 issues:
1 When the comment-text is short it is being centred within the row even when I specify ".alignment: .leading" in the VStack.
2 When the comment-text uses more than one line there is a mysterious padding between the user's profile picture & the comment-text?? see image below.
3 I am not sure if my .frame modifier is the best way to achieve what I am doing, it seems mickey-mouse, I was reading about .frame(idealWith, idealHeight, etc..) and not sure if that would help.
Any idea on how I can fix this so that each CommentViewRow displays like your average social-media comment view??
Thank you!
struct CommentViewRow: View {
var comment: Comment
var body: some View {
HStack {
KFImage("profilePicture")
// COMMENT
VStack(alignment: .leading, spacing: 5) {
Text("**\(comment.username)** \(comment.comment)")
.font(.caption)
.frame(width: 310)
.fixedSize(horizontal: true, vertical: false)
Text(comment.createdAt.timeAgoDisplay())
.bold()
.font(.caption)
}
Spacer()
}.padding([.leading, .trailing], 10)
}
}
1st option: If you really need that view to be 310 wide
You can change .frame(width: 310) to .frame(width: 310, alignment: .leading)
2nd option: Let the view adjust itself based on content, you just need to specify the alignment (.leading in this case)
struct CommentViewRow: View {
var comment: Comment
var body: some View {
HStack {
KFImage("profilePicture")
VStack(alignment: .leading, spacing: 5) {
Text("**\(comment.username)** \(comment.comment)")
.font(.caption)
Text(comment.createdAt.timeAgoDisplay())
.font(.caption.bold())
}
.frame(maxWidth: .infinity, alignment: .leading)
}
.padding([.horizontal], 10)
}
}
yes, get rid of the frame:
struct ContentView: View {
var comment = "Thjfhg jhfgjhdfg jdfhgj dfhdfsjjdfgh djdshfg hjdfgjfdh ghjkf gdhjdfgh jkh fjg dfjkhgj dfglkhdfsg"
var body: some View {
HStack {
Image(systemName: "person.circle")
.font(.largeTitle)
VStack(alignment: .leading, spacing: 5) {
Text("\(comment)")
.font(.caption)
Text("3 minutes ago")
.bold()
.font(.caption)
}
Spacer()
}.padding([.leading, .trailing], 10)
}
}
Related
I'm trying a lot of different ways, using padding(), spacer(), frame() modifiers but can't get what I want.
Essentially, I would like for the Stack to have a uniform Look w/ the same font sizes across all labels/values. As can see from the pic, the distance label/value ends up being smaller. (Where should I place the minScaleFactor() for it to effect the entire HStack?)
My Goal is
Have all the values/labels shown in it's entirety
Adjust the spacing between each HStack to be the same
Have MinScaleFactor() apply to all the values/labels so that they appear uniform.
Unfortunately, I'm just not getting it. :-(
var body: some View {
HStack (spacing: 15) {
VStack(alignment: .leading){
Text("Load")
Text("24533")
}
.padding(.leading, 10)
VStack(alignment: .leading) {
Text("Time")
Text("99h 44m 05s")
}
VStack(alignment: .leading) {
Text("Dist")
Text("999999.00km")
}
VStack(alignment: .leading) {
Text("D+")
Text("100000m")
}
VStack(alignment: .leading) {
Text("Calories")
Text("1000000033333")
}
VStack(alignment: .leading) {
Text("Joules")
Text("111111")
}
}
.frame(maxWidth: .infinity, alignment: .leading)
.minimumScaleFactor(0.2)
.lineLimit(1)
.font(.subheadline)
.border(Color.blue, width: 3)
}
With the suggestion to add a Spacer in between the 2 texts
I am creating a "News" SwiftUI widget and I need to display rows, each containing time and news header.
I am using a VStack containing HStack's for each item but I am encountering an issue with extra HStack spacing between the two Text's. I need the left Text taking all the width needed for its content and the right Text taking all the width that is left. Seems to work as expected for the longer date (second line) for not for the first one.
In AutoLayout world I would need to play around with Content hugging / Compression resistance priority to achieve what I need but not sure what to do in SwiftUI.
Here's my code for creating the view:
private func createView(from headers: [NewsHeaderEntry.NewsHeader], with first: Int) -> some View {
GeometryReader { metrics in
VStack(alignment: .leading, spacing: 16) {
title
ForEach(headers[0...first - 1]) { header in
HStack(spacing: 4) {
Text(header.newsAt)
.font(.system(size: 12))
.fontWeight(.light)
.background(.green)
.frame(alignment: .leading)
Text(header.title)
.font(.system(size: 14))
.fontWeight(.semibold)
.redacted(reason: header.isPlaceholder ? .placeholder : .init())
.background(.yellow)
.lineLimit(2)
.frame(maxWidth: .infinity, alignment: .trailing)
}
.background(.red)
.frame(maxWidth: .infinity, alignment: .center)
.padding(.horizontal, 8)
}
Spacer()
}
.frame(width: metrics.size.width)
.background(.blue)
}
}
I have also tried setting maxWidth: .infinity for the left Text as well but it resulted in equal widths for both Texts which is not what I need.
Update: Without .padding(.horizontal, 8) the spacing works as expected but I need the horizontal spacing from the design perspective.
[2:
What you're looking for is the default behavior of the stack. Your frame modifiers are the issue:
private func createView(from headers: [NewsHeaderEntry.NewsHeader], with first: Int) -> some View {
GeometryReader { metrics in
VStack(alignment: .leading, spacing: 16) {
title
ForEach(headers[0...first - 1]) { header in
HStack(spacing: 4) {
Text(header.newsAt)
.font(.system(size: 12))
.fontWeight(.light)
.background(.green)
Text(header.title)
.font(.system(size: 14))
.fontWeight(.semibold)
.redacted(reason: header.isPlaceholder ? .placeholder : .init())
.background(.yellow)
.lineLimit(2)
}
.background(.red)
.padding(.horizontal, 8)
}
Spacer()
}
.frame(width: metrics.size.width)
.background(.blue)
}
}
I'm trying to create a chat bubble like this:
Actual Bubble
Actual Bubble 2.0
This is what I have been able to achieve so far.
My attempt
My attempt
This is my code so far:
import SwiftUI
struct TestingView: View {
var body: some View {
ZStack {
/// header
VStack(alignment: .trailing) {
HStack {
HStack() {
Text("abcd")
}
HStack {
Text("~abcd")
}
}.padding([.trailing, .leading], 15)
.fixedSize(horizontal: false, vertical: true)
/// text
HStack {
Text("Hello Everyone, bdhjewbdwebdjewbfguywegfuwyefuyewvfyeuwfvwbcvuwe!")
}.padding([.leading, .trailing], 15)
/// timestamp
HStack(alignment: .center) {
Text("12:00 PM")
}.padding(.trailing,15)
}.background(Color.gray)
.padding(.leading, 15)
.frame(maxWidth: 250, alignment: .leading)
}
}
}
struct TestingView_Previews: PreviewProvider {
static var previews: some View {
TestingView()
}
}
The main goal is that I want the two labels on top to be distant relative to the size of the message content. I am not able to separate the two labels far apart i.e one should be on the leading edge of the bubble and the other one on the trailing edge.
Already tried spacer, it pushes them to the very edge, we need to apart them relative to the content size of the message as shown in attached images.
Here is a simplified code.
Regarding Spacer: To achieve your desired result you put both Text views inside of a HStack, and put a Spacer between them. So the Spacer pushes them apart to the leading and trailing edge.
Also I recommend to only use one padding on the surrounding stack.
VStack(alignment: .leading) {
// header
HStack {
Text("+123456")
.bold()
Spacer() // Spacer here!
Text("~abcd")
}
.foregroundStyle(.secondary)
// text
Text("Hello Everyone, bdhjewbdwebdjewbfguywegfuwyefuyewvfyeuwfvwbcvuwe!")
.padding(.vertical, 5)
// timestamp
Text("12:00 PM")
.frame(maxWidth: .infinity, alignment: .trailing)
}
.padding()
.background(Color.gray.opacity(0.5))
.cornerRadius(16)
.frame(maxWidth: 250, alignment: .leading)
}
We can put that header into overlay of main text, so it will be always aligned by size of related view, and then it is safe to add spacer, `cause it do not push label wider than main text.
Tested with Xcode 13.4 / iOS 15.5
var body: some View {
let padding: CGFloat = 15
ZStack {
/// header
VStack(alignment: .trailing) {
/// text
HStack {
//Text("Hello Everyone") // short test
Text("Hello Everyone, bdhjewbdwebdjewbfguywegfuwyefuyewvfyeuwfvwbcvuwe!") // long test
}
.padding(.top, padding * 2)
.overlay(
HStack { // << here !!
HStack() {
Text("abcd")
}
Spacer()
HStack {
Text("~abcd")
}
}
, alignment: .top)
.padding([.trailing, .leading], padding)
/// timestamp
HStack(alignment: .center) {
Text("12:00 PM")
}.padding(.trailing, padding)
}.background(Color.gray)
.padding(.leading, padding)
.frame(maxWidth: 250, alignment: .leading)
}
}
To separate two components with fairly space in the middle, use HStack{} with Spacer().
This is a sample approach for this case. Code is below the image:
VStack {
HStack {
Text("+92 301 8226")
.foregroundColor(.red)
Spacer()
Text("~Usman")
.foregroundColor(.gray)
}
.padding(.bottom, 5)
.padding(.horizontal, 5)
Text("Testing testingtesting testing testing testingtesting testing testing testing testing testing testing testing testing testing.")
.padding(.horizontal, 5)
HStack {
Spacer()
Text("2:57 AM")
.foregroundColor(.gray)
.font(.subheadline)
}
.padding(.trailing, 5)
}
.frame(width: 300, height: 160)
.background(.white)
.cornerRadius(15)
I just learned swiftUI and I got little trouble. I want to make navigationBarTitle and title headline alignment like this:
Image 1: I want to make my view like this
I have tried to make like below but it does not work:
struct HeaderView: View {
var body: some View {
NavigationView {
VStack {
Image("kante_training_champions_league")
.resizable()
.scaledToFill()
.frame(width: 370, height: 150)
.cornerRadius(10.0)
Text("KANTE: NEW PLAYERS DON’T SEEM NEW")
.font(.title)
.fontWeight(.bold)
.multilineTextAlignment(.leading)
.frame(width: 370)
Spacer()
}
.navigationBarTitle("Chelsea FC")
}
}
}
From my code above, I got a view like this:
Image 2: I got a view like this from my code above
Could someone help me how to get a view like I want
Try leading alignment
var body: some View {
NavigationView {
VStack(alignment: .leading) { // << here !!
// ... no changes in image
Text("KANTE: NEW PLAYERS DON’T SEEM NEW")
.font(.title)
.fontWeight(.bold)
.padding(.leading) // << here !!
.multilineTextAlignment(.leading)
}
You should add alignment to StackView. You can change alignment to .leading, .trailing or .center. It is centered by default thats why you are having the label in center.
var body: some View {
NavigationView {
VStack(alignment: .leading) {
// Your Code
}
}
}
Remove .frame(width: 370) and use .frame(maxWidth: .infinity) so that the text takes the whole width of its parent.
VStack {
Image("kante_training_champions_league")
.resizable()
.scaledToFill()
.frame(width: 370, height: 150)
.cornerRadius(10.0)
Text("KANTE: NEW PLAYERS DON’T SEEM NEW")
.font(.title)
.fontWeight(.bold)
.multilineTextAlignment(.leading)
.frame(maxWidth: .infinity)
Spacer()
}
I am trying to create a view like this in SwiftUI (sorry it's so huge):
Specifically, I'm trying to build the scrolling row of labels/bar graph bars in the top quarter of the screen. To me, it looks like a ScrollView with horizontal scrolling, containing some number X of barGraphItems, which are each a VStack with a label and a colored rectangle. The VStack is then rotated 270deg.
Here's the code I have so far:
import SwiftUI
struct ContentView: View {
var body: some View {
HStack(alignment: .bottom, spacing: 0) {
Spacer()
VStack(alignment: .leading, spacing: 0) {
Text("Demo")
.font(.caption)
.fontWeight(.bold)
Rectangle().foregroundColor(.orange)
.frame(width: 84, height: 10)
}
.rotationEffect(Angle(degrees: 270.0))
VStack(alignment: .leading, spacing: 0) {
Text("Demo")
.font(.caption)
.fontWeight(.bold)
Rectangle().foregroundColor(.orange)
.frame(width: 84, height: 10)
}
.rotationEffect(Angle(degrees: 270.0))
VStack(alignment: .leading, spacing: 0) {
Text("Demo")
.font(.caption)
.fontWeight(.bold)
Rectangle().foregroundColor(.orange)
.frame(width: 84, height: 10)
}
.rotationEffect(Angle(degrees: 270.0))
VStack(alignment: .leading, spacing: 0) {
Text("Demo")
.font(.caption)
.fontWeight(.bold)
Rectangle().foregroundColor(.orange)
.frame(width: 84, height: 10)
}
.rotationEffect(Angle(degrees: 270.0))
VStack(alignment: .leading, spacing: 0) {
Text("Demo")
.font(.caption)
.fontWeight(.bold)
Rectangle().foregroundColor(.orange)
.frame(width: 84, height: 10)
}
.rotationEffect(Angle(degrees: 270.0))
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
And here's what it produces (sorry it's so huge):
How can I get the barGraphItems closer together?
How can I add the "Budget" line?
How can I make the whole business scrollable WITHOUT scrolling the Budget line?
I think the other elements onscreen I can suss out, but I've been fiddling with this bar graph widget all afternoon and I'm stumped.
The problem with applying rotation effect to complex container having many views is that layout of container does not change, so all other views affected by rotated container
It looks more appropriate different approach. The idea is to have plot bars as rectangles where height or rectangle show values, and label is a transformed overlay for such rectangle, thus rectangles form layout, and overlays do not affect anything (almost).
Tested with Xcode 11.4 / iOS 13.4
Note: the budget line can be added above plot scrollview by wrap both into ZStack.
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
VStack(alignment: .leading, spacing: 0) {
Text("Title above").font(.largeTitle)
ContentView()
Text("comment below")
}
}
}
struct ContentView: View {
var plotHeight: CGFloat = 120
// test with different lenth labels
let demos = ["Demo", "Demoos", "Demoooos", "Demooooooos"]
var body: some View {
ScrollView(.horizontal, showsIndicators: false) {
HStack(alignment: .bottom, spacing: 24) {
ForEach(0..<20) {_ in
Rectangle().foregroundColor(.orange)
.frame(width: 14, height: CGFloat.random(in: 0..<self.plotHeight)) // values for demo
.overlay(
Text(self.demos.randomElement()!) // values for demo
.font(.caption)
.fontWeight(.bold)
.fixedSize()
.rotationEffect(Angle(degrees: 270.0), anchor: .leading)
.offset(x: -8, y: 6) // align as/if needed here
, alignment: .bottomLeading)
}
}
.frame(height: plotHeight, alignment: .bottom)
.padding(.leading) // required offset for first label in scrollview
}
}
}
To answer your first question: "How can I get the barGraphItems closer together?"
I replaced your code with this:
-These changes fix the problem where your bars begin to be misaligned by adding .fixedSize() to the text.
-You can change the number of bars by increasing or decreasing the range in my for loop. This saves you from copy and pasting the same code.
-You were making several VStacks when you only needed one. This solved the spacing issue and now the bars will come out stuck together with 0 spacing as defined.
Hope this helps!
import SwiftUI
struct ContentView: View {
var body: some View {
HStack(alignment: .bottom, spacing: 0) {
VStack(alignment: .leading, spacing: 0) {
ForEach(0..<10) {_ in
Text("Demo")
.font(.caption)
.fontWeight(.bold)
.fixedSize()
Rectangle().foregroundColor(.orange)
.frame(width: 84, height: 10)
}
}
.rotationEffect(Angle(degrees: 270.0))
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}