iOS
UIScrollView AutoLayout

ScrollableController

UIScrollView साथ ऑटोलयूट का उपयोग करते समय, यह अपनी सामग्री या साक्षात्कार के आकार के आधार पर ठीक से आकार नहीं देता है।

UIScrollView को स्वचालित रूप से स्क्रॉल करने के लिए, जब इसकी सामग्री दृश्य क्षेत्र में फिट होने के लिए बहुत बड़ी हो जाती है, तो हमें एक ContentView और कुछ बाधाओं को जोड़ने की आवश्यकता होती है, जो UIScrollView को इसकी सामग्री और इसके माता-पिता में इसकी चौड़ाई और ऊंचाई निर्धारित करने की अनुमति देते हैं राय।

import Foundation
import UIKit

class ScrollableController : UIViewController {
    
    private var scrollView: UIScrollView!
    private var contentView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //Setup
        self.initControls()
        self.setTheme()
        self.layoutScrollView()
        self.layoutContentView()
        
        //Add child views
        self.addChildViews()
    }
    
    func initControls() {
        self.scrollView = UIScrollView()
        self.contentView = UIView()
    }
    
    func setTheme() {
        self.scrollView.backgroundColor = UIColor.blue()
        self.contentView.backgroundColor = UIColor.orange()
    }
    
    func layoutScrollView() {
        self.view.addSubview(self.scrollView)
        
        let views: NSDictionary = ["scrollView": self.scrollView]
        var constraints = Array<String>()
        
        //Constrain the scrollView to our controller's self.view.
        constraints.append("H:|-0-[scrollView]-0-|")
        constraints.append("V:|-0-[scrollView]-0-|")
        
        for constraint in constraints {
            self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: constraint, options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views as! [String : AnyObject]))
        }
        
        self.scrollView.translatesAutoresizingMaskIntoConstraints = false
    }
    
    func layoutContentView() {
        self.scrollView.addSubview(self.contentView)
        
        let views: NSDictionary = ["contentView": self.contentView, "view": self.view]
        var constraints = Array<String>()
        
        //Constrain the contentView to the scrollView.
        constraints.append("H:|-0-[contentView]-0-|")
        constraints.append("V:|-0-[contentView]-0-|")
        
        for constraint in constraints {
            self.scrollView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: constraint, options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views as! [String : AnyObject]))
        }
        
        //Disable Horizontal Scrolling by making the contentView EqualWidth with our controller's self.view (ScrollView's parentView).
        self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[contentView(==view)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views as! [String : AnyObject]))
        
        self.contentView.translatesAutoresizingMaskIntoConstraints = false
    }
    
    func addChildViews() {
        //Init
        let greenView = UIView()
        let whiteView = UIView()
        
        //Theme
        greenView.backgroundColor = UIColor.green()
        whiteView.backgroundColor = UIColor.orange()
        
        //Layout -- Child views are added to the 'ContentView'
        self.contentView.addSubview(greenView)
        self.contentView.addSubview(whiteView)
        
        let views: NSDictionary = ["greenView": greenView, "whiteView": whiteView];
        var constraints = Array<String>()
        
        //Constrain the greenView to the contentView with a height of 400 and 15 spacing all around.
        constraints.append("H:|-15-[greenView]-15-|")
        constraints.append("V:|-15-[greenView(400)]")
        
        //Constrain the whiteView below the greenView with 15 spacing all around and a height of 500.
        constraints.append("H:|-15-[whiteView]-15-|")
        constraints.append("V:[greenView]-15-[whiteView(500)]-15-|")
        
        for constraint in constraints {
            self.contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: constraint, options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views as! [String : AnyObject]))
        }
        
        greenView.translatesAutoresizingMaskIntoConstraints = false
        whiteView.translatesAutoresizingMaskIntoConstraints = false
    }
}

अब हम देख सकते हैं कि हरा दृश्य (400 ऊँचाई) + सफेद दृश्य (500 ऊँचाई) हमारी स्क्रीन से बड़ा है। यह स्क्रॉल दृश्य की सामग्री को BOTH दृश्य में फिट होने के लिए विकसित करने का कारण होगा, जिससे इसे लंबवत रूप से स्क्रॉल करने की अनुमति मिलती है।

हम विकलांग क्षैतिज स्क्रॉल का उपयोग कर EqualWidth पर बाधा contentView और self.view

स्टोरीबोर्ड के माध्यम से UIScrollView गतिशील सामग्री का आकार

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

यहां सामग्री आकार को गतिशील रूप से प्राप्त करने के चरण दिए गए हैं।

चरण 1 :

स्टोरीबोर्ड में देखने के लिए स्क्रॉलव्यू जोड़ें और अग्रणी, अनुगामी, ऊपर और नीचे की बाधाओं को जोड़ें (सभी मान शून्य हैं)।

चरण 2 :

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

1. अग्रणी, अनुगामी, ऊपर और नीचे की बाधाएँ (सभी मान शून्य हैं)।

2. मुख्य दृश्य के बराबर ऊंचाई, समान चौड़ाई जोड़ें (यानी जिसमें स्क्रॉलव्यू है)। समान ऊँचाई के लिए प्राथमिकता कम पर सेट करें। (यह सामग्री आकार सेट करने के लिए महत्वपूर्ण कदम है)।

3. इस सामग्री दृश्य की ऊँचाई दृश्य में जोड़े गए विचारों की संख्या के अनुसार होगी। मान लीजिए कि आपने अंतिम दृश्य जोड़ा है तो एक लेबल है और उसकी वाई स्थिति 420 है और ऊंचाई 20 है तो आपकी सामग्री का दृश्य 440 होगा।

चरण 3: अपनी आवश्यकताओं के अनुसार उन सभी विचारों में बाधाएं जोड़ें, जिन्हें आपने सामग्री दृश्य में जोड़ा है।