Playing with SwiftUI Part-1
Updates:
Part 2- Playing with TextField, SegmentControl,Toggle and Slider, Stepper in SwiftUI.
Part 3- Playing with Containers like VStack, HStack and ZStack in SwiftUI
In Intro to SwiftUI, we discussed the declarative UI programming style.
All UIKit controls are well-known to all the developers. Moreover, SwiftUI is a fully brand-new UI framework. Therefore, let’s know the UIKit equivalent controls in SwiftUI.
In this article we will be covering Text, Button and Image view ʘ‿ʘ
🖇️ Text
ʘ‿ʘʘ‿ʘʘ‿ʘʘ‿ʘ
Let’s play with Text ʘ‿ʘʘ‿ʘʘ‿ʘʘ‿ʘ
A view that displays one or more lines of read-only text.
☞ To show a simple text
Text("Hello World")
☞ Text with custom font
Text("Hello World").font(.custom("Helvetica-Bold", size: 30))
☞ Add different styles like font, font weight and color using powerful modifiers
Text("Hello World").font(.title) // font style.fontWeight(.thin) // text thickness.color(.gray) // Text color.padding(.all) // padding from all sides
☞ Add double padding to Text and background color
Text("Hello World").color(.gray).padding() // padding from all sides.padding() // padding on padding from all sides.background(Color.yellow)
Just pay little attention to the .color() & .background() modifiers. The .color() takes Color as a parameter and .background() takes View as an parameter.
☞ Add round boarder to Text
Text("Hello World").padding().border(Color.red, width: 4, cornerRadius: 16) //border to this view
☞ Color full boarders to the Text
Text("Hello World").font(.largeTitle).foregroundColor(.white).padding().background(Color.blue).padding().background(Color.green).padding().background(Color.red)
☞ Add more styling to Text
Text("Hello World with kerning").kerning(5) // The amount of spacing to use between individual characters in this text..baselineOffset(5) // The amount to shift the text vertically (up or down) in relation to its baseline..bold() // Bold Text.italic() // Italic Text.strikethrough(true, color: .red) // strikethrough and color for it..underline() // underline.allowsTightening(true) //Sets whether text in this view can compress the space between characters when necessary to fit text in a line..opacity(0.6) //Transparency of this view..cornerRadius(1)
☞ Add multiline support with custom RGB color value
Text("Hello World with heavy weight font with custom yellow color, having 2 number of lines and padding from leading")//.font(Font("Helvetica", size: 12)).fontWeight(.heavy).color(Color.init(red: 255/255, green: 200/255, blue: 2/255)).lineLimit(2).padding(.leading)
NOTE: Issue observed when lineLimit is 2 it displays text in 1 line. In case, lineLimit is 3 it works perfectly fine.
☞ Multilin Text with custom line spacing
Text("Text Hello World with ultra light weight font with custom green color, multiiline text with leading alignment, having infinite number of lines and padding from all the sides.").font(.subheadline).fontWeight(.ultraLight).color(Color.init(red: 25/255, green: 200/255, blue: 2/255)).multilineTextAlignment(.leading).lineLimit(nil).lineSpacing(20).padding(.all
Tips:
While working SwiftUI framework you have to be very patient most of the time. Errors are not developer friendly at this moment.
Example:
Text("Hello World").font(.custom("Helvetica-Bold", size: 30)).padding(.leading).background(.red)
It’s shows an error “Function declares an opaque return type, but has no return statements in its body from which to infer an underlying type”
.background() modifier takes a view as argument and not the Color.
🖇️ Button
ʘ‿ʘʘ‿ʘʘ‿ʘʘ‿ʘ
Let’s play with Button ʘ‿ʘʘ‿ʘʘ‿ʘʘ‿ʘ
A control that performs an action when triggered.
☞ To show a simple Button
struct SimpleButton: View {@State var title: Stringvar body: some View {VStack {Button(action: {self.title = "Plan button"}) {Text("Click Me")}
}
}
}
☞ To show a Button with background color
struct SimpleButton: View {@State var title: Stringvar body: some View {Button(action: {self.title = "Background button"}) {Text("Click Me").padding().background(Color.yellow)}}}}
☞ To show a Button with border
struct ButtonWithBorder: View {@State var title: Stringvar body: some View {Button(action: {self.title = "Tapped"}) {Text("Click Me").font(.title).color(.green).padding().border(Color.red, width: 4, cornerRadius: 10)}.padding(.top) // Adding padding to top}}
☞ To show a Button with system icon (SF Symbol) at left, right, top and bottom
struct ButtonWithIcon: View {@State var title: Stringvar body: some View {HStack {//Button with icon at bootomButton(action: {self.title = "Button with icon at bootom"}) {Text("Book")Image(systemName: "book.fill")}.padding()//Button with icon at top with borderButton(action: {self.title = "Button with icon at top"}) {Image(systemName: "book.fill")Text("Book")}.padding().border(Color.green, width: 1, cornerRadius: 10)//Button with icon at leftButton(action: {self.title = "Button with icon at left"}) {HStack{Image(systemName: "book.fill")Text("Book").fontWeight(.light)}}.padding()// Button with icon at rightButton(action: {self.title = "Button with icon at right"}) {HStack{Text("Book").fontWeight(.light)Image(systemName: "book.fill")}}.padding()}}}
☞ To show a Button with only image
struct ButtonWithOnlyImage: View {@State var title: Stringvar body: some View {//Button(action: {self.title = "Star"}) {Image(systemName: "star.fill").imageScale(.small)}}}
🖇️ Image
ʘ‿ʘʘ‿ʘʘ‿ʘʘ‿ʘ
Let’s play with Image ʘ‿ʘʘ‿ʘʘ‿ʘʘ‿ʘ
A view that displays an environment-dependent image.
☞ To show a simple Image
struct SimpleImage: View {var body: some View {Image("apple-watch")}}
☞ To show a system icon
struct SystemIconImage: View {var body: some View {Image(systemName: "faceid").font(.title)}}
☞ To show a system icon with custom size
struct SystemIconImageWithStyle: View {var body: some View {Image(systemName: "faceid").foregroundColor(.blue).font(.system(size: 100))}}
☞ To show a system icon with blur effect and foreground color
struct SystemIconImageWithStyleBlur: View {var body: some View {Image(systemName: "person.icloud.fill").blur(radius: 1).foregroundColor(.yellow).font(.largeTitle)}}
☞ To show a large image
struct StyledImage: View {var body: some View {Image("turtlerock").resizable().aspectRatio(contentMode: .fill)}}
☞ To show a large image with defined frame
struct ImageWithCustomSize: View {var body: some View {Image("landmark").resizable().frame(width: 100, height: 100, alignment: .center)}}
Hope it will give glims of what you can make with SwiftUI…
We have much more to cover in coming articles…. Stay tune…..