iOS autolayout - 如何将标签的位置与背景图像的特定位置绑定？

Question

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

Answer 1

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

Answer 2

你想在我认为的代码中完成所有这些，并且能够根据音品位置、琴弦位置等激活...为每个琴弦和音品使用已知点的相对偏移量。

这与您在 SO 上关于让您的烦恼图像正确的其他问题有关。除非你能准确地编码图像，否则准确地编码音符位置将是一件棘手的事情。

恕我直言，你不能使用自动布局来做到这一点，特别是考虑到你的其他问题：

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，以便它正确布局图像和标签。

希望这对您有所帮助。如果您有任何问题，请告诉我。

iOS autolayout - 如何将标签的位置与背景图像的特定位置绑定？

iOS autolayout - how to bind label's positions with particular places of a background image?

storyboard

ios

autolayout