A, goals,

Simulate the layout of wechat and use SwiftUI to copy the wechat App.

Second, the train of thought

  • First of all,

Select the area in red as the Navigation area.

  • The second

The area selected in blue is the ContentView.

  • The last

The area selected in green is a TabView.

In fact, as the App TAB, the priority is to do, it is wechat, address book, find and MY four page navigation buttons. By clicking the navigation button on the TabView, you can jump to the corresponding page.

Three,TabViewTAB.

In SwiftUI, TabView is an officially defined generic component.

As the body of the component, the TabView wraps the navigation buttons and the corresponding page for the navigation.

For example, in The case of The document, Text(“The First Tab”) is The corresponding page for The navigation.

The navigation buttons are wrapped in. TabItem.

The following figure

So, back to the theme, change the navigation button to get the following code:

TabView {
    Text("Wechat Page")
        .tabItem {
            Image(systemName: "message.fill")
            Text("WeChat")}Text("Address Book Page")
        .tabItem {
            Image(systemName: "person.2.fill")
            Text("Address book")}Text("Discovery Page")
        .tabItem {
            Image(systemName: "location.circle")
            Text("Discovered")}Text("My page")
        .tabItem {
            Image(systemName: "person")
            Text("我")}}Copy the code

Results the following

Please ignore the inconsistency of ICONS. By default, ICONS are used in the SF Symbols icon library, which is a set of icon library officially defined by Apple. There are about 1500 ICONS. Of course, you can create Custom Symbol Images for Your App by Creating Custom Symbol Images for Your App. Once imported into Xcode, you can use Your SF Symbols as the built-in ICONS.

Four,Navigationnavigation

After setting up the TAB, go back to the beginning of the article and implement the navigation area next.

In SwiftUI, NavigationView allows you to convert wrapped View components into navigable ones (with NavigationLink, you can jump to the page, but for now).

You then set the navigation properties to achieve your goal. The code is as follows:

NavigationView{
    Text("Wechat Page")
        .navigationTitle("WeChat")
        .navigationBarItems(leading: Text("· ·"), trailing: Image(systemName: "plus.circle"))
        .navigationBarTitleDisplayMode(.inline)
}.tabItem {
    Image(systemName: "message.fill")
    Text("WeChat")}Copy the code
  • .navigationTitleSetting the navigation title
  • .navigationBarItemsSet left and right navigation buttons
  • .navigationBarTitleDisplayModeSet the navigation area display mode. The default is.automaticThe navigation area is not displayed and only reappears when you swipe the page..inlineThe navigation area is directly displayed.

Now let’s look at the actual effect:

V. Content layout

Forget about lists, let’s look at the layout of each list.

First, divide the horizontal area into two pieces. 1 is the picture, 2 is the content.

In SwiftUI, use the HStack to lay out components in the horizontal layout.

The simulation code is as follows:

HStack{
    Image(a)Content()}Copy the code

Second, break up the content. It is divided into three vertical blocks, with the publisher dianping, Spacer() and the date 2021/7/31 at the top. The middle is the latest news must eat the list released…… With a Divider() at the bottom.

In SwiftUI, use the VStack to lay out components, set the vertical layout, and combine it with the HStack.

The simulation code is as follows:

VStack{
    HStack{
        Text(Yelp.)
        Spacer(a)Text("2021/7/31")}Text("Must Eat list published......")
    Divider()}Copy the code

After adjusting the color, text size, padding, etc., the final code is as follows:

HStack{
    Image("dzdp").resizable().scaledToFill().frame(width: 75, height: 75).cornerRadius(10).clipped().padding()
    VStack(alignment: .leading){
        HStack{
            Text(Yelp.).foregroundColor(.blue).font(.title3)
            Spacer(a)Text("2021/7/31").padding().foregroundColor(.gray)
        }
        Text("Must eat list release! Decode 10 bowls of noodles that locals love").foregroundColor(.gray).font(.callout).bold()
        Divider()}}Copy the code

The preview looks like this:

This code structure can be reused multiple times, so create a file messageView.swift to migrate the code in.

Then pass in the picture, publisher, date and latest message fields as parameters, and look at the code again:

import SwiftUI

struct MessageView: View {
    
    
    var imageName: String
    
    var publisher: String
    
    var date: String
    
    var message: String
    
    var body: some View {
        HStack{
            Image(imageName).resizable().scaledToFill().frame(width: 75, height: 75).cornerRadius(10).clipped().padding()
            VStack(alignment: .leading){
                HStack{
                    Text(publisher).foregroundColor(.blue).font(.title3)
                    Spacer(a)Text(date).padding().foregroundColor(.gray)
                }
                Text(message).foregroundColor(.gray).font(.callout).bold()
                Divider()}}}}struct MessageView_Previews: PreviewProvider {
    static var previews: some View {
        MessageView(imageName: "dzdp", publisher: Yelp., date: "2021/7/31", message: "Must eat list release! Decode 10 bowls of noodles that locals love")}}Copy the code

Abstract: Each content page in the article, such as wechat, address book and so on, will become more and more large with the expansion of the later content, and it is difficult to maintain, so here, create the corresponding SwiftUI file for each content page.

  • ChatListViewThe correspondingWeChat.
  • MailListViewThe correspondingThe address book.
  • ExploreViewThe correspondingfound.
  • MineViewThe correspondingI.

The results are as follows:

List loopForEach

SwiftUI has a built-in ForEach iterator for a looping component. This iterator is similar to the for loop.

VStack{
    ForEach(0..<5){index in
        MessageView(imageName: "dzdp", publisher: Yelp., date: "2021/7/31", message: "Must eat list release! Decode 10 bowls of noodles that locals love")}}Copy the code

This is the simplest form of looping. The input to ForEach is an interval operator. 0.. <5 means you start at 0, plus 1 at a time, and loop up to 4.

This loop of counting obviously doesn’t work because the contents of each list are different.

Therefore, the following two steps are required:

    1. To create aMessage, includingimageName,publisher,date,messageFour fields.
    1. To create aMessagesArray to store differentMessage.

So create message.swift with the following code:

import Foundation

struct Message: Identifiable{
    var id: Int
    var imageName: String
    var publisher: String
    var date: String
    var message: String
}

Copy the code

Here, Message implements the Identifiable protocol, and adds the ID field because ForEach traversal elements must satisfy that condition.

Then create the array Messages

let messages: [Message] = [
    Message(id: 0, imageName: "jd", publisher: Jingdong "JD.COM", date: "2021/7/31", message: "Notice of Closing"),
    Message(id: 1, imageName: "hdl", publisher: "Haidilao Hotpot", date: "2021/7/31", message: "This bowl of spicy soup, can be strong!"),
    Message(id: 2, imageName: "dzdp", publisher: Yelp., date: "2021/7/31", message: "Must eat list release! Decode 10 bowls of noodles that locals love")]Copy the code

Code and effects:

Finally start Simular to see the final effect

Attached: Code address

Gitee.com/dkwingcn/we…

Related articles

SwiftUI Actual Combat – Copy wechat App (2)

SwiftUI Actual Combat – Copy wechat App (3)

SwiftUI Actual Combat – Copy wechat App (4)