Make writing a habit together! This is the third day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.
Foreword: Writing is a kind of hone, watching a word on the Internet, there is a kind of indescribable satisfaction. I had done a series of product manager videos in B station, and this time I wanted to do a series of articles on development in Nuggets.
Today’s Career statement: In any situation, you need to look for the good in others. But in learning from others, don’t forget your own personal qualities, because that is your strength.
In interface development, it is common to see a page with many UI controls, such as text and images up and down, left and right, or text in the middle of the image. These so-called permutations can be collectively referred to as stacks.
In this chapter, you will learn how to use stack views, including VStack vertical view, HStack horizontal view, and ZStack Overlay view.
VStack: Views are arranged vertically.
HStack: Views are arranged horizontally.
ZStack: View overlay arrangement;
The following legend can quickly help you understand and remember these three views:
Let’s try to complete the following UI example.
First, let’s create a new project called SwiftUIStacks.
Let’s break down the UI diagram into two parts: title and payment plan.
The first is the title section, which looks like the following prototype:
The title section consists of two texts: Text(” Membership package “) and Text(” Unlock advanced features “).
We use VStack{} to “wrap” the two texts together.
Headings can be embellished with additional styles, such as weight, size and so on.
VStack {Text(" member package ").fontweight (.bold).font(.system(.title)) Text(" unlock advanced features ").fontweight (.bold).font(.system(.title)) }Copy the code
The default view of the Stack is center aligned. If you align it left like in the UI, you can add the alignment parameter to the vertical view of the VStack.
In addition, we want spacing between two texts to be a bit wider. We can set spacing using the spacing parameter spacing.
| parameter | The name of the | describe |
|---|---|---|
| alignment | The middle way | .leading left aligned,.trailing right aligned,.center centered |
| spacing | spacing | Interval, the distance between components |
VStack(alignment: .leading,spacing: Font (.system(.title)) Text(" unlock advanced features ").fontweight (.bold).font(.system(.title))} 10) {Text(" membership package ").fontweight (.bold).font(.system(.title))}Copy the code
Ok, we have finished the title part!
We found that the title and the pricing plan below are arranged above and below, so we can wrap it with a VStack first.
Note in particular: the lack of Stack packages between components, then the system does not know what it is arranged, will report an error.
By moving the mouse over the VStack, holding down the command key on the keyboard and clicking the mouse, we can see that Xcode provides a shortcut for programming actions.
We select Embed in VStack, so we will wrap VStack around the previous VStack.
The advantage of doing this is that we often don’t know what code “{}” is wrapped in when there are too many codes in programming, or we may miss the “} “at the end.
Here we can first note the Stack wrapped code block, so that we can find the start and end position of the code block.
VStack {// heading VStack(alignment:.leading,spacing: Font (.system(.title)) Text(" unlock advanced features ").fontweight (.bold).font(.system(.title))} 10) {Text(" membership package ").fontweight (.bold).font(.system(.title))} // Pricing plan}Copy the code
Now let’s do the part of the payment plan.
First analyze the UI draft, we can see that there are three pricing schemes, we see the size is basically the same, using HStack horizontal layout.
Let’s do an example of a single pricing scheme, then copy the other two and change the color.
We’re going to ignore the “first month special” style here, because it uses ZStack, so it’s last.
After analyzing the single pricing plan, we found that Text(” continuous monthly package “) and Text(” 18 “) can still be arranged vertically by VStack.
And outside of this VStack, you can see that it’s got the padding, the background color, the background, the rounded corners, the cornerRadius.
VStack {Text(" consecutive months ").fontweight (.bold).font(.system(size: ForegroundColor (.gray) Text("¥18").fontweight (.bold).font(.system(size: 30)) .foregroundColor(.red) } .padding(20) .background(Color.orange) .cornerRadius(10)Copy the code
After running the code, I found that it was a bit different from the UI draft, because the system color used was very different from the UI design draft.
We need to use the same color as the UI design draft. There are two ways to set the color, one is to use RGB color value, the other is to import the color in assets. xcassets and then reference it.
Use RGB color values as follows:
VStack {Text(" continuous month ").fontweight (.bold).font(.system(size: 17)).foregroundcolor (Color(red: 190/255, green: Font (.system(size: 30)).foregroundcolor (Color(red: red)) Text(" 30 ").fontweight (.bold).font(.system(size: 30)).foregroundcolor (Color(red: red) 239/255, green: 129/255, blue: 112/255)) } .padding(20) .background(Color(red: 250/255, green: 247/255, blue: 243/255)) .cornerRadius(10)Copy the code
Import colors as follows:
Click Assets, click the “+” button at the bottom, and select Color Set (or right mouse button).
For easy memorization, we can use the color value as the name, or we can use other easy to remember names.
Select Any Appearance, which is the default color, and Dark is for Dark mode, which Apple requires apps to be in Dark mode.
Click on the “Settings” TAB at the top of the left side and click on the Show Color Panel under Color. The Color option popup window will open.
We can set the RGB Color, or we can use the Hex Color setting. Here we set the Hex Color to FAF7F3.
Go back to the contentView. swift file and change the VStack background Color to Color(” faf7F3 “), entering the Color name we imported earlier in Color().
So we can reference the color that we typed in.
Both methods can be used in actual business development, mainly depending on personal habits, there is no pros and cons.
Let’s go back to programming the pricing scheme.
We can see that the continuous monthly pricing plan has a rounded border, which we might recall from the.border() argument we learned earlier in Text.
Let’s see what happens.
VStack {Text(" continuous month ").fontweight (.bold).font(.system(size: 17)).foregroundcolor (Color(red: 190/255, green: Font (.system(size: 30)).foregroundcolor (Color(red: red)) Text(" 30 ").fontweight (.bold).font(.system(size: 30)).foregroundcolor (Color(red: red) 239/255, green: 129/255, blue: 112/255)) } .padding(20) .background(Color("faf7f3")) .border(Color(red: 202/255, green: 169/255, blue: 106/255),width: 2) .cornerRadius(10)Copy the code
First, popularize a knowledge point.
You’ll notice in the programming area that we put the.border() code in front of the.cornerradius (10).
This is because in SwiftUI, modifiers are performed sequentially, i.e. we have the border first, and then we make the border 10 degree rounded.
If we have a rounded corner and then a border, then we will get the inside of the spread color is rounded, but the border is a right Angle, let’s try it out.
Another thing we see in the simulator is that four corners are missing from the rounded border.
This is because SwiftUI defaults to maskToBounds, so the rounded corners will be clipped.
Instead of setting it this way, we can use the.overlay() modifier we learned earlier to “overlay” a rounded corner.
VStack {Text(" continuous month ").fontweight (.bold).font(.system(size: 17)).foregroundcolor (Color(red: 190/255, green: Font (.system(size: 30)).foregroundcolor (Color(red: red)) Text(" 30 ").fontweight (.bold).font(.system(size: 30)).foregroundcolor (Color(red: red) 239 / 255, green: 129 / 255, blue: 112 / 255)) } .padding(20) .background(Color("faf7f3")) .overlay(RoundedRectangle(cornerRadius: 6).stroke(Color(red: 202 / 255, green: 169 / 255, blue: 106 / 255), lineWidth: 2))Copy the code
Overlay (RoundedRectangle(cornerRadius: 6). Stroke (Color(red: 202/255, green: 169/255, blue: overlay(RoundedRectangle(cornerRadius: 6)). 106/255), lineWidth: 2) Looks very long, don’t worry, let’s understand it.
RoundedRectangle() : Rectangle with rounded corners;
CornerRadius: degree of roundness;
It’s a stroke.
Color C.
LineWidth: lineWidth;
Read the code in natural language: Add a rounded corner to the view and a colored wireframe to the rounded corner.
Ok, we’ve finished programming our first pricing scheme!
This knowledge point is a bit too much, just separate two chapters to write, please look forward to the next part!