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

Question

我这样做,我很好奇这是最好的方式还是愚蠢的方式!

我有一堆40像素宽的图像,每一个像拼字游戏瓷砖.我的应用程序想要显示一些并将它们置于屏幕中心.只有它不知道会有多少!可能在3到10之间.

所以我认为最好的事情是,如果我计算多少,40乘以,所以我知道整个事物将有多少像素宽,然后让我们假设它是280像素 - 我将创建一个280像素宽的UIView,坚持所有的瓷砖在那里,然后使用Autolayout将UIView集中在设备上.

那样如果用户旋转设备,没问题!

这是最好的方法吗？此外,我还需要让用户将磁贴从UIView中拖出并移动到屏幕上的另一个位置.那有可能吗？

Answer 1

我突然想到了三种方法：

1. 我认为您使用容器视图的解决方案非常好。但是，您不必费力去确定图像的大小。您只需定义容器和图像视图之间的关系，它就会调整容器的大小以符合图像视图的固有大小（或者如果您显式定义图像视图的大小，也可以）。然后您可以将容器居中（并且不给它任何明确的宽度/高度约束）：

   // 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对象（有时称为“间隔视图”），您将为其指定背景颜色[UIColor clearColor]，并将它们放在图像视图的左侧和右侧，并将它们定义为转到超级视图的边距，并将右视图定义为与左视图相同的宽度。虽然我确信您正在构建约束，但如果我们要编写视觉格式语言（VFL）以使两个图像视图在屏幕上居中，它可能看起来像：

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

3. NSLayoutAttributeCenterX或者，您可以通过使用创建约束constraintWithItem并指定来消除对容器视图或左侧和右侧两个间隔视图的需要multiplier以便它们按照您想要的方式间隔，从而虽然这种技术消除了对这两个间隔视图的需要，但我也认为它不太直观。

   但它可能看起来像：

   [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];
   }];
   

   诚然，这采用了稍微不同的图像视图间距，但在某些情况下这很好。

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