OStack程序员社区-中国程序员成长平台

标题: ios - Storyboard中的自定义 UISegmentedControl [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-13 09:43
标题: ios - Storyboard中的自定义 UISegmentedControl

我正在尝试创建一个自定义 UISegmentedControl(类似于 this one )并希望在我的 Storyboard中展示它的设计。

我创建了这个子类:

CustomSegmentedControl.h

IB_DESIGNABLE
@interface CustomSegmentedControl : UISegmentedControl

@end

CustomSegmentedControl.m

#import "CustomSegmentedControl.h"

@implementation CustomSegmentedControl

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

  - (id)initWithCoderNSCoder *)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

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

有没有与它在 Storyboard中的真实外观相匹配？

谢谢

---

Best Answer-推荐答案

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

第二件事，您需要为要在 Storyboard 中控制和渲染的事物创建 IB_INSPECTABLE 属性，并在 .m 文件中为它们创 build 置器。

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

附上代码供大家引用:

.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)initWithFrameCGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        [self commonInit];
    }
    return self;
}

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

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

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

}

-(void) setSeparatorUIImage *)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 个新的可编辑属性。我希望这是一个好的开始，你可以从这里开始

希望这会有所帮助。

关于ios - Storyboard中的自定义 UISegmentedControl，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31872046/

---

欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/)

Powered by Discuz! X3.4