मैं इस अवलोकन के साथ शुरू करता हूं कि इस आलेख में चर्चा किए गए एप्लिकेशन को Xcode 11 और MacOS कैटालिना की आवश्यकता है यदि आप Live Previews का उपयोग करना चाहते हैं, और यदि आप सिम्युलेटर का उपयोग करते हैं तो Mojave । आवेदन कोड Github पर है।

इस साल WWDC 2019 में , Apple ने SwiftUI की घोषणा की, जो सभी Apple उपकरणों पर उपयोगकर्ता इंटरफ़ेस (UI) बनाने का एक नया घोषणात्मक तरीका है। यह सामान्य UIKit से लगभग पूर्ण प्रस्थान UIKit , और मैं - कई अन्य डेवलपर्स की तरह - वास्तव में इस नए उपकरण को कार्रवाई में देखना चाहता था।

यह लेख SwiftUI साथ एक समस्या को हल करने का अनुभव प्रस्तुत करता है जिसका कोड UIKit के भीतर अतुलनीय रूप से अधिक जटिल है और मेरी राय में एक पठनीय तरीके से नहीं UIKit जा सकता है।

यह कार्य Android , iOS और JS डेवलपर्स के लिए अंतिम टेलीग्राम प्रतियोगिता से संबंधित है, जो 10 मार्च से 24 मार्च 2019 तक आयोजित किया गया था। इस प्रतियोगिता में, JSON डेटा के आधार पर समय के आधार पर इंटरनेट पर एक निश्चित संसाधन के उपयोग की तीव्रता को रेखांकन प्रदर्शित करने के लिए एक सरल कार्य प्रस्तावित किया गया था। एक iOS डेवलपर के रूप में, आपको साजिश रचने के लिए किसी भी बाहरी विशेष पुस्तकालयों का उपयोग किए बिना खरोंच से प्रतियोगिता में लिखे गए कोड जमा करने के लिए Swift का उपयोग करना चाहिए।

इस कार्य के लिए आईओएस की ग्राफिक और एनीमेशन क्षमताओं के साथ काम करने के लिए आवश्यक कौशल हैं: कोर ग्राफिक्स , कोर एनिमेशन , मेटल , ओपनजीएल ईएस । इनमें से कुछ उपकरण निम्न-स्तरीय, गैर-ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग टूल हैं। अनिवार्य रूप से, iOS में पहली नज़र के ग्राफिकल कार्यों में इस तरह के प्रतीत होने वाले प्रकाश को हल करने के लिए कोई स्वीकार्य टेम्पलेट नहीं थे। इसलिए, प्रत्येक प्रतियोगी ने मेटल , कैलेयर्स , ओपनजीएल , कैडिसप्लेलिंक के आधार पर अपने स्वयं के एनिमेटर ( रेंडर ) का आविष्कार किया। इससे कोड के टन उत्पन्न हुए, जिससे किसी भी चीज़ को उधार लेना और विकसित करना संभव नहीं था, क्योंकि ये विशुद्ध रूप से "कॉपीराइट" काम करते हैं जो केवल लेखक वास्तव में विकसित कर सकते हैं। हालाँकि, ऐसा नहीं होना चाहिए।

और WWDC 2019 की शुरुआत में, SwifUI प्रकट होता है - Apple द्वारा विकसित एक नया framework , जो Swift में लिखा गया है और कोड में उपयोगकर्ता इंटरफ़ेस ( UI ) का घोषित रूप से वर्णन करने के लिए डिज़ाइन किया गया है। आप यह निर्धारित करते subviews कि आपके View में कौन से subviews दिखाए गए subviews , कौन सा डेटा इन subviews को बदलने का कारण बनता है, आपको उनके लिए कौन से संशोधक लागू करने की आवश्यकता है, उन्हें सही स्थान पर रखने के लिए, सही आकार और शैली के लिए। SwiftUI का एक समान रूप से महत्वपूर्ण तत्व उपयोगकर्ता-परिवर्तनीय डेटा के प्रवाह का नियंत्रण है, जो बदले में UI अपडेट करता है।

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

कार्य

Telegram द्वारा उपलब्ध कराए गए डेटा का उपयोग करके प्रतिस्पर्धी एप्लिकेशन को स्क्रीन पर 5 "सेट ऑफ़ चार्ट्स" प्रदर्शित करने चाहिए। एक "चार्ट के सेट" के लिए, UI इस प्रकार है:



ऊपरी भाग में निशान और क्षैतिज ग्रिड लाइनों के साथ सामान्य वाई अक्ष के साथ एक सामान्य पैमाना "चार्ट ज़ोन" होता है। नीचे कि एक्स अक्ष के साथ तारीखों के रूप में टाइमस्टैम्प के साथ एक रेंगने वाली रेखा है।

इससे भी कम तथाकथित "मिनी मैप" ( Xcode 11 ) है, अर्थात, एक पारदर्शी "विंडो" जो हमारे "चार्ट" की समय अवधि के उस हिस्से को परिभाषित करता है, जो ऊपरी "चार्ट ज़ोन" में अधिक विस्तार से प्रस्तुत किया गया है। इस "मिनी मैप" को न केवल X अक्ष के साथ स्थानांतरित किया जा सकता है, बल्कि इसकी चौड़ाई को भी बदला जा सकता है, जो "चार्ट्स क्षेत्र" में समय के पैमाने को प्रभावित करता है।

"चार्ट" के रंग में चित्रित checkboxs की मदद से और उनके नाम के साथ प्रदान किए गए, आप "चार्ट ज़ोन" में इस रंग के अनुरूप "ग्राफिक्स" को दिखाने से इनकार कर सकते हैं।

ऐसे कई "रेखांकन के सेट" हैं, हमारे परीक्षण उदाहरण में उनमें से 5 हैं, उदाहरण के लिए, और वे सभी एक स्क्रीन पर स्थित होना चाहिए।

SwiftUI का उपयोग करके डिज़ाइन किए गए UI SwiftUI Dark और Light मोड के बीच स्विच करने के लिए किसी बटन की आवश्यकता नहीं है, यह पहले से ही SwiftUI में बनाया गया है। इसके अलावा, SwiftUI "स्क्रॉल ऑफ़ सेट्स" (यानी, ऊपर प्रस्तुत स्क्रीन के सेट) के संयोजन के लिए और अधिक विकल्प हैं, बस एक स्क्रॉलिंग टेबल के नीचे, और हम इनमें से कुछ बहुत ही दिलचस्प विकल्पों को देखेंगे।

लेकिन पहले, आइए एक " SwiftUI सेट" प्रदर्शित करने पर ध्यान दें, जिसके लिए SwiftUI ChartView एक ChartView :



SwiftUI आपको छोटे टुकड़ों में एक जटिल UI बनाने और परीक्षण करने की अनुमति देता है, और फिर इन टुकड़ों को एक पहेली में इकट्ठा करना बहुत आसान है। हम ऐसा करेंगे। हमारा ChartView इन छोटे टुकड़ों में बहुत अच्छी तरह से ChartView :

• GraphsForChart - ये स्वयं ग्राफ होते हैं, जो एक विशिष्ट "रेखांकन के सेट" के लिए बनाए जाते हैं। "चार्ट" को "मिनी मैप" RangeView का उपयोग करके उपयोगकर्ता द्वारा नियंत्रित समय सीमा के लिए दिखाया गया है, जिसे नीचे प्रस्तुत किया जाएगा।
• YTickerView ऊंचाई और इसी क्षैतिज ग्रिड के साथ Y अक्ष है।
• IndicatorView एक क्षैतिज रूप से उपयोगकर्ता द्वारा संचालित संकेतक है जो आपको X अक्ष पर समय अक्ष पर संबंधित संकेतक स्थिति के लिए "चार्ट" और समय के मूल्यों को देखने की अनुमति देता है।
• TickerView - "रेंगने वाली रेखा" तारीख के रूप में X अक्ष पर टाइमस्टैम्प दिखाती है,
• RangeView - एक अस्थायी "विंडो", इशारों का उपयोग करके उपयोगकर्ता द्वारा अनुकूलन, "चार्ट" के लिए समय अंतराल सेट करने के लिए।
• CheckMarksView - "चार्ट" के रंगों में "बटन" शामिल हैं और आपको ChartView पर " ChartView " की उपस्थिति को नियंत्रित करने की अनुमति देता है।

ChartView उपयोगकर्ता तीन तरीकों से ChartView के साथ बातचीत कर सकता है:

1. DragGesture इशारा का उपयोग करके "मिनी मैप" को नियंत्रित करें - यह अस्थायी "विंडो" को दाएं और बाएं स्थानांतरित कर सकता है और इसके आकार को घटा / बढ़ा सकता है:



2. एक निश्चित समय पर "चार्ट" के मूल्यों को दिखाते हुए, सूचक को क्षैतिज दिशा में ले जाएं:



3. "चार्ट्स" रंगों में रंगीन बटन का उपयोग करके कुछ चार्ट "छिपाएँ / दिखाएं" और चार्ट ChartView के नीचे स्थित है:



हम विभिन्न "चार्ट सेट्स" (हमारे पास परीक्षण डेटा में उनमें से 5) को अलग-अलग तरीकों से जोड़ सकते हैं, उदाहरण के लिए, List सूची का उपयोग करके सभी को एक साथ एक स्क्रीन पर रखकर (जैसे तालिका स्क्रॉल अप और डाउन):



या ScrollView HStack और 3D प्रभाव के साथ HStack क्षैतिज स्टैक का HStack करना:



... या "कार्ड" के ZStack रूप में एक दूसरे पर आरोपित, जिसका क्रम बदला जा सकता है: "चार्ट सेट" के साथ शीर्ष "कार्ड" को अगले कार्ड को देखने के लिए काफी दूर तक खींचा जा सकता है, और यदि आप इसे नीचे खींचना जारी रखते हैं, तो यह " " ZStack में अंतिम स्थान पर ZStack , और यह अगला" कार्ड "" आगे बढ़ता है ":



इन जटिल UI - एक "स्क्रॉलिंग टेबल", एक 3D प्रभाव के साथ एक क्षैतिज स्टैक, "कार्ड" ZStack , एक दूसरे पर आरोपित - उपयोगकर्ता इंटरैक्शन के सभी साधन पूरी तरह से काम करते हैं: समय के साथ चलते हैं और mini - map , संकेतक और छिपाने के बटन के "पैमाने" को बदलते हैं। "ग्राफिक्स"।

आगे हम SwiftUI का उपयोग करके इस UI के डिजाइन पर विस्तार से विचार करेंगे - सरल तत्वों से उनकी अधिक जटिल रचनाओं तक। लेकिन पहले, हम उस डेटा संरचना को समझते हैं जो हमारे पास है।

तो, हमारी समस्या का समाधान कई चरणों में विभाजित किया गया था:

• JSON फ़ाइल से डेटा डाउनलोड करें और इसे एक सुविधाजनक "आंतरिक" प्रारूप में प्रस्तुत करें
• एक "चार्ट के सेट" के लिए UI बनाएं
• विभिन्न "चार्ट सेट" मिलाएं

डेटा डाउनलोड करें

हमारे निपटान में, टेलीग्राम ने JSON डेटा प्रदान किया जिसमें कई "चार्ट के सेट" थे। chart प्रत्येक व्यक्ति के " chart सेट" में chart कई "चार्ट" (या "लाइन्स") chart.columns । chart.columns । प्रत्येक "ग्राफ" ("लाइन्स") में 0 - "x" , "y0" , "y1" , "y2" , "y3" , जिसके बाद एक्स अक्ष ("x") पर समय मान होता है। , या Y अक्ष पर "ग्राफिक्स" ("लाइन्स") ( "y0" , "y1" , "y2" , "y3" ) के मान:



"चार्ट सेट" में सभी "लाइन्स" की उपस्थिति वैकल्पिक है। "कॉलम" x के मान मिलीसेकंड में UNIX टाइमस्टैम्प हैं।

इसके अलावा, chart प्रत्येक अलग-अलग " chart सेट" को 6 हेक्साडेसिमल अंकों (उदाहरण के लिए, "#AAAAAA") और chart.names के प्रारूप में chart रंग के साथ प्रदान किया chart.names ।

JSON फ़ाइल में स्थित डेटा मॉडल बनाने के लिए, मैंने उत्कृष्ट क्विक टाइप सेवा का उपयोग किया। इस साइट पर, आप JSON फ़ाइल से पाठ का एक टुकड़ा सम्मिलित करते हैं और प्रोग्रामिंग भाषा ( Swift ), संरचना का नाम ( Chart ) निर्दिष्ट करते हैं, जो कि इस JSON डेटा के "पार्सिंग" और उसके बाद बनता है।

स्क्रीन के मध्य भाग में एक कोड उत्पन्न होता है, जिसे हम अपने एप्लिकेशन में एक अलग फाइल में Chart.swift नाम से Chart.swift । यह वह जगह है जहाँ हम JSON फॉर्मेट डेटा मॉडल रखेंगे। JSON फ़ाइल से डेटा के लोडर का उपयोग करके SwiftUI Generic डेमो से उधार लिए गए मॉडल पर, मुझे columns: [ChartElement] की एक सरणी मिली columns: [ChartElement] , जो Telegram प्रारूप में " columns: [ChartElement] सेट" का एक संग्रह है।

ChartElement डेटा ChartElement , विषम तत्वों के सरणियों के साथ, चार्ट के साथ गहन इंटरेक्टिव कार्य के लिए बहुत उपयुक्त नहीं है, इसके अलावा, टाइमस्टैम्प को UNIX प्रारूप में मिलीसेकंड (उदाहरण के लिए, 1542412800000, 1542499200000, 1542585600000, 1542672000000 ) और 6 हेक्साडेसिमल रंगों में प्रस्तुत किया गया है। अंक (उदाहरण के लिए, "#AAAAAA" )।

इसलिए, हमारे आवेदन के अंदर हम एक ही डेटा का उपयोग करेंगे, लेकिन एक अलग "आंतरिक" और काफी सरल प्रारूप [LinesSet] । [LinesSet] सरणी LinesSet " LinesSet सेट्स" का एक संग्रह है, जिनमें से प्रत्येक में "Feb 12, 2019" ( X अक्ष) और कई "चार्ट्स" lines ( Y अक्ष) के प्रारूप में xTime टाइमस्टैम्प शामिल हैं:



प्रत्येक लाइन चार्ट (लाइन) के लिए डेटा प्रस्तुत किया गया है

• पूर्णांक points: [Int] की एक सरणी points: [Int] ,
• नामित "ग्राफिक्स" title: String ,
• "ग्राफिक्स" type: String? ।
• color : UIColor Swift में color : UIColor - UIColor प्रारूप,
• अंकों की संख्या countY: Int ।

इसके अलावा, किसी भी "ग्राफ" को छिपाया या दिखाया जा सकता है जो मूल्य के आधार पर दिखाया गया है isHidden: Bool । समय सीमा upperBound समायोजित करने के upperBound lowerBound और upperBound 0 से 1 तक मान लेते हैं और न केवल "मिनी मैप" टाइम विंडो ( upperBound - lowerBound ) का आकार दिखाते हैं, बल्कि समय अक्ष X पर इसका स्थान भी lowerBound :



JSON डेटा संरचनाएं [ChartElement] और "आंतरिक" LinesSet और Line LinesSet की डेटा संरचनाएँ चार्ट.लिफ्ट फ़ाइल में हैं। JSON डेटा लोड JSON और इसे आंतरिक संरचना में परिवर्तित करने के लिए कोड Data.swift फ़ाइल में स्थित है। इन परिवर्तनों के बारे में विवरण यहाँ पाया जा सकता है ।

परिणामस्वरूप, हमें chartsData एक सरणी के रूप में आंतरिक प्रारूप में "चार्ट सेट" के बारे में डेटा प्राप्त हुआ।



यह हमारा डेटा , लेकिन SwiftUI में काम करने के लिए यह सुनिश्चित करना आवश्यक है कि उपयोगकर्ता द्वारा किए गए किसी भी बदलाव को chartsData सरणी (अस्थायी "विंडो" को बदलना, "चार्ट्स" को छिपाना / दिखाना) हमारे Views स्वचालित अपडेट के लिए नेतृत्व करता है।

हम @EnvironmentObject । यह हमें डेटा का उपयोग करने की अनुमति देगा जहाँ भी इसकी आवश्यकता है, और इसके अलावा, डेटा में परिवर्तन होने पर स्वचालित रूप से हमारे Views अपडेट करें। यह कुछ Singleton या ग्लोबल डेटा जैसा है।

@EnvironmentObject को हमें कुछ final class UserData बनाने की आवश्यकता है, जो UserData.swift फ़ाइल में स्थित है, chartsData डेटा chartsData करता है और ObservableObject प्रोटोकॉल को लागू करता है:



@Published "रैपर" की उपस्थिति आपको "समाचार" पोस्ट करने की अनुमति देगी कि उपयोगकर्ताडेटा वर्ग के charts के ये गुण बदल गए हैं, जिससे कि SwiftUI में किसी भी Views "इस समाचार को सब्सक्राइब किया गया" स्वचालित रूप से नए डेटा और अपडेट का चयन कर सकेगा।

याद रखें कि charts संपत्ति में किसी भी " isHidden " के लिए isHidden मान बदल सकते हैं (वे आपको इन "चार्ट" को छिपाने या दिखाने की अनुमति दे सकते हैं, साथ ही प्रत्येक व्यक्ति के "चार्ट के सेट" के लिए निचले निचले और ऊपरी ऊपरी upperBound समय सीमा भी upperBound सकते हैं।

हम अपने पूरे एप्लिकेशन में UI @EnvironmentObject वर्ग की charts संपत्ति का उपयोग करना चाहते हैं और हमें @EnvironmentObject के लिए मैन्युअल रूप से UI साथ उन्हें सिंक्रनाइज़ करने की आवश्यकता नहीं है।

ऐसा करने के लिए, आवेदन शुरू करते समय, हमें उपयोगकर्ताडेटा UserData () वर्ग का एक उदाहरण बनाना होगा ताकि बाद में हम इसे अपने आवेदन में कहीं भी एक्सेस कर सकें। हम scene (_ : , willConnectTo: , options: ) अंदर SceneDelegate.swift फाइल में यह करेंगे scene (_ : , willConnectTo: , options: ) विधि। यह वह जगह है जहाँ हमारा ContentView बनाया और लॉन्च किया गया है, और यह यहाँ है कि हम @EnvironmentObject ContentView किसी भी @EnvironmentObject बना सकते हैं, ताकि SwiftUI उन्हें किसी अन्य View लिए उपलब्ध करा सके View



अब, किसी भी View UserData वर्ग के @Published डेटा तक पहुँचने के लिए, हमें @EnvironmentObject आवरण का उपयोग करके चर चर बनाने की आवश्यकता है। उदाहरण के लिए, RangeView में समय सीमा निर्धारित करते समय RangeView हम UserData TYPE के साथ var userData चर बनाते हैं:



इसलिए, जैसे ही हमने कुछ @EnvironmentObject को आवेदन के "पर्यावरण" में लागू किया है, हम तुरंत इसका उपयोग या तो उच्चतम स्तर पर या नीचे 10 वें स्तर पर शुरू कर सकते हैं - इससे कोई फर्क नहीं पड़ता। लेकिन इससे भी महत्वपूर्ण बात यह है कि जब भी कोई View "वातावरण" बदलता है, तो इस @EnvironmentObject सभी Views स्वचालित रूप से @EnvironmentObject हो जाएंगे, जिससे डेटा के साथ सिंक्रनाइज़ेशन सुनिश्चित हो जाएगा।

उपयोगकर्ता इंटरफ़ेस ( UI ) को डिज़ाइन करने के लिए आगे बढ़ते हैं।

एक "ग्राफ के सेट" के लिए यूजर इंटरफेस (यूआई)

SwiftUI कई छोटे Views से SwiftUI बनाने के लिए एक समग्र तकनीक प्रदान करता है, और हमने पहले ही देखा है कि हमारा आवेदन इस तकनीक के साथ बहुत अच्छी तरह से फिट बैठता है, क्योंकि यह छोटे टुकड़ों में विभाजित होता है: "चार्ट ChartView चार्ट", " GraphsForChart चार्ट", Y YTickerView - YTickerView , "चार्ट्स" IndicatorView TickerView , " TickerView " TickerView का X - X एक्सिस पर टाइम TickerView साथ यूजर द्वारा संचालित इंडिकेटर वैल्यू, TickerView नियंत्रित "टाइम विंडो" RangeView , "चार्ट्स" CheckMarksView को छुपाने / दिखाने के निशान। हम न केवल स्वतंत्र रूप से एक दूसरे के इन सभी Views बना सकते हैं, बल्कि टेस्ट डेटा पर Previews (प्रारंभिक "लाइव" विचारों) का उपयोग करके तुरंत Xcode 11 में परीक्षण कर सकते हैं। आप आश्चर्यचकित होंगे कि कोड उन्हें अन्य मूल Views से बनाने के लिए कितना सरल है।

GraphView - "ग्राफ़" ("लाइन")

पहला View , जिसके साथ हम शुरू करेंगे, वास्तव में "ग्राफ़" ही (या "लाइन") है। हम इसे GraphView कहेंगे:



हमेशा की तरह, GraphView बनाना, मेनू File → New → File का उपयोग करके Xcode 11 में एक नई फ़ाइल बनाने के साथ शुरू होता है:



तब हम फ़ाइल के वांछित प्रकार का चयन करते हैं - यह SwiftUI फ़ाइल है:



... हमारे View को "ग्राफ View " नाम दें और इसके स्थान को इंगित करें:



"Create" बटन पर क्लिक करें और स्क्रीन के मध्य में Text ( "Hello World!") साथ एक मानक View प्राप्त करें Text ( "Hello World!") :



हमारा कार्य "ग्राफ" के साथ Text ("Hello World!") को बदलना है, लेकिन पहले, आइए देखें कि "ग्राफ" बनाने के लिए हमारे पास प्रारंभिक डेटा क्या है:

• हमारे पास line.points "ग्राफ़िक्स" line: Line के मान हैं line: Line ,
• समय सीमा rangeTime , जो अनुक्रमणिकाओं की एक श्रृंखला है एक्स-एक्सिस पर समय स्टैम्प एक्स टाइम की Range ,
• मानों की rangeY: Range Y rangeY: Range लिए rangeY: Range "ग्राफ़िक्स",
• "ग्राफिक्स" स्ट्रोक लाइन लाइन की lineWidth ।

इन गुणों को GraphView संरचना में जोड़ें:



यदि हम अपने "ग्राफिक्स" Previews (पूर्वावलोकन) के लिए उपयोग करना चाहते हैं, जो कि केवल MacOS Catalyna लिए संभव हैं, तो हमें अनुक्रमित rangeTime और "ग्राफिक्स" के line डेटा के साथ एक MacOS Catalyna आरंभ करना होगा:



हमारे पास पहले से ही chartsData परीक्षण डेटा है जो हमें chart.json से मिला है। JSON फ़ाइल, और हमने इसे chart.json लिए उपयोग किया है।

हमारे मामले में, यह पहला " chartsData[0] सेट" chartsData[0] और इस chartsData[0].lines[0] में पहला "चार्ट" chartsData[0].lines[0] , जिसे हम line पैरामीटर के रूप में chartsData[0].lines[0] प्रदान करेंगे।

हम समय अंतराल rangeTime रूप में सूचकांकों की पूरी श्रृंखला का उपयोग करेंगे 0..<(chartsData[0].xTime.count - 1) ।
rangeY और lineWidth को बाहरी रूप से सेट किया जा सकता है, या सेट नहीं किया जा सकता है, क्योंकि उनके पास पहले से ही प्रारंभिक मूल्य हैं: rangeY nil , और lineWidth 1 ।

हमने जानबूझकर rangeY Optional संपत्ति TYPE का एक प्रकार बनाया है, क्योंकि अगर rangeY बाहरी और rangeY = nil सेट नहीं है, तो हम maxY से सीधे "ग्राफिक्स" के न्यूनतम न्यूनतम और अधिकतम अधिकतम मान की गणना करते हैं। डेटा:



यह कोड संकलित करता है, लेकिन हमारे पास अभी भी स्क्रीन पर पाठ के साथ एक मानक View Text ("Hello World!") स्क्रीन के बीच में:



क्योंकि body हमें पाठ Text ("Hello World!") Path साथ बदलना होगा, जो हमारे "ग्राफ़: पॉइंट्स: line.points " को addLines(_:) कमांड (लगभग Core Graphics तरह) का उपयोग करके addLines(_:)




हम stroke (...) हमारे Path रेखा के Path lineWidth जिसकी मोटाई lineWidth , और स्ट्रोक लाइन का रंग डिफ़ॉल्ट रंग के अनुरूप होगा (अर्थात, काला):



हम अपने विशेष "लाइन" line.color "रंग" में निर्दिष्ट रंग के साथ स्ट्रोक लाइन के लिए काले रंग को बदल सकते हैं:



हमारे "ग्राफ़" को किसी भी आकार के आयतों में रखने के लिए, हम GeometryReader कंटेनर का उपयोग करते हैं। Apple दस्तावेज़ीकरण में Apple GeometryReader एक "कंटेनर" View जो अपनी सामग्री को अपने स्वयं के आकार के size और समन्वित स्थान के कार्य के रूप में परिभाषित करता है। अनिवार्य रूप से, GeometryReader एक और View ! क्योंकि SwiftUI में लगभग हर जगह View ! GeometryReader आपको अन्य Views विपरीत Views कुछ अतिरिक्त उपयोगी जानकारी तक पहुंचने की अनुमति देगा, जिसका उपयोग आप अपने कस्टम View डिज़ाइन करते समय कर सकते हैं।

हम किसी भी आकार के लिए GraphView अनुकूलनीय बनाने के लिए GeometryReader और Path कंटेनरों का उपयोग करते हैं। और अगर हम अपने कोड को ध्यान से देखें, तो हम GeometryReader geometry नामक GeometryReader चर के लिए बंद देखेंगे।



इस चर में GeometryProxy ट्रेपी है, जो कई "आश्चर्य" के साथ एक संरचनात्मक संरचना है:

 public var size: CGSize { get } public var safeAreaInsets: EdgeInsets { get } public func frame(in coordinateSpace: CoordinateSpace) -> CGRect public subscript<T>(anchor: Anchor<T>) -> T where T : Equatable { get } 

GeometryProxy परिभाषा से, हम देखते हैं कि दो गणना किए गए चर var safeAreaInsets var size और var safeAreaInsets , एक फ़ंक्शन frame( in:) और एक subscript getter var safeAreaInsets । हमें केवल "ग्राफ़िक्स" ड्राइंग क्षेत्र की geometry.size.height . size . geometry.size.width और geometry.size.width की ऊँचाई का size निर्धारित करने के लिए size चर की आवश्यकता है।

इसके अलावा, हम अपने "ग्राफ" को animation (.linear(duration: 0.6)) संशोधक animation (.linear(duration: 0.6)) का उपयोग कर चेतन करने में सक्षम करते हैं।



GraphView_Previews हमें किसी भी "सेट" से किसी भी "चार्ट" का परीक्षण करने की अनुमति देता है। नीचे "चार्ट सेट" से "चार्ट" को सूचकांक 4: chartsData[4] और इंडेक्स 0 "ग्राफिक्स" के साथ इस सेट में दिया गया है: chartsData[4].lines[0] :



हम frame (height: 400) का उपयोग करके "ग्राफिक्स" की height 400 तक सेट करते हैं, चौड़ाई स्क्रीन की चौड़ाई के समान रहती है। यदि हमने frame (height: 400) उपयोग नहीं किया, तो "ग्राफ" पूरी स्क्रीन पर कब्जा कर लेगा।हमने मानों की एक सीमा निर्दिष्ट नहीं की rangeYऔर डिफ़ॉल्ट मान का GraphViewउपयोग किया nil, इस मामले में "चार्ट" समय अंतराल में अपना न्यूनतम और अधिकतम मान लेता है rangeTime:



हालांकि हमने अपने Pathमॉडल के लिए एक संशोधक का उपयोग किया था animation (.linear(duration: 0.6)), कोई एनीमेशन नहीं होगा, उदाहरण के लिए, जब rangeYमूल्य सीमा बदल जाती है " ग्राफिक्स। " एक "चार्ट" एक सीमा के एक मूल्य rangeYसे दूसरे में बिना किसी एनीमेशन के बस "कूद" होगा ।

कारण सरल है: हमने सिखाया है SwiftUIकि किसी विशिष्ट श्रेणी के लिए "ग्राफ़" कैसे बनाया जाए rangeY, लेकिन हमने यह नहीं सिखाया SwiftUIकि "ग्राफ" को कई बार rangeYशुरू और अंत के बीच की सीमा के मध्यवर्ती मानों के साथ कैसे पुन: पेश किया जाए और इसके लिएSwiftUIप्रोटोकॉल मिलता है Animatable।

सौभाग्य से, यदि आपका View"आंकड़ा" है, अर्थात View, यह एक प्रोटोकॉल को लागू करता है Shape, तो इसके लिए एक प्रोटोकॉल पहले ही लागू किया जा चुका है Animatable। इसका मतलब यह है कि एक संगणित संपत्ति animatableDataहै जिसके साथ हम एनीमेशन प्रक्रिया को नियंत्रित कर सकते हैं, लेकिन डिफ़ॉल्ट रूप से इसे सेट किया जाता है EmptyAnimatableData, अर्थात कोई एनीमेशन नहीं होता है।

एनीमेशन के साथ समस्या को हल करने के लिए, हमें पहले अपने "ग्राफ़" को चालू GraphViewकरना होगा Shape। यह बहुत सरल है, हमें केवल उस फ़ंक्शन को लागू करने की आवश्यकता है func path (in rect:CGRect) -> Pathजो हमारे पास अनिवार्य रूप से पहले से मौजूद है और गणना की गई संपत्ति की मदद से इंगित करें कि हम animatableDataकिस डेटा को चेतन करना चाहते हैं:



ध्यान दें कि एनीमेशन नियंत्रण का विषय एक उन्नत विषय हैSwiftUIऔर आप इसके बारे में अधिक लेख "उन्नत स्विफ्टुई एनिमेशन - भाग 1: पथ" में सीख सकते हैं । हम एनीमेशन के साथ बहुत अधिक सरल "ग्राफिक्स

" Graphमें परिणामी "आकृति" का उपयोग कर सकते हैं GraphViewNew:



आप देखते हैं कि हमें GeometryReaderअपने नए "ग्राफिक्स" की आवश्यकता नहीं थी GraphViewNew, क्योंकि प्रोटोकॉल के लिए धन्यवाद Shapeहमारा "आंकड़ा" Graphमाता-पिता के किसी भी आकार के अनुकूल होने में सक्षम होगा View।

स्वाभाविक रूप से, Previewsहमें इस मामले में उसी तरह का परिणाम मिला जैसे GraphView:



निम्नलिखित संयोजनों में, हम GraphViewNewमूल्यों को प्रदर्शित करने के लिए उसी "ग्राफिक्स" का उपयोग करेंगे ।

GraphsForChart - "रेखांकन" ("लाइन्स") का सेट

इसका कार्य एक सामान्य अक्ष के साथ एक निश्चित समय सीमा में View"चार्ट के सेट" से सभी "चार्ट" ("लाइन्स") प्रदर्शित करना है , और "लाइन्स" की चौड़ाई बराबर है : जैसा कि और , हम एक नई फ़ाइल बनाएंगे और इसके लिए प्रारंभिक डेटा को परिभाषित करेंगे। "चार्ट सेट":chartrangeTimeYlineWidth



GraphViewGraphViewNewGraphsForChartGraphsForChart.swift

• "चार्ट्स का सेट" chart: LineSet(मूल्यों पर Y),
• "चार्ट" के समय टिकटों के सूचकांकों की सीमा rangeTime: Range( X)
• ग्राफ लाइन स्ट्रोक मोटाई lineWidth

rangeY: Range"चार्ट सेट" ( Y) के मानों की सीमा को isHidden = falseइस "सेट" में शामिल किए गए व्यक्ति की सीमाओं की संघ के रूप में गणना की जाती है, जो इस "सेट" में शामिल हैं:



इसके लिए हम फ़ंक्शन का उपयोग करते हैं rangeOfRanges: हम निर्माण में



छिपे हुए "चार्ट्स" ( isHidden = false) को नहीं दिखाते हैं । प्रत्येक "ग्राफ़" को स्क्रीन पर प्रदर्शित होने और स्क्रीन को छोड़ने की संभावना "चाल" संशोधक का उपयोग करते हुए : इस संशोधक के लिए धन्यवाद, "ग्राफिक्स" को स्क्रीन पर छिपाने और वापस करने की प्रक्रिया एनीमेशन के साथ स्क्रीन पर जगह लेगी और उपयोगकर्ता को स्पष्ट कर देगी कि पैमाने क्यों बदल गए हैं । उपयोग का अर्थ है उपयोग करनाZStackForEachtransition(.move(edge: .top))



ChartView Y

drawingGroup()Metalग्राफिक आकृतियों के लिए। हमारे परीक्षण डेटा और सिम्युलेटर पर, आप के साथ ड्राइंग की गति में अंतर महसूस नहीं करेंगे Metalऔर Metal, लेकिन अगर आप किसी भी पर बहुत अधिक भारी रेखांकन दोहराते हैं iPhone, तो आप इस अंतर को नोटिस करेंगे। अधिक विस्तृत परिचय के लिए, इसका उपयोग करने के लिए drawingGroup(), आप लेख "उन्नत स्विफ्टयूआई एनिमेशन - भाग 1: पथ" देख सकते हैं या वीडियो सत्र 237 डब्ल्यूडब्ल्यूडीसी 2019 ( स्विफ्टयूआई के साथ बिल्डिंग कस्टम दृश्य ) देख सकते हैं।

जैसा कि पूर्वावलोकन के साथ GraphViewNewपरीक्षण के मामले में GraphsForChart, Previewsहम कर सकते हैं। उदाहरण के लिए, किसी भी "सेट ऑफ़ चार्ट्स" को एक इंडेक्स के साथ सेट करें 0:

IndicatorView - क्षैतिज रूप से स्थानांतरित संकेतक "ग्राफिक्स"।

यह संकेतक आपको "चार्ट" के सटीक मान प्राप्त करने और समय पर संबंधित बिंदु के लिए समय पर अनुमति देता है X:



सूचक एक विशिष्ट "चार्ट के सेट" के लिए बनाया गया है chartऔर इसमें X"चार्ट" मान के स्थान पर "सर्कल" के रूप में MARK के साथ ऊर्ध्वाधर लाइन के साथ एक चलती है । इस ऊर्ध्वाधर रेखा के शीर्ष पर एक छोटा "POSTER" जुड़ा हुआ है, जिसमें "चार्ट" और समय के संख्यात्मक मान शामिल हैं।



सूचक एक इशारा का उपयोग करके उपयोगकर्ता द्वारा ग्लाइड करता है DragGesture:



हम तथाकथित "वृद्धिशील" इशारा निष्पादन का उपयोग करते हैं। प्रारंभिक बिंदु से निरंतर दूरी के बजाय value.translation.width, हम onChangedलगातार उस स्थान से दूरी प्राप्त करेंगे जहां हम पिछली बार हैंडलर में इशारा करते थे :value.translation.width - self.prevTranslation। यह हमें संकेतक के एक सुगम आंदोलन के साथ प्रदान करेगा। किसी दिए गए "चार्ट के सेट" की मदद से

संकेतक का परीक्षण करने के लिए , हम "चार्ट्स" के तैयार किए गए निर्माण को आकर्षित कर सकते हैं : हम किसी भी सेट कर सकते हैं, लेकिन एक दूसरे के साथ समन्वित, संकेतक और "चार्ट" दोनों के लिए समय सीमा । यह हमें यह सुनिश्चित करने की अनुमति देगा कि "चार्ट" के मूल्यों को इंगित करने वाले "मंडलियां" सही स्थानों पर हैं।IndicatorViewPreviewschartViewGraphsForChart



rangeTimeIndicatorViewGraphsForChart

TickerView- Xअंकों के साथ।

अब तक, हमारे "चार्ट" को इस अर्थ में चित्रित किया गया है कि उनके X Yपास उपयुक्त तराजू और निशान नहीं हैं। चलो उस पर Xटाइमस्टैम्प के साथ आकर्षित TickerMarkViewकरते हैं। सामी निशान TickerMarkViewबहुत सरल हैं Viewऊर्ध्वाधर ढेर VStackजिसमें हैं की व्यवस्था की Pathऔर Text:



एक निश्चित "सेट ग्राफिक्स" के लिए समय धुरी पर निशान के सेट chart : LineSetका गठन TickerViewउपयोगकर्ता के चयनित समय सीमा के अनुसार rangeTimeऔर अंक की अनुमानित मात्रा estimatedMarksNumberहै, जो उपयोगकर्ता के दृश्य के क्षेत्र में होना चाहिए:



व्यवस्था के लिए "रनिंग" टाइमस्टैंप हम एक ScrollViewक्षैतिज स्टैक का उपयोग करते हैंHStack, जो समय सीमा में परिवर्तन के रूप में बदल जाएगा rangeTime।

जैसा कि TickerViewहम एक कदम के रूप में stepहै, जो दिखाई समय स्टाम्प TimeMarkViewएक पूर्व निर्धारित समय सीमा के आधार पर rangeTimeऔर स्क्रीन की चौड़ाई widthRange...



... और फिर समय स्टाम्प कदम ग चयन stepसरणी के chart.xTimeसूचकांक का उपयोग करके indexes।

वास्तव में X- एक क्षैतिज रेखा - हम डालेंगे overlay...



एक क्षैतिज स्टैक पर HStack, टाइमस्टैम्प के साथ TimeMarkView, जिसे हम आगे बढ़ाते हैं offset:



इसके अलावा, हम X- colorXAxisऔर खुद के रंग सेट कर सकते हैं - colorXMark:

YTickerView- Yनिशान और एक ग्रिड के साथ।

यह एक डिजिटल निशान के साथ Viewखींचता है । अंक स्वयं एक ऊर्ध्वाधर स्टैक के साथ बहुत सरल होते हैं जिसमें उन्हें रखा जाता है (क्षैतिज रेखा) और एक संख्या के साथ: एक निश्चित "चार्ट के सेट" के लिए निशान का एक सेट बनता है । मानों की श्रेणी को फ़ंक्शन का उपयोग करके "चार्ट्स के इस सेट" में शामिल सभी "चार्ट" के मानों की श्रेणी के रूप में गणना की जाती है । Y- अक्ष पर निशान की अनुमानित संख्या पैरामीटर द्वारा निर्धारित है : में हम मूल्यों की "ग्राफिक्स" बदलते सीमा पर नजर रखने के । दरअसल Y- अक्ष - ऊर्ध्वाधर रेखा - हम अपने निशान पर लगाते हैं ... YYMarkViewYMarkViewViewVStackPathText



YchartYTickerViewrangeYrangeOfRangesestimatedMarksNumber



YTickerViewrangeYoverlay



इसके अलावा, हम वाई-अक्ष के रंगों को स्वयं सेट कर सकते हैं colorYAxis, और - अंक colorYMark:

RangeView - "मिनी-मैप" का उपयोग करके समय सीमा निर्धारित करना।

हमारे उपयोगकर्ता इंटरफ़ेस का सबसे गतिशील हिस्सा "चार्ट का सेट" प्रदर्शित करने के लिए समय सीमा ( lowerBound, upperBound) निर्धारित कर रहा है:



RangeView- यह mini - mapदूसरों में "चार्ट के सेट" के अधिक विस्तृत विचार के उद्देश्य के लिए एक विशिष्ट समय अनुभाग को उजागर करना है Views।

पिछले वाले के रूप में View, के लिए प्रारंभिक डेटा RangeViewहैं:

• "चार्ट सेट" स्वयं chart: LineSet(मान Y),
• ऊंचाई height "mini-map" RangeView,
• चौड़ाई widthRange "mini-map" RangeView,
• इंडेंट indent "mini-map" RangeView।

ऊपर चर्चा किए गए अन्य लोगों के विपरीत Views, हमें एक इशारे के साथ DragGestureसमय सीमा ( lowerBound, upperBound) को बदलना होगा और तुरंत इसका परिवर्तन देखना होगा, इसलिए उपयोगकर्ता द्वारा परिभाषित समय सीमा ( lowerBound, upperBound) जिसके साथ हम काम करेंगे, एक चर चर में संग्रहीत किया जाता है @EnvironmentObject var userData: UserData: चर में



कोई भी परिवर्तन var userDataहोगा Viewsउस पर आश्रित सभी को लाल कर देना।

मुख्य चरित्र RangeViewएक पारदर्शी "विंडो" है, जिसकी स्थिति और आकार उपयोगकर्ता द्वारा एक इशारे के साथ विनियमित किया जाता है DragGesture:

1. यदि हम एक पारदर्शी "विंडो" के अंदर इशारा का उपयोग करते हैं, तो Xपरिवर्तन के साथ "विंडो" का स्थिति और इसका आकार नहीं बदलता है:



2. यदि हम बाएं अंधेरे भाग में एक इशारे का उपयोग करते हैं, तो केवल "विंडो" के बाएँ बॉर्डर में परिवर्तन होता है lowerBound, जिससे हम पारदर्शी "विंडो" की चौड़ाई को घटा या बढ़ा सकते हैं:



3. यदि हम सही अंधेरे वाले हिस्से में एक इशारा का उपयोग करते हैं, तो केवल "विंडो" के राइट बॉर्डर्स में परिवर्तन होता है upperBound। वृद्धि की इजाजत दी या पारदर्शी "विंडो" की चौड़ाई कम हो:



RangeView3 मुख्य तत्व होते हैं बहुत सरल है: दो आयतों Rectangle ()और छवियों Imageजिसका सीमाओं गुण द्वारा निर्धारित होते हैं lowerBoundऔर upperBoundसे @EnvironmentObject var userData: UserDataऔर इशारों से नियंत्रित कर रहे हैं DragGesture:



हम "मिलाती हैं" इस निर्माण में ( overlay) पहले से ही परिचित है हमें GraphsForChartViewदिए गए "चार्ट्स" से "चार्ट्स" chart:



यह हमें मॉनिटर करने की अनुमति देगा कि कितना "चार्ट" "विंडो" में मिलता है।

पारदर्शी "विंडो" में कोई परिवर्तन (यह पूरी तरह से ले जाया जाता है या सीमाओं के परिवर्तन) गुण में परिवर्तन का परिणाम है lowerBoundऔर upperBoundके कार्यों में UserData में onChangedसंकेत प्रसंस्करण DragGestureदो बक्से में Rectangle ()और चित्र Image...



यह वह जगह है, जैसा कि हम पहले से ही जानते हैं, स्वचालित रूप से अन्य redrawing के लिए नेतृत्व करेंगे Views(इस मामले में, "चार्ट", अंकों के साथ एक्स-अक्ष, अंकों और संकेतक के साथ वाई-अक्ष ग hartView):



चूंकि हमारे पास Viewएक चर है @EnvironmentObject userData: UserData, पूर्वावलोकन के लिए Previews, हमें इसका उपयोग करके इसका प्रारंभिक मूल्य निर्धारित करना होगा .environmentObject (UserData()):

CheckMarksView - "छुपा" और "रेखांकन" दिखा रहा है।

CheckMarksViewयह "रेखांकन के सेट" में प्रत्येक व्यक्ति "ग्राफिक्स" के गुणों को बदलने के लिए HStackएक पंक्ति के साथ एक क्षैतिज स्टैक है : हमारी परियोजना में इसे या तो एक नियमित बटन का उपयोग करके और बुलाया या एक अनुकरण बटन का उपयोग करके लागू किया जा सकता है । बटन को नकल करना पड़ा क्योंकि पदानुक्रम में उच्चतर स्थित इन बटन में से कई को रखने पर , वे सही तरीके से काम करने के लिए "मना" करते हैं। यह एक लंबे समय तक चलने वाला बग है जो Xcode 11 से वर्तमान संस्करण के बीटा 1 से अटका हुआ है । एप्लिकेशन का वर्तमान संस्करण एक सिम्युलेटेड बटन का उपयोग करता है । नकली बटन और असली बटन दोनोंcheckBoxesisHiddenchart



CheckBoxButtonCheckButtonSimulatedButton



ButtonListSimulatedButton

SimulatedButtonCheckButtonViewउनकी "उपस्थिति" के लिए एक ही चीज़ का उपयोग करें - CheckBoxView। इसमें HStackयुक्त Texऔर Image:



ध्यान दें कि इनिशियलाइज़ेशन पैरामीटर CheckBoxViewएक @Bindingचर है var line: Line। isHiddenइस चर की संपत्ति "उपस्थिति" को परिभाषित करती है CheckBoView:




उपयोग करते CheckBoViewसमय SimulatedButtonऔर अंदर, CheckButtonआपको प्रारंभ $के lineदौरान संकेत का उपयोग करना चाहिए : चर




संपत्ति isHiddenमें lineस्विच किया SimulatedButtonजाता है onTapGesture...



... और CheckButton- सामान्य actionबटन के साथ Button:



ध्यान दें कि आरंभीकरण पैरामीटर के लिए SimulatedButtonऔर CheckButtonभी है@Bindingएक चर var line: Line। इसलिए, उनके उपयोग लागू किया जाना चाहिए $करने के लिए CheckMarksViewस्विचन चर userData.charts[self.chartIndex].lines[self.lineIndex(line: line)].isHidden, जो एक चर वैश्विक चर में संग्रहीत किया जाता है @EnvironmentObject var userData:



हम इस परियोजना में अप्रयुक्त रखा है वर्तमान में है CheckButtonइस मामले पर, यदि आप अचानक Appleइस त्रुटि को ठीक होगा। इसके अलावा, आप उपयोग करने का प्रयास कर सकते हैं CheckButtonमें CheckMarksViewबजाय SimulatedButtonऔर यकीन है कि यह सेट, "रेखांकन का एक सेट 'की रचना के मामले में काम नहीं करता ChartViewका उपयोग कर Listमें ListChartsView।

चूँकि हमारे पास Viewएक वेरिएबल है @EnvironmentObject var userData: UserData, प्रीव्यू के लिए Previews, हमें इसका आरंभिक मूल्य इस प्रकार निर्धारित करना चाहिए .environmentObject(UserData()):

विभिन्न का संयोजन Views।

SwiftUI- यह मुख्य रूप Viewsसे बड़े लोगों में विभिन्न छोटे लोगों का एक संयोजन है, और बड़े लोगों Viewsको बहुत बड़े लोगों में, आदि, जैसे कि एक खेल में Lego। इस SwiftUIतरह के संयोजन के कई साधन हैं Views:

• एक ऊर्ध्वाधर ढेर VStack,
• क्षैतिज ढेर HStack,
• ढेर के "गहराई" ZStack,
• समूह Group,
• ScrollView ।
• सूची List,
• फार्म Form,
• बुकमार्क कंटेनर TabView
• आदि

हम अपने संयोजन को सबसे सरल के साथ शुरू करते हैं GraphsViewForChart, जो "फेसलेस" "चार्ट सेट" GraphsForChartAXIS Y देता है और "डीप" स्टैक का उपयोग करके एक्स-एक्सिस के साथ आगे बढ़ने वाला एक संकेतक ZStack:



हमने एक मॉडिफायर का उपयोग करके इसे प्रदर्शित करने के लिए Previewsअपने नए GraphsViewForChartकंटेनर NavigationViewमें एक कंटेनर जोड़ा। । हम एक्सिस वाई और एक संकेतक, एक्सिस एक्स के साथ "रनिंग लाइन", साथ ही नियंत्रण: "मिनी-मैप" और "ग्राफ़" डिस्प्ले स्विच की समय सीमा के साथ ऊपर दिए गए "चार्ट सेट" से संयोजन और संलग्न करते हैं । नतीजतन, हम ऊपर बताए गए एक को प्राप्त करते हैं , जो "चार्ट का सेट" प्रदर्शित करता है और आपको समय पर इसके प्रदर्शन को नियंत्रित करने की अनुमति देता है:Dark.collorScheme(.dark)

RangeViewCheckMarksView

ChartView



इस स्थिति में, हम ऊर्ध्वाधर स्टैक का उपयोग करके संयोजन करते हैं VStack:



अब हम पहले से ही प्राप्त चार्ट व्यू के सेट के संयोजन के लिए 3 विकल्पों पर विचार करेंगे।

1. "स्क्रॉल टेबल" List,
2. HStack3 डी प्रभाव के साथ क्षैतिज ढेर ,
3. ZStack "कार्ड"

एक "स्क्रॉलिंग टेबल"ListChartsView एक सूची का उपयोग करके आयोजित की जाती है List:



एक 3 डी प्रभाव के साथ एकScrollView क्षैतिज स्टैक एक क्षैतिज स्टैक HStackऔर फॉर्म में एक सूची का उपयोग करके आयोजित किया जाता है ForEach:



इस दृश्य में, उपयोगकर्ता इंटरैक्शन के सभी साधन पूरी तरह से काम करते हैं: समयरेखा के साथ आगे बढ़ना और "स्केल" mini- map, संकेतक और छिपाने वाले बटन बदलना "ग्राफिक्स"।

ZStack "कार्ड" की अधिकता।

सबसे पहले, हम CardView"मैप" के लिए बनाते हैं - यह एक्सिस एक्स और वाई के साथ चार्ट का एक सेट है, लेकिन नियंत्रण के बिना: "मिनी - मैप" के बिना और चार्ट की उपस्थिति / छुपाने के लिए बटन के बिना। CardViewबहुत समान है ChartView, लेकिन जब से हम एक दूसरे के ऊपर "कार्ड" ओवरले करने जा रहे हैं, हमें उन्हें अपारदर्शी होने की आवश्यकता है। इस अंत तक, हम ZStack"पृष्ठभूमि" में रखे जाने के लिए एक अतिरिक्त रंग का उपयोग करते हैं cardBackgroundColor। इसके अलावा, हम "नक्शा" गोल किनारों के साथ एक बॉक्स के लिए क्या करना होगा:



की "मानचित्र" एक ढेर की ओर से आयोजित superposition VStack, ZStackऔर के रूप में सूची ForEach:



लेकिन हम एक दूसरे पर लागू होगा सिर्फ एक "कार्ड" और "3 डी-macshtabiruemye" नहीं है कार्ड्स CardViewScalable, जिनका आकार सूचकांक में वृद्धि के साथ घटता हैindexChatऔर वे थोड़ा लंबवत स्थानांतरित हो जाते हैं।

"3D-स्केलेबल कार्ड" के क्रम sequencedको इशारों के अनुक्रम ( ) का उपयोग करके बदला जा सकता है LongPressGestureऔर DragGesture, जो केवल "कार्ड" के साथ सबसे ऊपर "कार्ड" पर कार्य करता है indexChat == 0:



आप LongPress"चार्ट के सेट" के साथ शीर्ष "कार्ड" पर क्लिक कर सकते हैं और फिर इसे Dragनीचे खींच सकते हैं ( ) अगले कार्ड को देखने के लिए पर्याप्त है, और यदि आप इसे नीचे खींचना जारी रखते हैं, तो यह "अंतिम स्थान पर" चला जाता है ZStack, और अगला "कार्ड" आगे आता है:



इसके अलावा, ऊपरी "कार्ड" के लिए हम आवेदन कर सकते हैं TapGesture, जो कार्य करेगा इशारों के साथ LongPressGestureऔर एक DragGesture:



Tap"ग्राफिक्स के सेट" एक इशारा मोडल दिखाएगा ChartViewई के साथ ementami प्रबंधन RangeViewऔरCheckMarksView :

TabViewसंरचना "चार्ट सेट" के सभी 3 वेरिएंट एक स्क्रीन पर संयोजन के लिए आवेदन ChartView।

हमारे पास एक छवि Imageऔर पाठ के साथ 3 बुकमार्क हैं Text, VStackउनकी संयुक्त प्रस्तुति के लिए एक ऊर्ध्वाधर स्टैक की आवश्यकता नहीं है।

वे "चार्ट के सेट" के हमारे 3 तरीकों के अनुरूप हैं ChartViews:

1. "स्क्रॉल टेबल" ListChartViews,
2. 3 डी प्रभाव के साथ क्षैतिज ढेर HStackChartViews,
3. ZStack ने "कार्ड्स" पर ज़ोर दिया OverlayCardsViews।

उपयोगकर्ता इंटरैक्शन के सभी तत्व: mini - map"चार्ट" को छिपाने के लिए समय और "स्केल" को सहायता , संकेतक और बटन के साथ बदलते हैं । सभी 3 मामलों में पूरी तरह से काम करते हैं।

कोड गितुब पर है ।

SwiftUI ...

आपको वीडियो ट्यूटोरियल, पुस्तकों और ब्लॉगों से परिचित होना चाहिए:

Mang To , Lets Build That Application , साथ ही कुछ SwiftUI अनुप्रयोगों का वर्णन ,
- एक मुफ्त पुस्तक "उदाहरण के लिए SwiftUI" और एक वीडियो www.hackingwithswift
- quick - start / swiftui - भुगतान की गई पुस्तक। लेकिन इसका आधा हिस्सा मुफ्त www.bigmountstudio.com/swiftui-views-book- के लिए डाउनलोड किया जा सकता है
- SwiftUI www.hackingwithswift.com/articles/201/start-the-100-days-of-swswui के साथ 100 दिन का कोर्स , जो अभी शुरू होता है और 31 दिसंबर, 2019 को समाप्त हो जाएगा,
- स्विफ्टयूआई में प्रभावशाली चीजें स्विफ्टुई- लाब डॉट कॉम
- माजिद ब्लॉग ,
- पॉइंटफ्री पर की जाती हैं।www.pointfree.co SwiftUI (सुपर दिलचस्प) में Reducers का उपयोग करने के बारे में पदों का "मैराथन"
एक अद्भुत मूवीसविफ्टयूआई एप्लिकेशन है जिसने कुछ विचारों को उधार लिया है।