Publish & choose to publish, use SwiftUI to build a new release pop-up window (on)

Create together and grow together! This is the 23rd day of my participation in the "Nuggets Daily New Project·August Update Challenge", click to view the details of the event .

Background of the project

In the previous chapters, we discussed that if the Nuggets client is going to publish articles , then the entry should be placed there.

After we have determined the entrance, Nuggets currently Web端supports release 文章and 沸点mobile terminal, and it is estimated that the mobile terminal will also integrate these two functions as one entrance.

Let's go deeper, when we click on the " 发布" function entry, how should the client interact? So in this chapter, we will complete this interactive page.

Project build

First, create a new SwiftUIproject named PublishingView.

top navigation

We tentatively decide that the entry to the " Publish " function is on the right side of the top navigation, which is the upper right corner of the page. Based on the layout of the current Nuggets client, we will build the entire top navigation, an example of the design draft:

Let's analyze the structure. The top navigation consists of a " Live " button entry, a " Search Bar ", and a " Publish " function button.

For the construction of the " search bar ", we need to declare one 变量to bind and store the input content; and when we click the " Publish " button to open a pop-up window page, we also need one 变量to store the open state, for example:

@State var searchText = “"
@State var showMaskView: Bool = false
复制代码

Then let's complete the style of the entire top navigation, example:

// 搜索栏
func topBarMenu() -> some View {
    HStack(spacing: 15) {

        // 直播
        Button(action: {
        }) {
            Image(systemName: "video.square")
                .font(.system(size: 24))
                .foregroundColor(.gray)
        }

        TextField("搜索文如秋雨", text: $searchText)
            .padding(7)
            .padding(.horizontal, 25)
            .background(Color(.systemGray6))
            .cornerRadius(8)
            .overlay(
                Image(systemName: "magnifyingglass")
                    .foregroundColor(.gray)
                    .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading).padding(.leading, 8)
            )

        // 新建发布
        Button(action: {
            withAnimation {
                self.showMaskView = true
            }
        }) {
            Image(systemName: "plus.circle.fill")
                .font(.system(size: 24))
                .foregroundColor(.blue)
        }
    }.padding(.horizontal, 15)
}
复制代码

In the above code, we construct a new view topBarMenu.

We've VStacklaid out a "Live" Buttonbutton, a search field TextFieldinput, and a "Publish" Buttonbutton using portrait view. The content of the input box of the search bar TextFieldis bound to the variables we declared searchText. When the "Publish" Buttonbutton is clicked, showMaskViewthe state will be switched and the pop-up window will open.

Then we ContentViewbuild styles in the main view, example:

var body: some View {
    VStack {
        topBarMenu()
        Spacer()
    }
}
复制代码

background mask

When we click the " 发布" button to open the pop-up window, in addition to the pop-up window itself, there is a background mask behind the pop-up window , which we can build separately. Example:

// MARK: 蒙层
struct MaskView: View {
    @Binding var showMaskView: Bool

    var body: some View {
        VStack {
            Spacer()
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
        .background(.black)
        .edgesIgnoringSafeArea(.all)
        .opacity(0.2)
        .onTapGesture {
            self.showMaskView = false
        }
    }
}
复制代码

In the above code, we use the structure to extract the background mask MaskView.

In MaskViewthe structure, we @Bindinguse it to facilitate two-way binding, and then use edgesIgnoringSafeAreamodifiers to build a full-screen page, the background color of this page 透明度为0.2的黑色, so that we have completed the design of the background mask.

In terms of interaction, when we click on the background mask, showMaskViewthe state is switched to close the pop-up window.

ContentViewLet's use MaskViewthe background mask in the main view to see the effect, example:

var body: some View {
    ZStack {
        VStack {
            topBarMenu()
            Spacer()
        }
        if showMaskView {
            MaskView(showMaskView: $showMaskView)
        }
    }
}
复制代码

In the above code, we showMaskViewrealize the display of MaskViewthe background mask by judging the value of the state, click Run to preview the next item:

to be continued

Due to the complex style and interaction logic of the pop-up window, the project is divided into upper and lower chapters for implementation. In the previous article, we completed the design of the top navigation and the background mask, and in the next article, we will implement functional interactions such as pop-up, collapsing, and dragging of the lower pop-up window.

Come and try it out.

If this column is helpful to you, please like, comment, and follow~