article

Thursday, March 3, 2022

SwiftUI FeedBack | Rating Emoji

SwiftUI FeedBack | Rating Emoji

ContentView.swift
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//
//  ContentView.swift
//  SwiftUIProject
//
//  Created by Cairocoders
//
 
import SwiftUI
 
struct ContentView: View {
     
    @State var show = false
     
    var body: some View {
         
        HStack(spacing: 20){
            VStack(alignment: .leading,spacing: 12){
                Button(action: {
                    self.show.toggle()
                }) {
                    Image("feedback")
                        .resizable().frame(width: 300, height: 150)
                }
            }
        }.sheet(isPresented: $show) {
            feedback()
        }
    }
}
 
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
feedback.swift
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
//
//  feedback.swift
//  SwiftUIProject
//
//  Created by Cairocoders
//
 
import SwiftUI
 
struct feedback: View {
     
    let reactions = ["😣" , "☹️" , "😐" , "🙂" , "😍"]
    @State var selectedEmoji: String = ""
     
    @State private var text = "Your Feedback"
     
    var body: some View {
        ZStack {
            Color("Color1")
                .ignoresSafeArea()
            VStack {
                HStack {
                    Text("Cairocoders")
                    Spacer()
                    Text("Your feedback")
                        .font(.title)
                }.padding(.bottom, 10)
                 
                Divider()
                 
                VStack {
                    Text("We would like your feedback to imporve our service")
                        .font(.system(size: 19))
                        .foregroundColor(Color.blue)
                        .multilineTextAlignment(.center)
                    Text("it will help us to serve you better")
                        .font(.system(size: 16))
                        .foregroundColor(Color.blue)
                        .padding(.top,5)
                     
                    HStack(alignment: .center, spacing: 10){
                        ForEach(reactions , id: \.self) { reaction in
                            ZStack {
                                emojiView(selectedEmoji: $selectedEmoji, emojiText: reaction)
                                    .frame(width: 50 , height: 50)
                                    .background(Color.white)
                                    .overlay(
                                            Circle()
                                                .stroke(Color.init(red: 236/255, green: 61/255, blue: 107/255), lineWidth: selectedEmoji == reaction ? 6 : 0)
                                    )
                                    .cornerRadius(25)
                                    .shadow(color: Color.init(red: 0, green: 0, blue: 0, opacity: 0.1) , radius: 10 , x: 0 , y: 15)
                                    .opacity(selectedEmoji == "" || selectedEmoji == reaction ? 1 : 0.5)
                                if selectedEmoji == reaction {
                                    Image("check")
                                        .resizable()
                                        .frame(width: 20, height: 20)
                                        .offset(x: 18, y: -18)
                                }
                            }
                        }
                    } //: HSTACK
                    .padding(.top , 20)
                    .padding(.bottom, 20)
                     
                    if selectedEmoji != "" {
                        Text(getResponseWithEmoji(selectedEmoji))
                            .font(.system(size: 17))
                            .foregroundColor(Color.pink)
                    }
                } //end VStack
                 
                Text("Please leave your feedback below:")
                 
                Divider()
                 
                VStack {
                   TextEditor(text: $text)
                     .frame(width: 300, height: 120)
                     .lineSpacing(10)
                     .autocapitalization(.words)
                     .disableAutocorrection(true)
                     .padding()
                                         
                }.overlay(
                         RoundedRectangle(cornerRadius: 25)
                           .stroke(Color.yellow, lineWidth: 5)
                         )
                .padding()
   
                 
                Button {
                     
                } label: {
                    ZStack {
                        Capsule()
                            .fill(Color.pink)
                            .frame(width: 160, height: 45)
                         
                        Text("Send feedBack")
                            .font(.system(size: 20))
                            .foregroundColor(Color.white)
                         
                    }
                    .opacity(selectedEmoji == "" ? 0.7 : 1)
                }
            }
            .padding(30)
            .frame(width: 370)
            .background(Color.white)
            .cornerRadius(20)
            .shadow(color: Color.init(red: 0, green: 0, blue: 0, opacity: 0.1) , radius: 20 , x: 10 , y: 20)
        }
    }
     
    func getResponseWithEmoji(_ emoji: String) -> String {
        switch selectedEmoji {
        case "😣":
            return "Not satisfied"
        case "☹️":
            return "Somewhat satisfied"
        case "😐":
            return "Satisfied"
        case "🙂":
            return "Very satisfied"
        case "😍":
            return "Satisfied enought to tell others"
        default:
            return ""
        }
    }
}
 
struct feedback_Previews: PreviewProvider {
     
    static var previews: some View {
        feedback()
    }
}
emojiView.swift
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//
//  emojiView.swift
//  SwiftUIProject
//
//  Created by Cairocoders
//
 
import SwiftUI
 
struct emojiView: View {
    @Binding var selectedEmoji: String
    var emojiText: String
     
    var body: some View {
        Button {
            withAnimation(.spring(response:0.3, dampingFraction: 0.5)){
                selectedEmoji = emojiText
            }
             
        } label:{
            Text(emojiText)
                .font(Font.custom("Avenir", size: 23))
        }
    }
}

Posted by ednalan at 12:12 AM . Under .

Related Post