ios - 如何让约束自动调整大小和重新定位横向键盘键

Question

我很难弄清楚如何在约束条件下获得我想要的结果。我可以通过编程方式执行此操作，但似乎应该有更好的方法。

基本上我有一个键盘。

1. 最左边的键(Q)和最右边的键(P)应该从左右两边相隔3个点。

2. Q 和 P 键之间的 8 个键应该在 Q 和 P 键之间等距

3. 键的宽度应拉伸(stretch)以填满 Q 键和 P 键之间的整个宽度，同时仍保持彼此之间的间距相等。

基本上，当横向旋转时，键盘应该执行 Apple 原生键盘的操作。

这可以在有约束的情况下完成吗，还是我需要在没有约束的情况下以编程方式执行此操作？

Answer 1

关于布局

是的。自动布局可以做到这一点。

如果您希望布局在横向和纵向方向上保持相同(我很确定您这样做)，那么一旦设置好约束，一切都应该正常工作。如果您希望它们发生变化，那是可能的，但我不打算解决这个问题，因为它似乎没有必要。

澄清

在你的问题中，你说:

Can this be done with constraints or do I need to do this programmatically without constraints?

我不确定，但我想确认您是否理解自动布局不仅仅是界面构建器。您还可以通过操作 NSLayoutConstraint 并将它们添加到 View 中，从代码中非常自然地使用自动布局。因此，您可能至少有三种选择:

• 使用自动布局并在 Interface Builder 中设置约束。
• 使用自动布局并在代码中设置约束。
• 不要使用自动布局并在 layoutSubviews: 或类似的东西中移动您的 View 。

选择IB或代码

您可以在 IB 中设置所有这些。每个键都需要两个水平约束和两个垂直约束，因此您将为 26 键键盘管理至少 104 个约束。加上数字。和符号。 手动执行此操作会非常痛苦，当您正确执行此操作时，您团队中的某个人(甚至可能是您)将决定键间距只需要多一个像素即可。

键盘网格具有如此多的规律性和如此多的约束，因此只需使用一些代码来设置约束会容易得多。

明确一点:您仍将使用自动布局，但您将使用代码创建约束，而不是手动维护它们。

在代码中设置约束

我假设您希望键具有相同的大小。您可以强加这一点，以及它们之间相等的(指定的)间距以及父 View 左右两侧的固定边距，并具有如下约束:

// Substitute your view names here.
UIButton *q, *w, *e, *r, *t, *y, *u, *i, *o, *p;

NSDictionary *const metrics = @{@"margin": @(3), @"gap": @(4)};
NSDictionary *const views = NSDictionaryOfVariableBindings(q,w,e,r,t,y,u,i,o,p);
NSArray *const constraints =
  [NSLayoutConstraint
   constraintsWithVisualFormat:
   @"H:|-margin-[q]-gap-[w(q)]-gap-[e(q)]-gap-[r(q)]-gap-[t(q)]-gap-[y(q)]-gap-[u(q)]-gap-[i(q)]-gap-[o(q)]-gap-[p(q)]-margin-|"
   options: NSLayoutFormatDirectionLeadingToTrailing
   metrics: metrics
   views: views];

// Add constraints to your container view so that they do something.
UIView *const container = [self view];
[container addConstraints: constraints];

但我很想构建一个辅助方法，该方法采用一组 View 并从中生成约束。它会像这样:

-(NSArray *) constraintsForEqualSizeViews: (NSArray *) keys
                      withSuperviewMargin: (CGFloat) margin
                                 andSpace: (CGFloat) space
{
  NSMutableArray *const constraints = [NSMutableArray new];
  
  // Note: the keys must be in a superview by now so that
  // a constraint can be set against its edge.
  UIView *const leftKey = [keys firstObject];
  [constraints addObject:
   [NSLayoutConstraint constraintWithItem: leftKey
                                attribute: NSLayoutAttributeLeft
                                relatedBy: NSLayoutRelationEqual
                                   toItem: [leftKey superview]
                                attribute: NSLayoutAttributeLeft
                               multiplier: 0
                                 constant: margin]];
  
  UIView *const rightKey = [keys firstObject];
  [constraints addObject:
   [NSLayoutConstraint constraintWithItem: rightKey
                                attribute: NSLayoutAttributeRight
                                relatedBy: NSLayoutRelationEqual
                                   toItem: [rightKey superview]
                                attribute: NSLayoutAttributeRight
                               multiplier: 0
                                 constant: margin]];
  
  UIView *const templateKeyForEqualSizes = leftKey;
  NSDictionary *const metrics = @{@"space": @(space)};
  for(NSUInteger i=1; i<[keys count]; ++i)
  {
    NSDictionary *const views = @{@"previousKey": keys[i-1],
                                  @"thisKey": keys[i],
                                  @"templateKey": templateKeyForEqualSizes};

    [constraints addObjectsFromArray:
     [NSLayoutConstraint constraintsWithVisualFormat: @"H:[previousKey]-space-[thisKey(templateKey)]"
                                             options: NSLayoutFormatDirectionLeftToRight
                                             metrics: metrics
                                               views: views]];
  }
  
  NSArray *const immutableArrayToReturn = [constraints copy];
  return immutableArrayToReturn;
}

自动布局语言在Apple's documentation 中描述。 .

UIView 框架

您无需考虑为键的 View 设置原始框架——这是远离用于描述键的界面生成器的另一个原因。您可以像这样创建 View :

-(NSArray*) keyRowArray: (NSString*) keyNamesString
{
  const NSUInteger keyCount = [keyNamesString length];
  NSMutableArray *const keys = [NSMutableArray arrayWithCapacity: keyCount];
  
  for(NSUInteger i=0; i<keyCount; ++i)
  {
    NSString *const keyName = [keyNamesString substringWithRange:NSMakeRange(i, 1)];

    // Look! No frame needed!
    XXYourCustomKeyView *const key = [XXYourCustomKeyView new];

    // Do key setup – you probably want to add button actions, and such.
    [key setName: keyName];
    [keys addObject: keyName];
  }
  
  return [keys copy];
}

UIView 所有权

我不会直接在 UIViewController 中管理所有这些键。我将它们封装在一个 XXYourCustomKeyboardView 类中，该类可以接受键盘描述(类似于键盘行的字符串数组)。您的 Controller 可以创建它，传递配置，将自己设置为委托(delegate)和快乐的日子。

混合 I.B. + 代码方法

您也可以使用混合方法，在 IB 中设置一些键和约束:

• 非字符键:tab、shift 等。它们的自定义大小和特殊行为。
• 每一行的左右键。
• 使行偏离正方形网格的交替。

然后您可以使用与上述类似的代码在这些键之间添加键。

根据我上面给出的约束创建方法，如果将它拆分为 NSLayoutConstraint 类别中的单独方法，您可能会发现它更灵活:

@interface NSLayoutConstraint (Keyboard)
  // This is what it constraint method currently creates in the for loop.
  +(NSArray*) constraintsForViews: (NSArray*) views imposingEqualSpace: (CGFloat) space;
  +(NSArray*) constraintsForViewsImposingEqualWidth: (NSArray*) views;
  
  // This will also be useful to align a whole row.
  +(NSArray*) constraintsForViewsImposingSameTopAndBottom: (NSArray*) views;
@end

---

如果有任何不清楚的地方，请在评论中告诉我。如有必要，我会添加说明。