Xcode 6 में AutoLayout बाधाओं का उपयोग करते हुए पहलू-फिट व्यवहार का अनुकरण

Question

मैं AutoLayout का उपयोग उस दृश्य को आकार और लेआउट करने के लिए करना चाहता हूं जो UIImageView के पहलू-फिट सामग्री मोड की याद दिलाता है।

मैं इंटरफ़ेस बिल्डर में एक कंटेनर दृश्य के अंदर एक सबव्यू है। सबव्यू का कुछ अंतर्निहित पहलू अनुपात है, जिसका मैं सम्मान करना चाहता हूं। कंटेनर दृश्य का आकार रनटाइम तक अज्ञात है।

यदि कंटेनर दृश्य का पहलू अनुपात सबव्यू से व्यापक है, तो मैं चाहता हूं कि सबव्यू की ऊंचाई पैरेंट व्यू की ऊंचाई के बराबर हो।

यदि कंटेनर दृश्य का पहलू अनुपात सबव्यू से लंबा है, तो मैं चाहता हूं कि सबव्यू की चौड़ाई पैरेंट व्यू की चौड़ाई के बराबर हो।

या तो मामले में, मैं चाहता हूँ कि सबवॉइस को कंटेनर दृश्य के भीतर क्षैतिज और लंबवत केंद्रित किया जाए।

वहाँ Xcode 6 या पिछले संस्करण में AutoLayout बाधाओं का उपयोग कर इसे प्राप्त करने का एक तरीका है? आदर्श रूप से इंटरफ़ेस बिल्डर का उपयोग करना, लेकिन यदि नहीं तो संभव है कि इस तरह की बाधाओं को प्रोग्रामेटिक रूप से परिभाषित करना संभव हो।

Answer 1

आप स्केल-टू-फिट का वर्णन नहीं कर रहे हैं; आप पहलू-फिट का वर्णन कर रहे हैं। (मैंने इस संबंध में आपके प्रश्न को संपादित कर दिया है।) इसके पहलू अनुपात को बनाए रखने और अपने माता-पिता के अंदर पूरी तरह से फिट रहने के दौरान सबव्यूशन जितना संभव हो सके।

वैसे भी, आप इसे ऑटो लेआउट के साथ कर सकते हैं। आप इसे पूरी तरह आईबी में Xcode 5.1 के रूप में कर सकते हैं। आइए कुछ विचारों से शुरू करें:

हल्के हरे रंग के दृश्य का अनुपात 4: 1 है। गहरे हरे रंग के दृश्य का अनुपात 1: 4 है। मैं बाधाओं को स्थापित करने जा रहा हूं, ताकि नीले रंग का दृश्य स्क्रीन के शीर्ष आधे हिस्से में भर जाए, गुलाबी दृश्य स्क्रीन के निचले आधे हिस्से को भरता है, और प्रत्येक हरे रंग का दृश्य अपने पहलू अनुपात को बनाए रखते हुए और इसके फिटिंग के दौरान जितना संभव हो उतना फैलता है कंटेनर।

सबसे पहले, मैं नीले दृश्य के सभी चार पक्षों पर अवरोध पैदा करूँगा। मैं इसे प्रत्येक किनारे पर अपने निकटतम पड़ोसी को भेजूंगा, 0. की दूरी के साथ मैं मार्जिन बंद करना सुनिश्चित करता हूं:

ध्यान दें कि मैं अभी तक फ्रेम अपडेट नहीं करता हूं । मुझे बाधाओं को सेट करते समय विचारों के बीच कमरा छोड़ना आसान लगता है, और बस स्थिरांक को 0 (या जो भी) हाथ से सेट करें।

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

मुझे गुलाबी और नीले रंग के विचारों के बीच एक समान ऊंचाई की बाधा की भी आवश्यकता है। यह उन्हें प्रत्येक स्क्रीन को आधा भरेगा:

अगर मैं Xcode को सभी फ़्रेमों को अपडेट करने के लिए कहता हूं, तो मुझे यह मिलता है:

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

हल्के हरे रंग के दृश्य की फिटिंग के लिए पांच बाधाओं की आवश्यकता होती है:

• हल्के हरे रंग के दृश्य पर एक आवश्यक-प्राथमिकता वाला पहलू अनुपात बाधा। आप इस बाधा को Xcode 5.1 या बाद वाले xib या स्टोरीबोर्ड में बना सकते हैं।
• हल्के हरे रंग के दृश्य की चौड़ाई को सीमित करने वाला एक आवश्यक-प्राथमिकता वाला अवरोध इसके कंटेनर की चौड़ाई से कम या उसके बराबर होना चाहिए।
• हल्के हरे रंग के दृश्य की चौड़ाई निर्धारित करने वाला एक उच्च प्राथमिकता वाला अवरोध इसके कंटेनर की चौड़ाई के बराबर होना चाहिए।
• हल्के हरे रंग के दृश्य की ऊंचाई को सीमित करने वाला एक आवश्यक-प्राथमिकता वाला अवरोध इसके कंटेनर की ऊंचाई से कम या उसके बराबर होना चाहिए।
• एक उच्च-प्राथमिकता वाला अवरोधक अपने कंटेनर की ऊंचाई के बराबर हल्के हरे रंग के दृश्य की ऊंचाई निर्धारित करता है।

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

यही बात ऊंचाई की बाधा के साथ भी होती है। और चूंकि पहलू-अनुपात की कमी भी आवश्यक है, यह केवल एक धुरी के साथ सबव्यू के आकार को अधिकतम कर सकता है (जब तक कि कंटेनर में सबव्यू के समान पहलू अनुपात न हो)।

इसलिए पहले मैं पहलू अनुपात में अवरोध पैदा करता हूं:

फिर मैं कंटेनर के साथ बराबर चौड़ाई और ऊंचाई की कमी पैदा करता हूं:

मुझे इन बाधाओं को कम-से-या-बराबर बाधाओं के रूप में संपादित करने की आवश्यकता है:

अगला मुझे कंटेनर के साथ समान चौड़ाई और ऊंचाई की कमी का एक और सेट बनाने की आवश्यकता है:

और मुझे इन नई बाधाओं को आवश्यक प्राथमिकता से कम करने की आवश्यकता है:

अंत में, आपने अपने कंटेनर में उप-केंद्र के लिए कहा है, इसलिए मैं उन बाधाओं को स्थापित करूंगा:

अब, परीक्षण करने के लिए, मैं व्यू कंट्रोलर का चयन करूंगा और सभी फ्रेम को अपडेट करने के लिए Xcode पूछूंगा। यह वही है जो मुझे मिलता है:

ऊप्स! सबवे ने अपने कंटेनर को पूरी तरह से भरने के लिए विस्तार किया है। यदि मैं इसका चयन करता हूं, तो मैं देख सकता हूं कि वास्तव में इसने इसका पहलू अनुपात बनाए रखा है, लेकिन यह एक पहलू के बजाय एक पहलू भर रहा है- फिट ।

समस्या यह है कि कम-या-बराबर-बराबर बाधा पर, यह मायने रखता है कि बाधा के प्रत्येक छोर पर कौन सा दृश्य है, और Xcode ने मेरी अपेक्षा से विपरीत बाधा स्थापित की है। मैं दो बाधाओं में से प्रत्येक का चयन कर सकता हूं और इसके पहले और दूसरे आइटम को उलट सकता हूं। इसके बजाय, मैं सिर्फ सबव्यू का चयन करूंगा और बाधाओं को अधिक से अधिक या बराबर होने के लिए बदल दूंगा:

Xcode लेआउट को अपडेट करता है:

अब मैं नीचे की ओर गहरे हरे रंग के दृश्य के लिए सभी समान चीजें करता हूं। मुझे यह सुनिश्चित करने की आवश्यकता है कि इसका पहलू अनुपात 1: 4 है (एक्सकोड ने इसे अजीब तरीके से आकार दिया क्योंकि इसमें कोई बाधा नहीं थी)। मैं फिर से कदम नहीं दिखाऊंगा क्योंकि वे वही हैं। यहाँ परिणाम है:

अब मैं इसे आईफोन 4 एस सिम्युलेटर में चला सकता हूं, जिसमें आईबी की तुलना में एक अलग स्क्रीन का आकार है, और परीक्षण रोटेशन:

और मैं iPhone 6 सिम्युलेटर में परीक्षण कर सकता हूं:

मैंने अपनी सुविधा के लिए अपना अंतिम स्टोरीबोर्ड इस gist पर अपलोड कर दिया है ।

Comments

मैंने लिसेक का इस्तेमाल किया । यह मुफ्त (GPL) है और सीधे GIF में रिकॉर्ड करता है। जब तक एनिमेटेड जीआईएफ 2 एमबी से अधिक नहीं है, तब तक आप इसे किसी अन्य छवि की तरह इस साइट पर पोस्ट कर सकते हैं।

— रॉब मेऑफ

@LucaTorella केवल उच्च प्राथमिकता वाले बाधाओं के साथ, लेआउट अस्पष्ट है। सिर्फ इसलिए कि यह आज आपका वांछित परिणाम प्राप्त करता है इसका मतलब यह नहीं है कि यह आईओएस के अगले संस्करण में होगा। मान लीजिए कि सबव्यू पहलू अनुपात 1: 1 चाहता है, तो सुपरवाइज का आकार 99 × 100 है, और आपके पास केवल आवश्यक पहलू-अनुपात और उच्च-प्राथमिकता समानता की कमी है। फिर ऑटो लेआउट 99 × 99 (कुल त्रुटि 1 के साथ) या आकार 100 × 100 (कुल त्रुटि 1 के साथ) का आकार निर्धारित कर सकता है। एक आकार पहलू-फिट है; दूसरा पहलू भरा है। आवश्यक बाधाओं को जोड़ने से एक अद्वितीय न्यूनतम-त्रुटि समाधान का उत्पादन होता है।

— लूट

पहलू अनुपात की उपलब्धता के बारे में सुधार के लिए @LucaTorella धन्यवाद।

— मई

सिर्फ एक पोस्ट के साथ 10,000 बेहतर ऐप ... अविश्वसनीय।

— डॉनविपॉन

वाह .. स्टैक ओवरफ्लो में यहाँ सबसे अच्छा जवाब मैंने कभी देखा है .. इस सर के लिए धन्यवाद ..

— ज्युन

Answer 2

रोब, आपका जवाब बहुत बढ़िया है! मुझे यह भी पता है कि यह प्रश्न विशेष रूप से ऑटो-लेआउट का उपयोग करके इसे प्राप्त करने के बारे में है। हालाँकि, एक संदर्भ के रूप में, मैं यह दिखाना चाहता हूं कि यह कोड में कैसे किया जा सकता है। आपने रोब दिखाया जैसा ऊपर और नीचे का दृश्य (नीला और गुलाबी) सेट किया। तब आप एक प्रथा बनाते हैं AspectFitView:

AspectFitView.h :

#import <UIKit/UIKit.h>

@interface AspectFitView : UIView

@property (nonatomic, strong) UIView *childView;

@end

AspectFitView.m :

#import "AspectFitView.h"

@implementation AspectFitView

- (void)setChildView:(UIView *)childView
{
    if (_childView) {
        [_childView removeFromSuperview];
    }

    _childView = childView;

    [self addSubview:childView];
    [self setNeedsLayout];
}

- (void)layoutSubviews
{
    [super layoutSubviews];

    if (_childView) {
        CGSize childSize = _childView.frame.size;
        CGSize parentSize = self.frame.size;
        CGFloat aspectRatioForHeight = childSize.width / childSize.height;
        CGFloat aspectRatioForWidth = childSize.height / childSize.width;

        if ((parentSize.height * aspectRatioForHeight) > parentSize.height) {
            // whole height, adjust width
            CGFloat width = parentSize.width * aspectRatioForWidth;
            _childView.frame = CGRectMake((parentSize.width - width) / 2.0, 0, width, parentSize.height);
        } else {
            // whole width, adjust height
            CGFloat height = parentSize.height * aspectRatioForHeight;
            _childView.frame = CGRectMake(0, (parentSize.height - height) / 2.0, parentSize.width, height);
        }
    }
}

@end

अगला, आप स्टोरीबोर्ड में नीले और गुलाबी विचारों के वर्ग को बदलते हैं AspectFitView। अंत में आप अपने ViewController करने के लिए दो दुकानों सेट topAspectFitViewऔर bottomAspectFitViewऔर उनके सेट childViewमें viewDidLoad:

- (void)viewDidLoad {
    [super viewDidLoad];

    UIView *top = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 500, 100)];
    top.backgroundColor = [UIColor lightGrayColor];

    UIView *bottom = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 500)];
    bottom.backgroundColor = [UIColor greenColor];

    _topAspectFitView.childView = top;
    _bottomAspectFitView.childView = bottom;
}

इसलिए यह कोड में करना मुश्किल नहीं है और यह अभी भी बहुत अनुकूलनीय है और चर-आकार के विचारों और विभिन्न पहलू अनुपातों के साथ काम करता है।

अद्यतन जुलाई 2015 : यहां एक डेमो ऐप खोजें: https://github.com/jfahrenkrug/SPWKAspectFitView

Comments

@DanielGalasko धन्यवाद, आप सही हैं। मैं अपने उत्तर में इसका उल्लेख करता हूं। मुझे लगा कि दोनों समाधानों में क्या कदम शामिल हैं, इसकी तुलना करना एक उपयोगी संदर्भ होगा।

— जोहान्स फारेनक्रग

प्रोग्रामेटिक रेफरेंस के लिए भी बहुत उपयोगी है।

— ctpenrose

@JohannesFahrenkrug यदि आपके पास ट्यूटोरियल प्रोजेक्ट है, तो क्या आप साझा कर सकते हैं? धन्यवाद :)

— एरहान डेमिरसी

@ErhanDemirci ज़रूर, यहां आप जाएं: github.com/jfahrenkrug/SPWKAspectFitView

— जोहान्स फारेनक्रग

Answer 3

मुझे स्वीकृत उत्तर से समाधान की आवश्यकता थी, लेकिन कोड से निष्पादित किया गया। सबसे सुंदर तरीका मैंने पाया है कि चिनाई फ्रेमवर्क का उपयोग कर रहा है ।

#import "Masonry.h"

...

[view mas_makeConstraints:^(MASConstraintMaker *make) {
    make.width.equalTo(view.mas_height).multipliedBy(aspectRatio);
    make.size.lessThanOrEqualTo(superview);
    make.size.equalTo(superview).with.priorityHigh();
    make.center.equalTo(superview);
}];

Answer 4

यह macOS के लिए है।

मुझे OS X एप्लिकेशन पर पहलू फिट करने के लिए रोब के तरीके का उपयोग करने में समस्या है। लेकिन मैंने इसे दूसरे तरीके से बनाया - चौड़ाई और ऊंचाई का उपयोग करने के बजाय, मैंने अग्रणी, अनुगामी, ऊपर और नीचे के स्थान का उपयोग किया।

मूल रूप से, दो प्रमुख स्थान जोड़ें जहां एक => 0 @ 1000 आवश्यक प्राथमिकता है और दूसरा एक = 0 @ 250 कम प्राथमिकता है। ट्रेलिंग, टॉप और बॉटम स्पेस में भी यही सेटिंग करें।

बेशक, आपको पहलू अनुपात और केंद्र X और केंद्र Y सेट करने की आवश्यकता है।

और फिर नौकरी की!

Comments

आप इस प्रोग्राम को करने के बारे में कैसे जा सकते हैं?

— 20

@FateNuller बस चरणों का पालन करें?

— brianLikeApple

Answer 5

मैंने खुद को पहलू से भरा व्यवहार पाया, ताकि एक UIImageView अपने स्वयं के पहलू अनुपात को बनाए रखे और पूरी तरह से कंटेनर दृश्य भरें। भ्रामक रूप से, मेरा UIImageView BOTH उच्च-प्राथमिकता समान-चौड़ाई और समान-ऊंचाई की बाधाओं (रोब के उत्तर में वर्णित) और पूर्ण संकल्प पर प्रतिपादन कर रहा था।

समाधान केवल UIImageView की सामग्री संपीड़न प्रतिरोध प्राथमिकता को समान-चौड़ाई और समान-ऊंचाई की बाधाओं की प्राथमिकता से कम करने के लिए निर्धारित किया गया था:

Answer 6

यह @ रॉब_मायॉफ़ का पोर्ट-कोडिक दृष्टिकोण के लिए उत्कृष्ट उत्तर है, NSLayoutAnchorवस्तुओं का उपयोग करते हुए और ज़मरीन को पोर्ट किया गया। मेरे लिए, NSLayoutAnchorऔर संबंधित कक्षाओं ने ऑटोलायट को प्रोग्राम के लिए बहुत आसान बना दिया है:

public class ContentView : UIView
{
        public ContentView (UIColor fillColor)
        {
            BackgroundColor = fillColor;
        }
}

public class MyController : UIViewController 
{
    public override void ViewDidLoad ()
    {
        base.ViewDidLoad ();

        //Starting point:
        var view = new ContentView (UIColor.White);

        blueView = new ContentView (UIColor.FromRGB (166, 200, 255));
        view.AddSubview (blueView);

        lightGreenView = new ContentView (UIColor.FromRGB (200, 255, 220));
        lightGreenView.Frame = new CGRect (20, 40, 200, 60);

        view.AddSubview (lightGreenView);

        pinkView = new ContentView (UIColor.FromRGB (255, 204, 240));
        view.AddSubview (pinkView);

        greenView = new ContentView (UIColor.Green);
        greenView.Frame = new CGRect (80, 20, 40, 200);
        pinkView.AddSubview (greenView);

        //Now start doing in code the things that @rob_mayoff did in IB

        //Make the blue view size up to its parent, but half the height
        blueView.TranslatesAutoresizingMaskIntoConstraints = false;
        var blueConstraints = new []
        {
            blueView.LeadingAnchor.ConstraintEqualTo(view.LayoutMarginsGuide.LeadingAnchor),
            blueView.TrailingAnchor.ConstraintEqualTo(view.LayoutMarginsGuide.TrailingAnchor),
            blueView.TopAnchor.ConstraintEqualTo(view.LayoutMarginsGuide.TopAnchor),
            blueView.HeightAnchor.ConstraintEqualTo(view.LayoutMarginsGuide.HeightAnchor, (nfloat) 0.5)
        };
        NSLayoutConstraint.ActivateConstraints (blueConstraints);

        //Make the pink view same size as blue view, and linked to bottom of blue view
        pinkView.TranslatesAutoresizingMaskIntoConstraints = false;
        var pinkConstraints = new []
        {
            pinkView.LeadingAnchor.ConstraintEqualTo(blueView.LeadingAnchor),
            pinkView.TrailingAnchor.ConstraintEqualTo(blueView.TrailingAnchor),
            pinkView.HeightAnchor.ConstraintEqualTo(blueView.HeightAnchor),
            pinkView.TopAnchor.ConstraintEqualTo(blueView.BottomAnchor)
        };
        NSLayoutConstraint.ActivateConstraints (pinkConstraints);


        //From here, address the aspect-fitting challenge:

        lightGreenView.TranslatesAutoresizingMaskIntoConstraints = false;
        //These are the must-fulfill constraints: 
        var lightGreenConstraints = new []
        {
            //Aspect ratio of 1 : 5
            NSLayoutConstraint.Create(lightGreenView, NSLayoutAttribute.Height, NSLayoutRelation.Equal, lightGreenView, NSLayoutAttribute.Width, (nfloat) 0.20, 0),
            //Cannot be larger than parent's width or height
            lightGreenView.WidthAnchor.ConstraintLessThanOrEqualTo(blueView.WidthAnchor),
            lightGreenView.HeightAnchor.ConstraintLessThanOrEqualTo(blueView.HeightAnchor),
            //Center in parent
            lightGreenView.CenterYAnchor.ConstraintEqualTo(blueView.CenterYAnchor),
            lightGreenView.CenterXAnchor.ConstraintEqualTo(blueView.CenterXAnchor)
        };
        //Must-fulfill
        foreach (var c in lightGreenConstraints) 
        {
            c.Priority = 1000;
        }
        NSLayoutConstraint.ActivateConstraints (lightGreenConstraints);

        //Low priority constraint to attempt to fill parent as much as possible (but lower priority than previous)
        var lightGreenLowPriorityConstraints = new []
         {
            lightGreenView.WidthAnchor.ConstraintEqualTo(blueView.WidthAnchor),
            lightGreenView.HeightAnchor.ConstraintEqualTo(blueView.HeightAnchor)
        };
        //Lower priority
        foreach (var c in lightGreenLowPriorityConstraints) 
        {
            c.Priority = 750;
        }

        NSLayoutConstraint.ActivateConstraints (lightGreenLowPriorityConstraints);

        //Aspect-fit on the green view now
        greenView.TranslatesAutoresizingMaskIntoConstraints = false;
        var greenConstraints = new []
        {
            //Aspect ratio of 5:1
            NSLayoutConstraint.Create(greenView, NSLayoutAttribute.Height, NSLayoutRelation.Equal, greenView, NSLayoutAttribute.Width, (nfloat) 5.0, 0),
            //Cannot be larger than parent's width or height
            greenView.WidthAnchor.ConstraintLessThanOrEqualTo(pinkView.WidthAnchor),
            greenView.HeightAnchor.ConstraintLessThanOrEqualTo(pinkView.HeightAnchor),
            //Center in parent
            greenView.CenterXAnchor.ConstraintEqualTo(pinkView.CenterXAnchor),
            greenView.CenterYAnchor.ConstraintEqualTo(pinkView.CenterYAnchor)
        };
        //Must fulfill
        foreach (var c in greenConstraints) 
        {
            c.Priority = 1000;
        }
        NSLayoutConstraint.ActivateConstraints (greenConstraints);

        //Low priority constraint to attempt to fill parent as much as possible (but lower priority than previous)
        var greenLowPriorityConstraints = new []
        {
            greenView.WidthAnchor.ConstraintEqualTo(pinkView.WidthAnchor),
            greenView.HeightAnchor.ConstraintEqualTo(pinkView.HeightAnchor)
        };
        //Lower-priority than above
        foreach (var c in greenLowPriorityConstraints) 
        {
            c.Priority = 750;
        }

        NSLayoutConstraint.ActivateConstraints (greenLowPriorityConstraints);

        this.View = view;

        view.LayoutIfNeeded ();
    }
}

Answer 7

शायद यह सबसे छोटा जवाब है, चिनाई के साथ , जो पहलू-भरण और खिंचाव का भी समर्थन करता है।

typedef NS_ENUM(NSInteger, ContentMode) {
    ContentMode_aspectFit,
    ContentMode_aspectFill,
    ContentMode_stretch
}

// ....

[containerView addSubview:subview];

[subview mas_makeConstraints:^(MASConstraintMaker *make) {
    if (contentMode == ContentMode_stretch) {
        make.edges.equalTo(containerView);
    }
    else {
        make.center.equalTo(containerView);
        make.edges.equalTo(containerView).priorityHigh();
        make.width.equalTo(content.mas_height).multipliedBy(4.0 / 3); // the aspect ratio
        if (contentMode == ContentMode_aspectFit) {
            make.width.height.lessThanOrEqualTo(containerView);
        }
        else { // contentMode == ContentMode_aspectFill
            make.width.height.greaterThanOrEqualTo(containerView);
        }
    }
}];