Facing issue in UI design with SwiftUI
I have been facing problems in UI design with SwiftUI. I feel UIKit is somewhat better when compared to SwiftUI because using SwiftUI I am not able to give proper spaces here every stack calculates spaces separately. I don't understand how to give spaces with its neighbour elements.
My major question is to get space from its neighbour element do we need to give leading space to be subtract its neighbour element width area?
For example, I have given image stack leading, top to 20 and width and height 100. Now if I want to add label leading to that image then do I need to give label leading spaces to -100? How spaces will work to give proper leading, trailing, top, bottom?
I made simple design like this using UIKit here if you take only top blue view person image to be top and leading to 20 and remaining labels and icons should be leading to that imageview to 15
Now I tried only top blue color design same in SwiftUI: I am new to UI so I tried this way. If there are any shortcuts please do let me know.
If any unnecessary code is there please let me know and please guide me how to write short codes using SwiftUI.
And could you please guide me how to embed stacks in one another. Is there any pattern to add one inside another?
With this code also I didn't get the proper design. Please guide me to fix it.
struct SecondView: View {
var body: some View {
ZStack{
Color.yellow.ignoresSafeArea()
ScrollView{
VStack{
ZStack {
Color.blue // Background color of the view
VStack{
HStack (){
Image(systemName: "person.circle.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 70, height: 70)
.padding(.leading, 10)
.padding(.top, 20)
Spacer()
}
Spacer()
}
VStack(spacing: 10){
Text("Jhon Thomas").foregroundColor(Color.white)
.padding(.bottom, 10).font(.system(size: 20))
HStack (){
Image(systemName: "phone.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 17, height: 17)
.padding(.leading, 10)
Text("0000000000").foregroundColor(Color.white)
}
HStack (){
Image(systemName: "bag.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 17, height: 17)
.padding(.leading, 10)
Text("Singer").foregroundColor(Color.white)
}
HStack (){
Image(systemName: "location.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 17, height: 17)
.padding(.leading, 10)
Text("test loc").foregroundColor(Color.white)
Spacer()
Image(systemName: "map.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 17, height: 17)
.padding(.leading, 10)
Text("Jhon Thomas").foregroundColor(Color.white)
}
}.padding()
// .padding(.leading, -80)
}.padding()
.frame(height: 200)
}
}
}
}
}
SwiftUI only blue colour design: how to make like above design all names and icons in same alignment and only leading 15 to imageview?
I'm here to help! First of all I would suggesto you learn the basics of SwiftUI going here: Intro to SwiftUI, and here: SwiftUI tutorial. Now, to the matter at hand. I started iOS developing with SwiftUI, and trust me, now that I've learnt and use UIKit daily for work there is no worse thing! About your code, there's a lot that can be improved. I took the chance to write some custom modifier to avoid repeating the same modifier for images over and over again. I removed redunant Stacks, created a resuable View for those repeating HStacks. I'm going to show you now:
struct SecondView: View {
var body: some View {
ZStack {
// This is ok but you can use .background() modifier too
//Color.yellow.ignoresSafeArea()
ScrollView {
HStack {
//Color.white // Background color of the view
VStack {
/// Alignment top to keep the imafge
HStack(alignment: .top) {
Image(systemName: "person.circle.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.modifier(ImageModifier(width: 70, height: 79))
.padding(.top, 20)
/// Removed this to avoid pushing the texts and icon to the right
//Spacer()
/// I used this line to show you the separations of two
Rectangle()
.background(.red)
.frame(width: 1)
}
/// I used the frame modifier instead
//Spacer()
}
/// I used this instead of the Spacer above to achieve the same result
.frame(maxHeight: .infinity, alignment: .top)
VStack(spacing: 10) {
Group {
Text("Jhon Thomas")
//.foregroundColor(Color.white)
/// Another way of setting padding. I had to use padding leading 10 to match the RowItems
.padding(EdgeInsets(top: 0, leading: 10, bottom: 10, trailing: 0))
.font(.system(size: 20))
RowItem(text: "000000000", icon: "phone.fill")
RowItem(text: "Singer", icon: "bag.fill")
}
.frame(maxWidth: .infinity, alignment: .leading)
HStack {
RowItem(text: "Jhon Thomas", icon: "location.fill")
Spacer()
RowItem(text: "Jhon Thomas", icon: "map.fill")
}
}
.frame(maxWidth: .infinity, alignment: .leading)
}
/// Padding placed here (before the frame) will push views to the inside. Modifier order matters in SwiftUI.
.padding()
.frame(height: 200)
/// Padding placed here will make this view larger. The default padding value is 16.
//.padding()
.background(.white)
.frame(maxWidth: .infinity, alignment: .leading)
}
}
.background(.yellow)
}
@ViewBuilder
private func RowItem(text: String, icon: String) -> some View {
HStack {
Image(systemName: icon)
.resizable()
.aspectRatio(contentMode: .fit)
.modifier(ImageModifier())
Text(text)
.foregroundStyle(.black)
}
}
}
And here's the custom modifier for Images:
struct ImageModifier: ViewModifier {
var width: CGFloat = 17
var height: CGFloat = 17
func body(content: Content) -> some View {
content
.frame(width: width, height: height)
.padding(.leading, 10)
}
}
This is, of course, to give you an idea of how to accomplish things in SwiftUI. If you now how to use it, you can build UIs really really fast. My point of view is that it gives you almost unlimited possibilities to control every pixel on the screen.
Going into the detail of what I did is that I replaced Spacers with frame modifier specifying the maxWidth or maxHeight to take all the available space. The frame modifier also allows you to specify the alignment. Also, unless you are targetting iOS 14 you can use foregroundStyle to modify the color of the View. For the backgorund you can do basically the same, there's a background modifier too. The background modifier is used to draw things below the view it is appplied to, while the overlay modifier draws on top. You can use the @ViewBuilder macro to create functions that returns Views. I have an answere here that talks about it: ViewBuilder.
There's too much to say, but the best you can do is getting your hands dirty and code a lot! I hope my answer was useful to you friend!
- Why does adding this Flutter widget make the app not responsive to mouse clicks?
- Is there a way of clearing the window and rebuilding it?
- How can i Resize text and add Icon to RexUI panel?
- In persistent_bottom_nav_bar , I am using it's style15 And in navbardecoration i have applied borderRadius But it don't take it.I have tried Stack
- How do I read user input in uefi-rs (UEFI Rust wrapper)
- Flutter onTap method for Containers
- how to add an icon in Dismissible in flutter?
- How to visualize data from google protocol buffer?
- SVG not taking full width of container div
- Hovering over menu items on a ListTile highlights the list item that contains it and does not go away
- Customizing pygtk file chooser dialog
- PyQt5 with QSpliter and multi-level tabs
- How to clean up the program when exiting javafx program?
- Keycloak: Not able to load admin GUI/console
- Removing extra spacing around QWidget
- Screen resolution scale in JavaFx game
- SAP GUI Script: Set focus on Input Field in order to SendKeys
- I can't write a string variable to my file using fstream
- How to disable splash highlight of FlatButton in Flutter?
- Creating Popup Options Box with multiple buttons
- In ASP.NET Core Blazor with a download controller, is there a way to update a progress bar back to the page?
- Qt GUI environment in a DLL (VST Plugin)
- Input string name graphically, directly on figure via matplotlib
- How do I use tkraise on another frame class in Tkinter
- How to disable VSCode's tab highlighting for files with problems?
- cross platform native open/save file dialogs
- Create a rounded button / button with border-radius in Flutter
- Affecting ContentSizeFitter when resizing child object
- flutter: how to decrease the roundness of stadium border radius
- StarterGUI won't fill screen