I am rewriting the existing UIKit cell using SwiftUI. The problem is Spacer() cuts Text() and shows less text than the UIKit version (Ethereum C... vs Ethere...). The goal is to have the graph always in the same position in all cells and show more symbols in Text().
var body: some View {
VStack(alignment: .center) {
ZStack {
HStack(spacing: .designSystem(.small)) {
KFImage(viewModel.tradable.logoURL)
.serialize(by: SVGCacheSerializer())
.setProcessor(SVGProcessor())
.scaleFactor(Layout.scaleFactor)
.resizable()
.placeholder {
Circle()
.fill(Color(viewModel.tradable.placeholderColor == nil ? .gray : UIColor(hex: viewModel.tradable.placeholderColor!)))
}
.frame(width: Layout.imageWidth, height: Layout.imageHeight)
.clipShape(RoundedRectangle(cornerRadius: Layout.imageWidth / 2))
.overlay(RoundedRectangle(cornerRadius: Layout.imageWidth / 2).stroke(.white, lineWidth: 2 / UIScreen.main.scale))
VStack(alignment: .leading, spacing: .designSystem(.extraSmall3)) {
Text(viewModel.name).font(.subheadline).fontWeight(.semibold).lineLimit(1)
Text(viewModel.symbol).font(.caption2).foregroundColor(Color(ThemeManager.current.neutral50))
}
Spacer()
AssetLineChartViewRepresentable(viewModel: chartViewModel).frame(width: 65, height: 20)
Spacer()
VStack(alignment: .trailing, spacing: .designSystem(.extraSmall3)) {
percentChangeView(assetPercentChangeType: viewModel.assetPercentChangeType)
Text(viewModel.priceString).font(.caption2).foregroundColor(Color(ThemeManager.current.neutral50))
}
}
.padding([.leading, .trailing])
if !viewModel.shouldHideSeparator {
VStack {
Spacer()
Divider().padding(.leading)
}
}
}
}
.frame(height: Layout.frameHeight)
.background(
backgroundView(assetPositionType: viewModel.corners)
)
}
Removing Spacer()
Related
I'm trying to put a number of DateCardViews inside a ScrollView as shown below
How do I fix the alignment DateCardView, so all DateCardViews are anchored to the top and start at the same level?
var body: some View {
VStack(alignment: .leading, spacing: 0) {
ScrollView(.horizontal, showsIndicators: false) {
HStack(alignment: .top) {
ForEach(dates.prefix(8), id: \.id) { date in
DateCardView(meetDate: date)
}
}
.padding(.horizontal, 16.0)
}
.padding(.bottom, 20.0)
}
}
struct DateCardView: View {
#State var meetDate: MeetDate
#State var swap = false
var isExpired: Bool {
Date.isAboutToExpire(date: meetDate.date)
}
var body: some View {
VStack {
Image(swap ? meetDate.user.profileImages.first! : meetDate.bgIamge)
.resizable()
.cornerRadius(16)
.overlay(
Image((swap ? meetDate.bgIamge : meetDate.user.profileImages.first!))
.resizable()
.cornerRadius(6)
.frame(width: 32, height: 40)
.padding(.bottom, 8)
.padding(.trailing, 8)
.onTapGesture {
swap.toggle()
}, alignment: .bottomTrailing
)
.frame(height: 154)
VStack(alignment: .leading) {
HStack {
Text(meetDate.title)
.font(.custom("SFCompactText-Medium", size: 18))
.lineLimit(2)
}
HStack {
Text(Date.yearString(date: meetDate.date))
Text(Date.timeString(date: meetDate.date))
.foregroundColor(isExpired ? Color("Expired") : Color.black)
Spacer()
}.font(.custom("SFCompactText-Medium", size: 14))
HStack {
Text(meetDate.length)
.font(.custom("SFCompactText-Medium", size: 12))
Text(meetDate.cost)
.font(.custom("SFCompactText-Medium", size: 12))
.foregroundColor(Color("cost"))
}
}
}.frame(width: 138, height: 235)
}
}
You can probably fix this by adding a Spacer at the bottom of your outer VStack, but as the code in your question won't compile I can't test it,
VStack {
Image(swap ? meetDate.user.profileImages.first! : meetDate.bgIamge)
//
VStack(alignment: .leading) {
// etc
}
Spacer(minLength: 0)
}.frame(width: 138, height: 235)
You can add Spacer() in your Vstack. I think that will work or you can change your alingment values.
VStack(alignment: .leading) {
//your code
Spacer()
}
I need to add two different types of view in same grid view, there is an alignment issue between these view as shown in give image below. The view which contains image is taking more space from top and bottom even after fixing the size
struct TestView: View {
#StateObject var vm = BusinessProfileViewModel()
#Environment(\.presentationMode) private var presentationMode
let columns = [
GridItem(.flexible(minimum: 100), spacing: 20),
GridItem(.flexible(minimum: 100), spacing: 20)
]
var body: some View {
loadView()
}
}
extension TestView {
func loadView() -> some View {
GeometryReader { geometry in
ZStack(alignment: .bottomTrailing) {
ScrollView(.vertical, showsIndicators: false) {
topBusinessImage(geometry: geometry)
VStack {
featureProduct(geometry: geometry)
}.padding()
}.edgesIgnoringSafeArea(.top)
}
}
}
func topBusinessImage(geometry: GeometryProxy) -> some View {
VStack(spacing: 0) {
// Profile Image Stack
// Banner Zstack
ZStack (alignment: .top) {
Image(ImageName.productPlaceholder.rawValue)
.resizable()
.frame(height: geometry.size.height / 2.5)
}
}
}
func featureProduct(geometry: GeometryProxy) -> some View {
VStack(alignment: .leading) {
// product and services button
HStack {
Text("Products & Services")
.font(.custom(Popins.bold.rawValue, size: 20))
Spacer()
Button {
print("list")
} label: {
Image(ImageName.list.rawValue)
.resizable()
.frame(width: 24, height: 24)
}.padding(5)
}
LazyVGrid(columns: columns, spacing: 30) {
BusinessProductCell()
ProductOnlyDetailCell()
ProductOnlyDetailCell()
BusinessProductCell()
}
}
}
}
struct TestView_Previews: PreviewProvider {
static var previews: some View {
TestView()
}
}
view that contains image
import SwiftUI
struct BusinessProductCell: View {
var body: some View {
loadView()
}
}
extension BusinessProductCell {
func loadView() -> some View {
VStack(alignment: .leading) {
ZStack(alignment: .topLeading) {
Image(ImageName.business.rawValue)
.resizable()
.frame(height: 205)
.cornerRadius(10)
HStack {
Button {
print("fav")
} label: {
Image(systemName: "heart.fill")
.resizable()
.scaledToFit()
.foregroundColor(UnifiedColor.blue)
.frame(width: 20, height: 20)
}.padding()
Spacer()
Button {
print("fav")
} label: {
Image(systemName: "ellipsis")
.resizable()
.scaledToFit()
.frame(width: 20)
.foregroundColor(.white)
}.padding()
}
}
Text("Dove Body Care")
.foregroundColor(.black)
.font(.custom(Popins.medium.rawValue, size: 16))
HStack {
Text("$49.99")
.font(.custom(Popins.medium.rawValue, size: 12))
.foregroundColor(UnifiedColor.textBlue)
Spacer()
HStack {
Text("(286 Favorites)")
.font(.custom(Popins.regular.rawValue, size: 8))
.foregroundColor(.gray)
Image(ImageName.heart_line.rawValue)
.resizable()
.frame(width: 15, height: 15)
}
}
}
}
}
struct BusinessProductCell_Previews: PreviewProvider {
static var previews: some View {
BusinessProductCell()
.frame(width: 200, height: 250)
}
}
View that only contains text or second view for gird view
struct ProductOnlyDetailCell: View {
var body: some View {
loadView()
}
}
extension ProductOnlyDetailCell {
func loadView() -> some View {
VStack(alignment: .leading, spacing: 10) {
HStack {
Image(ImageName.productPlaceholder.rawValue)
.resizable()
.scaledToFill()
.frame(width: 24, height: 24)
.clipShape(Circle())
.overlay {
Circle().stroke(.white, lineWidth: 1)
}
Text("Anton Jr.")
.font(.custom(Popins.regular.rawValue, size: 12 ))
.foregroundColor(.black)
.lineLimit(1)
Spacer()
Button {
print("more btn")
} label: {
Image(systemName: "ellipsis")
.resizable()
.foregroundColor(.black)
.frame(width: 18, height: 4)
.padding([.trailing, .top, .bottom])
}
}
Text("DJ for night")
.font(.custom(Popins.bold.rawValue, size: 14))
.foregroundColor(.black)
Text("Lorem ipsum dolor sitamet, consectetur adipiscingelit. Lectus idcommodoegestas metusinterdum dolor.")
.multilineTextAlignment(.leading)
.font(.custom(Popins.regular.rawValue, size: 12))
.foregroundColor(.black)
.opacity(0.8)
Spacer()
HStack (spacing: 0){
Text("$15K")
.font(.custom(Popins.bold.rawValue, size: 14))
.foregroundColor(.black)
Text("/")
.font(.custom(Popins.bold.rawValue, size: 14))
.foregroundColor(.gray)
Text("Night")
.font(.custom(Popins.regular.rawValue, size: 14))
.foregroundColor(.gray)
}
Text("25 minute ago")
.font(.custom(Popins.regular.rawValue, size: 10))
.foregroundColor(.gray)
}
.padding(10)
.background(
RoundedRectangle(cornerRadius: 10)
.foregroundColor(.gray.opacity(0.1))
)
}
}
So I have an HStack nested inside of a VStack inside of a ScrollView and I am trying to center the middle photos in a straight line. As you can see in the photo, the pictures are offset based on the size of the text label to the left. (The longer the word, the more the images are offset to the right). I want to have the images be centered in the middle of the HStack in a way where they are all perfectly aligned on top of each other.
The format of the HStack should be (Label - Image - Label) and I want the two labels to be on the far left/right of the image touching the sides of the screen.
I am currently using two Spacer() to do the job but it creates an offset.
Here is what it looks like right now (unaligned)
Here is the code of my view that holds the scrollview and vstack:
ScrollView(.vertical){
VStack(alignment: .center, spacing: 5){
ForEach(weatherViewModel.dailyDataArray){
DailyCell(dailyData: $0)
.background(Color.clear)
.padding(10)
}
}
}
And here is the code for my CellView
struct DailyCell: View {
let dailyData: DailyData
var body: some View {
HStack(alignment: .center){
Text(dailyData.time)
.fontWeight(.semibold)
.foregroundColor(Color(UIColor.white))
.font(.system(size: 16))
Spacer()
Image(dailyData.icon)
.resizable()
.scaledToFit()
.frame(width: 25, height: 25, alignment: .center)
.multilineTextAlignment(.leading)
Spacer()
HStack(spacing: 10){
Text(dailyData.lowtemp + "°")
.fontWeight(.regular)
.foregroundColor(Color(UIColor.white))
.font(.system(size: 16))
Text(dailyData.hightemp + "°")
.fontWeight(.regular)
.foregroundColor(Color(UIColor.white))
.font(.system(size: 16))
}
}
}
}
Wrapping everything in a geometryreader and assigning relative width to your textviews should do the trick:
var body: some View {
//decide which image to show
GeometryReader{ readerProxy in <- add this
HStack(alignment: .center){
Text(dailyData.time)
.fontWeight(.semibold)
.foregroundColor(Color(UIColor.white))
.font(.system(size: 16))
.frame(width: readerProxy.size.width / 3, alignment: .left) <- add this
Spacer()
Image(dailyData.icon)
.resizable()
.scaledToFit()
.frame(width: 25, height: 25, alignment: .center)
.multilineTextAlignment(.leading)
Spacer()
HStack(spacing: 10){
Text(dailyData.lowtemp + "°")
.fontWeight(.regular)
.foregroundColor(Color(UIColor.white))
.font(.system(size: 16))
Text(dailyData.hightemp + "°")
.fontWeight(.regular)
.foregroundColor(Color(UIColor.white))
.font(.system(size: 16))
}
.frame(width: readerProxy.size.width / 3, alignment: .right) <- add this
}
}
}
One possibility is to use LazyVGrid :
struct HStackCenterCell: View {
var weatherViewModel = WeatherViewModel();
let columns: [GridItem] = Array(repeating: .init(.flexible()), count: 3) // 3 columns LazyVGrid
var body: some View {
ScrollView(.vertical){
// Lazy grid to have columns
LazyVGrid(columns: columns) {
ForEach(weatherViewModel.dailyDataArray){
DailyCell(dailyData: $0)
.background(Color.clear)
.padding(10)
}
}
}
}
}
struct DailyCell: View {
let dailyData: DailyData
var body: some View {
// need to suppress global HStack and Spacers
HStack { // HStack to align day on left
Text(dailyData.time)
.fontWeight(.semibold)
.font(.system(size: 16)).multilineTextAlignment(.leading)
Spacer()
}
// For my tests i used SF symbols
Image(systemName: dailyData.icon)
.resizable()
.scaledToFit()
.frame(width: 25, height: 25, alignment: .center)
.multilineTextAlignment(.leading)
HStack(spacing: 10)
{
Text(dailyData.lowtemp + "°")
.fontWeight(.regular)
.font(.system(size: 16))
Text(dailyData.hightemp + "°")
.fontWeight(.regular)
.font(.system(size: 16))
}
}
Note : I removed white foreground because my background is white
I'm trying to make the circles fit into the HStack such that the HStack size does not increase.
How can I make the circles fit without specifying a fixed frame?
struct ContentView: View {
var body: some View {
NavigationView {
Form {
HStack {
Circle()
.fill(Color.red)
.aspectRatio(1, contentMode: .fit)
Text("Hello")
}
HStack {
Circle()
.fill(Color.blue)
.aspectRatio(1, contentMode: .fit)
Text("Hello")
}
}
}
}
}
Here is a sample of various containers to chose from. SwiftUI will do all the layout, automatically handle rotations and device resolutions.
struct CirclesView: View {
var body: some View {
VStack(spacing: 0) {
Label("Circles", systemImage: "circle").font(.system(size: 24, weight: .black, design: .rounded)).foregroundColor(.pink)
HStack {
Circle()
.foregroundColor(.yellow)
.frame(width: 32, height: 32)
Text("This is a yellow circle")
Spacer()
}
Circle()
.foregroundColor(.orange)
.shadow(radius: 10)
.frame(width: 75)
Divider()
HStack {
VStack {
Circle().foregroundColor(.blue)
Text("Blue").font(.title3)
HStack {
Circle().foregroundColor(.purple)
Text("Purple").font(.caption)
}
}
.padding()
.background(Color.yellow)
ZStack(alignment: Alignment(horizontal: .center, vertical: .center)) {
Circle().foregroundColor(.green)
Text("Green").foregroundColor(.primary)
}
}
}
}
}
I have a large circle and next to that circle I would like to display 2 Texts 1 underneath each other . If you look at the image below I was able to successfully complete this in UIKit . In SwiftUi I almost have it except that the date text line is starting after the bottom of the circle . I would like it so that the date appears right underneath the name just like in UIKit . I have been trying different things but no luck this is my code, any suggestions would be great
VStack(alignment: .leading,spacing: 0) {
HStack() {
Circle()
.fill(Color(TypeBackGroundColor(type: value.color)))
.frame(width: 40.0, height: 40.0)
HStack() {
Text("\(value.fullname)")
.font(.system(size: 15))
.bold()
.onTapGesture {
print("FullName Clicked")
}
}.padding(.leading, 13)
}.padding(.leading, 20)
HStack(spacing: 1) {
Text("\(value.time)")
.foregroundColor(Color(UIColor.gray))
.font(.system(size: 12))
.bold()
}.padding(.leading, 80)
}
This is how I have it in UIKit
This is how it currently is in SwiftUI
The outermost view should be an HStack, rather than a VStack. On the left there is the circle, and on the right there is a VStack with two Texts:
HStack {
Circle()
.fill(Color.orange)
.frame(width: 40.0, height: 40.0)
VStack(alignment: .leading, spacing: 1) {
Text("Full Name")
.font(.system(size: 15))
.bold()
Text("May 14, 2020 | Sports")
.foregroundColor(Color.gray)
.font(.system(size: 12))
.bold()
}
}
struct ContentView: View {
var body: some View {
HStack {
ZStack {
Circle()
.fill(Color.orange)
.frame(width: 40.0, height: 40.0)
Text("LD")
.bold()
}
VStack(alignment: .leading, spacing: 1) {
Text("Luffy D")
.font(.system(size: 16))
.bold()
Text("MM DD, YYYY | Type")
.foregroundColor(Color(UIColor.gray))
.font(.system(size: 12))
.bold()
}
}
}
}
Result: