iOS自动布局 - 如何将标签的位置与背景图像的特定位置绑定？

Question

我正在制作一个应用程序，它将有一张吉他指板的图片，就像上面的截图一样。将在指板的不同位置显示音符（由红色圆圈表示 - 它们将比屏幕截图中的更多）。 您会建议使用什么样的解决方案来保证音符将显示在指板的正确位置（这只是一个图像）并且不会分开或分布不均匀？请记住，指板图像将根据分辨率进行缩放，因此音符位置坐标应相应更改。

Answer 1

如果您要使用随屏幕尺寸缩放的图像，那么这是我可能不会使用自动布局的少数情况之一。我会创建一个双精度数组，它是从左边缘到音符之间特定空间中心的距离的一部分。因此，例如，索引3处的值（对于最左边的红点所在的空间）将为0.2707（基于图像为36mm / 133mm）。然后，您将设置框架的origin.x值，该分数乘以图像的宽度。

Answer 2

你想在我认为的代码中完成所有这些，并且能够根据音品位置，字符串位置等激活...使用每个字符串的相对偏移量并从已知点进行烦恼。

这与你关于如何正确识别你的烦恼图像的另一个问题有关。除非你能准确地编码图像，否则准确编码音符位置将会很棘手。

恕我直言，你无法通过自动布局执行此操作，尤其是考虑到您的其他问题：iOS autolayout - gap between image and top of the screen, despite constraints set

Answer 3

如果您已设法将imageViews放置在正确的位置，则可以创建一个UIView子类，其中包含图像和顶部的标签。

这是我的建议：

@interface NoteView()

@property (nonatomic, weak) UILabel *label;
@property (nonatomic, weak) UIImageView *imageView;

@end

@implementation NoteView

-(instancetype)init {
    self = [super init];
    if (self) {
        [self setupContent];
    }
    return self;
}

- (void)setupContent {
    UIImageView *imageView = [[UIImageView alloc] init];
    [self addSubview:imageView];
    [imageView setTranslatesAutoresizingMaskIntoConstraints:NO];

    UILabel *label = [[UILabel alloc] init];
    [self addSubview:label];
    [label setTranslatesAutoresizingMaskIntoConstraints:NO];

    // This adds vertical constaints between the view, the label and the imageView
    // You can change the values to suit your needds
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[label]-10-[imageView]-0-|" options:0 metrics:nil views:@{ @"label": label, @"imageView": imageView }]];

    // This makes the view be as big as the label
    // I assumed the labels will be bigger than the images,
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[label]-0-|" options:0 metrics:nil views:@{ @"label": label}]];

    // If the images are bigger use these constraints
    // [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[label]-0-|" options:0 metrics:nil views:@{ @"label": label}]];

    // This msakes sure that the label and the image have the same centers
    [self addConstraint:[NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:imageView attribute:NSLayoutAttributeCenterX multiplier:1.f constant:0]];

    [self setLabel:label];
    [self setImageView:imageView];
}

// This would be a public configuration method.
- (void)setLabelText:(NSString *)text andImage:(UIImage *)image {
    [self.label setText:text];
    [self.imageView setImage:image];
}

@end

您需要做的就是像处理图片一样放置此自定义视图，如果框架更改，请在自定义视图上调用layoutIfNeeded，以便正确布局图像和标签。

希望这会有所帮助。如果您有疑问，请告诉我。