iOS
UIScrollView

एक UIScrollView बनाएं

फ्रेम के रूप में CGRect साथ UIScrollView का एक उदाहरण बनाएं।

तीव्र

let scrollview = UIScrollView.init(frame: CGRect(x: 0, y: 0, width: 320, height: 400))

उद्देश्य सी

UIScrollView *scrollview = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 400)];

सामग्री आकार देखें स्क्रॉल करें

contentSize संपत्ति को स्क्रॉल करने योग्य सामग्री के आकार पर सेट किया जाना चाहिए। यह स्क्रॉल करने योग्य क्षेत्र के आकार को निर्दिष्ट करता है। स्क्रॉलिंग तब दिखाई देती है जब स्क्रॉल करने योग्य क्षेत्र अर्थात contentSize आकार, UIScrollView फ्रेम आकार से बड़ा हो।

ऑटोलेयआउट के साथ:

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

मैन्युअली:

तीव्र

scrollview.contentSize = CGSize(width: 640, height: 800)

उद्देश्य सी

scrollview.contentSize = CGSizeMake(640, 800);

AutoLayout के साथ स्क्रॉल दृश्य

ऑटोलॉयआउट के साथ स्क्रॉलव्यू का उपयोग करने के लिए सरल कदम।

• सिंगल व्यू एप्लिकेशन के साथ एक नया प्रोजेक्ट बनाएं
• डिफॉल्ट व्यूकंट्रोलर का चयन करें और इसके स्क्रीन साइज को आईफोन -4 इंच से बदलकर एट्रिब्यूट इंस्पेक्टर करें।
• निम्न के रूप में अपने viewcontroller के दृश्य में स्क्रॉलव्यू जोड़ें और पृष्ठभूमि का रंग नीला पर सेट करें

• नीचे दी गई छवि में दिखाए अनुसार इसमें बाधाएं जोड़ें

यह क्या करेगा, बस स्क्रॉलकवि के हर किनारे को व्यूकंट्रोलर के दृश्य से चिपका दें

दृष्टांत 1:

अब हम कहते हैं कि हमारी सामग्री बहुत बड़ी है, और हम चाहते हैं कि यह क्षैतिज और साथ ही लंबवत स्क्रॉल करे।

इसके लिए,

• फ़्रेम के स्क्रॉलव्यू (0,0,700,700) में एक UIView जोड़ें। इसे अलग पहचान देने के लिए इसे नारंगी पृष्ठभूमि का रंग दें।

अगला महत्वपूर्ण हिस्सा आता है, हमें इसे क्षैतिज और लंबवत रूप से स्क्रॉल करने की आवश्यकता है।

• नारंगी दृश्य का चयन करें और निम्नलिखित बाधाओं को जोड़ें

  

उपरोक्त चरण में हमने क्या किया, इसकी व्याख्या करता हूं।

• हमने ऊंचाई और चौड़ाई 700 तय की।
• हम स्क्रॉलिंग स्पेस को स्क्रॉलव्यू = 0 पर सेट करते हैं जो स्क्रॉलव्यू को बताता है कि सामग्री क्षैतिज रूप से स्क्रॉल करने योग्य है।
• हमने स्क्रॉलव्यू = 0 पर नीचे का स्थान निर्धारित किया है जो स्क्रॉलव्यू को बताता है कि सामग्री लंबवत स्क्रॉल करने योग्य है।

अब प्रोजेक्ट को चलाएं और जांचें।

परिदृश्य 2: आइए एक परिदृश्य पर विचार करें जहां हम जानते हैं कि सामग्री चौड़ाई स्क्रॉल चौड़ाई चौड़ाई के समान होगी, लेकिन ऊंचाई स्क्रॉलव्यू से बड़ी है।

सामग्री को लंबवत स्क्रॉल करने के लिए चरणों का पालन करें।

• उपरोक्त मामले में चौड़ाई की बाधा हटाएं।
• स्क्रॉलव्यू चौड़ाई से मिलान करने के लिए नारंगी दृश्य की चौड़ाई बदलें।
• संतरे के दृश्य से Ctrl-खींचें दृश्य को स्क्रॉल करने और समान चौड़ाई की बाधा जोड़ने के लिए।

• और हो गया!!! बस चलाएं और जांचें कि क्या यह लंबवत स्क्रॉल करता है

परिदृश्य 3:

अब हम केवल क्षैतिज रूप से स्क्रॉल करना चाहते हैं और लंबवत नहीं।

सामग्री को क्षैतिज रूप से स्क्रॉल करने के लिए चरणों का पालन करें।

• नीचे के रूप में बाधाओं को प्राप्त करने के लिए सभी बदलावों को पूर्ववत करें (अर्थात मूल बाधाओं को बहाल करें जो ऊर्ध्वाधर और क्षैतिज स्क्रॉल प्राप्त करते हैं )

• नारंगी दृश्य का चेक फ्रेम, जो होना चाहिए (0,0,700,700)
• संतरे के दृश्य की ऊंचाई की कमी को हटा दें।
• स्क्रॉलव्यू ऊँचाई से मेल खाने के लिए नारंगी दृश्य की ऊँचाई बदलें।
• संतरे के दृश्य को देखने के स्क्रॉल करने के लिए Ctrl-खींचें और समान ऊँचाई की बाधा जोड़ें।

• और हो गया!!! बस चलाएं और जांचें कि क्या यह लंबवत स्क्रॉल करता है

ऑटो लेआउट के साथ स्क्रॉलिंग सामग्री सक्षम

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

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

प्रमुख धारणाएँ

• UIScrollView को केवल एक सबव्यू का उपयोग करना चाहिए। यह एक 'उविव्यू' है जो आपके द्वारा स्क्रॉल किए जाने वाले सभी चीज़ों को रखने के लिए सामग्री दृश्य के रूप में कार्य करता है।
• सामग्री दृश्य बनाएं और स्क्रॉल दृश्य के माता-पिता के पास क्षैतिज स्क्रॉलिंग के लिए समान ऊंचाइयां हैं। (ऊर्ध्वाधर स्क्रॉलिंग के लिए समान चौड़ाई)
• सुनिश्चित करें कि सभी स्क्रॉल करने योग्य सामग्री की एक निर्धारित चौड़ाई है और सभी पक्षों पर पिन की गई है।

एक नई परियोजना शुरू करें

यह केवल एक दृश्य अनुप्रयोग हो सकता है।

स्टोरीबोर्ड

इस उदाहरण में, हम एक क्षैतिज स्क्रॉल दृश्य बनाएंगे। दृश्य नियंत्रक का चयन करें और फिर आकार निरीक्षक में फ्रीफ़ॉर्म चुनें। चौड़ाई 1,000 और ऊँचाई 300 बनाओ। यह हमें स्टोरीबोर्ड पर कमरा प्रदान करता है ताकि सामग्री को स्क्रॉल किया जा सके।

एक स्क्रॉल दृश्य जोड़ें

एक UIScrollView जोड़ें और दृश्य नियंत्रक के मूल दृश्य में सभी चार पक्षों को पिन करें।

एक सामग्री दृश्य जोड़ें

स्क्रॉल दृश्य के UIView रूप में एक UIView जोड़ें। यह कुंजी है। स्क्रॉल दृश्य में बहुत सारे सबव्यू जोड़ने की कोशिश न करें। बस एक एकल UIView जोड़ें। यह उन अन्य दृश्यों के लिए आपकी सामग्री का दृश्य होगा, जिन्हें आप स्क्रॉल करना चाहते हैं। सभी चार तरफ स्क्रॉल दृश्य के लिए सामग्री दृश्य को पिन करें।

समान ऊँचाई

अब डॉक्यूमेंट आउटलाइन में, कमांड कंटेंट व्यू और स्क्रॉल व्यू के पेरेंट व्यू , दोनों को चुनने के लिए क्लिक करें। फिर समान होने के लिए ऊंचाइयों को सेट करें (कंटेंट व्यू से स्क्रॉल दृश्य> पर नियंत्रण </ kbd खींचें)। यह भी कुंजी है। क्योंकि हम क्षैतिज रूप से स्क्रॉल कर रहे हैं, स्क्रॉल दृश्य का कंटेंट दृश्य यह नहीं जान पाएगा कि जब तक हम इसे इस तरह सेट नहीं करते हैं, तब तक यह कितना ऊंचा होना चाहिए।

ध्यान दें:

• यदि हम सामग्री को लंबवत स्क्रॉल कर रहे थे, तो हम सामग्री दृश्य की चौड़ाई को स्क्रॉल दृश्य के माता-पिता की चौड़ाई के बराबर सेट करेंगे।

सामग्री जोड़ें

तीन UIView s जोड़ें और उन्हें सभी अड़चनें दें। मैंने हर चीज के लिए 8 पॉइंट मार्जिन का इस्तेमाल किया।

प्रतिबंध:

• हरा दृश्य: ऊपर, बाएँ और नीचे के किनारों को पिन करें। चौड़ाई 400 कर लें।
• लाल दृश्य: ऊपर, बाएँ और नीचे के किनारों को पिन करें। चौड़ाई 300 कर दें।
• बैंगनी दृश्य: सभी चार किनारों को पिन करें। शेष स्थान जो भी हो (इस मामले में 268) चौड़ाई बनाओ।

चौड़ाई की बाधाओं को सेट करना भी महत्वपूर्ण है ताकि स्क्रॉल दृश्य को पता चले कि उसका सामग्री दृश्य कितना व्यापक होगा।

ख़त्म होना

बस इतना ही। अब आप अपना प्रोजेक्ट चला सकते हैं। इस उत्तर के शीर्ष पर स्क्रॉलिंग छवि की तरह व्यवहार करना चाहिए।

आगे के अध्ययन

• IOS: कैसे एक स्क्रॉल दृश्य पर AutoLayout काम करने के लिए
• इंटरफ़ेस बिल्डर में ऑटो लेआउट के साथ UIScrollView को कैसे कॉन्फ़िगर करें
• YouTube वीडियो ट्यूटोरियल: UIScrollView - स्क्रीन पर अपने विचार कैसे रखें

सक्षम / स्क्रॉल करना अक्षम करें

प्रॉपर्टी scrollEnabled एक Boolean मान संग्रहीत करता है जो यह निर्धारित करता है कि स्क्रॉलिंग सक्षम है या नहीं।
यदि इस गुण का मान सत्य / YES है, तो स्क्रॉल करना सक्षम है, अन्यथा नहीं। डिफ़ॉल्ट मान true

तीव्र

scrollview.isScrollEnabled = true

उद्देश्य सी

scrollview.scrollEnabled = YES;

ज़ूम इन / आउट UIImageView

UIScrollView उदाहरण बनाएँ

let scrollview = UIScrollView.init(frame: self.view.bounds)

और फिर ये गुण सेट करें:

scrollView.minimumZoomScale = 0.1
scrollView.maximumZoomScale = 4.0
scrollView.zoomScale = 1.0
scrollview.delegate = self as? UIScrollViewDelegate 

छवि को ज़ूम इन और आउट करने के लिए हमें उस राशि को निर्दिष्ट करना होगा जिसे उपयोगकर्ता ज़ूम इन और आउट कर सकता है। हम स्क्रॉल दृश्य के minimumZoomScale और maximumZoomScale गुणों के मान सेट करके ऐसा करते हैं। ये दोनों डिफ़ॉल्ट रूप से 1.0 पर सेट हैं।

और zoomScale से 1.0 जो न्यूनतम और अधिकतम ज़ूमिंग के लिए ज़ूम कारक निर्दिष्ट करता है।

ज़ूमिंग का समर्थन करने के लिए, हमें आपके स्क्रॉल दृश्य के लिए एक प्रतिनिधि सेट करना होगा। प्रतिनिधि ऑब्जेक्ट को UIScrollViewDelegate प्रोटोकॉल के अनुरूप होना चाहिए। उस प्रतिनिधि वर्ग को viewForZoomingInScrollView() विधि को लागू करना होगा और ज़ूम करने के लिए दृश्य वापस करना होगा।

दिखाए गए अनुसार अपना ViewController संशोधित करें

class ViewController: UIViewController, UIScrollViewDelegate

फिर निम्न प्रतिनिधि समारोह को कक्षा में जोड़ें।

func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
    return imageView
}

अब UIImageView उदाहरण बनाएं

इस चर को वर्ग चर के रूप में बनाएं

var imageView:UIImageView = UIImageView.init(image: UIImage.init(named: "someImage.jpg"))

और फिर इसे स्क्रॉलव्यू में जोड़ें

scrollView?.addSubview(imageView)

संदर्भ

• IOS के लिए स्क्रॉल देखें प्रोग्रामिंग गाइड
• UIScrollView ट्यूटोरियल

UIScrollView प्रतिनिधि विधियों के साथ स्क्रॉल समाप्त होने पर पता लगाना

ScrollViewDidEndDecelerating: यह प्रतिनिधि को बताता है कि स्क्रॉल दृश्य स्क्रॉलिंग आंदोलन को कम कर रहा है।

उद्देश्य सी:

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    [self stoppedScrolling];
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    if (!decelerate) {
        [self stoppedScrolling];
    }
}

- (void)stoppedScrolling {
    // done, do whatever
}

स्विफ्ट:

func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) {
    if !decelerate {
        stoppedScrolling()
    }
}

func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
    stoppedScrolling()
}

func stoppedScrolling() {
    // done, do whatever
}

स्क्रॉलिंग दिशा को प्रतिबंधित करें

आप उन निर्देशों को प्रतिबंधित कर सकते हैं जो उपयोगकर्ता निम्नलिखित कोड का उपयोग करने के लिए स्क्रॉल करने में सक्षम हैं:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if scrollView.contentOffset.x != 0 {
        scrollView.contentOffset.x = 0
    }
}

हर बार जब उपयोगकर्ता एक्स-अक्ष पर स्क्रॉल करता है, तो स्क्रॉलव्यू की सामग्री ऑफसेट 0 पर वापस आ जाती है।
आप स्पष्ट रूप से x s को y s में बदल सकते हैं और उसके बाद क्षैतिज-केवल दिशा को लॉक कर सकते हैं।

आपको यह भी सुनिश्चित करने की आवश्यकता है कि आप इस कोड को scrollViewDidScroll(_ scrollView: UIScrollView) प्रतिनिधि विधि में डाल scrollViewDidScroll(_ scrollView: UIScrollView) । अन्यथा, आप इसे काम करने के लिए नहीं मिलेगा।

इसके अलावा, अपनी कक्षा की घोषणा में UIScrollViewDelegate आयात करना सुनिश्चित करें, जैसे:

class ViewController: UIViewController, UIScrollViewDelegate

... और viewDidLoad(_:) तरह किसी न किसी तरीके से स्क्रॉल करने के प्रतिनिधि को स्वयं पर सेट करें

scrollView.delegate = self