छिपे हुए UIViews के साथ AutoLayout?

Question

मुझे लगता है कि यह व्यापार तर्क के आधार पर UIViews, सबसे अधिक बार दिखाने / छिपाने के लिए एक काफी सामान्य प्रतिमान है UILabels। मेरा प्रश्न यह है कि छिपे हुए विचारों का जवाब देने के लिए ऑटोलेयूट का उपयोग करने का सबसे अच्छा तरीका क्या है जैसे कि उनका फ्रेम 0x0 था। यहां 1-3 सुविधाओं की एक गतिशील सूची का एक उदाहरण है।

अभी मेरे पास बटन से अंतिम लेबल तक 10px शीर्ष स्थान है, जो स्पष्ट रूप से लेबल के छिपे होने पर स्लाइड नहीं करेगा। अभी के रूप में मैंने इस बाधा के लिए एक आउटलेट बनाया और मैं कितने लेबल दिखा रहा हूं, इसके आधार पर स्थिर को संशोधित करता है। यह स्पष्ट रूप से थोड़ा हैक्य है क्योंकि मैं छिपे हुए फ्रेम पर बटन को पुश करने के लिए नकारात्मक निरंतर मूल्यों का उपयोग कर रहा हूं। यह भी बुरा है क्योंकि यह वास्तविक लेआउट तत्वों के लिए विवश नहीं किया जा रहा है, बस अन्य तत्वों के ज्ञात ऊंचाइयों / गद्दी के आधार पर स्थिर स्थिर गणना और जाहिर है कि AutoLayout के लिए बनाया गया था के खिलाफ लड़ाई।

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

ईमानदारी से, हालांकि, केवल छिपे हुए दृश्य के संदर्भ से स्थिरीकरण को सरल गणना के साथ कोड की एक पंक्ति की आवश्यकता होती है। नए अवरोधों को फिर से बनाना constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:इतना भारी लगता है।

फ़रवरी संपादित करें 2018 : के साथ बेन देखें जवाब UIStackViewरों

Comments

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

— नासिफ़

Answer 1

UIStackViewशायद iOS 9+ के लिए जाने का रास्ता है। न केवल यह छिपे हुए दृश्य को संभालता है, अगर सही तरीके से सेट किया गया है, तो यह अतिरिक्त रिक्ति और मार्जिन को भी हटा देगा।

Comments

UITableViewCell में UIStackView का उपयोग करते समय देखें। मेरे लिए, एक बार जब दृश्य बहुत जटिल हो गया, तो स्क्रॉलिंग तड़का हुआ होने लगा, जहाँ यह हर बार सेल में / बाहर स्क्रॉल करने पर हकलाने लगता था। कवर के तहत StackView बाधाओं को जोड़ / हटा रहा है और यह आवश्यक रूप से चिकनी स्क्रॉलिंग के लिए पर्याप्त रूप से कुशल नहीं होगा।

— केंटो

एक छोटा सा उदाहरण देना अच्छा होगा कि कैसे स्टैक दृश्य इसे संभालता है।

— खोया

@Kento अभी भी iOS 10 पर एक मुद्दा है?

— Crashalot

पांच साल बाद ... क्या मुझे इसे स्वीकार करना चाहिए और स्वीकार किए गए उत्तर के रूप में सेट करना चाहिए? यह अब तीन रिलीज साइकल के लिए उपलब्ध है।

— रयान रोमनचुक

@RyanRomanchuk तुम्हें चाहिए, यह निश्चित रूप से अब सबसे अच्छा जवाब है। धन्यवाद बेन!

— डंकन लुक

Answer 2

विचारों को दिखाने / छिपाने के लिए मेरी व्यक्तिगत प्राथमिकता उचित चौड़ाई या ऊंचाई की बाधा के साथ एक IBOutlet बनाना है।

फिर मैं छिपाने के लिए constantमूल्य को अपडेट करता हूं 0, या जो भी मूल्य दिखाना चाहिए।

इस तकनीक का बड़ा फायदा यह है कि सापेक्ष बाधाएं बनी रहेंगी। उदाहरण के लिए मान लें कि आपके पास A है और B को x के क्षैतिज अंतराल के साथ देखें । जब दृश्य A की चौड़ाई constantनिर्धारित की जाती है, 0.fतो उस स्थान को भरने के लिए B बाईं ओर चला जाएगा।

बाधाओं को जोड़ने या हटाने की कोई आवश्यकता नहीं है, जो एक हेवीवेट ऑपरेशन है। बस बाधा को अद्यतन कर constantदेगा चाल।

Comments

बिल्कुल सही। जब तक - इस उदाहरण में - आप B को क्षैतिज अंतराल का उपयोग करते हुए दृश्य A के दाईं ओर देखते हैं। मैं हर समय इस तकनीक का उपयोग करता हूं और यह बहुत अच्छी तरह से काम करता है

— मैक्स मैकेलॉड

@MaxMacLeod बस यह सुनिश्चित करने के लिए: यदि दृश्य बी से दृश्य A स्थिति को प्रारंभ करने के लिए दो विचारों के बीच का अंतर x है, तो हमें भी अंतराल की स्थिरांक को 0 में बदलना चाहिए, ठीक है?

— kernix

@kernix हाँ, अगर दो विचारों के बीच एक क्षैतिज अंतराल की आवश्यकता होगी। निरंतर 0 का मतलब कोई अंतराल नहीं है। इसलिए दृश्य A को छिपाकर इसे 0 की चौड़ाई पर सेट करने से दृश्य B को कंटेनर से फ्लश होने के लिए छोड़ दिया जाएगा। ऊपर वोट के लिए धन्यवाद Btw!

— मैक्स मैकलॉड

@MaxMacLeod आपके उत्तर के लिए धन्यवाद। मैंने एक UIView के साथ ऐसा करने की कोशिश की, जिसमें अन्य दृश्य शामिल हैं, लेकिन उस दृश्य के साक्षात्कार छिपे नहीं हैं, जब मैंने इसकी ऊंचाई की सीमा 0. निर्धारित की है। क्या इस समाधान को साक्षात्कार वाले विचारों के साथ काम करना चाहिए? धन्यवाद!

— शॉनलीम

एक ऐसे समाधान की भी सराहना करेंगे जो यूविवि के लिए काम करता है जिसमें अन्य विचार हैं ...

— मार्क गिबाड

Answer 3

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

मेरे पास एक बेहतर उपाय है।

जब हम तत्व को छिपाते हैं, तो उच्च प्राथमिकता के लिए 0 ऊँचाई नियम निर्धारित करने के लिए विचार है, ताकि यह कोई ऑटोलयूट स्थान न ले।

यहां बताया गया है कि आप ऐसा कैसे करते हैं:

1. एक कम प्राथमिकता के साथ इंटरफेस बिल्डर में 0 की चौड़ाई (या ऊंचाई) स्थापित करें।

इंटरफ़ेस बिल्डर संघर्ष के बारे में चिल्लाएगा नहीं क्योंकि प्राथमिकता कम है। प्राथमिकता को अस्थायी रूप से 999 पर सेट करके ऊंचाई के व्यवहार का परीक्षण करें (1000 प्रोग्रामेटिक रूप से म्यूट करने के लिए मना किया गया है, इसलिए हम इसका उपयोग नहीं करेंगे)। इंटरफ़ेस बिल्डर शायद अब परस्पर विरोधी बाधाओं के बारे में चिल्लाएगा। आप संबंधित ऑब्जेक्ट्स पर प्राथमिकताओं को 900 या इससे अधिक पर सेट करके इन्हें ठीक कर सकते हैं।

2. एक आउटलेट जोड़ें ताकि आप कोड में चौड़ाई की बाधा की प्राथमिकता को संशोधित कर सकें:

3. अपने तत्व को छिपाने पर प्राथमिकता समायोजित करें:

cell.alertTimingView.hidden    = place.closingSoon != true
cell.alertTimingWidth.priority = place.closingSoon == true ? 250 : 999

Comments

@SimplGy क्या आप मुझे बता सकते हैं कि यह स्थान क्या है।

— निहारिका

यह सामान्य समाधान का हिस्सा नहीं है, @ निहारिका, यह सिर्फ वही है जो मेरे मामले में व्यापार नियम था (यदि रेस्तरां जल्द ही बंद नहीं हो रहा है तो दृश्य दिखाएं)।

— सिम्पलजी

Answer 4

इस मामले में, मैं लेखक लेबल की ऊंचाई को एक उपयुक्त IBOutlet में मैप करता हूं:

@property (retain, nonatomic) IBOutlet NSLayoutConstraint* authorLabelHeight;

और जब मैंने बाधा की ऊंचाई 0.0f निर्धारित की, तो हम "पैडिंग" को संरक्षित करते हैं, क्योंकि प्ले बटन की ऊंचाई इसके लिए अनुमति देती है।

cell.authorLabelHeight.constant = 0; //Hide 
cell.authorLabelHeight.constant = 44; //Show

Answer 5

यहाँ समाधान का एक बहुत कुछ है, लेकिन मेरा सामान्य दृष्टिकोण फिर से अलग है :)

जॉर्ज अरिमनी और टीमिन के जवाब के समान बाधाओं के दो सेट करें:

सभी तीन चिह्नित बाधाओं का कॉन्स्टेंट के लिए समान मूल्य है। ए 1 और ए 2 को चिह्नित बाधाओं में उनका प्राथमिकता 500 पर सेट है, जबकि बाधा बी ने चिह्नित किया है कि यह प्राथमिकता 250 पर सेट है (याUILayoutProperty.defaultLow कोड में) है।

एक IBOutlet के लिए बाधा बी को हुक करें। फिर, जब आप तत्व छिपाते हैं, तो आपको उच्च (750) के लिए बाधा प्राथमिकता निर्धारित करने की आवश्यकता होती है:

constraintB.priority = .defaultHigh

लेकिन जब तत्व दिखाई देता है, तो प्राथमिकता को कम (250) पर सेट करें:

constraintB.priority = .defaultLow

इस दृष्टिकोण के लिए (मोटे तौर पर मामूली) लाभ केवल isActiveबाधा बी के लिए बदल रहा है, अगर आपके पास अन्य साधनों द्वारा क्षणिक तत्व को देखने से हटा दिया जाता है, तो भी आपके पास काम करने में बाधा है।

Comments

यह स्टोरीबोर्ड और कोड में डुप्लिकेट मान नहीं होने के फायदे हैं जैसे कि तत्व ऊंचाई / चौड़ाई। बहुत खूबसूरत।

— रॉबिन डौबर्टी

धन्यवाद!! इसने मेरी मदद की

— पार्थ बरोट

ग्रेट एप्रोच, धन्यवाद

— तुलसी

Answer 6

देखें और ओवरराइड करें func intrinsicContentSize() -> CGSize। CGSizeZeroयदि दृश्य छिपा हो तो ही वापस लौटें ।

Comments

यह भी खूब रही। हालांकि कुछ UI तत्वों को ट्रिगर की आवश्यकता होती है invalidateIntrinsicContentSize। आप एक ओवरराइड में ऐसा कर सकते हैं setHidden।

— DrMickeyLauer

Answer 7

मुझे अभी पता चला है कि अंतरिक्ष नहीं लेने के लिए एक यूबेल प्राप्त करने के लिए, आपको इसे छिपाना होगा और इसके पाठ को एक खाली स्ट्रिंग पर सेट करना होगा। (आईओएस 9)

इस तथ्य / बग को जानने से कुछ लोगों को अपने लेआउट को सरल बनाने में मदद मिल सकती है, संभवतः मूल प्रश्न की भी, इसलिए मुझे लगा कि मैं इसे पोस्ट करूंगा।

Comments

मुझे नहीं लगता कि आपको इसे छिपाने की आवश्यकता है। इसके पाठ को एक रिक्त स्ट्रिंग पर सेट करना पर्याप्त होना चाहिए।

— रॉब वी.एस.

Answer 8

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

जब से बाधाओं को जोड़ने IBOutletsऔर अपने स्थिरांक स्थापित करने के लिए 0yucky महसूस किया (और NSLayoutConstraintचेतावनियों के कारण जब आपके पास साक्षात्कार थे), मैंने एक ऐसा एक्सटेंशन बनाने का फैसला किया , जो ऑटो लेआउट की कमी को छिपाने / दिखाने के लिए एक सरल, स्पष्ट दृष्टिकोण देता है।UIView

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

संपादित करें यह उत्तर iOS 8.4 और उसके नीचे लक्षित है। IOS 9 में, बस UIStackViewदृष्टिकोण का उपयोग करें ।

Comments

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

— बेंजोना

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

— अल्बर्ट बोरी

Answer 9

सबसे अच्छा अभ्यास है, एक बार जब सब कुछ सही लेआउट की कमी है, एक ऊंचाई या बाधा के साथ जोड़ें, आप कैसे आसपास के विचारों को एक IBOutletसंपत्ति में स्थानांतरित करने और कनेक्ट करने के लिए चाहते हैं।

सुनिश्चित करें कि आपके गुण हैं strong

कोड यो में सिर्फ 0 को स्थिरांक रखना है और इसे सक्रिय करना है, सामग्री को छिपाना है, या सामग्री को दिखाने के लिए इसे निष्क्रिय करना है। यह निरंतर मूल्य के साथ खिलवाड़ करने से बेहतर है कि इसे बचाया जाए। layoutIfNeededबाद में कॉल करना न भूलें ।

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

@property (strong, nonatomic) IBOutlet UIView *myContainer;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *myContainerHeight; //should be strong!!

---

-(void) showContainer
{
    self.myContainerHeight.active = NO;
    self.myContainer.hidden = NO;
    [self.view layoutIfNeeded];
}
-(void) hideContainer
{
    self.myContainerHeight.active = YES;
    self.myContainerHeight.constant = 0.0f;
    self.myContainer.hidden = YES;
    [self.view layoutIfNeeded];
}

एक बार जब आपका सेटअप हो जाता है, तो आप इसे 0 और फिर मूल मूल्य पर अपने बाधा को स्थापित करके IntefaceBuilder में परीक्षण कर सकते हैं। अन्य बाधाओं की प्राथमिकताओं की जांच करना न भूलें, ताकि जब छिपा हो तो कोई संघर्ष न हो। इसका परीक्षण करने का दूसरा तरीका यह है कि इसे 0 पर रखा जाए और प्राथमिकता को 0 पर सेट किया जाए, लेकिन, आपको इसे फिर से सर्वोच्च प्राथमिकता देने के लिए नहीं भूलना चाहिए।

Comments

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

— जॉर्ज अरिमनी

Answer 10

मैं आसानी से बाधाओं को अद्यतन करने के लिए श्रेणी का निर्माण करता हूं:

[myView1 hideByHeight:YES];

यहां उत्तर दें: ऑटोलैयूट को छिपाएं UIView: इस एक को अपडेट करने के लिए मौजूदा NSLayoutConstraint कैसे प्राप्त करें

Comments

दुर्भाग्य से आप वहाँ एक डबल रिक्ति प्राप्त करते हैं, जहाँ पीला तीर इंगित करता है।

— ज़ोल्टन

जैसा कि ऊपर अन्य समाधानों के साथ है, मुझे लगता है। आदर्श बिलकुल नहीं।

— बेंजामिन

Answer 11

मेरा पसंदीदा तरीका जोर्ज अरिमनी द्वारा सुझाए गए के समान है।

मैं कई अड़चनें बनाना पसंद करता हूं। दूसरा लेबल दिखाई देने पर सबसे पहले अपनी बाधाओं को बनाएं। बटन और 2 लेबल के बीच बाधा के लिए एक आउटलेट बनाएं (यदि आप objc का उपयोग कर रहे हैं तो सुनिश्चित करें कि यह मजबूत है)। यह अवरोध बटन और दूसरी लेबल के बीच की ऊँचाई निर्धारित करता है जब यह दिखाई देता है।

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

अंत में जब आप दूसरा लेबल छिपाते .isActiveहैं, तो इन बाधाओं की संपत्ति को टॉगल करें और कॉल करेंsetNeedsDisplay()

और यह वह है, कोई मैजिक नंबर नहीं, कोई गणित नहीं, यदि आपके पास चालू और बंद करने के लिए कई बाधाएं हैं, तो आप उन्हें राज्य द्वारा व्यवस्थित रखने के लिए आउटलेट संग्रह का भी उपयोग कर सकते हैं। (AKA एक आउटलेट में सभी छिपी हुई बाधाओं को और दूसरे में गैर-छिपे हुए लोगों को रखें और प्रत्येक संग्रह पर उनके .isActive स्थिति को देखकर इसे पुन: व्यवस्थित करें)।

मुझे पता है कि रयान रोमनचुक ने कहा कि वह कई बाधाओं का उपयोग नहीं करना चाहता था, लेकिन मुझे ऐसा लगता है कि यह माइक्रोएनेज-वाई नहीं है, और यह सरल है कि गतिशील रूप से विचारों और बाधाओं को प्रोग्रामेटिक रूप से बनाया जा रहा है (जो कि मुझे लगता है कि वह बचना चाहते थे अगर मैं चाहता हूं कि 'सवाल सही पढ़ रहा हूँ)।

मैंने एक सरल उदाहरण बनाया है, मुझे आशा है कि यह उपयोगी है ...

import UIKit

class ViewController: UIViewController {

    @IBOutlet var ToBeHiddenLabel: UILabel!


    @IBOutlet var hiddenConstraint: NSLayoutConstraint!
    @IBOutlet var notHiddenConstraint: NSLayoutConstraint!


    @IBAction func HideMiddleButton(_ sender: Any) {

        ToBeHiddenLabel.isHidden = !ToBeHiddenLabel.isHidden
        notHiddenConstraint.isActive = !notHiddenConstraint.isActive
        hiddenConstraint.isActive = !hiddenConstraint.isActive

        self.view.setNeedsDisplay()
    }
}

Answer 12

मैं अपना समाधान भी प्रदान करूंगा, विविधता प्रदान करने के लिए।) मुझे लगता है कि प्रत्येक आइटम की चौड़ाई / ऊँचाई के लिए एक आउटलेट बनाने से रिक्ति के लिए सिर्फ हास्यास्पद है और कोड, संभावित त्रुटियों और जटिलताओं की संख्या को उड़ा देता है।

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

// remove all views
[self.twitterImageView removeFromSuperview];
[self.localQuestionImageView removeFromSuperview];

// self.recipients always has to be present
NSMutableArray *items;
items = [@[self.recipients] mutableCopy];

// optionally add the twitter image
if (self.question.sharedOnTwitter.boolValue) {
    [items addObject:self.twitterImageView];
}

// optionally add the location image
if (self.question.isLocal) {
    [items addObject:self.localQuestionImageView];
}

UIView *previousItem;
UIView *currentItem;

previousItem = items[0];
[self.contentView addSubview:previousItem];

// now loop through, add the items and the constraints
for (int i = 1; i < items.count; i++) {
    previousItem = items[i - 1];
    currentItem = items[i];

    [self.contentView addSubview:currentItem];

    [currentItem mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(previousItem.mas_centerY);
        make.right.equalTo(previousItem.mas_left).offset(-5);
    }];
}


// here I just connect the left-most UILabel to the last UIView in the list, whichever that was
previousItem = items.lastObject;

[self.userName mas_remakeConstraints:^(MASConstraintMaker *make) {
    make.right.equalTo(previousItem.mas_left);
    make.leading.equalTo(self.text.mas_leading);
    make.centerY.equalTo(self.attachmentIndicator.mas_centerY);;
}];

मुझे साफ, सुसंगत लेआउट और रिक्ति मिलती है। मेरा कोड चिनाई का उपयोग करता है, मैं दृढ़ता से इसकी सिफारिश करता हूं: https://github.com/SnapKit/Masonry

Answer 13

BoxView का प्रयास करें , यह गतिशील लेआउट को संक्षिप्त और पठनीय बनाता है।
आपके मामले में यह है:

    boxView.optItems = [
        firstLabel.boxed.useIf(isFirstLabelShown),
        secondLabel.boxed.useIf(isSecondLabelShown),
        button.boxed
    ]