🎞️ 🎠 🤗 IOS के लिए अपना कंपोनेंट कैसे लिखें 👯 🧒🏻 🙏🏿

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

Apple UITextField , UIButton और UISwitch सहित लगभग 20 विभिन्न UI घटकों के साथ डेवलपर प्रदान करता है। मानक नियंत्रण की सभी शक्ति का उपयोग करके, आप कई अलग-अलग इंटरफ़ेस विकल्प बना सकते हैं। जैसा कि हो सकता है, कभी-कभी ऐसी चीज़ की ज़रूरत होती है जिसे मानक घटकों द्वारा महसूस नहीं किया जा सकता है।

मैं एक उदाहरण दूंगा। मान लीजिए कि आप एक ऐसा एप्लिकेशन विकसित कर रहे हैं जो बिक्री पर अचल संपत्ति की सूची संकलित करता है। यह उपयोगकर्ता को एक विशिष्ट मूल्य सीमा में खोज परिणाम देखने की अनुमति देता है। वैकल्पिक रूप से, आप दो UISlider उपयोग कर सकते हैं, जिनमें से एक न्यूनतम मूल्य सेट करता है, अन्य - अधिकतम, जैसा कि स्क्रीनशॉट में दिखाया गया है:

हालांकि यह विकल्प काम करेगा, यह मूल्य सीमा की अवधारणा को बहुत अच्छी तरह से नहीं बताता है। दो स्लाइडर के साथ एक स्लाइडर का उपयोग करना बेहतर होगा जो न्यूनतम और अधिकतम के लिए जिम्मेदार हैं:

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

आप इस तरह के स्लाइडर को UIView उपवर्ग बना सकते हैं। और अगर किसी विशेष एप्लिकेशन के संदर्भ में ऐसा समाधान खुद को सही ठहराता है, तो अन्य घटनाक्रमों में इसका पुन: उपयोग करने के लिए कुछ प्रयास करने की आवश्यकता होगी। किसी भी एप्लिकेशन में उपयोग के लिए इस घटक को सार्वभौमिक, सुलभ बनाने के लिए यह एक बेहतर विचार होगा। यह कस्टम नियंत्रण का अर्थ है।

जैसा कि पहले ही उल्लेख किया गया है, कस्टम घटक आपके द्वारा बनाए गए नियंत्रण हैं, वे UIKit Framework का हिस्सा नहीं हैं। मानक घटकों के साथ-साथ, उन्हें पूरी तरह से सार्वभौमिक और किसी भी आवश्यकता के लिए अनुकूलन योग्य होना चाहिए। हाल ही में, डेवलपर्स के एक पूरे समुदाय का गठन किया गया है, अपने घटकों को सार्वजनिक डोमेन में पोस्ट कर रहा है।

यह पाठ आपको दिखाएगा कि अपने स्वयं के RangeSlider नियंत्रण को कैसे विकसित किया RangeSlider जो उपरोक्त समस्या को हल करता है। मौजूदा घटकों को विस्तारित करने, एपीआई विकसित करने और यहां तक कि अपनी रचना को सार्वजनिक पहुंच में रखने जैसे मुद्दे प्रभावित होंगे।

इतना पर्याप्त सिद्धांत! यह अनुरूपण शुरू करने का समय है!

शुरुआत

यह खंड घटक की बुनियादी संरचना के विकास के लिए समर्पित है, जो स्क्रीन पर एक साधारण स्लाइडर को प्रदर्शित करने के लिए पर्याप्त होगा। Xcode लॉन्च करें और फ़ाइल -> नया -> प्रोजेक्ट चुनें । दिखाई देने वाली विंडो में, iOS -> एप्लिकेशन -> सिंगल व्यू एप्लिकेशन चुनें और Next पर क्लिक करें। अगली स्क्रीन पर, CERangeSlider को प्रोजेक्ट नाम के रूप में दर्ज करें और शेष फ़ील्ड भरें:

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

कस्टम नियंत्रण बनाते समय आपको जो पहला निर्णय लेना होगा, वह मौजूदा वर्ग है जो आपको विरासत में मिलेगा या विस्तारित करेगा। यह महत्वपूर्ण है कि वर्ग UIView ।

यदि आप Apple UIKit के विभिन्न घटकों को करीब से देखते हैं, तो आप देखेंगे कि कई तत्वों जैसे कि UILabel और UIWebView सीधे UIView विरासत में मिला है। लेकिन जैसा कि यह हो सकता है, ऐसे तत्व हैं जो UIControl विरासत में UIControl , जैसा कि इस आंकड़े में दिखाया गया है:

नोट: इंटरफ़ेस तत्वों का एक विस्तृत पदानुक्रम यहां पाया जा सकता है: UIKit फ्रेमवर्क संदर्भ ।

UIControl क्लास टारगेट-एक्शन टेम्पलेट को लागू करता है, जो अनिवार्य रूप से घटक परिवर्तनों के बारे में सूचित करने का एक तरीका है। UIControl में किसी वस्तु की स्थिति की निगरानी से संबंधित कई गुण UIControl होते हैं। आप हमारे घटक को बनाने के लिए बस ऐसे टेम्पलेट का उपयोग करेंगे, इसलिए UIControl एक उत्कृष्ट शुरुआत के रूप में काम करेगा।

प्रोजेक्ट नेविगेटर में CERangeSlider समूह पर राइट-क्लिक करें और नई फ़ाइल चुनें, फिर iOS -> कोको टच -> ऑब्जेक्टिव-सी क्लास और नेक्स्ट पर क्लिक करें। वर्ग CERangeSlider का नाम, और "उपवर्ग" फ़ील्ड में , UIControl दर्ज करें। अगला क्लिक करें और वर्ग के लिए भंडारण स्थान का चयन करने के लिए बनाएँ ।

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

CEViewController.m खोलें और निम्न पंक्ति पेस्ट करें:

 #import "CERangeSlider.h"

उसी फ़ाइल में अगला एक चर जोड़ें:

 @implementation CEViewController { CERangeSlider* _rangeSlider; }

निम्न कोड ब्लॉक के viewDidLoad मानक viewDidLoad बदलें:

 - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. NSUInteger margin = 20; CGRect sliderFrame = CGRectMake(margin, margin, self.view.frame.size.width - margin * 2, 30); _rangeSlider = [[CERangeSlider alloc] initWithFrame:sliderFrame]; _rangeSlider.backgroundColor = [UIColor redColor]; [self.view addSubview:_rangeSlider]; }

यह कोड आवश्यक आयामों के साथ आपकी कक्षा का एक ऑब्जेक्ट बनाता है और इसे स्क्रीन पर जोड़ता है। घटक की पृष्ठभूमि का रंग लाल रंग में सेट किया गया है ताकि यह एप्लिकेशन की मुख्य पृष्ठभूमि पर ध्यान देने योग्य हो। यदि आप एक रंग निर्दिष्ट नहीं करते हैं, तो घटक पारदर्शी रहेगा, और जहां आप गायब हो गए हैं, वहां आप लंबे समय तक पहेली करेंगे। :]

एप्लिकेशन बनाएं और चलाएं; आपको निम्न स्क्रीन देखनी चाहिए:

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

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

मानक घटक गुण जोड़ें

CERangeSlider.h खोलें और @interface और @end: बीच निम्न गुण जोड़ें @end:

 @property (nonatomic) float maximumValue; @property (nonatomic) float minimumValue; @property (nonatomic) float upperValue; @property (nonatomic) float lowerValue;

ये चार गुण घटक की स्थिति का वर्णन करने के लिए पर्याप्त हैं - सीमा के अधिकतम और न्यूनतम मूल्य, और वर्तमान निचले और ऊपरी थ्रेसहोल्ड।

अच्छी तरह से डिज़ाइन किए गए नियंत्रणों में मानक सेटिंग्स होनी चाहिए, अन्यथा वे स्क्रीन पर प्रस्तुत करते समय थोड़ा अजीब दिखेंगे। CERangeSlider.m खोलें, initWithFrame: ढूंढें initWithFrame: Xcode द्वारा उत्पन्न विधि, और इसे निम्नलिखित कोड से बदलें:

 - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { // Initialization code _maximumValue = 10.0; _minimumValue = 0.0; _upperValue = 8.0; _lowerValue = 2.0; } return self; }

अब घटक के इंटरैक्टिव तत्वों के साथ काम करने का समय है: स्लाइडर्स और एक प्रगति पट्टी जिस पर वे स्थित हैं।

चित्र बनाम CoreGraphics

स्क्रीन पर आइटम प्रदर्शित करने के दो तरीके हैं:

छवि घटक के भाग के रूप में उपयोग करें,
परतों और कोर ग्राफिक्स के संयोजन का उपयोग करें।

प्रत्येक विधि के अपने पेशेवरों और विपक्ष हैं।

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

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

इस पाठ में हम दूसरे दृष्टिकोण - कोर ग्राफिक्स का उपयोग करेंगे।

नोट: उत्सुकता से, Apple अपने घटकों में ग्राफिक संसाधनों का उपयोग करना पसंद करता है। सबसे अधिक संभावना है, यह इस तथ्य के कारण है कि वे प्रत्येक तत्व के लिए मानक आकार निर्धारित करते हैं और इसके पूर्ण अनुकूलन की अनुमति नहीं देते हैं।

Xcode में, प्रोजेक्ट सेटिंग्स विंडो पर जाएं। फिर बिल्ड फ़ेज़ टैब और लिंक बाइनरी लाइब्ररीज़ सेक्शन का चयन करें। सूची में QuartzCore.framework जोड़ें। इस ढांचे के वर्गों और विधियों का उपयोग घटक को मैन्युअल रूप से प्रस्तुत करने के लिए किया जाएगा।

यह स्क्रीनशॉट प्रदर्शित करता है कि यदि आप भ्रमित हैं तो QuartzCore.framework को कैसे खोजें और जोड़ें:

CERangeSlider.m खोलें और निम्नलिखित पंक्ति जोड़ें:

 #import <QuartzCore/QuartzCore.h>

@implementation होने के तुरंत बाद, उसी फ़ाइल में निम्न चर जोड़ें:

 @implementation CERangeSlider { CALayer* _trackLayer; CALayer* _upperKnobLayer; CALayer* _lowerKnobLayer; float _knobWidth; float _useableTrackLength; }

आपके घटक के विभिन्न तत्वों को प्रदर्शित करने के लिए इन तीन परतों - _trackLayer , _upperKnobLayer और _lowerKnobLayer का उपयोग किया जाएगा। दो चर _knobWidth और _useableTrackLength का उपयोग इन तत्वों के मापदंडों को निर्धारित करने के लिए किया जाता है।

CERangeSlider.m में initWithFrame: और if (self) { } ब्लॉक: में निम्न कोड जोड़ें:

 _trackLayer = [CALayer layer]; _trackLayer.backgroundColor = [UIColor blueColor].CGColor; [self.layer addSublayer:_trackLayer]; _upperKnobLayer = [CALayer layer]; _upperKnobLayer.backgroundColor = [UIColor greenColor].CGColor; [self.layer addSublayer:_upperKnobLayer]; _lowerKnobLayer = [CALayer layer]; _lowerKnobLayer.backgroundColor = [UIColor greenColor].CGColor; [self.layer addSublayer:_lowerKnobLayer]; [self setLayerFrames];

यह कोड ब्लॉक तीन लेयर्स बनाता है और उन्हें बच्चों के रूप में मुख्य रूप से जोड़ता है। अब उसी फ़ाइल में निम्न विधियाँ जोड़ें:

 - (void) setLayerFrames { _trackLayer.frame = CGRectInset(self.bounds, 0, self.bounds.size.height / 3.5); [_trackLayer setNeedsDisplay]; _knobWidth = self.bounds.size.height; _useableTrackLength = self.bounds.size.width - _knobWidth; float upperKnobCentre = [self positionForValue:_upperValue]; _upperKnobLayer.frame = CGRectMake(upperKnobCentre - _knobWidth / 2, 0, _knobWidth, _knobWidth); float lowerKnobCentre = [self positionForValue:_lowerValue]; _lowerKnobLayer.frame = CGRectMake(lowerKnobCentre - _knobWidth / 2, 0, _knobWidth, _knobWidth); [_upperKnobLayer setNeedsDisplay]; [_lowerKnobLayer setNeedsDisplay]; } - (float) positionForValue:(float)value { return _useableTrackLength * (value - _minimumValue) / (_maximumValue - _minimumValue) + (_knobWidth / 2); }

setLayerFrames स्लाइडर के वर्तमान मूल्यों के आधार पर स्लाइडर्स और प्रगति बार दोनों के लिए आकार सेट करता है। positionForValue घटक के अधिकतम और न्यूनतम मूल्यों के बीच की दूरी को मापने के लिए एक सरल अनुपात का उपयोग करके, स्क्रीन के निर्देशांक के लिए मान को बांधता है।

एप्लिकेशन को संकलित करें और चलाएं। आपका स्लाइडर आकार लेना शुरू कर देता है! यह कुछ इस तरह दिखना चाहिए:

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

अन्तरक्रियाशीलता घटक जोड़ें

घटक के साथ उपयोगकर्ता की बातचीत के लिए जिम्मेदार कोड को ट्रैक करना होगा कि कौन सा स्लाइडर ले जाया गया है, और तदनुसार उपस्थिति को अपडेट करें। इसे लागू करने के लिए सबसे अच्छी जगह हमारे घटक की परतें होंगी।

CERangeSlider ग्रुप में एक नई फ़ाइल जोड़ें: New File -> iOS -> कोकोआ टच -> ऑब्जेक्टिव-सी क्लास , इसे कैलेयर का उपवर्ग बनाते हैं और इसे CERangeSliderKnobLayer नाम देते हैं ।

नए बने CERangeSliderKnobLayer.h को खोलें और इसकी सामग्री को निम्नलिखित के साथ बदलें:

 #import <QuartzCore/QuartzCore.h> @class CERangeSlider; @interface CERangeSliderKnobLayer : CALayer @property BOOL highlighted; @property (weak) CERangeSlider* slider; @end

यह कोड दो गुणों को जोड़ता है, जिनमें से एक इंगित करता है कि स्लाइडर हाइलाइट किया गया है, और दूसरा माता-पिता स्लाइडर को इंगित करता है। अब CERangeSliderKnobLayer.m खोलें और #import जोड़ें:

 #import "CERangeSliderKnobLayer.h"

इसके बाद _lowerKnobLayer @implementation ब्लॉक में _upperKnobLayer और _lowerKnobLayer का प्रकार बदलें:

 CERangeSliderKnobLayer* _upperKnobLayer; CERangeSliderKnobLayer* _lowerKnobLayer;

ये परतें अब नए बने CERangeSliderKnobLayer क्लास की वस्तुएं हैं ।

उसी CERangeSlider.m में initWithFrame: ढूंढें initWithFrame: और कोड कोड को upperKnobLayer और lowerKnobLayer को निम्न कोड ब्लॉक के साथ lowerKnobLayer :

 _upperKnobLayer = [CERangeSliderKnobLayer layer]; _upperKnobLayer.slider = self; _upperKnobLayer.backgroundColor = [UIColor greenColor].CGColor; [self.layer addSublayer:_upperKnobLayer]; _lowerKnobLayer = [CERangeSliderKnobLayer layer]; _lowerKnobLayer.slider = self; _lowerKnobLayer.backgroundColor = [UIColor greenColor].CGColor; [self.layer addSublayer:_lowerKnobLayer];

यह कोड उन परतों का उपयोग करने के लिए हमारे द्वारा बनाई गई कक्षा का उपयोग करता है और उनकी slider संपत्ति को self सेट करता है। अपने प्रोजेक्ट को चलाएं और सुनिश्चित करें कि सब कुछ स्क्रीनशॉट के समान है:

अब जब आपकी परतें जगह में हैं, तो आपको स्लाइडर्स को स्थानांतरित करने की क्षमता का एहसास करना होगा।

क्लिक हैंडलर्स जोड़ें

CERangeSlider.m खोलें और चर घोषणा ब्लॉक के तहत निम्न कोड जोड़ें:

 CGPoint _previousTouchPoint;

इस चर का उपयोग क्लिक निर्देशांक को ट्रैक करने के लिए किया जाएगा। आप अपने घटक के लिए विभिन्न क्लिक और रिलीज़ इवेंट ट्रैक करने की योजना कैसे बनाते हैं?

UIControl ट्रैकिंग क्लिक के लिए कई तरीके प्रदान करता है। UIControl UIControl अपने स्वयं के तर्क को लागू करने के लिए इन विधियों को ओवरराइड कर सकते हैं। आपके नियंत्रण में, आप निम्न तीन विधियों को ओवरराइड करते हैं: beginTrackingWithTouch , beginTrackingWithTouch continueTrackingWithTouch और endTrackingWithTouch ।

CERangeSlider.m के लिए निम्न विधि जोड़ें:

 - (BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event { _previousTouchPoint = [touch locationInView:self]; // hit test the knob layers if(CGRectContainsPoint(_lowerKnobLayer.frame, _previousTouchPoint)) { _lowerKnobLayer.highlighted = YES; [_lowerKnobLayer setNeedsDisplay]; } else if(CGRectContainsPoint(_upperKnobLayer.frame, _previousTouchPoint)) { _upperKnobLayer.highlighted = YES; [_upperKnobLayer setNeedsDisplay]; } return _upperKnobLayer.highlighted || _lowerKnobLayer.highlighted; }

जब उपयोगकर्ता पहली बार घटक को छूता है तो यह विधि कहलाती है। यह घटक समन्वय प्रणाली में क्लिक घटना का अनुवाद करता है। उसके बाद वह यह निर्धारित करने के लिए प्रत्येक स्लाइडर की जाँच करता है कि क्लिक उनमें से किसी एक के दायरे में आता है या नहीं। नतीजतन, विधि अपने मूल वर्ग को वर्तमान क्लिक को ट्रैक करने के बारे में बताती है।

स्लाइडर्स में से किसी एक को हाइलाइट किए जाने पर क्लिक ट्रैकिंग जारी रहती है। setNeedsDisplay विधि को कॉल करना setNeedsDisplay यह सुनिश्चित करने की अनुमति देता है कि परतों को अपडेट किया गया है - फिर आप समझेंगे कि यह क्यों महत्वपूर्ण है।

अब जब आपके पास पहला-क्लिक हैंडलर है, तो आपको घटनाओं को संभालने की आवश्यकता है जब उपयोगकर्ता की उंगली स्क्रीन के चारों ओर घूमती है। CERangeSlider.m के लिए निम्न विधि जोड़ें:

 #define BOUND(VALUE, UPPER, LOWER) MIN(MAX(VALUE, LOWER), UPPER) - (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event { CGPoint touchPoint = [touch locationInView:self]; // 1. determine by how much the user has dragged float delta = touchPoint.x - _previousTouchPoint.x; float valueDelta = (_maximumValue - _minimumValue) * delta / _useableTrackLength; _previousTouchPoint = touchPoint; // 2. update the values if (_lowerKnobLayer.highlighted) { _lowerValue += valueDelta; _lowerValue = BOUND(_lowerValue, _upperValue, _minimumValue); } if (_upperKnobLayer.highlighted) { _upperValue += valueDelta; _upperValue = BOUND(_upperValue, _maximumValue, _lowerValue); } // 3. Update the UI state [CATransaction begin]; [CATransaction setDisableActions:YES] ; [self setLayerFrames]; [CATransaction commit]; return YES; }

आइए इस कोड का विश्लेषण करें, टिप्पणी द्वारा टिप्पणी करें:

सबसे पहले, आप delta गणना करते हैं - पिक्सल की संख्या जिसके द्वारा उंगली को स्थानांतरित किया गया था। फिर आप घटक के न्यूनतम और अधिकतम मूल्यों के आधार पर उन्हें परिवर्तित करते हैं।
यहां आप ऊपरी और निचले सीमा को बदलते हैं, जहां उपयोगकर्ता स्लाइडर को स्थानांतरित करता है। ध्यान दें कि आप BOUND मैक्रो का उपयोग कर रहे हैं, जो MIN/MAX से अधिक पठनीय है।
कोड का यह ब्लॉक CATransaction ध्वज को CATransaction सेट करता है। यह आपको यह सुनिश्चित करने की अनुमति देता है कि प्रत्येक परत की सीमाओं में परिवर्तन तुरंत लागू होते हैं और एनिमेटेड नहीं होते हैं। अंत में, setLayerFrames विधि को setLayerFrames , स्लाइडर को वांछित स्थान पर ले जाना।

आपने स्लाइडर के आंदोलन को लागू किया है - लेकिन आपको अभी भी घटक के साथ बातचीत के अंत को संभालने की आवश्यकता है। CERangeSlider.m के लिए निम्न विधि जोड़ें:

 - (void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event { _lowerKnobLayer.highlighted = _upperKnobLayer.highlighted = NO; [_lowerKnobLayer setNeedsDisplay]; [_upperKnobLayer setNeedsDisplay]; }

यह कोड दोनों स्लाइडर्स को निष्क्रिय अवस्था में लौटाता है। अपना प्रोजेक्ट लॉन्च करें और अपने नए स्लाइडर के साथ थोड़ा खेलें! यह स्क्रीनशॉट के समान दिखना चाहिए:

आप देख सकते हैं कि घटक की सीमाओं से परे अपनी उंगली को स्थानांतरित करना संभव है, और फिर विधि के निष्पादन को बाधित किए बिना अपनी सीमाओं पर वापस लौटें। यह कम सटीकता के साथ छोटे स्क्रीन और स्टाइलस वाले उपकरणों की उपयोगिता की एक बहुत ही महत्वपूर्ण विशेषता है (यदि आप नहीं समझते हैं, तो हम उंगलियों के बारे में बात कर रहे हैं)। :]

सूचनाएं बदलें

तो, हमारे पास एक इंटरैक्टिव नियंत्रण है जिसके साथ उपयोगकर्ता सीमा की ऊपरी और निचली सीमा निर्धारित कर सकता है। लेकिन इन परिवर्तनों को बाकी कोड से कैसे संबंधित किया जाए ताकि उनका उपयोग एप्लिकेशन द्वारा किया जा सके? कई अलग-अलग विकल्प हैं जिनका उपयोग परिवर्तनों की अधिसूचना के लिए किया जा सकता है: NSNotification , कुंजी-मूल्य-अवलोकन (KVO) , प्रतिनिधिमंडल टेम्पलेट, लक्ष्य-कार्रवाई टेम्पलेट और अन्य।

यदि आप UIKit के घटकों को देखते हैं, तो आप देखेंगे कि वे NSNotification या KVO का उपयोग नहीं करते हैं, इसलिए UIKit के साथ संगतता के लिए हमें इन दो विकल्पों को छोड़ देना चाहिए। UIKit में दो अन्य टेम्प्लेट - डेलिगेशन और टारगेट-एक्शन का उपयोग अक्सर किया जाता UIKit ।

मैं दोनों पैटर्न का विस्तृत विश्लेषण दूंगा:

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

दो पैटर्न के बीच मुख्य अंतर निम्नानुसार हैं:

टारगेट-एक्शन टेम्प्लेट अपने परिवर्तनों को प्रसारित करता है, जबकि प्रतिनिधिमंडल एक ही वस्तु तक सीमित है।
आप डेलिगेशन का उपयोग करते समय स्वतंत्र रूप से प्रोटोकॉल लागू करते हैं, अर्थात, आप यह निर्धारित कर सकते हैं कि आप कौन सी विशिष्ट जानकारी संचारित करना चाहते हैं। लक्ष्य-कार्रवाई अतिरिक्त डेटा के हस्तांतरण की अनुमति नहीं देती है।

आपके घटक में कई संभावित स्थिति या संभावित घटनाएँ नहीं हैं जिन्हें अधिसूचित करने की आवश्यकता है। केवल एक चीज जो एक भूमिका निभाती है वह स्लाइडर का अधिकतम और न्यूनतम मान है।

इस स्थिति में, टारगेट-एक्शन टेम्पलेट का उपयोग सबसे अधिक उचित है। यह उन कारणों में से एक है, जो हमें UIControlपाठ की शुरुआत में विरासत में मिले हैं ।

स्लाइडर रीडिंग विधि के अंदर अपडेट किए जाते हैं continueTrackingWithTouch:withEvent:, इसलिए यह वह जगह है जहां आपको अधिसूचना तंत्र को लागू करने की आवश्यकता होती है। CERangeSlider.m खोलें , विधि खोजें continueTrackingWithTouch:withEventऔर पहले निम्नलिखित कोड जोड़ें return YES:

 [self sendActionsForControlEvents:UIControlEventValueChanged];

परिवर्तनों के आवश्यक लक्ष्यों को सूचित करने के लिए यह सब आवश्यक है। खैर, यह उम्मीद की तुलना में आसान था! CEViewController.m

खोलें और विधि के अंत में निम्नलिखित कोड जोड़ें :viewDidLoad

 [_rangeSlider addTarget:self action:@selector(slideValueChanged:) forControlEvents:UIControlEventValueChanged];

यह कोड slideValueChangedस्लाइडर को ईवेंट भेजने के लिए हर बार विधि चलाता है UIControlEventValueChanged।

अब CEViewController.m के लिए निम्न विधि जोड़ें :

 - (void)slideValueChanged:(id)control { NSLog(@"Slider value changed: (%.2f,%.2f)", _rangeSlider.lowerValue, _rangeSlider.upperValue); }

यह विधि स्लाइडर के सभी मूल्यों को एक सबूत के रूप में लॉग को भेजती है कि सब कुछ उसी तरह काम करता है जैसा कि इसे करना चाहिए। एप्लिकेशन लॉन्च करें और स्लाइडर के स्लाइडर्स को स्थानांतरित करें। आप लॉग में प्रदर्शित उनके निर्देशांक के मूल्यों को देखेंगे:

आप शायद पहले से ही रंगीन इंटरफ़ेस से थक गए हैं जो एक भयानक फल सलाद की तरह दिखता है। यह घटक को सही रूप देने का समय है!

कोर ग्राफिक्स का उपयोग कर एक घटक की उपस्थिति बदलें

सबसे पहले, चलो प्रगति पट्टी की उपस्थिति को अद्यतन करते हैं जिसके साथ स्लाइडर्स चलते हैं। CERangeSlider समूह में , नया CERangeSliderTrackLayer वर्ग जोड़ें , जो CALayer का उपवर्ग है । CERangeSliderTrackLayer.h

खोलें और इसकी सामग्री को निम्नलिखित के साथ बदलें:

 #import <QuartzCore/QuartzCore.h> @class CERangeSlider; @interface CERangeSliderTrackLayer : CALayer @property (weak) CERangeSlider* slider; @end

यह कोड स्लाइडर के लिए एक लिंक जोड़ता है जो हमने स्लाइडर परत के लिए किया था। CERangeSlider.m खोलें और निम्नलिखित जोड़ें #import:

 #import "CERangeSliderTrackLayer.h"

नीचे दिए गए वैरिएबल को ढूंढें _trackLayerऔर इसके प्रकार को अपने द्वारा बनाई गई कक्षा में बदलें:

 CERangeSliderTrackLayer* _trackLayer;

अब विधि ढूंढें initWithFrame:और परत निर्माण कोड को अपडेट करें:

 _trackLayer = [CERangeSliderTrackLayer layer]; _trackLayer.slider = self; [self.layer addSublayer:_trackLayer]; _upperKnobLayer = [CERangeSliderKnobLayer layer]; _upperKnobLayer.slider = self; [self.layer addSublayer:_upperKnobLayer]; _lowerKnobLayer = [CERangeSliderKnobLayer layer]; _lowerKnobLayer.slider = self; [self.layer addSublayer:_lowerKnobLayer];

यह कोड आपको यह सुनिश्चित करने की अनुमति देता है कि एक नई पट्टी का उपयोग किया जाता है, और vyrviglazny रंग अब पृष्ठभूमि पर लागू नहीं होते हैं। :] यह

थोड़ा और करने के लिए रहता है - घटक से लाल पृष्ठभूमि को हटा दें। CEViewController.m खोलें , विधि की निम्नलिखित पंक्ति को विधि में खोजें viewDidLoadऔर इसे मिटा दें:

 _rangeSlider.backgroundColor = [UIColor redColor];

एप्लिकेशन बनाएं और चलाएं ... आप क्या देखते हैं?

कुछ भी नहीं है? यह बहुत अच्छा है!

आप पूछते हैं - इसमें इतनी बड़ी बात क्या है? मेहनत का सारा फल गया! चौकन्ने मत बनो - तुमने सिर्फ उन चमकीले रंगों को हटा दिया जो इस्तेमाल की गई परतों पर लागू होते थे। आपका घटक अभी भी बना हुआ है - लेकिन अब यह पारदर्शी है।

चूंकि अधिकांश डेवलपर्स प्यार करते हैं जब घटकों को प्रत्येक विशेष एप्लिकेशन की शैली के लिए अनुकूलित किया जा सकता है, हम कुछ गुण जोड़ेंगे जो हमारे स्लाइडर की उपस्थिति के लिए जिम्मेदार हैं। CERangeSlider.h खोलें और निम्नलिखित कोड जोड़ें:

 @property (nonatomic) UIColor* trackColour; @property (nonatomic) UIColor* trackHighlightColour; @property (nonatomic) UIColor* knobColour; @property (nonatomic) float curvaceousness; - (float) positionForValue:(float)value;

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

आपको रंग गुणों के लिए प्रारंभिक मान जोड़ने की आवश्यकता है। CERangeSlider.m खोलें और initWithFrame:,शेष चर को आरंभ करने के लिए जिम्मेदार कोड के ब्लॉक के तहत विधि में निम्नलिखित कोड जोड़ें :

 _trackHighlightColour = [UIColor colorWithRed:0.0 green:0.45 blue:0.94 alpha:1.0]; _trackColour = [UIColor colorWithWhite:0.9 alpha:1.0]; _knobColour = [UIColor whiteColor]; _curvaceousness = 1.0; _maximumValue = 10.0; _minimumValue = 0.0;

अब CERangeSliderTrackLayer.m खोलें और निम्नलिखित जोड़ें #import:

 #import "CERangeSlider.h"

यह परत उस पट्टी को प्रदर्शित करती है जिस पर दोनों स्लाइडर्स स्थित हैं। फिलहाल, यह एक वर्ग को विरासत में मिला है CALayerजो केवल ठोस रंग का उपयोग करना संभव बनाता है।

पट्टी को सही ढंग से खींचने के लिए, आपको विधि को लागू करने drawInContext:और प्रतिपादन के लिए कोरग्राफिक्स एपीआई का उपयोग करने की आवश्यकता है ।

नोट: यदि आप कोर ग्राफिक्स के बारे में अधिक जानना चाहते हैं, तो कोर ग्राफिक्स 101 ट्यूटोरियल श्रृंखला पाठ्यक्रम की सिफारिश की जाती है , क्योंकि कोर ग्राफिक्स की विस्तृत चर्चा इस पाठ के दायरे से बाहर है।

के लिए निम्न विधि जोड़ें CERangeSliderTrackLayer.m के तहत @implementation:

 - (void)drawInContext:(CGContextRef)ctx { // clip float cornerRadius = self.bounds.size.height * self.slider.curvaceousness / 2.0; UIBezierPath *switchOutline = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:cornerRadius]; CGContextAddPath(ctx, switchOutline.CGPath); CGContextClip(ctx); // 1) fill the track CGContextSetFillColorWithColor(ctx, self.slider.trackColour.CGColor); CGContextAddPath(ctx, switchOutline.CGPath); CGContextFillPath(ctx); // 2) fill the highlighed range CGContextSetFillColorWithColor(ctx, self.slider.trackHighlightColour.CGColor); float lower = [self.slider positionForValue:self.slider.lowerValue]; float upper = [self.slider positionForValue:self.slider.upperValue]; CGContextFillRect(ctx, CGRectMake(lower, 0, upper - lower, self.bounds.size.height)); // 3) add a highlight over the track CGRect highlight = CGRectMake(cornerRadius/2, self.bounds.size.height/2, self.bounds.size.width - cornerRadius, self.bounds.size.height/2); UIBezierPath *highlightPath = [UIBezierPath bezierPathWithRoundedRect:highlight cornerRadius:highlight.size.height * self.slider.curvaceousness / 2.0]; CGContextAddPath(ctx, highlightPath.CGPath); CGContextSetFillColorWithColor(ctx, [UIColor colorWithWhite:1.0 alpha:0.4].CGColor); CGContextFillPath(ctx); // 4) inner shadow CGContextSetShadowWithColor(ctx, CGSizeMake(0, 2.0), 3.0, [UIColor grayColor].CGColor); CGContextAddPath(ctx, switchOutline.CGPath); CGContextSetStrokeColorWithColor(ctx, [UIColor grayColor].CGColor); CGContextStrokePath(ctx); // 5) outline the track CGContextAddPath(ctx, switchOutline.CGPath); CGContextSetStrokeColorWithColor(ctx, [UIColor blackColor].CGColor); CGContextSetLineWidth(ctx, 0.5); CGContextStrokePath(ctx); }

इस छवि में आप देख सकते हैं कि कोड के सभी ब्लॉक संयुक्त कैसे हैं, टिप्पणियों द्वारा अलग किए

गए हैं: गिने हुए अनुभाग गिने हुए टिप्पणियों के अनुरूप हैं:

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

अब जब सब कुछ अलग-अलग चरणों में लिया गया है, तो आप देख सकते हैं कि CERangeSlider के विभिन्न गुण इसके स्वरूप को कैसे प्रभावित करते हैं।

ऐप लॉन्च करें। यह इस तरह दिखना चाहिए:

हमारे द्वारा दर्ज किए गए गुणों के मूल्यों के साथ खेलते हैं , यह देखने के लिए कि वे स्लाइडर की उपस्थिति को कैसे प्रभावित करेंगे। यदि आप अभी भी उत्सुक हैं कि संपत्ति क्या कर रही है curvaceousness, तो अब इसे आज़माने का समय है!

स्लाइडर्स खींचने के लिए हम एक समान दृष्टिकोण का उपयोग करेंगे। CERangeSliderKnobLayer.m खोलें और निम्नलिखित जोड़ें #import:

 #import "CERangeSlider.h"

निम्नलिखित विधि जोड़ें:

 - (void)drawInContext:(CGContextRef)ctx { CGRect knobFrame = CGRectInset(self.bounds, 2.0, 2.0); UIBezierPath *knobPath = [UIBezierPath bezierPathWithRoundedRect:knobFrame cornerRadius:knobFrame.size.height * self.slider.curvaceousness / 2.0]; // 1) fill - with a subtle shadow CGContextSetShadowWithColor(ctx, CGSizeMake(0, 1), 1.0, [UIColor grayColor].CGColor); CGContextSetFillColorWithColor(ctx, self.slider.knobColour.CGColor); CGContextAddPath(ctx, knobPath.CGPath); CGContextFillPath(ctx); // 2) outline CGContextSetStrokeColorWithColor(ctx, [UIColor grayColor].CGColor); CGContextSetLineWidth(ctx, 0.5); CGContextAddPath(ctx, knobPath.CGPath); CGContextStrokePath(ctx); // 3) inner gradient CGRect rect = CGRectInset(knobFrame, 2.0, 2.0); UIBezierPath *clipPath = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:rect.size.height * self.slider.curvaceousness / 2.0]; CGGradientRef myGradient; CGColorSpaceRef myColorspace; size_t num_locations = 2; CGFloat locations[2] = { 0.0, 1.0 }; CGFloat components[8] = { 0.0, 0.0, 0.0 , 0.15, // Start color 0.0, 0.0, 0.0, 0.05 }; // End color myColorspace = CGColorSpaceCreateDeviceRGB(); myGradient = CGGradientCreateWithColorComponents (myColorspace, components, locations, num_locations); CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect)); CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect)); CGContextSaveGState(ctx); CGContextAddPath(ctx, clipPath .CGPath); CGContextClip(ctx); CGContextDrawLinearGradient(ctx, myGradient, startPoint, endPoint, 0); CGGradientRelease(myGradient); CGColorSpaceRelease(myColorspace); CGContextRestoreGState(ctx); // 4) highlight if (self.highlighted) { // fill CGContextSetFillColorWithColor(ctx, [UIColor colorWithWhite:0.0 alpha:0.1].CGColor); CGContextAddPath(ctx, knobPath.CGPath); CGContextFillPath(ctx); } }

फिर, हम इस पद्धति के परिणामों का विश्लेषण करेंगे:

जैसे ही स्लाइडर्स का आकार तैयार होता है, उनकी पृष्ठभूमि भर जाती है।
इसके अलावा स्लाइडर की सीमाएँ खींची गई हैं।
एक प्रकाश ढाल जोड़ा जाता है।
और आखिरी - यदि स्लाइडर को हाइलाइट किया गया है - यह उस तरह से रहता है, अगर इसे स्थानांतरित किया जाता है - यह ग्रे हो जाता है।

एप्लिकेशन को फिर से चलाएँ:

आप देखते हैं कि कोर ग्राफिक्स का उपयोग करके एक घटक प्रदान करना प्रयास के लायक है। इस ढांचे का उपयोग करने से आप ग्राफिक संसाधनों का उपयोग करने की तुलना में बहुत अधिक अनुकूलन योग्य और लचीला नियंत्रण बना सकते हैं।

प्रसंस्करण घटक संपत्ति में परिवर्तन

तो हमें क्या करना है? घटक काफी आकर्षक दिखता है, उपस्थिति पूरी तरह से अनुकूलन योग्य है और यह लक्ष्य-एक्शन टेम्पलेट का समर्थन करता है ।

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

यह निर्धारित करने के लिए कि कौन से घटक गुण बाहरी रूप से सेट किए गए हैं, आपको अपनी सेटर विधि लिखने की आवश्यकता होगी । आपका पहला अनुमान यह कोड होने की संभावना है:

 - (void)setTrackColour:(UIColor *)trackColour { if (_trackColour != trackColour) { _trackColour = trackColour; [_trackLayer setNeedsDisplay]; } }

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

एक मैक्रो का उपयोग करने के लिए एक अवसर की तरह लग रहा है! CERangeSlider.m खोलें और initWithFrame विधि के ऊपर निम्न कोड जोड़ें :

 #define GENERATE_SETTER(PROPERTY, TYPE, SETTER, UPDATER) \ - (void)SETTER:(TYPE)PROPERTY { \ if (_##PROPERTY != PROPERTY) { \ _##PROPERTY = PROPERTY; \ [self UPDATER]; \ } \ }

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

 GENERATE_SETTER(trackHighlightColour, UIColor*, setTrackHighlightColour, redrawLayers) GENERATE_SETTER(trackColour, UIColor*, setTrackColour, redrawLayers) GENERATE_SETTER(curvaceousness, float, setCurvaceousness, redrawLayers) GENERATE_SETTER(knobColour, UIColor*, setKnobColour, redrawLayers) GENERATE_SETTER(maximumValue, float, setMaximumValue, setLayerFrames) GENERATE_SETTER(minimumValue, float, setMinimumValue, setLayerFrames) GENERATE_SETTER(lowerValue, float, setLowerValue, setLayerFrames) GENERATE_SETTER(upperValue, float, setUpperValue, setLayerFrames) - (void) redrawLayers { [_upperKnobLayer setNeedsDisplay]; [_lowerKnobLayer setNeedsDisplay]; [_trackLayer setNeedsDisplay]; }

हम एक झपट्टा में सभी चर के लिए सेटर विधियाँ उत्पन्न करते हैं । विधि redrawLayersको घटक की उपस्थिति से जुड़े चर के लिए कहा जाता है, और setLayerFramesमार्कअप के लिए जिम्मेदार लोगों के लिए।

यह वह सब है जो स्लाइडर के लिए आवश्यक है कि वह इसके गुणों में बदलाव के लिए पर्याप्त रूप से प्रतिक्रिया दे सके।

वैसे भी, आपको नए मैक्रोज़ का परीक्षण करने के लिए कुछ और कोड जोड़ने की आवश्यकता है और सुनिश्चित करें कि सब कुछ वैसा ही हो जैसा कि होना चाहिए। CEViewController.m खोलें और विधि के अंत में निम्नलिखित कोड जोड़ें viewDidLoad:

 [self performSelector:@selector(updateState) withObject:nil afterDelay:1.0f];

यह लाइन updateStateदूसरी देरी के बाद विधि को कॉल करेगी । इस विधि को CEViewController.m में जोड़ें :

 - (void)updateState { _rangeSlider.trackHighlightColour = [UIColor redColor]; _rangeSlider.curvaceousness = 0.0; }

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

नोट: आपने जो कोड अभी स्पष्ट रूप से जोड़ा है, उनमें से एक सबसे दिलचस्प है (और, अक्सर डेवलपर्स द्वारा भूल गए) कस्टम घटकों को विकसित करने के पहलुओं - उनके परीक्षण।

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

आगे क्या है?

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

ठीक है, क्या आप अपने स्लाइडर के प्रीमियर के लिए तैयार हैं?

वास्तव में नहीं।यह कई और कार्यों को पूरा करने के लिए बनी हुई है:

प्रलेखन। हर प्रोग्रामर के लिए एक पसंदीदा शगल। :] हालांकि आपको लगता है कि आपका कोड सही है और अतिरिक्त प्रलेखन की आवश्यकता नहीं है, अन्य डेवलपर्स की राय नाटकीय रूप से भिन्न हो सकती है। अन्य कोड डेवलपर्स के लिए सब कुछ खुला रखने के लिए प्रलेखन का अच्छा अभ्यास है। कम से कम, यह सभी सार्वजनिक रूप से उपलब्ध वर्गों और उनकी संपत्तियों का विवरण है। उदाहरण के लिए, अपने CERangeSlider निम्नलिखित दस्तावेजों की आवश्यकता है - उद्देश्य चर का एक विवरण max, min, upper, lower।

विश्वसनीयता। यदि आप एक मूल्य से upperValueअधिक सेट करते हैं तो क्या होता हैmaximumValue? बेशक, आप खुद कभी ऐसा नहीं करेंगे - यह कम से कम बेवकूफ है। लेकिन आप इस बात की गारंटी नहीं दे सकते कि कोई और कोशिश करेगा! आपको यह सुनिश्चित करने की आवश्यकता है कि घटक हमेशा ठीक से काम करता है - डेवलपर की मूर्खता के स्तर की परवाह किए बिना।

एपीआई संरचना । विश्वसनीयता के संबंध में पिछला बिंदु बहुत व्यापक विषय से संबंधित है - एपीआई की संरचना। एक लचीली, सहज और विश्वसनीय संरचना बनाने से घटक को व्यापक रूप से उपयोग और लोकप्रिय होने में मदद मिलेगी। मेरी कंपनी, शिनोबिनकंट्रोल में , हम अपने एपीआई के हर छोटे से विस्तार पर चर्चा करते हुए घंटों बिता सकते हैं! एपीआई की संरचना एक बहुत गहरा विषय है जो इस पाठ के दायरे से परे है। यदि आप इस विषय में रुचि रखते हैं, तो मैं मैट जेमेल के एपीआई डिजाइन के 25 नियमों को पढ़ने की सलाह देता हूं ।

कई जगह हैं जहां आप अपने घटक का वितरण शुरू कर सकते हैं। यहाँ कुछ विकल्प दिए गए हैं:

GitHub । GitHub सबसे लोकप्रिय ओपन सोर्स घटक होस्टिंग साइटों में से एक बन गया है। GitHub में अब अनगिनत अलग-अलग iOS कंट्रोल हैं। GitHub के बारे में विशेष रूप से अच्छा है कि यह आपको घटक कोड को जल्दी और आसानी से देखने की अनुमति देता है, इसे अन्य परियोजनाओं में उपयोग करें और विभिन्न टिप्पणियों को छोड़ दें।
कोकोपोड्स । लोगों को आसानी से अपने घटक को अपनी परियोजना में जोड़ने की अनुमति देने के लिए, आप इसे CocoaPods, iOS और OSX के लिए विस्तार प्रबंधक में जोड़ सकते हैं।
Cocoa Controls . , . GitHub, .
Binpress . , . , — ? , , - API.

मुझे आशा है कि आप एक कस्टम नियंत्रण विकसित करने में रुचि रखते थे, और शायद आप अपने स्वयं के घटक बनाने के विचार से प्रेरित थे।

परियोजना का स्रोत कोड विकास के चरणों के अनुरूप कमिट के इतिहास के साथ GitHub पर प्रकाशित किया गया है । यदि आप खो जाते हैं, तो आप आसानी से अंतिम पूर्ण चरण से काम करना जारी रख सकते हैं! :]

आप इस लिंक से पूरी परियोजना को डाउनलोड कर सकते हैं ।

IOS के लिए अपना कंपोनेंट कैसे लिखें