2015-10-27 8 views
6

मेरे पास UIStackView है जो UICollectionViewCell के अंदर सोशल नेटवर्क पर एक पोस्ट का प्रतिनिधित्व करने के लिए है (Instagram की कोशिकाओं के लिए समान शैली)। UIStackView में सामग्री छवि के लिए एक लेखक शीर्षलेख (कस्टम UIView), UIImageView, पोस्ट बॉडी के लिए UILabel और क्रियाओं के लिए UIToolbar शामिल है। अंतिम दृश्य this जैसा दिखता है।UIStackView miscalculating UIImageView ऊंचाई

UICollectionViewCell की ऊंचाई एक आकार सेल की स्थापना, इसलिए की तरह सेट करें तो उसे:

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { 
     NTVFeedBlogCollectionViewCell *cell = [[NTVFeedBlogCollectionViewCell alloc] initWithFrame:CGRectMake(10.0f, 0.0f, collectionView.frame.size.width - 20.0f, 900000.0)]; 

     // ... 
     // Configure the cell 
     // ... 

     [cell setNeedsLayout]; 
     [cell layoutIfNeeded]; 
     CGSize size = [cell systemLayoutSizeFittingSize:UILayoutFittingCompressedSize]; 

     return CGSizeMake(CGRectGetWidth(collectionView.frame) - 20.0f, size.height); 

} 

समस्या यह है कि UIImageView UICollectionViewCell के आकार, बढ़ती प्रतीत होता है में वृद्धि के बिना छवि दृश्य का आकार। This is the result जब मैं छवि दृश्य में एक बड़ी छवि जोड़ता हूं। वांछित परिणाम छवि के लिए 1: 1 पहलू अनुपात बने रहने के लिए है, जो UIStackView की चौड़ाई तक सीमित है।

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

self.stackView = [[UIStackView alloc] initWithFrame:CGRectZero]; 
self.stackView.translatesAutoresizingMaskIntoConstraints = NO; 
self.stackView.axis = UILayoutConstraintAxisVertical; 
self.stackView.distribution = UIStackViewDistributionFill; 
self.stackView.alignment = UIStackViewAlignmentFill; 
self.stackView.spacing = 10.0f; 
self.stackView.layoutMargins = UIEdgeInsetsMake(10.0f, 10.0f, 0.0f, 10.0f); 
self.stackView.layoutMarginsRelativeArrangement = YES; 

[self addSubview:self.stackView]; 

[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[stackView]-0-|" 
                  options:0 
                  metrics:nil 
                   views:@{@"stackView": self.stackView}]]; 

[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[stackView]-0-|" 
                  options:0 
                  metrics:nil 
                   views:@{@"stackView": self.stackView}]]; 

self.imageView = [[UIImageView alloc] initWithFrame:CGRectZero]; 

[self.imageView setImage:[UIImage imageNamed:@"sample_image.png"]]; 

self.imageView.translatesAutoresizingMaskIntoConstraints = NO; 
self.imageView.contentMode = UIViewContentModeScaleAspectFill; 
self.imageView.clipsToBounds = YES; 
self.imageView.layer.masksToBounds = YES; 
self.imageView.backgroundColor = [UIColor greenColor]; 

[self.imageView setContentHuggingPriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisVertical]; 
[self.imageView setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisVertical]; 

[self.stackView addArrangedSubview:self.imageView]; 

[self.stackView addConstraint:[NSLayoutConstraint constraintWithItem:self.imageView 
                  attribute:NSLayoutAttributeHeight 
                  relatedBy:NSLayoutRelationEqual 
                   toItem:self.stackView 
                  attribute:NSLayoutAttributeWidth 
                  multiplier:1.0f 
                  constant:0.0f]]; 

self.bodyLabel = [[UILabel alloc] initWithFrame:CGRectZero]; 
[self.bodyLabel setContentHuggingPriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisVertical]; 
[self.bodyLabel setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisVertical]; 
self.bodyLabel.font = [UIFont ntv_lightFontWithSize:17.0f]; 
self.bodyLabel.textColor = [UIColor whiteColor]; 
self.bodyLabel.numberOfLines = 0; 

self.bodyLabel.text = @"While the stack view allows you to layout its contents without using Auto Layout directly, you still need to use Auto Layout to position the stack view, itself."; 
[self.stackView addArrangedSubview:self.bodyLabel]; 

self.accessoryView = [[NTVAccessoryView alloc] initWithFrame:CGRectZero]; 
self.accessoryView.viewModel = [NTVAccessoryManagerViewModel_Stubbed new]; 

[self.stackView addArrangedSubview:self.accessoryView]; 

कोई भी विचार:

यहाँ ढेर देखने के लिए, छवि को देखने और लेबल के लिए सेटअप कोड है?

उत्तर

7

हमने इसे समझ लिया! जैसा कि दस्तावेज़ों में बताया गया है, UIStackView इसकी ऊंचाई की गणना करने के लिए arrangedSubviews के intrinsicContentSize का उपयोग कर रहा है।

UIImageView छवि के पूरे आकार (जैसा कि आप उम्मीद करेंगे) के रूप में intrinsicContentSize की रिपोर्ट कर रहा है। UIStackView छवि दृश्य के intrinsicContentSize का उपयोग करके मेरी ऊंचाई बाधा और बस को अनदेखा कर रहा था।

इसे ठीक करने के लिए, मैंने UIImageView सबक्लास बनाया है जो कॉलर को intrinsicContentSize सेट करने की अनुमति देता है। यह कोड here पाया जा सकता है।

फिर, मेरे UICollectionViewCell मैं UIImageView उपवर्ग 'intrinsicContentSize एक बार लेआउट पास पूरा कर लिया है की स्थापना कर रहा हूँ:,

- (void)layoutSubviews { 
    [super layoutSubviews]; 

    // Constrain the image view's content size to match the stackview's width. 
    self.imageView.constrainedSize = CGSizeMake(self.stackView.frame.size.width, self.stackView.frame.size.width); 

    [super layoutSubviews]; 

}

0

अन्य समाधान यदि आप इसे प्रोग्राम के रूप में करने के लिए नहीं करना चाहते हैं , लंबवत रूप से 2 UIStackViews का उपयोग करना है। UIImageView में शीर्ष UIStackView, इसकी ऊंचाई बाधा को सेट करने के लिए सेट करें, पर्यवेक्षण की ऊंचाई का 70% कहें, और नीचे UIStackView को शीर्ष के बगल में बैठने दें, इसलिए यह शेष 30% ऊंचाई ले जाएगा।

इस तरह से कोई फर्क नहीं पड़ता कि आपकी छवि कितनी बड़ी है, यह हमेशा 70% ऊंचाई लेगी।