Question

我正在创建这个IB_Designable类。它就像一个滑块。见图。这两个元素都是使用很少的可伸展UIImages创建的。

我的红色正方形是66x66 pt。此方块必须在灰色矩形内的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

您不能在故事板中添加缩略图的组件。在这种情况下，我怀疑您的thumb图片视图出口是nil，而它在IB中被预览，因此更改value它可能不会更新任何子视图。

您通常可以通过编程方式添加子视图来解决此问题，例如：类似的东西：

//  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可能对使用该控件的代码有用，所以我暴露了该属性。

现在，您正在使用图片视图，但如果您想要的只是主控件和缩略图的圆角，我就不会使用图片，而只是围绕{{1适用于layer个对象。另外，我不清楚你对某些事情的意图（例如，我不确定你的UIView指的是什么......你通常不会引用可设计的视图层次结构之外的视图视图）。并且您将顶级视图引用为图像视图，如果您想要背景图像，也可以这样做。

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

我在这里看到了一些实现，人们希望用插座定义可设计视图的所有视图层次结构。但在这种情况下，您拥有所有这些子视图的自包含NIB。如果您在StackOverflow中搜索＆＃34; IBDesignable NIB＆＃34;，您将看到相关答案的链接。

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

1 个答案: