【问题标题】:Shrink width of UITextField based on growth of another根据另一个的增长缩小 UITextField 的宽度
【发布时间】:2017-11-01 19:51:49
【问题描述】:

我正在尝试根据另一个宽度的增加来修改UITextField 的宽度。这是我的布局示例:

在左侧框(一旦选择包含 int 对话框代码),我想将其设置为边距 0 以开始并向右扩展右侧 UITextField。当左侧框包含数据时,我想调整右侧文本字段的边框。

我知道如何在 Android 中轻松做到这一点,但我在 Xcode 中运气不佳。谁能指出我正确的方向?

【问题讨论】:

  • 你在使用自动布局吗?
  • 是的 - 在左侧 UILabel。但是我想设置右侧 UITextField 框的宽度,但是当左侧的 UILabel 增长时缩小它

标签: ios user-interface cocoa-touch


【解决方案1】:

基本思路是

  1. 观察文本更改事件
  2. 重新计算宽度
  3. 更新宽度约束的constant属性

这是一个简单的演示,需要考虑更多的边缘情况。

- (void)viewDidLoad {
    UIView *container = [[UIView alloc] initWithFrame:CGRectMake(100, 150, 175, 100)];
    container.backgroundColor = [UIColor grayColor];
    [self.view addSubview:container];

    //initialize text fields
    UITextField *leftInput = [[UITextField alloc] initWithFrame:CGRectZero];
    leftInput.translatesAutoresizingMaskIntoConstraints = NO;
    [leftInput addTarget:self action:@selector(textDidChange:) forControlEvents:UIControlEventEditingChanged];
    [container addSubview:leftInput];

    UITextField *rightInput = [[UITextField alloc] initWithFrame:CGRectZero];
    rightInput.translatesAutoresizingMaskIntoConstraints = NO;
    [container addSubview:rightInput];

    //setup constraints
    NSDictionary *views = NSDictionaryOfVariableBindings(container, leftInput, rightInput);
    NSMutableArray *constraints = [NSMutableArray array];
    [constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[leftInput]-[rightInput]-|" options:0 metrics:nil views:views]];
    [constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[leftInput]-|" options:0 metrics:nil views:views]];
    [constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[rightInput]-|" options:0 metrics:nil views:views]];
    NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:leftInput attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:0 constant:minWidth];
    [constraints addObject:widthConstraint];
    self.widthConstraint = widthConstraint;
    [NSLayoutConstraint activateConstraints:constraints];
}

- (void)textDidChange:(UITextField *)textInput {
    NSDictionary *attributes = @{NSFontAttributeName: textInput.font};
    CGFloat width = [textInput.text sizeWithAttributes:attributes].width;
    self.widthConstraint.constant = MAX(minWidth, width);
}

【讨论】:

    【解决方案2】:

    这是一个不使用常量的替代方法。我们的想法是设置自动布局,以便它为您重新计算左侧文本字段的宽度,以便您在文本更改时简单地更新布局。

    首先,将左侧文本字段的拥抱优先级设置为高于右侧文本字段。确保安装了这些水平约束:

    1. 左侧文本字段的左边距到容器(或其他项目,只需固定左边距)
    2. 左边文本域的右边距应该与右边文本域的左边距有一个固定的水平间距(这是文本域之间的间隙,标准是 8px 但当然可以使用你想要的)
    3. 容器右侧的右侧文本字段的右边距或用于将右侧锚定到的任何内容

    这会强制两个文本字段在左右边距之间占据给定的空间,并且自动布局必须决定哪个文本字段具有优先权。通过为左侧文本字段设置更高的拥抱优先级,您声明如果有可用空间,您希望右侧文本字段扩展,因此如果两个字段都为空,则右侧将占据整个空间。这就是为什么您需要设置大于或小于约束来限制文本字段可以变得多小/大的原因。

    现在,假设我们从两个文本字段都为空开始。此时,为左侧文本字段提供最小宽度是明智的,否则它将具有 0 的宽度,因此无法输入任何文本。大约 50 的最小大小应该是合理的,以允许文本输入,但请尝试看看哪些适合您。

    记住要捕获文本字段上的文本编辑更改属性,因此假设您在名为 leftTextField 的变量中有文本字段,请调用

    [leftTextField addTarget:self action:@selector(leftTextChanged) forControlEvents:UIControlEventEditingChanged];
    

    在您的 viewDidLoad 或其他初始化方法中的某个位置。

    现在剩下的就是要求自动布局重新计算视图的固有大小并自行更新。这是通过调用layoutIfNeeded 完成的,所以你的方法看起来像

    - (void)leftTextChanged {
        [self.view layoutIfNeeded];
    }
    

    希望这会有所帮助。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-01-02
      • 1970-01-01
      • 2017-02-07
      • 1970-01-01
      • 2017-12-31
      • 2020-03-08
      • 1970-01-01
      相关资源
      最近更新 更多