स्विफ्टयूआई में टिंडर स्वाइप कार्ड कैसे लागू करें

जून में, हमने पहली बार SwiftUI के बारे में सुना - iOS और macOS (iPadOS) ऐप्स में UI तत्वों के साथ बनाने और काम करने का एक बिल्कुल नया तरीका। यह गर्मियों में क्रिसमस की तरह महसूस किया। यह नया है, यह घोषणात्मक है, यह सेक्सी है! और अब, iOS 13 जारी होने के कुछ हफ्ते बाद, हम अपने सभी प्रोजेक्ट्स में SwiftUI का उपयोग करना शुरू कर सकते हैं। आइए जानें कि इस अद्भुत उपकरण का उपयोग कैसे करें जो कि Apple ने हमें दिया था, क्लासिक टिंडर-एस्क स्वाइप कार्ड बनाने के लिए।

इस लेख में, मैं आपको केवल कुछ पंक्तियों के साथ एक टिंडर जैसा कार्ड दृश्य और व्यवहार (कार्रवाई के लिए स्वाइप करना) प्राप्त करना दिखाता हूं।

इसे प्राप्त करने के लिए, हमें निम्नलिखित बातें करने की आवश्यकता है:

• उपयोगकर्ता दृश्य बनाएँ
• नेवीगेशन बनाएँ
• बॉटमबार व्यू बनाएं
• स्वाइपव्यू बनाएं
• ContentView के अंदर यह सब एक साथ रखें

तो चलिए शुरू करते हैं।

UserView

UserView दो सबव्यू से बनाया गया है, एक NameView है जिसमें उपयोगकर्ता नाम, आयु और शौक शामिल हैं, और दूसरा दृश्य केवल एक अवतार दृश्य है जो उपयोगकर्ता के प्रोफ़ाइल चित्र को प्रदर्शित करता है।

struct NameView: View { let name: String let age: Int let hobby: String var body: some View { VStack(alignment: .leading) { Spacer() Text("\(name), \(age)") .font(.title) .fontWeight(.semibold) .foregroundColor(.white) Text(hobby) .font(.system(size: 16)) .fontWeight(.regular) .foregroundColor(.white) } .padding() } } 

सबसे पहले, हमें NameView को परिभाषित करने की आवश्यकता है , यह उपयोगकर्ता नाम, आयु और शौक का प्रतिनिधित्व करेगा। NameView व्यू प्रोटोकॉल के अनुरूप है, जिसका उपयोग SwiftUI में कस्टम दृश्यों को परिभाषित करने के लिए किया जाता है। दृश्य प्रोटोकॉल की केवल एक आवश्यकता होती है और यह शरीर की संपत्ति को परिभाषित करता है जो दृश्य संरचना को वापस करना चाहिए और इसके व्यवहार का वर्णन करता है। आप आधिकारिक Apple दस्तावेज़ में दृश्य प्रोटोकॉल के बारे में अधिक जानकारी प्राप्त कर सकते हैं।

आइए इस दृश्य को परिभाषित करने के लिए हमारे द्वारा उपयोग की जाने वाली वस्तुओं को तोड़ दें:

• VStack जो सभी वस्तुओं के लिए एक कंटेनर की तरह कार्य करता है जो उन्हें लंबवत रूप से संरेखित करता है
• स्पेसर जो स्विफ्टयूआई को बताता है कि इस दृश्य को तल पर संरेखित किया जाना चाहिए
• पाठ जो निम्नलिखित गुणों के साथ नाम और उम्र के साथ लेबल का प्रतिनिधित्व करता है:
• दूसरा टेक्स्ट ऑब्जेक्ट जिसमें समान गुण हैं और उपयोगकर्ता के शौक को प्रदर्शित करता है

कृपया ध्यान दें कि हम यहां रिटर्न स्टेटमेंट का उपयोग नहीं कर रहे हैं, शरीर की संपत्ति के अंदर, लेकिन इसके बजाय हम एक VStack लौटा रहे हैं। स्विफ्टयूआई स्विफ्ट 5.0 में लागू किए गए ओमिट-रिटर्न प्रस्ताव का उपयोग कर रहा है। आप इसके बारे में अधिक जानकारी यहां देख सकते हैं ।

AvatarView

इस तरह से अवतारवाद को परिभाषित किया गया है:

 struct AvatarView: View { let image: UIImage var body: some View { Image(uiImage: image) .resizable() .overlay( Rectangle() .fill(LinearGradient(gradient: Gradient(colors: [.clear, .black]), startPoint: .center, endPoint: .bottom)) .clipped() ) .cornerRadius(12.0) } } 

आइए उन घटकों में गोता लगाएँ जो इस अवतार इकाई को बना रहे हैं:

• चित्र - जो उपयोगकर्ता की तस्वीर प्रदर्शित करता है
• resizable - यह विधि निर्दिष्ट करती है कि छवि को उस स्थान पर फिट करने के लिए आकार बदलना चाहिए जहां यह एम्बेडेड है
• ओवरले (आयत) - यहाँ हम ग्रेडिएंट को परिभाषित कर रहे हैं जो NameView के लिए एक अच्छा बैकग्राउंड होगा, यह ग्रेडिएंट इमेज सेंटर पर शुरू होता है और सबसे नीचे फिनिश करता है, इसमें शुरुआत में साफ रंग और सबसे नीचे ब्लैक है
• कोनेरेडियस - चित्र में एक कॉर्नियस त्रिज्या होगी

और अब इन दो विचारों को एक एकल कंटेनर दृश्य में एम्बेड करें, जिसका नाम UserView है ।

UserView

 struct UserView: View { let userModel: UserModel var body: some View { ZStack(alignment: .leading) { AvatarView(image: userModel.image) NameView(name: userModel.name, age: userModel.age, hobby: userModel.hobby) } .shadow(radius: 12.0) .cornerRadius(12.0) } } 

यहाँ क्या हो रहा है:

• ZStack - यह एक स्टैक दृश्य है जो एक ही अक्ष पर अपने बच्चों को संरेखित करेगा। आप यहां ZStack के बारे में अधिक पढ़ सकते हैं
• AvatarView - उपयोगकर्ता अवतार के माध्यम से प्रदान की गई छवि वाला हमारा अवतार दृश्य
• NameView - हमारा नाम दृश्य उपयोगकर्ता मॉडल के आधार पर नाम प्रदर्शित करता है

इन सभी स्टेप्स के बाद ऐप को रन करें। आपको निम्न स्क्रीन मिलेगी:


अब एक छोटी सहायक विधि जोड़ें। इससे पहले कि मैं आपको दिखाऊं कि कैसे नेविगेशनव्यू परिभाषित किया गया है, चलो एक सहायक विधि बनाते हैं, जो इस तरह दिखता है:

 struct ViewFactory { static func button(_ name: String, renderingMode: Image.TemplateRenderingMode = .original) -> some View { Button(action: {}) { Image(name) .renderingMode(renderingMode) } } } 

यहां, हमने एक बटन फैक्टरी विधि को परिभाषित किया है, जो किसी दिए गए चित्र और रेंडरिंग मोड से एक नया बटन बनाता है। कोई एक्शन हैंडलर नहीं है, क्योंकि वह इस लेख के दायरे से बाहर है।

NavigationView

 struct NavigationView: View { var body: some View { HStack { ViewFactory.button("profile_icon") Spacer() ViewFactory.button("fire_icon") .scaleEffect(2) Spacer() ViewFactory.button("chat_icon") } } } 

SwiftUI स्वचालित रूप से समान चौड़ाई के स्पेसर बना देगा, और यह हमें निम्नलिखित नेविगेशन दृश्य देगा:

BottomBarView

 struct BottomBarView: View { var body: some View { HStack { ViewFactory.button("back_icon", renderingMode: .template) .foregroundColor(.orange) .background( GeometryReader { geometry in Circle() .offset(x: 2.5) .foregroundColor(.white) .shadow(color: .gray, radius: 12) .frame(width: geometry.size.width * 1.5, height: geometry.size.height * 1.5) } ) Spacer() ... } 

उपरोक्त कोड स्निपेट में, हमने अपने बार व्यू से पहला बटन परिभाषित किया है। यहाँ क्या हो रहा है:

• ViewFactory.button - यहाँ हम प्रतिपादन के साथ छवि के साथ बटन को परिभाषित करने के लिए हमारी सहायक विधि का उपयोग कर रहे हैं। मेमोरी। जो आपको इस छवि के लिए एक कस्टम रंग डालने की अनुमति देता है।
  
• .foregroundColor - हमारे विचार का रंग परिभाषित करना
  
• .background - यह विधि दी गई वस्तु की पृष्ठभूमि दृश्य को परिभाषित करती है
  
• जियोमेट्री राइडर - एक कंटेनर दृश्य जो अपनी सामग्री को अपने स्वयं के आकार के एक फ़ंक्शन के रूप में परिभाषित करता है और अंतरिक्ष को समन्वित करता है। हम एक बटन के वर्तमान आकार को प्राप्त करने और दिए गए फ्रेम के साथ पृष्ठभूमि सर्कल को परिभाषित करने के लिए इसका उपयोग कर रहे हैं। यहाँ ज्यामिति पाठकों के बारे में अधिक जानें।
• वृत्त - पृष्ठभूमि की आकृति को परिभाषित करता है
• .offset - सर्कल x- अक्ष ऑफ़सेट
• .foregroundColor - सर्कल टिंट रंग
  
• .शादो - वृत्त छाया
• .frame - ज्यामिति रीडर के आकार का उपयोग करके सर्कल फ्रेम को परिभाषित करता है (यहां हम एक पृष्ठभूमि सर्कल को परिभाषित कर रहे हैं, वर्तमान स्थिति से 1.5x बड़ा है)
  

अब बाकी बटन लागू करते हैं:

 struct BottomBarView: View { var body: some View { HStack { ViewFactory.button("back_icon", renderingMode: .template) .foregroundColor(.orange) .background( GeometryReader { geometry in Circle() .offset(x: 2.5) .foregroundColor(.white) .shadow(color: .gray, radius: 12) .frame(width: geometry.size.width * 1.5, height: geometry.size.height * 1.5) } ) Spacer() ViewFactory.button("close_icon", renderingMode: .template) .foregroundColor(.red) .background( GeometryReader { geometry in Circle().foregroundColor(.white) .frame(width: geometry.size.width * 2, height: geometry.size.height * 2) .shadow(color: .gray, radius: 12) } ) Spacer() ViewFactory.button("approve_icon", renderingMode: .template) .foregroundColor(.green) .background( GeometryReader { geometry in Circle() .foregroundColor(.white) .shadow(color: .gray, radius: 12) .frame(width: geometry.size.width * 2, height: geometry.size.height * 2) } ) Spacer() ViewFactory.button("boost_icon", renderingMode: .template) .foregroundColor(.purple) .background( GeometryReader { geometry in Circle() .foregroundColor(.white) .shadow(color: .gray, radius: 12) .frame(width: geometry.size.width * 1.5, height: geometry.size.height * 1.5) } ) } .padding([.leading, .trailing]) } } 

और इसके परिणामस्वरूप अब हमारे पास यह सुंदर दृश्य है:

SwipeView

यह खंड अधिक उन्नत स्विफ्टयूआई के लिए है। यह वास्तव में है जहां चीजें दिलचस्प होती हैं। हम एक्शन दृश्य पर स्वाइप जेस्चर लागू करना चाहेंगे। यह व्यवहार PageViewController के लिए एक अच्छा उपयोग मामला है, लेकिन यह दृश्य नियंत्रक जल्द ही इतिहास होगा, इसलिए यह वह जगह है जहां हम स्विफ्टयूआई की वास्तविक शक्ति दिखा सकते हैं।

तो आइये देखते हैं कि SwipeView कैसे लागू किया जाता है:

 struct SwipeView: View { @State private var offset: CGFloat = 0 @State private var index = 0 let users = [...] let spacing: CGFloat = 10 var body: some View { GeometryReader { geometry in return ScrollView(.horizontal, showsIndicators: true) { HStack(spacing: self.spacing) { ForEach(self.users) { user in UserView(userModel: user) .frame(width: geometry.size.width) } } } .content.offset(x: self.offset) .frame(width: geometry.size.width, alignment: .leading) .gesture( DragGesture() .onChanged({ value in self.offset = value.translation.width - geometry.size.width * CGFloat(self.index) }) .onEnded({ value in if -value.predictedEndTranslation.width > geometry.size.width / 2, self.index < self.users.count - 1 { self.index += 1 } if value.predictedEndTranslation.width > geometry.size.width / 2, self.index > 0 { self.index -= 1 } withAnimation { self.offset = -(geometry.size.width + self.spacing) * CGFloat(self.index) } }) ) } } } 

यहां हमने कुछ नई रोचक स्विफ्टयूआई अवधारणाओं का उपयोग किया है:

• @ राज्य - किसी दिए गए प्रकार का लगातार मूल्य, जिसके माध्यम से एक दृश्य पढ़ता है और मूल्य की निगरानी करता है, जिसका अर्थ है कि जब भी यह संपत्ति बदल जाएगी, तो दिए गए राज्य अद्यतन में समायोजित करने के लिए दृश्य पुनः लोड किया जाएगा। आप यहां स्टेट के बारे में अधिक जानकारी प्राप्त कर सकते हैं ।
• DragGesture - इस ऑब्जेक्ट का उपयोग प्रत्येक स्वाइप को पहचानने के लिए किया जाएगा जो उपयोगकर्ता स्क्रीन पर बनाता है। आप इसके बारे में यहाँ और अधिक पढ़ सकते हैं: developer.apple.com/documentation/swiftui/draggesture
• @ राज्य निजी संस्करण ऑफ़सेट: CGFloat = 0 - इस गुण का उपयोग वर्तमान स्क्रॉल दृश्य ऑफसेट को परिभाषित करने के लिए किया जाएगा जब उपयोगकर्ता स्क्रीन पर स्वाइप करेंगे।
• @ राज्य निजी संस्करण अनुक्रमणिका = 0 - यह गुण परिभाषित करता है कि उपयोगकर्ता का दृश्य वर्तमान में स्क्रीन पर है
• स्क्रॉलव्यू - संकेतक के बिना क्षैतिज स्क्रॉल दृश्य, जो हमारे उपयोगकर्ता दृश्य के लिए एक कंटेनर होगा
• HStack - क्षैतिज स्टैक दृश्य जिसमें सभी उपयोगकर्ता दृश्य होते हैं
• content.offset (self.offset) - यह ऑफ़सेट स्टेट और स्क्रॉल व्यू कंटेंट ऑफ़सेट के बीच एक संबंध बना रहा है। इसका मतलब यह है कि जब भी ऑफ़सेट प्रॉपर्टी बदलेगी, स्क्रॉल व्यू ऑफ़सेट भी अपडेट हो जाएंगे

हम प्रत्येक तत्व के लिए एक उपयोगकर्ता दृश्य बनाकर मौजूदा उपयोगकर्ताओं पर भरोसा कर रहे हैं:

• .frame - यहां हम स्क्रॉल व्यू फ्रेम को परिभाषित कर रहे हैं जो स्क्रीन की चौड़ाई में फिट होना चाहिए, और इसके कंटेनर में ठीक से संरेखित होना चाहिए
  
• .esture - यहाँ हम अपनी DragGesture ऑब्जेक्ट जोड़ रहे हैं
  

DragGesture थोड़ा जटिल है, लेकिन फिर भी, यह कोड के कुछ ही पंक्तियों में सभी पेजिनेशन तर्क जोड़ता है। चलो नीचे खींचेंग्रेस्टुर :

• onChanged () - जब भी उपयोगकर्ता शुरू होता है और इशारे को खींचने के दौरान यह ब्लॉक आह्वान करता है, तो यहां हम वर्तमान उपयोगकर्ता दृश्य ऑफसेट की गणना कर रहे हैं जो उपयोगकर्ताओं की उंगली का अनुसरण करता है
  
• onEnded () - यहां हमें सूचित किया जाता है जब ड्रैग जेस्चर समाप्त होता है, तो हमें यह गणना करने की आवश्यकता है कि क्या उपयोगकर्ता इस दृश्य (बाएं या दाएं) को स्वाइप करना चाहेगा, या शायद यह इशारा चिह्नित किया गया था, और उपयोगकर्ता इस स्क्रीन पर रहना पसंद करेंगे
  
• withAnimation - यह क्लोजर एनीमेशन के साथ लगाया जाता है, और ऑफ़सेट को स्मूथली बदलने की अनुमति देता है
  

contentView

 struct ContentView: View { var body: some View { VStack { NavigationView() .padding(.bottom) SwipeView() .padding(.bottom) BottomBarView() } .padding() } } 

इस बिंदु पर हमारी सामग्री दृश्य बेहद सरल है - यह उन सभी विचारों को बनाता है जो हमने पहले बनाए थे, एक ऊर्ध्वाधर स्टैक ( VStack ) के अंदर। नेवीगेशन व्यू और स्वाइपव्यू के लिए हमने नीचे की तरफ कुछ डिफॉल्ट पैडिंग जोड़ी है, और पूरे वीस्टैक में पैडिंग्स को सभी किनारों पर जोड़ा गया है।

यह बात है। हो गया। यह हमारा ऐप अब कैसा दिखता है:

अंतिम विचार

जैसा कि हम देख सकते हैं कि स्विफ्टयूआई बहुत शक्तिशाली उपकरण है, यह हमें एक छोटी घोषणा कोड में यूआई को परिभाषित करने और हेरफेर करने का एक आसान तरीका देता है। रिएक्टिव नेटिव डेवलपर्स इस घोषणात्मक प्रतिमान को तुरंत पहचान लेंगे।

लेकिन याद रखें: SwiftUI अभी भी विकास के अधीन है और अभी के लिए बेहद अस्थिर हो सकता है। यदि आप इस परियोजना के लिए सभी कोड आधार की जांच करना चाहते हैं तो आप इसे जीथब पर पा सकते हैं।

यदि आपके पास SwiftUI के बारे में कोई विचार या प्रश्न हैं, तो उन्हें टिप्पणियों में साझा करने के लिए स्वतंत्र महसूस करें। इसके अलावा, अगर आपको यह लेख अच्छा लगा हो, तो कृपया हमें शब्द को फैलाने में मदद करने के लिए इसे अपने समुदाय के साथ साझा करें!