ios - 使用 iOS 自动布局将一些图像居中的最佳方法

Question

我正在这样做，我很好奇这是最好的方法还是愚蠢的方法!

我有一堆 40 像素宽的图片，每一张都像拼字游戏。我的应用程序想要显示一些并将它们放在屏幕中央。只是不知道会有多少!可能在 3 到 10 之间。

所以我认为最好的办法是数出有多少，乘以 40，这样我就知道整个东西有多少像素宽，然后假设它是 280 像素——我将创建一个 280 像素宽的 UIView，坚持下去那里的所有图 block ，然后使用自动布局使 UIView 在设备上居中。

这样，如果用户旋转设备，没问题!

这是最好的方法吗？此外，我将需要让用户将图 block 拖出该 UIView 并拖到屏幕上的另一个位置。这可能吗？

Answer 1

我突然想到了三种方法:

1. 我认为您使用容器 View 的解决方案非常好。但是，您不必为确定图像的大小而烦恼。您可以只定义容器和 ImageView 之间的关系，它会调整容器的大小以符合 ImageView 的固有大小(或者如果您明确定义 ImageView 的大小，那也很好)。然后您可以将容器居中(不给它任何明确的宽度/高度限制):

   // create container
   
   UIView *containerView = [[UIView alloc] init];
   containerView.backgroundColor = [UIColor clearColor];
   containerView.translatesAutoresizingMaskIntoConstraints = NO;
   [self.view addSubview:containerView];
   
   // create image views
   
   UIImageView *imageView1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1.png"]];
   imageView1.translatesAutoresizingMaskIntoConstraints = NO;
   [containerView addSubview:imageView1];
   
   UIImageView *imageView2 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"2.png"]];
   imageView2.translatesAutoresizingMaskIntoConstraints = NO;
   [containerView addSubview:imageView2];
   
   NSDictionary *views = NSDictionaryOfVariableBindings(containerView, imageView1, imageView2);
   
   // define the container in relation to the two image views 
   
   [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[imageView1]-[imageView2]|" options:0 metrics:nil views:views]];
   [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[imageView1]-|" options:0 metrics:nil views:views]];
   [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[imageView2]-|" options:0 metrics:nil views:views]];
   
   // center the container
   
   [self.view addConstraint:[NSLayoutConstraint constraintWithItem:containerView
                                                         attribute:NSLayoutAttributeCenterX
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:containerView.superview
                                                         attribute:NSLayoutAttributeCenterX
                                                        multiplier:1.0
                                                          constant:0]];
   
   [self.view addConstraint:[NSLayoutConstraint constraintWithItem:containerView
                                                         attribute:NSLayoutAttributeCenterY
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:containerView.superview
                                                         attribute:NSLayoutAttributeCenterY
                                                        multiplier:1.0
                                                          constant:0]];
   

2. 另一个带有约束的常见解决方案是创建两个额外的 UIView 对象(有时称为“间隔 View ”)，您将为其指定背景颜色 [UIColor clearColor ]，并将它们放在 ImageView 的左侧和右侧，并将它们定义为到父 View 的边缘，并将右 View 定义为与左 View 的宽度相同。虽然我确定您正在构建您的约束，但如果我们要为两个 ImageView 编写视觉格式语言 (VFL) 以在屏幕上居中，它可能看起来像:

   @"H:|[leftView][imageView1]-[imageView2][rightView(==leftView)]|"
   

3. 或者，您可以通过使用 constraintWithItem 创建 NSLayoutAttributeCenterX 约束，并指定multiplier 用于各种 ImageView ，以便它们按您想要的方式间隔。虽然这种技术消除了对这两个间隔 View 的需要，但我也认为它不太直观。

   但它可能看起来像:

   [imageViewArray enumerateObjectsUsingBlock:^(UIView *view, NSUInteger idx, BOOL *stop) {
       NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:view
                                                                     attribute:NSLayoutAttributeCenterX
                                                                     relatedBy:NSLayoutRelationEqual
                                                                        toItem:view.superview
                                                                     attribute:NSLayoutAttributeCenterX
                                                                    multiplier:2.0 * (idx + 1) / ([imageViewArray count] + 1)
                                                                      constant:0];
       [view.superview addConstraint:constraint];
   }];
   

   诚然，这采用了略微不同的 ImageView 间距，但在某些情况下没问题。

就个人而言，我倾向于第一种方法，但这些方法中的任何一种都有效。