iOS => ऑटो लेआउट

परिचय

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

वाक्य - विन्यास

NSLayoutConstraint (आइटम: कोई भी, विशेषता: NSLayoutAttribute, संबंधित संबंधित: NSLayoutRelation, ToItem: कोई भी ?, विशेषता: NSLayoutAttribute, गुणक, CGFloat, निरंतर: CGFloat) // एक गर्भनिरोधक प्रोग्राम बनाएँ

क्रमिक रूप से बाधाओं को निर्धारित करना

बॉयलरप्लेट कोड उदाहरण

override func viewDidLoad() {
    super.viewDidLoad()

    let myView = UIView()
    myView.backgroundColor = UIColor.blueColor()
    myView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(myView)

    // Add constraints code here
    // ...
}

एंकर स्टाइल के नीचे के उदाहरणों में NSLayoutConstraint Style का पसंदीदा तरीका है, हालाँकि यह केवल iOS 9 से उपलब्ध है, इसलिए यदि आप iOS 8 का समर्थन कर रहे हैं तो आपको अभी भी NSLayoutConstraint स्टाइल का उपयोग करना चाहिए।

पिन करना

एंकर स्टाइल

let margins = view.layoutMarginsGuide
myView.leadingAnchor.constraintEqualToAnchor(margins.leadingAnchor, constant: 20).active = true

leadingAnchor अलावा, trailingAnchor topAnchor , bottomAnchor और bottomAnchor ।

NSLayoutConstraint स्टाइल

NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.LeadingMargin, multiplier: 1.0, constant: 20.0).active = true

के अलावा .Leading वहाँ भी .Trailing , .Top , और .Bottom ।
के अलावा .LeadingMargin वहाँ भी .TrailingMargin , .TopMargin , और .BottomMargin ।

दृश्य प्रारूप भाषा शैली

NSLayoutConstraint.constraintsWithVisualFormat("H:|-20-[myViewKey]", options: [], metrics: nil, views: ["myViewKey": myView])

चौड़ाई और ऊंचाई

एंकर स्टाइल

myView.widthAnchor.constraintEqualToAnchor(nil, constant: 200).active = true
myView.heightAnchor.constraintEqualToAnchor(nil, constant: 100).active = true

NSLayoutConstraint स्टाइल

NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 200).active = true
NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 100).active = true

दृश्य प्रारूप भाषा शैली

NSLayoutConstraint.constraintsWithVisualFormat("H:[myViewKey(200)]", options: [], metrics: nil, views: ["myViewKey": myView])
NSLayoutConstraint.constraintsWithVisualFormat("V:[myViewKey(100)]", options: [], metrics: nil, views: ["myViewKey": myView])

कंटेनर में केंद्र

एंकर स्टाइल

myView.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor).active = true
myView.centerYAnchor.constraintEqualToAnchor(view.centerYAnchor).active = true

NSLayoutConstraint स्टाइल

NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0).active = true
NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterY, multiplier: 1, constant: 0).active = true

दृश्य प्रारूप भाषा शैली

NSLayoutConstraint.constraintsWithVisualFormat("V:[viewKey]-(<=0)-[myViewKey]", options: NSLayoutFormatOptions.AlignAllCenterX, metrics: nil, views: ["myViewKey": myView, "viewKey": view])
NSLayoutConstraint.constraintsWithVisualFormat("H:[viewKey]-(<=0)-[myViewKey]", options: NSLayoutFormatOptions.AlignAllCenterY, metrics: nil, views: ["myViewKey": myView, "viewKey": view])

ऑटो लेआउट का उपयोग कैसे करें

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

ऑटो लेआउट डिफ़ॉल्ट रूप से सक्षम है, लेकिन आप इसे दोहरा सकते हैं। यदि आप प्रोजेक्ट नेविगेटर में Main.storyboard पर क्लिक करते हैं और फिर फ़ाइल निरीक्षक को दिखाते हैं। सुनिश्चित करें कि ऑटो लेआउट और आकार वर्गों की जाँच की जाती है:

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

यदि आप अलग-अलग डिवाइस साइज़ या ओरिएंटेशन के लिए अलग-अलग अड़चनें रखना चाहते हैं, तो आप उन्हें नीचे बीच में पाए जाने वाले wAny hA साइज़ क्लास के विकल्पों में सेट कर सकते हैं।

केंद्र बाधाएं

स्टोरीबोर्ड पर अपना बटन (या जो भी आप देखना चाहते हैं) का चयन करें। फिर नीचे दाईं ओर संरेखित बटन पर क्लिक करें। Horizontally in Container चयन करें और Vertically in Container । "2 बाधाएं जोड़ें" पर क्लिक करें।

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

तुम भी "आवश्यक के रूप में अद्यतन फ्रेम" एक साथ दबाने के लिए ⌘ + ⌥ + = द्वारा (आदेश + विकल्प और बराबर होती है) को देखने के चयन करने के बाद कर सकते हैं, यह कुछ समय बचाने के सकता है।

अब जब आप अपना ऐप चलाते हैं तो इसे केंद्रित होना चाहिए, इससे कोई फर्क नहीं पड़ता कि आप किस डिवाइस के आकार का उपयोग कर रहे हैं।

इंटरफ़ेस बिल्डर का उपयोग करके विचारों को केंद्र में रखने का एक अन्य तरीका नियंत्रण-क्लिक-ड्रैगिंग है। कहते हैं कि आप एक दृश्य में एक UILabel केंद्र करना चाहते हैं। बायीं ओर नीचे साइडबार बटन पर क्लिक करके अपने स्टोरीबोर्ड में Document Outline खोलें। Ctrl (नियंत्रण) को पकड़े हुए लेबल से दृश्य पर क्लिक करें और खींचें, और एक नीली रेखा दिखाई देनी चाहिए:

रिलीज होने पर, बाधा विकल्पों का एक मेनू दिखाई देगा:

"कंटेनर में क्षैतिज रूप से केंद्र" और "कंटेनर में लंबवत केंद्र" का चयन करें। आवश्यक के रूप में फ़्रेम अपडेट करें, और वॉइला! एक केंद्रित लेबल।

वैकल्पिक रूप से, आप बाधाओं को प्रोग्रामेटिक रूप से जोड़ सकते हैं। बाधाओं को बनाएं और उन्हें वांछित यूआई तत्वों और विचारों में जोड़ें जैसा कि निम्नलिखित उदाहरण बताता है, जहां हम एक बटन बनाते हैं और इसे केंद्र में क्षैतिज और लंबवत रूप से इसके पर्यवेक्षक में संरेखित करते हैं:

उद्देश्य सी

- (void)viewDidLoad
{
    [super viewDidLoad];
    UIButton *yourButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 100, 18)];
    [yourButton setTitle:@"Button" forState:UIControlStateNormal];


    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:yourButton attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]]; //Align veritcally center to superView

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:yourButton attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]]; //Align horizontally center to superView

    [self.view addSubview:yourButton]; //Add button to superView
}

तीव्र

override func viewDidLoad() 
{
    super.viewDidLoad()
    let yourButton: UIButton = UIButton(frame: CGRect(x: 0, y: 0, width: 100, height: 18))
    yourButton.setTitle("Button", forState: .Normal)

    let centerVertically = NSLayoutConstraint(item: yourButton,
                                   attribute: .CenterX,
                                   relatedBy: .Equal,
                                      toItem: view,
                                   attribute: .CenterX,
                                  multiplier: 1.0,
                                    constant: 0.0)
    let centerHorizontally = NSLayoutConstraint(item: yourButton,
                                   attribute: .CenterY,
                                   relatedBy: .Equal,
                                      toItem: view,
                                   attribute: .CenterY,
                                  multiplier: 1.0,
                                    constant: 0.0)
    NSLayoutConstraint.activateConstraints([centerVertically, centerHorizontally])
}

अंतरिक्ष दृश्य समान रूप से

उनके पर्यवेक्षण में केंद्रित दो विचारों को एक साथ रखना आम है। स्टैक ओवरफ्लो पर दिया गया सामान्य उत्तर इन दो विचारों को एक UIView में एम्बेड करना और UIView को केंद्र में UIView । यह आवश्यक या अनुशंसित नहीं है। UILayoutGuide डॉक्स से:

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

अनावश्यक UIView में बटन जोड़ने के बजाय, आप ऐसा करने के लिए UILayoutGuide का उपयोग कर सकते हैं। एक UILayoutGuide मूल रूप से एक आयताकार स्थान है जो ऑटो लेआउट के साथ बातचीत कर सकता है। आप बटन के बाईं और दाईं ओर एक UILayoutGuide हैं और उनकी चौड़ाई के बराबर सेट करते हैं। यह बटन को केन्द्रित करेगा। यहाँ यह कोड में कैसे करना है:

दृश्य प्रारूप भाषा शैली

view.addSubview(button1)
view.addSubview(button2)

let leftSpace = UILayoutGuide()
view.addLayoutGuide(leftSpace)

let rightSpace = UILayoutGuide()
view.addLayoutGuide(rightSpace)

let views = [
    "leftSpace" : leftSpace,
    "button1" : button1,
    "button2" : button2,
    "rightSpace" : rightSpace
]

// Lay the buttons and layout guides out horizontally in a line. 
// Put the layout guides on each end.
NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[leftSpace][button1]-[button2][rightSpace]|", options: [], metrics: nil, views: views))

// Now set the layout guides widths equal, so that the space on the 
// left and the right of the buttons will be equal
leftSpace.widthAnchor.constraintEqualToAnchor(rightSpace.widthAnchor).active = true

एंकर स्टाइल

let leadingSpace = UILayoutGuide()
let trailingSpace = UILayoutGuide()
view.addLayoutGuide(leadingSpace)
view.addLayoutGuide(trailingSpace)

leadingSpace.widthAnchor.constraintEqualToAnchor(trailingSpace.widthAnchor).active = true
    
leadingSpace.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor).active = true
leadingSpace.trailingAnchor.constraintEqualToAnchor(button1.leadingAnchor).active = true
    
trailingSpace.leadingAnchor.constraintEqualToAnchor(button2.trailingAnchor).active = true
trailingSpace.trailingAnchor.constraintEqualToAnchor(view.trailingAnchor).active = true

आपको इसके लिए ऊर्ध्वाधर बाधाओं को भी जोड़ना होगा, लेकिन यह बिना किसी "डमी" के विचारों को जोड़े बिना दृश्य में बटन को केंद्र में रखेगा! यह उन "डमी" विचारों को प्रदर्शित करने पर सीपीयू के समय को बर्बाद करने से सिस्टम को बचाएगा। यह उदाहरण बटन का उपयोग करता है, लेकिन आप किसी भी दृश्य के लिए बटन को स्वैप कर सकते हैं, जिस पर आप बाधा डालना चाहते हैं।

यदि आप iOS 8 या इससे पहले के लेआउट को बनाने का सबसे आसान तरीका हैं, तो छिपे हुए डमी विचारों को जोड़ना है। IOS 9 के साथ आप डमी विचारों को लेआउट गाइड के साथ बदल सकते हैं।

नोट: इंटरफ़ेस बिल्डर अभी तक लेआउट गाइड का समर्थन नहीं करता है (Xcode 7.2.1)। इसलिए यदि आप उनका उपयोग करना चाहते हैं तो आपको कोड में अपनी अड़चनें बनानी होंगी। स्रोत

यूलैबेल आंतरिक आकार

हमें एक दृश्य बनाना होगा जिसमें एक पाठ के लिए एक छवि उपसर्ग होगा। पाठ परिवर्तनशील लंबाई का हो सकता है। हमें एक परिणाम प्राप्त करना होगा जहां छवि + पाठ हमेशा माता-पिता के दृष्टिकोण के केंद्र में होता है।

चरण 1: पहले एक सिंगल व्यू प्रोजेक्ट बनाएं और उसे अपनी पसंद का कुछ नाम दें और स्टोरी बोर्ड मुट्ठी दृश्य खोलें। कुछ उचित आकार के साथ एक दृश्य देखें और इसकी पृष्ठभूमि का रंग पीला करें। मैंने 3.5 cont के लिए अपने व्यूकंट्रोलर का आकार बदल दिया है। दृश्य को कुछ इस तरह देखना चाहिए

चरण 2: अब हम पीले दृश्य में बाधाओं को जोड़ देंगे। इसके साथ ही हम चौड़ाई और ऊँचाई की बाधाओं को जोड़ देंगे (प्रतीक्षा करें एक मिनट हमने यह नहीं कहा कि दृश्य में गतिशील चौड़ाई होगी? ठीक है, हम बाद में इसे वापस प्राप्त करेंगे) जोड़ें नीचे दी गई छवि के अनुसार बाधाओं का पालन करते हुए चौड़ाई मान से परेशान न हों कोई भी मूल्य चौड़ाई के लिए ठीक होगा बस इसे इतना बड़ा रखें कि हम ऑटोलयूट्स को ठीक से जोड़ सकें।

इन दो बाधाओं को जोड़ने के बाद आप देखेंगे कि XCode आपको त्रुटियां दे रहा है क्योंकि नीचे दी गई छवि उन्हें देखने और उन्हें समझने की सुविधा देती है।

हमारे पास दो त्रुटियां हैं (लाल मतलब त्रुटि) जैसा कि ऊपर चर्चा की गई है, जो अस्पष्टता वाले हिस्से को फिर से दिखाती है

अनुपलब्ध बाधाएं: इसके लिए बाधाओं की आवश्यकता: X स्थिति: - जैसा कि ऊपर चर्चा की गई है कि हमने दृश्य को एक चौड़ाई और ऊँचाई दी है, इसलिए इसका "BOUNDS" परिभाषित किया गया है, लेकिन हमने इसका मूल नहीं दिया है, इसलिए इसका "FRAME" परिभाषित नहीं है। ऑटोलॉययट यह निर्धारित करने में सक्षम नहीं है कि हमारे पीले दृश्य की एक्स स्थिति क्या होगी

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

हमने जो किया है, हमने एक "वर्टिकल सेंटर" और "हॉरिज़ॉन्टल सेंटर" को जोड़ा है, ये बाधाएं ऑटोलेयूट को बताती हैं कि हमारा पीला दृश्य हमेशा क्षैतिज रूप से केंद्र में होगा: इसलिए एक्स निर्धारित वर्टिकल बाधा के साथ है और वाई निर्धारित है (आप। फ्रेम को समायोजित करना पड़ सकता है)।

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

चूँकि हमने अपनी उपसर्ग छवि के लिए आयाम निर्धारित किया है, इसलिए हम इस चित्र के लिए चौड़ाई की ऊँचाई तय करेंगे। बाधाओं को जोड़ें और अगले चरण पर आगे बढ़ें।

Step4: हमारे पीले दृश्य के उप दृश्य के रूप में एक UILabel जोड़ें और निम्नलिखित बाधाओं को जोड़ें

जैसा कि आप देख सकते हैं कि मैंने अपने यूआईबेल को केवल रिश्तेदार बाधाएं दी हैं। उपसर्ग छवि से 8 अंक और पीले दृश्य से 0,0,0 शीर्ष अनुगामी और नीचे। हम चाहते हैं कि चौड़ाई गतिशील हो हम चौड़ाई या ऊंचाई की कमी नहीं देंगे। ।

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

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

चरण 6: हम चाहते हैं कि UILabel पाठ के अनुसार विस्तार करे और हमारे पीले दृश्य को आगे बढ़ाए। इसलिए हमने पीले दृश्य चौड़ाई की प्राथमिकता कम कर दी है। अब हम अपने UILabel के पाठ संपीड़न प्रतिरोध की प्राथमिकता को बढ़ाएंगे। हम चाहते हैं कि हमारा दृश्य कम हो जाए इसलिए हम नीचे दिए गए चित्र को UILabel.Follow करते हुए कंटेंट हगिंग की प्राथमिकता को बढ़ाएंगे

जैसा कि आप देख सकते हैं कि हमने कंटेंट हगिंग को प्राथमिकता में बढ़ाकर 500 और कम्प्रेशन रेसिस्टेंस प्रायोरिटी को 751 कर दिया है जो कि चौड़ाई की 1 प्राथमिकता को सफलतापूर्वक नियंत्रित करेगा।

अब निर्माण करें और चलाएं आपको निम्नलिखित के रूप में कोई चीज दिखाई देगी।

ऑटो लेआउट के साथ कैसे चेतन करें

ऑटो लेआउट के बिना, एनीमेशन समय के साथ एक दृश्य के फ्रेम को बदलकर पूरा किया जाता है। ऑटो लेआउट के साथ, बाधाएं दृश्य फ़्रेम को निर्धारित करती हैं, इसलिए आपको इसके बजाय बाधाओं को चेतन करना होगा। यह अप्रत्यक्ष कल्पना करने के लिए एनीमेशन को कठिन बनाता है।

यहां ऑटो लेआउट के साथ चेतन करने के तरीके दिए गए हैं:

आवधिक कॉल ( CADisplayLink , dispatch_source_t , dispatch_after , NSTimer ) का उपयोग करके निर्माण के बाद बाधा के निरंतर परिवर्तन । फिर layoutIfNeeded को अपडेट करने के लिए layoutIfNeeded पर कॉल करें। उदाहरण:

उद्देश्य सी:

self.someConstraint.constant = 10.0;
[UIView animateWithDuration:0.25 animations:^{
    [self.view layoutIfNeeded];
}];

स्विफ्ट:

self.someConstraint.constant = 10.0
UIView.animate(withDuration: 0.25, animations: self.view.layoutIfNeeded)

बाधाओं को बदलें और एक एनीमेशन ब्लॉक के अंदर [view layoutIfNeeded] कॉल करें। यह एनीमेशन के दौरान बाधाओं की अनदेखी करने वाले दो पदों के बीच अंतर करता है।

[UIView animateWithDuration:0.5 animations:^{
    [view layoutIfNeeded];
}]

बाधाओं की प्राथमिकता बदलें । यह बाधाओं को जोड़ने और हटाने की तुलना में कम सीपीयू गहन है।
सभी बाधाओं को दूर करें और ऑटोसाइजिंग मास्क का उपयोग करें । बाद के लिए, आपको view.translatesAutoresizingMaskIntoConstraints = YES सेट view.translatesAutoresizingMaskIntoConstraints = YES ।
इच्छित एनीमेशन में हस्तक्षेप न करने वाली बाधाओं का उपयोग करें ।
कंटेनर दृश्य का उपयोग करें । बाधाओं का उपयोग कर पर्यवेक्षी की स्थिति। फिर बाधाओं के साथ एक सबव्यू जोड़ें जो एनीमेशन से नहीं लड़ते हैं, उदाहरण के लिए: पर्यवेक्षक के सापेक्ष एक केंद्र। यह पर्यवेक्षकों के लिए बाधाओं का हिस्सा है, इसलिए वे सबव्यू में एनीमेशन से नहीं लड़ते हैं।
विचारों के बजाय चेतन परतें । लेयर ट्रांसफॉर्म ऑटो लेआउट को ट्रिगर नहीं करते हैं।

CABasicAnimation* ba = [CABasicAnimation animationWithKeyPath:@"transform"];
ba.autoreverses = YES;
ba.duration = 0.3;
ba.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.1, 1.1, 1)];
[v.layer addAnimation:ba forKey:nil];

लेआउट ओवरराइड करें । कॉल [super layoutSubviews] और बाधाओं को ठीक करें।
ViewDidLayoutSubviews में फ़्रेम बदलें । ऑटो लेआउट layoutSubviews में लागू किया जाता है, इसलिए एक बार हो जाने के बाद, इसे viewDidLayoutSubviews में बदल दें।
ऑटो लेआउट से बाहर निकलें और मैन्युअल रूप से दृश्य सेट करें। आप इस अधिभावी कर सकते हैं layoutSubviews / layout सुपर वर्ग के कार्यान्वयन बुला बिना।

त्वरित टिप: यदि एनिमेटेड दृश्य के माता-पिता को layoutIfNeeded() नहीं किया जा रहा है (अर्थात, एनीमेशन शुरू से अंत तक की स्थिति में है), layoutIfNeeded() कॉल करें layoutIfNeeded() गहन दृश्य में layoutIfNeeded() जो कि उस दृश्य का माता-पिता है जो दूसरे शब्दों में एनिमेटेड है , कि एनीमेशन से प्रभावित नहीं है)। मुझे ठीक से नहीं पता कि यह क्यों काम करता है।

उइलाबेल प्राथमिकता संघर्ष को हल करें

समस्या : जब आप किसी दृश्य के अंदर कई लेबल का उपयोग करते हैं, तो आपको शायद चेतावनी मिल सकती है:

हम इस चेतावनी को कैसे ठीक कर सकते हैं?

समाधान : हम प्राथमिकताओं की गणना और क्रम में सेट करते हैं। प्राथमिकताएं लेबल से भिन्न होनी चाहिए। इसका मतलब है कि जो महत्वपूर्ण है उसे उच्च प्राथमिकता मिलेगी। उदाहरण के लिए, मेरे मामले में, मैंने अपने लेबल के लिए लंबित प्राथमिकताएँ इस तरह दिखाई हैं:

मैंने 1 लेबल के लिए सर्वोच्च प्राथमिकता और 4 वें लेबल के लिए सबसे कम सेट किया।

एक ViewController में, मुझे लगता है कि आप उन प्राथमिकताओं के प्रभाव को देखने के लिए कठिन हैं। हालाँकि, यह UITableViewCell + अनुमान सेल ऊंचाई के साथ बहुत स्पष्ट रूप से है।

उममीद है कि इससे मदद मिलेगी।

UILabel में पाठ के अनुसार UILabel और Parentview का आकार

कदम से कदम गाइड: -

चरण 1: - UIView के लिए बाधा निर्धारित करें

अग्रणी। 2) शीर्ष। 3) अनुगामी। (मेनव्यू से)

चरण 2: - लेबल 1 के लिए विवश सेट करें

शीर्ष 2) शीर्ष 3) अनुगामी (यह पर्यवेक्षण से है)

चरण 3: - लेबल 2 के लिए बाधा निर्धारित करें

शीर्ष 2) शीर्ष 3) अनुगामी (इसके पर्यवेक्षण से)

चरण 4: - अधिकांश पेचीदा UIV से UILabel के लिए एक तल देते हैं।

चरण 5: - (वैकल्पिक) UIButton के लिए विवश करें

अग्रणी 2) नीचे 3) अनुगामी 4) निश्चित ऊँचाई (मेनव्यू से)

आउटपुट: -

नोट: - सुनिश्चित करें कि आपने लेबल संपत्ति में लाइनों की संख्या = 0 निर्धारित की है।

मुझे उम्मीद है कि यह जानकारी UILabel की ऊंचाई के अनुसार ऑटोरेस्सिज़ UIView को समझने के लिए और पाठ के अनुसार ऑटिस्लाइज़ UILabel के अनुसार होगी।

विजुअल फॉर्मेट लैंग्वेज बेसिक्स: कोड में अड़चनें!

एचवीएफएल एक सरल और त्वरित फैशन में यूआई तत्वों को विवश करने के लिए डिज़ाइन की गई भाषा है। आमतौर पर, VFL के इंटरफ़ेस बिल्डर में पारंपरिक UI अनुकूलन पर एक फायदा है क्योंकि यह बहुत अधिक पठनीय, सुलभ और कॉम्पैक्ट है।

यहाँ VFL का एक उदाहरण है, जिसमें तीन UIViews बाएं से दाएं विवश कर रहे हैं है, को भरने superView.width , साथ aGradeView

"H:|[bgView][aGradeView(40)][bGradeView(40)]|"

दो कुल्हाड़ियाँ हैं जिनमें हम यूआई ऑब्जेक्ट्स को क्षैतिज और ऊर्ध्वाधर रूप से विवश कर सकते हैं।

VFL की प्रत्येक पंक्ति हमेशा H: या V: शुरू होती है। यदि कोई मौजूद नहीं है, तो डिफ़ॉल्ट विकल्प H:

आगे बढ़ते हुए, हमारे पास एक पाइपलाइन है। | यह प्रतीक, या पाइप, पर्यवेक्षण को संदर्भित करता है। यदि आप उपरोक्त VFL कोड के स्निपेट को करीब से देखते हैं, तो आप इनमें से दो पाइपलाइनों को देखेंगे।

यह पर्यवेक्षी के दो क्षैतिज सिरों, बाहरी और बाहरी सीमाओं को इंगित करता है।

आगे आपको कुछ वर्ग कोष्ठक दिखाई देंगे, वर्ग कोष्ठक के पहले सेट के भीतर, हमारे पास bgView । जब हमें वर्गाकार कोष्ठक मिला है, तो यह UI तत्व की बात कर रहा है, अब आप सोच सकते हैं कि हम नाम और वास्तविक UI तत्व के बीच एक कड़ी कैसे स्थापित करते हैं?

मैं उसे पोस्ट के अंत में कवर करूँगा।

यदि आप वर्ग ब्रैकेट [aGradeView(50)] की दूसरी जोड़ी पर एक नज़र [aGradeView(50)] , तो हमारे पास कुछ कोष्ठक हैं जो भीतर मौजूद हैं, जब यह मौजूद होता है, तो यह कुल्हाड़ियों के आधार पर चौड़ाई / ऊंचाई को परिभाषित करता है, जो इस मामले में 50 है चौड़ाई में पिक्सेल।

पहले वर्ग कोष्ठक [bgView] चौड़ाई स्पष्ट रूप से परिभाषित नहीं थी, जिसका अर्थ है कि यह यथासंभव दूर होगा।

ठीक है, यह मूल बात के लिए है, एक और उदाहरण में उन्नत सामान पर।

उदाहरण के लिए:

    // 1. create views
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];

    // 2. forbid Autoresizing
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    redView.translatesAutoresizingMaskIntoConstraints = NO;

    // 3. make contraints
    // horizontal
    NSArray *blueH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:@{@"blueView" : blueView}];
    [self.view addConstraints:blueH];

    // vertical
    NSArray *blueVandRedV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllTrailing metrics:nil views:@{@"blueView" : blueView, @"redView" : redView}];
    [self.view addConstraints:blueVandRedV];

    NSLayoutConstraint *redW = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
    [self.view addConstraint:redW];

गैर-ऑटो लेआउट के साथ ऑटो लेआउट का मिश्रित उपयोग

कभी-कभी आप UIKit द्वारा किए गए ऑटो लेआउट गणना के लिए कुछ अतिरिक्त कार्य करना चाहते हैं।

उदाहरण: जब आपके पास एक UIView है जिसमें एक maskLayer , तो जैसे ही ऑटो लेआउट बदलता है UIView के frame आपको maskLayer को अपडेट करना पड़ सकता है।

// CustomView.m
- (void)layoutSubviews {
    [super layoutSubviews];
    // now you can assume Auto Layout did its job
    // you can use view's frame in your calculations
    CALayer maskLayer = self.maskLayer;
    maskLayer.bounds = self.bounds;
    ...
}

या यदि आप ViewController में ऑटो लेआउट के लिए कुछ अतिरिक्त कार्रवाई करना चाहते ViewController

- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];
    // now you can assume all your subviews are positioned/resized correctly
    self.customView.frame = self.containerView.frame;
}

आनुपातिक लेआउट

के रूप में बनाया बाधा

NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.LeadingMargin, multiplier: 1.0, constant: 20.0)

या, गणित की दृष्टि से:

view.attribute * multiplier + constant          (1)

आप विभिन्न आकार के कारक के लिए आनुपातिक लेआउट बनाने के लिए गुणक का उपयोग कर सकते हैं।

उदाहरण:

फ़िरोज़ा व्यू (V1) 1: 1.1 के अनुपात के साथ चौड़ाई आनुपातिक पर्यवेक्षण के साथ एक वर्ग है

गैरी स्क्वायर (V2) V1 का एक उपक्षेत्र है। स्थिरांक द्वारा निर्धारित स्थान = 60, गुणक द्वारा निर्धारित स्थान = 1.125 और स्थिर = 0

अनुगामी अंतरिक्ष सेट आनुपातिक रूप से, नीचे अंतरिक्ष एक स्थिर के रूप में सेट।

नोट: अगर view.attribute 0 के बराबर है (उदाहरण के लिए अग्रणी स्थान), constraint सूत्र (1), बराबर होगा 0. आपको view.attribute के क्रम में मार्जिन के सापेक्ष बाधा के दूसरे आइटम को बदलने या सेट करने की आवश्यकता है! = 0।

NSLayoutConstraint: कोड में विरोध!

जब हम किसी फ्रेमवर्क पर काम कर रहे होते हैं, अगर बाधाएं बहुत जटिल नहीं होती हैं, तो हम बेहतर तरीके से इंटरफ़ेस मेसेंजर या NSLayoutConstraint का उपयोग कोड में करेंगे, ताकि आयात चिनाई या SnapKit के बजाय इसे छोटा किया जा सके।

उदाहरण के लिए:

उद्देश्य सी

    // 1. create views
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];

    // 2. forbid Autoresizing
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    redView.translatesAutoresizingMaskIntoConstraints = NO;

    // 3. make contraints
    // 3.1 blueView
    NSLayoutConstraint *blueLeft = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20];
    [self.view addConstraint:blueLeft];

    NSLayoutConstraint *blueTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:20];
    [self.view addConstraint:blueTop];

    NSLayoutConstraint *blueRight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20];
    [self.view addConstraint:blueRight];

    NSLayoutConstraint *blueHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:50];
    [self.view addConstraint:blueHeight];

    // 3.2 redView
    NSLayoutConstraint *redTop = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1 constant:20];
    [self.view addConstraint:redTop];

    NSLayoutConstraint *redRight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20];
    [self.view addConstraint:redRight];

    NSLayoutConstraint *redHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1 constant:0];
    [self.view addConstraint:redHeight];

    NSLayoutConstraint *redWidth = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
    [self.view addConstraint:redWidth];

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

iOS
ऑटो लेआउट

खोज…

परिचय

वाक्य - विन्यास

क्रमिक रूप से बाधाओं को निर्धारित करना

पिन करना

चौड़ाई और ऊंचाई

कंटेनर में केंद्र

ऑटो लेआउट का उपयोग कैसे करें

केंद्र बाधाएं

अंतरिक्ष दृश्य समान रूप से

यूलैबेल आंतरिक आकार

ऑटो लेआउट के साथ कैसे चेतन करें

उइलाबेल प्राथमिकता संघर्ष को हल करें

UILabel में पाठ के अनुसार UILabel और Parentview का आकार

विजुअल फॉर्मेट लैंग्वेज बेसिक्स: कोड में अड़चनें!

गैर-ऑटो लेआउट के साथ ऑटो लेआउट का मिश्रित उपयोग

आनुपातिक लेआउट

NSLayoutConstraint: कोड में विरोध!