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

我正在开发一个应用程序，上面有一张吉他板的图片，就像上面的截图一样。将有注释显示在面板的不同位置（由红色圆圈表示-它们将比屏幕截图上的多得多）。

---

您会推荐什么样的解决方案来保证便笺将显示在fretboard的正确位置（这只是一个图像），并且不会散开或分布不均？请记住，fretboard图像将根据分辨率进行缩放，因此注释位置坐标应相应更改。

如果要使用随屏幕大小缩放的图像，则这是我可能不使用自动布局的少数情况之一。我将创建一个双倍数组，它是从左边缘到FRET之间特定空间中心的距离的分数。例如，索引3处的值（对于最左侧红点所在的空间）将为0.2707（基于图像，为36mm/133mm）。然后，您将使用图像宽度的分数设置帧的origin.x值。

您希望在代码中完成所有这些，并且能够根据fret位置、字符串位置等进行激活。。。使用每个字符串的相对偏移量，并从已知点进行fret

这与你的另一个问题有关，关于如何纠正你的烦恼形象。除非您能够准确地编码图像，否则准确地编码音符位置将是一件棘手的事情

---

当然，你不能用自动布局来实现这一点，特别是考虑到你的另一个问题：

如果你已经成功地将

imageview

放置在正确的位置，你可以创建一个

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

，以便正确布局图像和标签

---

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

只需根据父图像视图计算位置-这应该是最简单的方法，因为fretboard被划分为相同大小的部分