在故事板中自定义UISegmentedControl

Question

我正在尝试创建一个自定义的UISegmentedControl（类似于this one），并希望在我的故事板中显示其设计。

我创建了这个子类：

CustomSegmentedControl.h

IB_DESIGNABLE
@interface CustomSegmentedControl : UISegmentedControl

@end

CustomSegmentedControl.m

#import "CustomSegmentedControl.h"

@implementation CustomSegmentedControl

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

  - (id)initWithCoder:(NSCoder *)aDecoder {
      self = [super initWithCoder:aDecoder];
      if (self) {
       [self commonInit];
      }
     return self;
    }

  - (void)commonInit {
     UIImage *backgroundOff = [UIImage imageNamed:@"segmentbk_off"];
     UIImage *backgroundOn = [UIImage imageNamed:@"segmentbk_on"];
     UIImage *separator = [UIImage imageNamed:@"segment_separator"];

     CGRect frame = CGRectMake(self.frame.origin.x,
                               self.frame.origin.y,
                               self.frame.size.width,
                               50.0);
     [self setFrame:frame];

     [self setBackgroundImage:backgroundOff
                     forState:UIControlStateNormal
                   barMetrics:UIBarMetricsDefault];

     [self setBackgroundImage:backgroundOn
                     forState:UIControlStateSelected
                   barMetrics:UIBarMetricsDefault];

     [self setDividerImage:separator
       forLeftSegmentState:UIControlStateNormal
         rightSegmentState:UIControlStateNormal
                barMetrics:UIBarMetricsDefault];

     [self setDividerImage:separator
       forLeftSegmentState:UIControlStateSelected
         rightSegmentState:UIControlStateNormal
                barMetrics:UIBarMetricsDefault];

     [self setDividerImage:separator
       forLeftSegmentState:UIControlStateNormal
         rightSegmentState:UIControlStateSelected
                barMetrics:UIBarMetricsDefault];
  }

@end

我在故事板中将SegmentedControl的类更改为CustomSegmentedControl，当我启动应用程序时，控件看起来应该是这样。但在我的故事板中有常规的UISegmentedControl外观。

无论如何都要在故事板中匹配它的真实外观吗？

由于

Answer 1

好的，这是你怎么做的。首先，您使用IB_DESIGNABLE走在正确的轨道上。

其次，您需要为要在Storyboard中控制和呈现的内容创建IB_INSPECTABLE属性，并在.m文件中为它们创建setter。

我所做的只是一个开始，我相信在这里可以做更多的事情。

附加代码供您参考：

.h文件：

IB_DESIGNABLE
@interface CustomSegmentedControl : UISegmentedControl

@property (nonatomic) IBInspectable UIImage *backgroundOff;
@property (nonatomic) IBInspectable UIImage *backgroundOn;
@property (nonatomic) IBInspectable UIImage *separator;
@end

.m文件：

#import "CustomSegmentedControl.h"

@implementation CustomSegmentedControl

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

- (id)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if (self) {
        [self commonInit];
    }
    return self;
}

-(void) setBackgroundOff:(UIImage *)backgroundOff
{
    _backgroundOff = backgroundOff;
    [self setBackgroundImage:self.backgroundOff
                    forState:UIControlStateNormal
                  barMetrics:UIBarMetricsDefault];
}

-(void) setBackgroundOn:(UIImage *)backgroundOn
{
    _backgroundOn = backgroundOn;
    [self setBackgroundImage:self.backgroundOn
                    forState:UIControlStateSelected
                  barMetrics:UIBarMetricsDefault];

}

-(void) setSeparator:(UIImage *)separator
{
    _separator = separator;
    [self setDividerImage:self.separator
      forLeftSegmentState:UIControlStateNormal
        rightSegmentState:UIControlStateNormal
               barMetrics:UIBarMetricsDefault];

    [self setDividerImage:self.separator
      forLeftSegmentState:UIControlStateSelected
        rightSegmentState:UIControlStateNormal
               barMetrics:UIBarMetricsDefault];

    [self setDividerImage:self.separator
      forLeftSegmentState:UIControlStateNormal
        rightSegmentState:UIControlStateSelected
               barMetrics:UIBarMetricsDefault];

}




- (void)commonInit {
    _backgroundOff = [UIImage imageNamed:@"segmentbk_off"];
    _backgroundOn = [UIImage imageNamed:@"segmentbk_on"];
    _separator = [UIImage imageNamed:@"segment_separator"];

    CGRect frame = CGRectMake(self.frame.origin.x,
                              self.frame.origin.y,
                              self.frame.size.width,
                              50.0);
    [self setFrame:frame];

    [self setBackgroundImage:self.backgroundOff
                    forState:UIControlStateNormal
                  barMetrics:UIBarMetricsDefault];

    [self setBackgroundImage:self.backgroundOn
                    forState:UIControlStateSelected
                  barMetrics:UIBarMetricsDefault];

    [self setDividerImage:self.separator
      forLeftSegmentState:UIControlStateNormal
        rightSegmentState:UIControlStateNormal
               barMetrics:UIBarMetricsDefault];

    [self setDividerImage:self.separator
      forLeftSegmentState:UIControlStateSelected
        rightSegmentState:UIControlStateNormal
               barMetrics:UIBarMetricsDefault];

    [self setDividerImage:self.separator
      forLeftSegmentState:UIControlStateNormal
        rightSegmentState:UIControlStateSelected
               barMetrics:UIBarMetricsDefault];
}

@end

以下是它在界面构建器中的外观：

该组件现在看起来更接近实际的实现。

正如您现在所看到的，您在“属性”检查器面板中有3个新的可编辑属性。我希望这是一个良好的开端，你可以从这里开始：）

希望这会有所帮助。