My first meeting Swift-UI as a FrontEnd Developer
My first meeting Swift-UI as a FrontEnd Developer.
Today I’m gonna write about SwiftUI and talk about my first app developed by Swift UI.
I am trying to move to mobile development with Swift from a front-end developer. If you don’t know me, I am a front-end developer, developing communication apps with Web RTC, Angular js, and Cordova in a Turkish communication company.
I am going to compare Swift with React Js. For this blog, React knowledge good for you.
We are going to make a business card app step by step and discuss by comparing the React component structure and the new Swift UI.
For my first impression about Swift UI, I really like it and it is easier than the Storyboard. Developing with StoryBoard was really hard for me. I used to CSS. The storyboard was complicated for me. Some property just changing with code some of other with pannel. That was hard.
But Swift UI is like an Atomic design which is made with Components.
Before than start the application, I need to say I’m a newbie on Swift.
Let’s create a business app.
I think it is a wonderful feature that comes with Swift UI because the screen is dynamic when you change something the screen will update, awesome.
Delete the Text(“Hello, World!”). We need to set the background color. It’s really easy.
When you click the right corner plus button you will see a bunch of Control Views which is like Component in React or React Native. If I confused about it please guess about it, I can mix Component and Control Views. Typing color and drag and drop on the editor inside the
var body: some View {
}
For the color pick, I prefer this web site https://flatuicolors.com/ but we can’t use given hex code in Swift. (like #2ecc71 ) For the converting, you can use https://www.uicolor.io/
Color Control View needs parameter. Mine is UIColor(red: 0.09, green: 0.63, blue: 0.52, alpha: 1.00). When you applied the above steps you should see the Safe area. .edgesIgnoringSafeArea(.all) This code snippet will ignore safe area. And this point like React component’s props. If Color View Controller would be React component it’s like
<Color> </Color> High Order Component and if I want to ignore Safe Area probably I neet to send props like
<Color edgesIgnoringSafeArea={true}> </Color>
In Swift UI we are adding modifiers for this, there is more way. I think modifiers like React Components Props. I am thinking like there are a lot of components developed by Apple and Swift UI uses these components with modifiers and these modifiers like props.
My background Color is done, Now I need to add İmage. Again going to the right corner plus and type Image. Uppss , there was a problem, I can’t add the Image component without any Stack view.
We need to use ZStack, VStack, or HStack in the parent when we want to add multiple elements in one body.
ZStack means, This parent view stacks can make the child views on top of each other. Hence it creates overlapping content.
For the image adding, first, you need to add an image into your Assets.xcassets folder. After that, you can call directly with its name.
ZStack {
Color(UIColor(red: 0.09, green: 0.63, blue: 0.52, alpha: 1.00)).edgesIgnoringSafeArea(.all/)
Image(“myImageName”)
}
We need to add some modifiers to our image, you can find these things in the right corner plus the button in the modifiers tab, or If you know these modifiers you can directly write.
First resizable(), Second .aspectRatio(contentMode: .fit), Third one is clipShape(Circle()) it’s like borderRadius(%50), fourth .frame(width:150, height:150) and last one is .overlay(Circle().stroke(Color.white,lineWidth: 5)) it’s like padding in web.
Now I am going to add a new component InfoView.
Before creating InfoView, create Vertical Stack and add Image inside it.
The easiest way select all about Image and click command and left-click choose the Embed in VStack.
I am going to add my name and my title section before the infoView. For this, add Text(“My Name”) modifiers are.font, .bold, and .foregroundColor.
InfoView needs RoundedRectangle. It takes cornerRadios parameter, this parameter likes borderRadious in Web and we should set the frame again. For color .forgroundColor, for putting something inside rectangle we need to use .overlay and two item should in overlay into HStack because we need horizantel aligment.For the margin we can use .padding(.all) there is weird I know We have to use margin but their a sticky difference.
I need one more InfoView, for this coming swift UI beautify. If I want to create another of this view, I don’t have to retype all of these codes or copy-paste. Just I need to select code which is I want to reuse, command-click, and select Extract Subview.
Now my reusable components need props in React language, so I can use everywhere what I want to use.
As you can see I added some properties to my new struct InfoView.
Indeed, If I want to move my new struct to a new file. Right, Click to the app folder and select New File after that step, select SwiftUI View.
We are done thanks for reading.
