स्विफ्टयूआई: एक्वायंटेंस

इस ट्यूटोरियल में, हम सीखेंगे कि व्यू का उपयोग करके यूआई अनुप्रयोगों की योजना कैसे बनाएं और यूआई को संशोधित करने के लिए स्टेट वेरिएबल्स का उपयोग कैसे करें।

अनुमानित पढ़ने का समय: 25 मिनट।

SwiftUI हमें इंटरफेस बिल्डर (आईबी) और स्टोरीबोर्ड के बारे में पूरी तरह से भूल जाने की अनुमति देता है। आईबी और एक्सकोड एक्सकोड 4 से पहले अलग-अलग एप्लिकेशन थे, लेकिन उनके बीच "डॉकिंग" तब भी दिखाई देता है जब हम IBAction या IBOutlet नाम संपादित करते हैं और हमारा एप्लिकेशन क्रैश हो जाता है, इसलिए IB को कोड में बदलाव के बारे में कुछ भी पता नहीं होता है। या जब हम सेगर्स के लिए या टेबल सेल के लिए पहचानकर्ता सेट करते हैं, लेकिन Xcode उन्हें चेक नहीं कर सकता, क्योंकि वे स्ट्रिंग हैं।

बचाव के लिए SwiftUI! कोड दर्ज करते ही हमें तुरंत दृश्य में परिवर्तन दिखाई देते हैं। एक तरफ परिवर्तन से दूसरे पर अपडेट होता है, इसलिए वे हमेशा संबंधित होते हैं। कोई स्ट्रिंग पहचानकर्ता नहीं हैं जिन्हें गलत माना जा सकता है। और यह सब कोड है, लेकिन अगर हमने इसे UIKit का उपयोग करके लिखा है, तो यह बहुत छोटा है, इसलिए इसे समझना, संपादित करना और डीबग करना आसान है। मुझे बताओ, क्या वह अद्भुत नहीं है?

चलो चलते हैं

आइए Xcode प्रोजेक्ट ( Shift-Command-N ) में एक नया प्रोजेक्ट शुरू करें, iOS new सिंगल व्यू ऐप का चयन करें, RGBullsEye को कॉल करें, और SwiftUI को इंटरफ़ेस के रूप में चुनना सुनिश्चित करें।

अब AppDelegate.swift दो फ़ाइलों में विभाजित है: AppDelegate.swift और SceneDelegate.swift , और SceneDelegate में एक विंडो होती है:



इस लाइन के अपवाद के साथ, SceneDelegate, SwiftUI से संबंधित नहीं है:

window.rootViewController = UIHostingController(rootView: ContentView()) 

UIHostingController SwiftUI-view ContentView के लिए एक व्यू कंट्रोलर बनाता है।

नोट: UIHostingController हमें SwiftUI-view को एक मौजूदा एप्लिकेशन में एकीकृत करने की अनुमति देता है। होस्टिंग स्टोरी कंट्रोलर को हमारे स्टोरीबोर्ड में जोड़ें और UIViewController से इस पर एक सेगमेंट बनाएं। तब हम IBSegueAction बनाने के लिए व्यू कंट्रोलर कोड पर segue के साथ कंट्रोल-ड्रैग का उपयोग करते हैं, जहां हम होस्टिंग कंट्रोलर को rootView - SwiftUI-view में सेट करते हैं।

जब अनुप्रयोग शुरू होता है, तो विंडो ContentView का एक उदाहरण प्रदर्शित करती है, जो कि ContentView.swift फ़ाइल में परिभाषित होती है। यह एक संरचना है जो दृश्य प्रोटोकॉल के अनुरूप है:

 struct ContentView: View { var body: some View { Text("Hello World") } } 

यह एक ContentView ( निकाय ) की सामग्री की एक स्विफ्टयूआई घोषणा है। अब हैलो वर्ल्ड के साथ एक टेक्स्ट व्यू है।

ContentView_Previews के ठीक नीचे ContentView का एक उदाहरण दिया गया है।

 struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } 

यहां हम पूर्वावलोकन के लिए परीक्षण डेटा सेट कर सकते हैं। लेकिन वास्तव में यह बहुत पूर्वावलोकन कहां है?

कोड के तुरंत बाद इस के साथ एक बड़ा खाली स्थान है:



रिज्यूमे पर क्लिक करें , एक पल रुकें और ...

हमारा UI स्केच करें

कुछ परिचित दिखाई नहीं दे रहा है - यह Main.storyboard फ़ाइल है। हम अपने यूआईआई को SwiftUI का उपयोग करके बनाने जा रहे हैं, कोड में, पूर्वावलोकन देखने की प्रक्रिया में: हम वहां क्या प्राप्त करते हैं? लेकिन चिंता मत करो, हमें अपने विचार बनाने के लिए कोड की सैकड़ों लाइनें नहीं लिखनी हैं।

SwiftUI घोषणात्मक है: आप कहते हैं कि आपका UI कैसा दिखना चाहिए, और SwiftUI यह सब कुशल कोड में परिवर्तित करता है जो सभी काम करता है। Apple आपको आवश्यक के रूप में कई दृश्य बनाने की अनुमति देता है ताकि कोड सरल और सीधा हो। मापदंडों के साथ पुन: प्रयोज्य विचारों की विशेष रूप से सिफारिश की जाती है - यह एक अलग फ़ंक्शन में कोड आवंटित करने के समान है। आप इसे बाद में स्वयं करेंगे।

हमारे आवेदन में बहुत सारे विचार होंगे, इसलिए एक शुरुआत के लिए हम टेक्स्ट विचारों को स्टब्स के रूप में स्केच करेंगे।

इसके साथ पाठ ("हैलो वर्ल्ड") बदलें:

 Text("Target Color Block") 

यदि आवश्यक हो, पूर्वावलोकन को अपडेट करने के लिए फिर से शुरू करें पर क्लिक करें ।

अब पूर्वावलोकन में इस दृश्य पर कमांड-क्लिक करें और HStack में एम्बेड करें चुनें:



कृपया ध्यान दें कि आपका कोड भी बदल गया है:

 HStack { Text("Target Color Block") } 

टेक्स्ट ऑपरेटर को कॉपी और पेस्ट करें, और इसे हमारे HStack के अंदर संपादित करें। कृपया ध्यान दें: हम ऑपरेटरों को अल्पविराम से अलग नहीं करते हैं, लेकिन उनमें से प्रत्येक को एक नई पंक्ति में लिखते हैं:

 HStack { Text("Target Color Block") Text("Guess Color Block") } 

और इसलिए यह पूर्वावलोकन में दिखता है:



अब HStack को VStack पर रखकर स्लाइडर स्टब्स के लिए एक जगह तैयार करते हैं। इस बार हम अपने कोड में HStack पर कमांड-क्लिक करेंगे:



VStack में एम्बेड चुनें; एक नया कोड दिखाई देगा, लेकिन पूर्वावलोकन नहीं बदलेगा। थोड़ी देर बाद हम भविष्य के रंग ब्लॉक के तहत दृश्य जोड़ेंगे।

HStack के तुरंत बाद एक नई लाइन जोड़ें, लाइब्रेरी खोलने के लिए टूलबार पर + क्लिक करें और वर्टिकल स्टैक को एक नए पृष्ठ पर खींचें:



अपेक्षा के अनुसार, कोड और पूर्वावलोकन दोनों बदल गए हैं:



ड्राफ्ट यूआई पर काम खत्म करें, ताकि सब कुछ इस तरह दिखे:

 VStack { HStack { Text("Target Color Block") Text("Guess Color Block") } Text("Hit me button") VStack { Text("Red slider") Text("Green slider") Text("Blue slider") } } 

नई VStack में, तीन स्लाइडर्स थोड़े समय बाद दिखाई देंगे, साथ ही स्लाइडर्स और रंग ब्लॉक के बीच एक बटन भी होगा।

हम यूआई पर काम करना जारी रखते हैं

अब चलो स्विफ्टयूआई में एक HStack को रंगीन ब्लॉकों से आबाद करने के लिए अभ्यास करें:

 HStack { // Target color block VStack { Rectangle() Text("Match this color") } // Guess color block VStack { Rectangle() HStack { Text("R: xxx") Text("G: xxx") Text("B: xxx") } } } 

प्रत्येक रंग ब्लॉक में एक आयत है। लक्ष्य (लक्ष्य) रंग ब्लॉक में आयत के नीचे एक पाठ दृश्य होता है, और चयनित एक (अनुमान) में तीन पाठ दृश्य होते हैं। थोड़ी देर बाद हम स्लाइडर्स के वास्तविक मूल्यों के साथ 'xxx' को बदल देंगे।

चर '@State' का उपयोग करना

SwiftUI में, हम नियमित चर का उपयोग कर सकते हैं, लेकिन यदि हम UI को प्रभावित करने के लिए चर को बदलना चाहते हैं, तो हम '@State' जैसे चर को चिह्नित करते हैं। हमारे आवेदन में, हम रंग का चयन करते हैं, ताकि चयनित रंग को प्रभावित करने वाले सभी चर '@State' चर हों।

शरीर की घोषणा से पहले, Content ContentView के अंदर इन पंक्तियों को जोड़ें:

 let rTarget = Double.random(in: 0..<1) let gTarget = Double.random(in: 0..<1) let bTarget = Double.random(in: 0..<1) @State var rGuess: Double @State var gGuess: Double @State var bGuess: Double 

R, G और B के मान 0 और 1 के बीच स्थित हैं। हम यादृच्छिक मूल्यों के साथ वांछित मानों को शुरू करते हैं। हम चयनित मानों को 0.5 से भी शुरू कर सकते हैं, लेकिन इस मामले में क्या किया जाना चाहिए, यह दिखाने के लिए उन्हें अब अनैतिक रूप से छोड़ दें।

चलो सामग्री ContentView_Previews पर थोड़ा कम चलते हैं, जो पूर्वावलोकन के लिए ContentView उदाहरण को आरंभ करता है। अब इनिशलाइज़र को चयनित मानों के प्रारंभिक मानों की आवश्यकता है। इस तरह से ContentView () बदलें:

 ContentView(rGuess: 0.5, gGuess: 0.5, bGuess: 0.5) 

जब हम स्लाइडर्स बनाते हैं, तो पूर्वावलोकन में उनके मान मध्य में होंगे।

हमें दृश्य समारोह (दृश्य: _ConnectTo: विकल्प :) - निम्नलिखित के साथ सामग्री दृश्य () को बदलें : दृश्य समारोह में दृश्य में इनिलाइज़र को ठीक करना चाहिए।

 window.rootViewController = UIHostingController(rootView: ContentView(rGuess: 0.5, gGuess: 0.5, bGuess: 0.5)) 

जब एप्लिकेशन लोड होता है, तो स्लाइडर पॉइंटर्स केंद्र में होंगे।

अब लक्ष्य आयत में एक रंग संशोधक जोड़ें:

 Rectangle() .foregroundColor(Color(red: rTarget, green: gTarget, blue: bTarget, opacity: 1.0)) 

TheforegroundColor संशोधक बेतरतीब ढंग से उत्पन्न RGB मूल्यों द्वारा निर्दिष्ट रंग के साथ एक नया आयत दृश्य बनाता है।

इसी तरह, अनुमान आयत को संशोधित करें:

 Rectangle() .foregroundColor(Color(red: rGuess, green: gGuess, blue: bGuess, opacity: 1.0)) 

0.5 पर आर, जी और बी के मूल्यों के साथ हमें एक ग्रे रंग मिलता है।

रिज्यूमे पर क्लिक करें और एक पल रुकें।

दृश्य को पुन: प्रयोज्य बनाना

पहले, हम पुन: उपयोग के बारे में नहीं सोचेंगे और बस लाल रंग के लिए एक स्लाइडर बना देंगे। स्लाइडर्स के लिए VStack में , इस HStack के साथ टेक्स्ट ("रेड स्लाइडर") प्लग को बदलें :

 HStack { Text("0") .foregroundColor(.red) Slider(value: $rGuess) Text("255") .foregroundColor(.red) } 

हमने टेक्स्ट का रंग टेक्स्ट व्यू में लाल कर दिया है। और उन्होंने एक डिफ़ॉल्ट मान के साथ स्लाइडर को जोड़ा। स्लाइडर की डिफ़ॉल्ट सीमा 0 से 1 तक है, यह कुछ ऐसा है जो हमें पूरी तरह से सूट करता है।

नोट: हम जानते हैं कि स्लाइडर 0 से 1 तक जाता है, और उपयोगकर्ताओं की सुविधा के लिए टेक्स्ट लेबल '255' है जो कि 0 से 255 तक सीमा में RGB मानों का प्रतिनिधित्व करने के लिए उपयोग किया जाता है।

लेकिन चर के लिए $ आइकन क्या है? क्या हम इसके बारे में जानते हैं ? और! वैकल्पिक के साथ काम करते समय, और अब भी $ ?

इस तथ्य के बावजूद कि वह इतना छोटा और असंगत है, वह बहुत महत्वपूर्ण है। RGuess अपने आप में केवल एक पढ़ा-लिखा मूल्य है। लेकिन $ rGuess एक बाध्यकारी है , हमें उपयोगकर्ता द्वारा स्लाइडर को स्थानांतरित करने पर चयनित रंग की आयत को अपडेट करने की आवश्यकता होती है।

अंतर को समझने के लिए, अनुमानित आयत के तहत तीन पाठ के मानों को सेट करें:

 HStack { Text("R: \(Int(rGuess * 255.0))") Text("G: \(Int(gGuess * 255.0))") Text("B: \(Int(bGuess * 255.0))") } 

यहां हम केवल मूल्यों का उपयोग करते हैं, उन्हें परिवर्तित नहीं करते हैं, इसलिए हमें $ उपसर्ग की आवश्यकता नहीं है।

पूर्वावलोकन अद्यतन की प्रतीक्षा करें:



रंगीन आयताकार स्लाइडर को फिट करने के लिए थोड़ा सिकुड़ गया। लेकिन स्लाइडर के टेक्स्ट लेबल गड़बड़ दिखते हैं - वे किनारों पर बहुत दबाए जाते हैं। आइए HStack में एक और संशोधक जोड़ें - गद्दी:

 HStack { Text("0") .foregroundColor(.red) Slider(value: $rGuess) Text("255") .foregroundColor(.red) } .padding() 

अब बहुत बेहतर!



Hackack लाल स्लाइडर पर कमांड-क्लिक करें , और एक्स्ट्रेक्ट सबव्यू चुनें:



यह Refactor same Extract to Function के समान काम करता है, लेकिन SwiftUI दृश्य के लिए।

इस बिंदु पर, कई त्रुटि संदेश दिखाई देंगे, चिंता न करें, अब हम इसे ठीक कर देंगे।

परिणामी दृश्य ColorSlider को नाम दें और हमारे नए दृश्य के मुख्य भाग के सामने इस कोड को जोड़ें:

 @Binding var value: Double var textColor: Color 

अब $ rGuess को $ मूल्य के साथ बदलें , और। टेक्स्ट के साथ .red :

 Text("0") .foregroundColor(textColor) Slider(value: $value) Text("255") .foregroundColor(textColor) 

आइए VStack में ColorSlider () की परिभाषा पर वापस जाएं और हमारे पैरामीटर जोड़ें:

 ColorSlider(value: $rGuess, textColor: .red) 

सुनिश्चित करें कि पूर्वावलोकन लाल स्लाइडर के साथ ठीक है और टेक्स्ट स्टब्स को हरे और नीले स्लाइडर्स से बदलें। वहां सही पैरामीटर डालना न भूलें:

 ColorSlider(value: $gGuess, textColor: .green) ColorSlider(value: $bGuess, textColor: .blue) 

पूर्वावलोकन अपडेट करने के लिए फिर से शुरू करें पर क्लिक करें :

नोट: आपने देखा होगा कि आपको अक्सर रिज्यूमे पर क्लिक करना होगा। यदि आपको शॉर्टकट पसंद हैं, तो आप शायद Option-Command-P को पसंद करेंगे।

और अब कुछ अच्छा! पूर्वावलोकन के निचले दाएं कोने में, लाइव पूर्वावलोकन बटन पर क्लिक करें:



लाइव पूर्वावलोकन हमें पूर्वावलोकन के साथ बातचीत करने की अनुमति देता है जैसे कि एप्लिकेशन एक सिम्युलेटर पर चल रहा था!

स्लाइडर्स को स्थानांतरित करने का प्रयास करें:



अद्भुत! हम अंतिम चरण में जाते हैं। आखिरकार, हम जानना चाहते हैं कि हमने कितनी अच्छी तरह से रंग चुना है?

चेतावनी दिखाएं

स्लाइडर को वांछित स्थिति में सेट करने के बाद, उपयोगकर्ता हिट मी बटन दबाता है, जिसके बाद अलर्ट रेटिंग के साथ दिखाई देता है।

सबसे पहले, स्कोर की गणना करने के लिए ContentView के लिए एक विधि जोड़ें। चर @ के बीच और
शरीर इस विधि को जोड़ें:

 func computeScore() -> Int { let rDiff = rGuess - rTarget let gDiff = gGuess - gTarget let bDiff = bGuess - bTarget let diff = sqrt(rDiff * rDiff + gDiff * gDiff + bDiff * bDiff) return Int((1.0 - diff) * 100.0 + 0.5) } 

अंतर मूल्य केवल तीन-आयामी अंतरिक्ष में दो बिंदुओं के बीच की दूरी है, अर्थात, उपयोगकर्ता की त्रुटि का मूल्य। एक अनुमान प्राप्त करने के लिए, घटाव 1 से भिन्न होता है, और फिर इसका मान 0 से 100 तक कम कर देता है। यह अंतर जितना छोटा होगा, अनुमान उतना ही अधिक होगा।

फिर इस कोड के साथ टेक्स्ट ("हिट मी बटन") स्टब को बदलें:

 Button(action: { }) { Text("Hit Me!") } 

बटन में कार्रवाई और लेबल है, जैसे UIButton। हम अलर्ट दृश्य को ट्रिगर करने के लिए कार्रवाई चाहते हैं। लेकिन, अगर हम एक्शन बटन में अलर्ट बनाते हैं, तो कुछ भी नहीं होगा।

इसके बजाय, हम ContentView का अलर्ट हिस्सा बनाएंगे, और टाइप बूल का '@State' वेरिएबल जोड़ेंगे। फिर हम इस वेरिएबल को सही जगह पर सेट करते हैं, जहाँ हम चाहते हैं कि हमारा अलर्ट एक्शन बटन में दिखाई दे। जब उपयोगकर्ता अलर्ट को छुपाता है - तो मूल्य झूठ को रीसेट करने के लिए - अलर्ट को छिपाने के लिए रीसेट किया जाएगा।

इस '@State' चर को जोड़ें:

 @State var showAlert = false 

फिर इस कोड को एक्शन बटन के रूप में जोड़ें:

 self.showAlert = true 

स्वयं हमारे लिए आवश्यक है, क्योंकि शोअर्टर्ट क्लोजर के अंदर है।

अंत में, बटन में अलर्ट संशोधक जोड़ें, ताकि हमारा बटन पूरी तरह से ऐसा दिखे:

 Button(action: { self.showAlert = true }) { Text("Hit Me!") } .alert(isPresented: $showAlert) { Alert(title: Text("Your Score"), message: Text("\(computeScore())")) } 

हम $ showAlert को एक बंधन के रूप में पास करते हैं, क्योंकि इस चर का मूल्य उस पल को बदल देगा जब उपयोगकर्ता अलर्ट को छिपाता है, और यह परिवर्तन दृश्य को अद्यतन करने का कारण होगा।

स्विफ्टयूआई में अलर्ट दृश्य के लिए एक सरल इनिशियलाइज़र है। इसमें डिफ़ॉल्ट रूप से एक ठीक बटन है, इसलिए हमें इसे एक पैरामीटर के रूप में सेट करने की आवश्यकता नहीं है।

लाइव पूर्वावलोकन चालू करें, स्लाइडर्स को स्थानांतरित करें और हिट मी बटन दबाएं। देखा!



लाइव पूर्वावलोकन के साथ, अब आपको iOS सिम्युलेटर की आवश्यकता नहीं है। यद्यपि इसके साथ आप अपने आवेदन को क्षैतिज रूप से परख सकते हैं:

निष्कर्ष

यहां आप तैयार मसौदा प्रकाशन डाउनलोड कर सकते हैं।

इस ट्यूटोरियल ने केवल स्विफ्टयूआई को थोड़ा सा कवर किया है, लेकिन अब आपके पास UI और पूर्वावलोकन बनाने के लिए Xcode की नई विशेषताओं का आभास है, साथ ही अपने UI को अपडेट करने के लिए '@State' चर का उपयोग कैसे करें।

सरलता के लिए, हमने RGB के लिए डेटा मॉडल नहीं बनाया। लेकिन अधिकांश एप्लिकेशन संरचनाओं या कक्षाओं का उपयोग करके अपने डेटा के मॉडल बनाते हैं। यदि आप स्विफ्टयूआई में मॉडल में बदलाव को ट्रैक करना चाहते हैं, तो उसे ऑब्जर्वेबलऑब्जेक्ट प्रोटोकॉल का पालन करना चाहिए और विचेंज प्रॉपर्टी को लागू करना चाहिए, जो आपको परिवर्तनों को सूचित करता है। स्विफ्टयूआई के माध्यम से ऐप्पल के उदाहरण और विशेष रूप से डेटा फ्लो देखें

SwiftUI को समझने में आसान बनाने के लिए, आप किसी मौजूदा एप्लिकेशन में SwiftUI व्यू जोड़ सकते हैं। इसे जल्दी और आसानी से कैसे करें, इसके उदाहरण देखें।

SwiftUI का उपयोग करके तह / ड्रॉप-डाउन सूचियों के कार्यान्वयन पर मेरा प्रकाशन देखें।

अंत में, SwiftUI के लिए प्रलेखन का अध्ययन करें, और वास्तव में बहुत उपयोगी सामान है !