ios - 使 UIImage 在@IB_Designable 上的新位置重绘

Question

我正在创建这个 IB_Designable 类。它就像一个 slider 。见图片。这两个元素都是用很少可拉伸(stretch)的 UIImages 创建的。

我有一个 66x66 pt 的红色方 block 。这个正方形必须在灰色矩形内的 X 方向上滑动。

我已经创建了这个类:

标题

#import <UIKit/UIKit.h>

IB_DESIGNABLE

@interface MyClass : UIView

// minimum and maximum slider value
@property (assign, nonatomic) IBInspectable CGFloat minimumValue;
@property (assign, nonatomic) IBInspectable CGFloat maximumValue;

@property (assign, nonatomic) IBInspectable CGFloat value;

@end

实现

#import "MyClass.h"

@interface MyClass() {
  __weak IBOutlet UIView *topContainer;
  CGFloat minimumThumbCoordinate;
  CGFloat maximumThumbCoordinate;
}

@property (weak, nonatomic) IBOutlet UIImageView *thumb;

@end


@implementation MyClass



- (void)awakeFromNib {
  [super awakeFromNib];

  // topContainer contains everything
  CGRect topContainerBounds = [topContainer bounds];
  CGRect thumbBounds = [self.thumb bounds];

  CGFloat topContainerWidth = CGRectGetWidth(topContainerBounds);
  CGFloat thumbWidth = CGRectGetWidth(thumbBounds);

  minimumThumbCoordinate = floorf(thumbWidth / 2.0f);
  maximumThumbCoordinate = floorf(topContainerWidth - minimumThumbCoordinate);

}

-(void)setValue:(CGFloat)value {

  if ((value < self.minimumValue) || (value > self.maximumValue)) return;

  // normalize values

  CGFloat minimumValueNormalized = self.minimumValue;
  CGFloat maximumValueNormalized = self.maximumValue;
  CGFloat desiredValue = value;

  if ((minimumValueNormalized < 0) && (maximumValueNormalized > 0)) {
    CGFloat absoluteMinimum = fabsf(self.minimumValue);
    minimumValueNormalized = 0;
    maximumValueNormalized += absoluteMinimum;
    desiredValue += absoluteMinimum;
  }

  CGFloat percentage = desiredValue/maximumValueNormalized;

  // find coordinate
  CGFloat coordinateRange = maximumThumbCoordinate - minimumThumbCoordinate;
CGFloat relativeCoordinate = percentage * coordinateRange;

CGPoint center = CGPointMake(relativeCoordinate, self.thumb.center.y);

  [self.thumb setCenter: center];

}

问题是，当我在界面生成器上设置值时，setValue 方法不会让拇指移动……有什么想法吗？

Answer 1

您不能在 Storyboard中添加缩略图的组件。在这种情况下，我怀疑您的 thumb image view outlet 在 IB 中预览时为 nil，因此可能不会更改 value更新任何 subview 。

您通常通过以编程方式添加 subview 来解决这个问题，例如像这样的东西:

//  MyClass.h

#import <UIKit/UIKit.h>

IB_DESIGNABLE
@interface MyClass : UIView

@property (nonatomic, strong) IBInspectable UIImage *thumbnailImage;

@property (nonatomic) IBInspectable CGFloat minimumValue;
@property (nonatomic) IBInspectable CGFloat maximumValue;

@property (nonatomic) IBInspectable CGFloat value;
@property (nonatomic, readonly) CGFloat percent;

@end

和

//  MyClass.m

#import "MyClass.h"

@interface MyClass ()

@property (weak, nonatomic) UIImageView *thumbnailView;
@property (nonatomic) CGFloat thumbWidth;

@end

@implementation MyClass

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        [self configureView];
    }
    return self;
}

- (instancetype)initWithCoder:(NSCoder *)coder {
    self = [super initWithCoder:coder];
    if (self) {
        [self configureView];
    }
    return self;
}

- (void)configureView {
    UIImageView *thumb = [[UIImageView alloc] initWithImage:self.thumbnailImage];
    [self addSubview:thumb];
    thumb.backgroundColor = [UIColor lightGrayColor]; // in case no image has been set
    thumb.clipsToBounds = true;                       // in case you change your `contentMode`
    thumb.contentMode = UIViewContentModeScaleToFill;
    _thumbnailView = thumb;

    _thumbWidth = 44;                                 // maybe you have another IBInspectable property for this...

    [self layoutThumbnail];
}

- (void)setThumbnailImage:(UIImage *)image {
    self.thumbnailView.image = image;
}

- (CGFloat)percent {
    CGFloat range = self.maximumValue - self.minimumValue;
    return range ? (self.value - self.minimumValue) / range : 0;
}

- (void)layoutSubviews {
    [super layoutSubviews];

    [self layoutThumbnail];
}

- (void)layoutThumbnail {
    CGFloat minX = self.thumbWidth / 2;
    CGFloat maxX = self.bounds.size.width - self.thumbWidth / 2;

    CGRect frame = CGRectMake(self.percent * (maxX - minX) + minX - self.thumbWidth / 2, 0, self.thumbWidth, self.bounds.size.height);

    self.thumbnailView.frame = frame;
}

- (void)setValue:(CGFloat)value {
    if (value < self.minimumValue)
        _value = self.minimumValue;
    else if (value > self.maximumValue) {
        _value = self.maximumValue;
    } else {
        _value = value;
    }

    [self layoutThumbnail];
}

@end

请注意，我不仅会在您更改值时更新缩略图框，还会在 layoutSubviews 时更新。如果您的控件在运行时更改大小(例如，用户旋转设备并且控件更改大小)，您希望确保缩略图框架更新。我还将缩略图图像设为一个属性，因此如果您愿意，您也可以在 IB 中设置它。但也许您使用了一些硬编码/默认图像。我还认为我们用于布置缩略图的 percent 可能对使用该控件的代码有用，因此我公开了该属性。

现在，你正在使用 ImageView ，但如果你想要的只是主控件和缩略图的圆角，我不会使用图像，而只是圆化 layer 用于适当的 UIView 对象。另外，我不清楚你对某些事情的意图(例如，我不确定你的 topContainer 指的是什么......你通常不会引用可设计 View 的 View 层次结构之外的 View ).并且您将顶层 View 引用为 ImageView ，如果您也想要那里的背景图像，您会这样做。

但这些细节与您的更广泛的问题无关。希望这能说明这个想法，如果您以编程方式创建 subview ，您可以看到缩略图在您更改 IBInspectable value 时移动。

---

我在这里看到了一些实现，人们想要定义带有 socket 的可设计 View 的所有 View 层次结构。但在那种情况下，您对所有这些 subview 都有一个独立的 NIB。如果您在 StackOverflow 中搜索“IBDesignable NIB”，您将看到指向相关答案的链接。