iOS7 Autolayout 和 UIImageview 过大

Question

请看下面我的回答，我有一个可行的解决方案

我已经完全重写了代码，使它更小更整洁，并获得相同的结果。

更新:当加载大图像时，似乎正在调整 UIImageView 的固有内容大小，这会抛出其布局并使其成为设备窗口和 ScrollView 宽度的两倍。我需要弄清楚如何解决这个问题。下面的代码做了一个小改动，减少了 UIImageView 的宽度，但不允许我将它设置为窗口宽度的 100%。

[captionImageView setContentCompressionResistancePriority:1 forAxis:UILayoutConstraintAxisHorizontal];

我为我的 View 设置了以下内容，我的问题是 UIImageView 中的图像将其包含 View 的宽度推到比设备窗口更宽。

我有一个 ViewController，它在 for 循环中加载和添加 subview ，一切似乎都工作正常。

在这些 subview 中，我尝试使用自动布局来实现以下目的:

• 添加一个UIImageView并使其与父窗口宽度相同

• 将 UIImage 加载到其中，并使用 UIViewContentModeScaleAspectFill 确保图像加载良好且成比例。

• 在所有这些下面加载一个 UITextView
• 在 for 循环中重复这个过程，使它们都很好地堆叠在一起。

我在可视化格式化语言中使用约束来尝试将 UIImage View 的大小设置为父 View 的宽度，我希望它是设备窗口宽度。

如果我按如下方式指定约束:

[containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[captionImageView(320)]|" options:0 metrics:metrics views:views]];

然后它工作正常，但这不是理想的解决方案，因为我希望 UIImageView 与设备的宽度齐平，并且设置固定宽度是不好的做法

如果我像这样指定约束:

[containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[captionImageView]|" options:0 metrics:metrics views:views]];

然后 UIImage 的大小假设为 960px 将强制父容器 View 也为该大小。

我将自定义 View 内容加载到 ScrollView 中，因此我们有水平滚动，这很糟糕。

请注意，我使用 UIView 类别指定 view.translatesAutoresizingMaskIntoConstraints 设置为 NO。

#import "UIView+Autolayout.h"

@implementation UIView (Autolayout)
+(id)autoLayoutView {
    UIView *view = [self new];
    view.translatesAutoresizingMaskIntoConstraints = NO;
    return view;
}
@end

自定义 View 的代码如下。关于如何确保 UIImageView 的大小不会超出设备窗口的边界，有什么想法吗？

//
//  FigCaptionView.m
//  
//
//  Created by Matthew Finucane on 18/12/2014.
//  Copyright (c) 2014 The App. All rights reserved.
//

#import "FigCaptionView.h"
#import "UIView+Autolayout.h"

@interface FigCaptionView(){}
@end

@implementation FigCaptionView

-(id)initWithData:(NSDictionary *)viewData {
    if((self = [FigCaptionView autoLayoutView])) {
        self.figCaptionData = viewData;
    }

    return self;
}

-(void)layoutItems {
    [self setBackgroundColor:[UIColor redColor]];

    /**
     *  The container view for everything
     */
    UIView *containerView = [UIView autoLayoutView];

    /**
     *  Setting up the caption image
     */
    UIImageView *captionImageView = [UIImageView autoLayoutView];
    [captionImageView setContentMode:UIViewContentModeScaleAspectFill];

    /**
     *  Grabbing the image (not yet the right way to do this)
     */
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
    UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:@"http://placekitten.com/960/240"] options:0 error:nil]];

    dispatch_async(dispatch_get_main_queue(), ^{
        captionImageView.image = image;
    });
});

    /**
     *  Setting up the caption image
     */
    UITextView *captionTextView = [UITextView autoLayoutView];
    [captionTextView setText:@"Sample paragraph text will go in here. Sample paragraph text will go in here. Sample paragraph text will go in here. Sample paragraph text will go in here. Sample paragraph text will go in here.Sample paragraph text will go in here"];

    /**
     *  Adding the container view
     */
    [self addSubview:containerView];
    [containerView addSubview:captionImageView];
    [containerView addSubview:captionTextView];

    [captionTextView setBackgroundColor:[UIColor blueColor]];


    /**
     *  Dictionaries for autolayout: views and metrics
     */
    NSDictionary *views = NSDictionaryOfVariableBindings(containerView, captionImageView, captionTextView);
    NSDictionary *metrics = @{@"imageHeight": @"160.0", @"margin": @"20.0"};

    /**
     *  Setting up the constraints for this view
     */
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[containerView]|" options:0 metrics:metrics views:views]];
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[containerView]|" options:0 metrics:metrics views:views]];

    /**
     *  Container view constraints
     *
     *  The first constraint is the one that might be causing me trouble.
     */
    [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[captionImageView]|" options:0 metrics:metrics views:views]];
    [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[captionTextView]|" options:0 metrics:metrics views:views]];
    [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[captionImageView(imageHeight)][captionTextView]|" options:NSLayoutFormatAlignAllLeft metrics:metrics views:views]];


    for(UIView *view in self.subviews) {
        if([view hasAmbiguousLayout]) {
            NSLog(@"OOPS");
            NSLog(@"<%@:0x%0x>", view.description, (int)self);
        }
    }
}

@end

Answer 1

你可以这样处理。

假设ViewA的宽度等于设备窗口的宽度。在这种情况下，您可以只添加一个UIView。并使用约束设置它，就像您在上面处理的通常 View 一样。

[containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[captionImageView(ViewA)]|" options:0 metrics:metrics views:views]];

希望这对您有所帮助。

编辑:

因为我不太确定它是否会以您对我的评论方式起作用。所以我只是展示了我如何处理的代码。

1.设置viewA

_viewA = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];

2.就像你的 UIImageView 一样处理它(在本例中，captionImageView)

[self.view addSubView:_viewA];
[_viewA setTranslatesAutoresizingMaskIntoConstraints:NO];

3.加入NSDictionaryBinding

NSDictionary *dictionary = NSDictionaryOfVariableBindings(_textView, _button, _viewA);

4.自定义VFL并赋值。

NSString *const KButtonHorizontal = @"|[_button(_viewA)]|";