How to implement pop-up notification in iOS app? It's actually very simple, this way, this way, this way... Have you learned it?

Work together to create and grow together! This is the 29th day of my participation in the "Nuggets Daily New Plan · August Update Challenge", click to view the details of the event .

Background of the project

The message notification can timely reach the user with status and content updates, and the user can make follow-up judgments based on the received message. This is the most common way of exchanging information in product design.

The message notification that pops up from the top down is essentially a " medium reminderApp " notification type that is triggered according to conditions. For example, every time you shop online, a message notification will be displayed after the payment is successful .

Therefore, in this chapter, we will try to use SwiftUIit to implement in-app pop-up notification interaction.

Project construction

First, create a new SwiftUIproject named NotificationToast.

message popup style

We build a new view NotificationToastView, and then declare the content variable of the popup view, for example:

struct NotificationToastView: View {
    var notificationImage: String
    var notificationTitle: String
    var notificationContent: String
    var notificationTime: String

    var body: some View {
        //弹窗样式
    }
}
复制代码

In the above code, we declare 4 Stringtypes of variables: notificationImageicon information, notificationTitletitle information, notificationContentcontent information, and notificationTimepush time.

Then we build the style content, example:

HStack {
    Image(notificationImage)
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 60)
        .clipShape(Circle())
        .overlay(Circle().stroke(Color(.systemGray5), lineWidth: 1))
    VStack(spacing: 10) {
        HStack {
            Text(notificationTitle)
                .font(.system(size: 17))
                .foregroundColor(.black)
            Spacer()
            Text(notificationTime)
                .font(.system(size: 14))
                .foregroundColor(.gray)
        }
        Text(notificationContent)
            .font(.system(size: 14))
            .foregroundColor(.black)
            .lineLimit(4)
            .multilineTextAlignment(.leading)
    }
}
.padding()
.frame(minWidth: 10, maxWidth: .infinity, minHeight: 10, maxHeight: 80)
.background(.white)
.cornerRadius(8)
.shadow(color: Color(.systemGray4), radius: 5, x: 1, y: 1)
.padding()
复制代码

In the above code, we have constructed the style layout, Imageusing the notificationImageimage information variable, which is in a HStackhorizontal layout relationship with other elements.

On the right is the text of the HStackhorizontally arranged notificationTitletitle variable and the text of the notificationTimepush time, which are spread out Spacer.

At the bottom is the content information, which is arranged vertically notificationContentwith the title information and push time information .VStack

We ContentViewshow the effect in the example:

NotificationToastView(notificationImage: "me", notificationTitle: "文如秋雨", notificationContent: "一只默默努力变优秀的产品汪，独立负责过多个国内细分领域Top5的企业级产品项目，擅长B端、C端产品规划、产品设计、产品研发，个人独立拥有多个软著及专利，欢迎产品、开发的同僚一起交流。", notificationTime: "2分钟前")
复制代码

Message popup interaction

In terms of interaction, we can do a simple interaction, create a button, display a message pop-up window when the button is clicked, and wait for 2 seconds to automatically disappear after the message pop-up window is displayed.

The implementation logic is also very simple. We can make the pop-up window load out of the view, and then when the button is clicked, let the message pop-up window pop up from bottom to bottom , and then wait for 2 seconds before returning to the view .

First, we declare an offset to define the initial position of the message popup. Example:

@State var offset: CGFloat = -UIScreen.main.bounds.height / 2 - 80
复制代码

Then add modifiers to the popup view, for 偏移量example :动画

ZStack {
    NotificationToastView(notificationImage: "me", notificationTitle: "文如秋雨", notificationContent: "一只默默努力变优秀的产品汪，独立负责过多个国内细分领域Top5的企业级产品项目，擅长B端、C端产品规划、产品设计、产品研发，个人独立拥有多个软著及专利，欢迎产品、开发的同僚一起交流", notificationTime: "2分钟前")
        .offset(x: 0, y: offset)
        .animation(.interpolatingSpring(stiffness: 120, damping: 10))
    Button(action: {
        if offset <= 0 {
            offset += 180
            DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                self.offset -= 180
            }
        }
    }) {
        Text("弹出通知")
    }
}
复制代码

In the above code, we let NotificationToastViewthe pop-up view offset position Y轴be the variable position we declared offset, and then use ZStackoverlay to display a button. When we offsetare outside the view, click the button to modify the offset position 180, and 等待2秒then Subtract the offset back 最初的位置.

Project preview

Let's see the final effect.

Congratulations, you have completed the entire content of this chapter!

Come and try it.

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