सब कुछ जो आप SwiftUI के बारे में जानना चाहते थे लेकिन पूछने से डरते थे

नमस्ते! मेरा नाम रेनाट है, मैं iOS - Apphud में एक सदस्यता विश्लेषण सेवा विकसित कर रहा हूं।

जैसा कि आप जानते हैं, WWDC 2019 में Apple ने अपना नया SwiftUI ढांचा पेश किया, जिसे भविष्य में UIKit को बदलने (या नहीं?) के लिए तैयार किया गया है। SwiftUI आपको एक घोषणात्मक शैली में एप्लिकेशन इंटरफ़ेस का वर्णन करने की अनुमति देता है और कोड की मात्रा को बहुत कम करता है।

Apple ने पहले से ही कई उदाहरणों के साथ कुछ दिलचस्प अंग्रेजी ट्यूटोरियल पेश किए हैं। मैं प्रश्नों और उत्तरों के रूप में नए ढांचे के बारे में बात करने की कोशिश करूंगा। तो चलिए चलते हैं।

शुरू करने से पहले

SwiftUI के साथ काम करने के लिए, आपको Xcode 11 बीटा डाउनलोड करना होगा। आपको एक पंजीकृत Apple डेवलपर भी होना चाहिए। नवीनतम macOS कैटालिना होना वांछनीय है, लेकिन आवश्यक नहीं है। इसके बिना, कैनवस उपलब्ध नहीं होगा।

इसलिए, Xcode 11 बीटा में, एक नया प्रोजेक्ट बनाएं और सुनिश्चित करें कि "SwiftUI का उपयोग करें" चेक किया गया है।

क्यू एंड ए

इंटरफ़ेस बिल्डर कहाँ गया?

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

क्या एप्लिकेशन लॉन्च बदल गया है?

हां, अब एप्लिकेशन इंटरफ़ेस में प्रारंभिक ऑब्जेक्ट UIWindow नहीं है, लेकिन नए UIScene वर्ग (या इसके वंशज UIWindowScene ) हैं। और दृश्य में एक विंडो जोड़ी जाती है। ये बदलाव न केवल SwiftUI, बल्कि iOS 13 को पूरी तरह से प्रभावित करते हैं।

जब आप कोई प्रोजेक्ट बनाते हैं, तो आपको AppDelegate , SceneDelegate और ContentView फाइलें दिखाई देंगी । SceneDelegate - UIWindowScene वर्ग का एक प्रतिनिधि, जो अनुप्रयोग में दृश्यों को नियंत्रित करता है। AppDelegate की जोरदार याद ताजा करती है।

SceneDelegate वर्ग Info.plist में निर्दिष्ट है

प्रतिनिधि विधि scene: willConnectTo: options: एक विंडो और एक रूट UIHostingController बनाता है, जिसमें एक UIHostingController होता है। ContentView हमारा "होम" पेज है। सभी विकास इस वर्ग में आयोजित किए जाएंगे।

कैसे देखें UIView से अलग है?

ContentView.swift आप ContentView.swift खोलते हैं, तो आपको एक ContentView कंटेनर घोषणा दिखाई देगी। जैसा कि आप पहले से ही समझ चुके हैं, viewDidAppear viewDidLoad कोई परिचित viewDidAppear या viewDidAppear तरीके नहीं हैं। यहाँ स्क्रीन का आधार UIViewController नहीं है, बल्कि व्यू है । ध्यान देने वाली पहली बात यह है कि ContentView एक ऐसी struct है जो View प्रोटोकॉल को स्वीकार करती है। हां, View अब एक प्रोटोकॉल बन गया है, और बहुत सरल है। ContentView में लागू करने के लिए एकमात्र तरीका चर body का वर्णन करना body । आपके सभी साक्षात्कार और कस्टम दृश्य को View प्रोटोकॉल स्वीकार करना चाहिए, अर्थात body वैरिएबल होना चाहिए।

शरीर क्या है?

Body सीधे हमारे कंटेनर है जहां अन्य सभी सबव्यू जोड़े जाते हैं। यह एक html पेज में बॉडी के समान है, जहां html पेज एक ContentView । Body हमेशा एक वंशज होना चाहिए, और कोई भी वर्ग जो View प्रोटोकॉल को स्वीकार करता है।

 struct ContentView: View { var body: some View { Text("Hello, world!") } } 

अपारदर्शी वापसी प्रकार या कुछ क्या है?

some TypeName का निर्माण एक स्विफ्ट 5.1 नवाचार है जिसे अपारदर्शी रिटर्न प्रकार कहा जाता है। इसका उपयोग उन मामलों के लिए किया जाता है जब यह हमारे लिए महत्वपूर्ण नहीं होता है कि किस वस्तु को वापस करना है, मुख्य बात यह है कि यह निर्दिष्ट प्रकार का समर्थन करता है, इस मामले में, View प्रोटोकॉल।

अगर हमने केवल var body: View लिखा है, तो इसका मतलब यह होगा कि हमें View लौटाना चाहिए। Any वर्ग या तो काम नहीं करता है, क्योंकि हमें एक प्रकार का रूपांतरण ऑपरेशन ( as! आपरेटर का उपयोग करके ) करना होगा। इसलिए, अपारदर्शी रिटर्न प्रकार को इंगित करने के लिए वे प्रोटोकॉल नाम के सामने विशेष शब्द के साथ आए। View बजाय View हम Text , Image , VStack - कुछ भी वापस कर सकते हैं, क्योंकि वे सभी View प्रोटोकॉल का समर्थन करते हैं। लेकिन वास्तव में एक तत्व होना चाहिए: जब एक से अधिक View वापस करने का प्रयास किया जाता है View संकलक एक त्रुटि फेंक देगा।

एक से अधिक तत्वों को शरीर में वापस लाने की कोशिश करते समय संकलन त्रुटि

कोष्ठक के अंदर वाक्य रचना क्या है और कहाँ है AddSubview?

स्विफ्ट 5.1 ने समूह की वस्तुओं को एक घोषणात्मक शैली में एक पूरे में पेश किया। यह एक क्लोजर ब्लॉक के अंदर एक सरणी के समान है, लेकिन तत्वों को अल्पविराम और वापसी के बिना एक नई लाइन से एनुमरेट किया जाता है। इस तंत्र को फंक्शन बिल्डर कहा जाता था।

यह स्विफ्टयूआई में व्यापक रूप से उपयोग किया जाता है। फंक्शन बिल्डर के आधार पर , उन्होंने ViewBuilder - एक घोषित इंटरफ़ेस डिजाइनर बनाया। ViewBuilder का उपयोग करके अब हमें प्रत्येक तत्व के लिए addSubview लिखने की आवश्यकता नहीं है - बस सभी को बंद ब्लॉक के अंदर एक नई लाइन से View । स्विफ्टयूआई और समूह तत्वों को एक अधिक जटिल मूल कंटेनर में जोड़ देगा।

 @available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *) @_functionBuilder public struct ViewBuilder { /// Builds an empty view from an block containing no statements, `{ }`. public static func buildBlock() -> EmptyView /// Passes a single view written as a child view (e..g, `{ Text("Hello") }`) through /// unmodified. public static func buildBlock<Content>(_ content: Content) -> Content where Content : View } 

SwiftUI फ्रेमवर्क में ViewBuilder विज्ञापन

UILabel, UIImageView और अन्य तत्वों को कैसे जोड़ें?

तत्वों को बहुत सरल रूप से बनाया गया है: प्रत्येक View को एक नई पंक्ति से लिखा जाना चाहिए और संशोधक फ़ंक्शन ( दृश्य संशोधक ) का उपयोग करके उपस्थिति को बदलना होगा। हमारे लिए परिचित संशोधकों और कार्यों के बीच का अंतर यह है कि वे हमेशा void बजाय एक कंटेनर ऑब्जेक्ट वापस करते हैं। इसलिए, हम बिंदु के माध्यम से संशोधक की पूरी श्रृंखला बना सकते हैं।

 var body: some View { VStack{ Text("World Time").font(.system(size: 30)) Text("Yet another subtitle").font(.system(size: 20)) } } 

हालांकि, सभी नियंत्रण और दृश्य स्विफ्टयूआई में उनके एनालॉग नहीं हैं। यहाँ UIKit और उनके एनालॉग्स की कक्षाओं की आंशिक सूची दी गई है:

• UITableView -> List

  
  

• UICollectionView का कोई एनालॉग नहीं है

  
  

• UILabel -> Text

  
  

• UITextField -> TextField

  
  

• UIImageView -> Image

  
  

• UINavigationController -> NavigationView

  
  

• UIButton -> Button

  
  

• UIStackView -> HStack / VStack

  
  

• UISwitch -> Toggle

  
  

• UISlider -> Slider

  
  

• UITextView का कोई एनालॉग नहीं है

  
  

• UIAlertController -> Alert / ActionSheet

  
  

• UISegmentedControl -> SegmentedControl

  
  

• UIStepper -> Stepper

  
  

• UIDatePicker -> DatePicker

  
  

स्क्रीन के बीच नेविगेशन कैसे होता है?

नेविगेशन कंट्रोलर एक विशेष NavigationView की भूमिका निभाता है। केवल NavigationView{} में अपना कोड लपेटें। और संक्रमण कार्रवाई को एक विशेष NavigationLink बटन में जोड़ा जा सकता है, जो सशर्त DetailView स्क्रीन को धक्का देता है।

 var body: some View { NavigationView { Text("World Time").font(.system(size: 30)) NavigationLink(destination: DetailView() { Text("Go Detail") } } } 

नए विचारों को कैसे प्रस्तुत करें? यह, उदाहरण के लिए, शीट निर्माण का उपयोग करके किया जाता है:

 Button(action: { print("Button Pushed") self.show_modal = true }) { Text("Present Modal") }.sheet(isPresented: self.$show_modal) { ModalView() } 

जैसा कि ऊपर उल्लेख किया गया है, body न केवल View का एक उदाहरण, बल्कि इस प्रोटोकॉल को स्वीकार करने वाले किसी अन्य वर्ग को भी लौटा सकता है। इससे हमें DetailView नहीं बल्कि Text या Image को DetailView करने का मौका मिलता है!

स्क्रीन पर तत्वों की व्यवस्था कैसे करें?

तत्वों को एक-दूसरे से स्वतंत्र रूप से व्यवस्थित किया जाता है और VStack अंदर लंबवत रूप से स्थित हो सकता है, क्षैतिज HStack और एक दूसरे ZStack ऊपर। ScrollView और ListView भी हमारे लिए उपलब्ध हैं। आप तत्वों के किसी भी जाल को प्राप्त करने के लिए इन कंटेनरों को वैकल्पिक रूप से साझा और साझा कर सकते हैं।

एक दूसरे के साथ कंटेनरों को मिलाकर, आप बड़ी संख्या में संलग्नक के साथ एक काफी बड़ा पेड़ प्राप्त कर सकते हैं। हालांकि, SwiftUI को इसके लिए विशेष रूप से अनुकूलित किया गया है, इसलिए गहरे कंटेनर नेस्टिंग प्रदर्शन को प्रभावित नहीं करते हैं। यह वीडियो में wwdc ( 15:32 से शुरू ) के साथ कहा गया है।

 var body: some View { NavigationView { VStack { NavigationLink(destination: LargeView(timeString: subtitle)) { Text("See Fullscreen") } Text("World Time").font(.system(size: 30)) } } } 

नेविगेशन बार कैसे दिखाएं?

एक NavigationView दृश्य की घोषणा करना पर्याप्त नहीं है; आपको नेविगेशन बार के लिए एक नेविगेशन शीर्षक और शैली निर्दिष्ट करनी होगी।

 NavigationView { VStack{}.navigationBarTitle(Text("World Time"), displayMode: .inline) } 

ध्यान दें कि navigationBarTitle फ़ंक्शन को NavigationView View पर नहीं, बल्कि इसके आंतरिक View पर कहा जाता है। DisplayMode एक पैरामीटर है जो नेविगेशन बार की शैली को इंगित करता है: बड़ा या मानक।

क्या दृश्यदर्शन विधि का एक एनालॉग है?

यदि आप View प्रारंभ करते समय कोड निष्पादित करना चाहते हैं, तो आप onAppear {} फ़ंक्शन को जोड़कर ऐसा कर सकते हैं। OnAppear को किसी भी View जोड़ा जा सकता है, उदाहरण के लिए, VStack । इस उदाहरण में, जब कंटेनर स्क्रीन पर दिखाई देता है, तो सर्वर से http अनुरोध किया जाता है।

 struct ContentView : View { @State var statusString : String = "World Time" var body: some View { NavigationView { VStack { NavigationLink(destination:DetailView()) { Text("Go Detail") } Text(statusString).font(.system(size: 30)) }.onAppear { self.loadTime() } } } func loadTime(){ NetworkService().getTime { (time) in if let aTime = time { self.statusString = "\(aTime.date())" } } } } 

हम loadTime फ़ंक्शन कहते हैं, जो सर्वर से वर्तमान समय का अनुरोध करता है और loadTime मॉडल लौटाता है। हम NetworkService वर्ग में साइकिलों में नहीं जाएंगे, आप सभी कोड देख सकते हैं, डाउनलोड किए गए स्रोत कोड। लेख के अंत में लिंक।

वर्तमान समय को बाद में असाइन करने के लिए वैरिएबल var statusString का प्रतिपादन किया गया था। चर का एक विशेष गुण है @State । उसका क्या मतलब है?

संपत्ति रैपर या क्या है @State ?

स्विफ्ट 5.1 ने तथाकथित संपत्ति रैपर (या संपत्ति प्रतिनिधियों ) को पेश किया। SwiftUI में संपत्ति आवरणों को हमारे स्वयं के चर के साथ दृश्य मापदंडों में से एक को अद्यतन या बाँधने के लिए उपयोग किया जाता है, उदाहरण के लिए, टॉगल स्विच का मूल्य।

@State विशेषता एक विशेष विशेषता है जिसे एक चर घोषणा से पहले रखा जाता है। यह हमें अतिरिक्त कोड के बिना स्वचालित रूप से संपत्ति परिवर्तनों को ट्रैक करने की अनुमति देता है। ऊपर दिए गए उदाहरण में, "World Time" टेक्स्ट जैसे ही हम वर्तमान स्थिति में बदल जाएगा, जैसे ही हम स्टेटस स्ट्रींग वैल्यू को अपडेट करेंगे।

मूल्यों को बाँधने के लिए ( गुण बंधन ), हम कोड में चर के नाम से पहले एक विशेष वर्ण $ निर्दिष्ट कर सकते हैं:

 struct DetailsView: View { @State var changeToggle: Bool var body: some View { Toggle(isOn: $changeToggle) { Text("Change Toggle") } } } 

स्विच की स्थिति को बदलने से, चर का मूल्य भी बदल जाएगा।

संपत्ति रैपर स्विफ्टयूआई का एक बहुत महत्वपूर्ण घटक है, मैंने सिर्फ उन्हें पारित करने में उल्लेख किया है। संपत्ति रैपर के साथ अधिक विस्तृत परिचित के लिए, wwdc से वीडियो को यहां (37 वें मिनट से), यहां (12 वें मिनट से) और यहां (19 वें मिनट से) देखें।

रनटाइम में दृश्य कैसे जोड़ें?

यह तुरंत ध्यान देने योग्य है कि आप शब्द के शाब्दिक अर्थ में किसी भी समय दृश्य नहीं जोड़ सकते। SwiftUI एक घोषणात्मक ढांचा है जो पूरे दृश्य को प्रस्तुत करता है। हालाँकि, आप शरीर के अंदर विभिन्न स्थितियों को सेट कर सकते हैं और जब वे बदलते हैं तो दृश्य की स्थिति को अपडेट कर सकते हैं। इस उदाहरण में, हम @State – if के सबसे सरल गुच्छा का उपयोग करते हैं @State – if चर के साथ है।

 struct ContentView : View { @State var statusString : String = "World Time" @State var isTimeLoaded : Bool = false var body: some View { NavigationView { VStack { if isTimeLoaded { addNavigationLink() } Text(statusString).font(.system(size: 30)).lineLimit(nil) }.navigationBarTitle(Text("World Time"), displayMode: .inline) }.onAppear { self.loadTime() } } func addNavigationLink() -> some View { NavigationLink(destination: Text("124!!!")) { Text("Go Detail") } } func loadTime(){ NetworkService().getTime { (time) in if let aTime = time { self.statusString = "\(aTime.date().description(with: Locale.current))" self.isTimeLoaded = true } } } } struct DetailView : View { var timeString : String var body : some View { Text(timeString).font(.system(size: 40)).lineLimit(nil) } } 

वैसे, क्या आपने देखा है कि addNavigationLink() फ़ंक्शन में शब्द return नहीं है? यह स्विफ्ट 5.1 का एक और नवाचार है - एकल अभिव्यक्ति वाले कार्यों के लिए, अब return लिखना वैकल्पिक है। लेकिन आप लिख सकते हैं।

निष्कर्ष

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

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

आप यहां प्रोजेक्ट स्रोतों को डाउनलोड कर सकते हैं ।

लेख को अंत तक पढ़ने के लिए धन्यवाद। मुझे आशा है कि आप इसे उपयोगी पाएंगे।

क्या पढ़ना है?

• IOS 13 में प्रसंग मेनू को कैसे लागू किया जाए
• ऐप स्टोर में अपना सब्सक्रिप्शन ऐप पाने के लिए 15 टिप्स
• IOS के लिए Apple सदस्यता सूचनाएं गाइड। क्या वे वास्तव में अच्छे हैं?