自定义UISegmentedControl

Question

如何制作自定义UISegmentedControl？

我有2个图像，1表示段处于活动状态时应显示，而另一个图像处于非活动状态时应显示。我可以覆盖样式或其他东西，所以我有一个UISegmentedControl与我自己的图像作为活动/非活动背景？

Answer 1

我不得不添加这个额外的代码，除了为“开”和“关”位置有2个不同的状态：

- (void)viewDidLoad
{
    [super viewDidLoad];

    // Set set segControl background to transparent
    CGRect rect = CGRectMake(0, 0, 1, 1);
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [[UIColor clearColor] CGColor]);
    CGContextFillRect(context, rect);
    UIImage *transparentImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    [self.segControl setBackgroundImage:transparentImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

    [self.segControl setDividerImage:transparentImage forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
}

编辑：因为这是一个宣传，一个更清洁的解决方案是使用[UIImage新]而不是创建透明图像，因此：

 [self.segControl setDividerImage:[UIImage new] forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
 [self.segControl setBackgroundImage:[UIImage new] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

Answer 2

斯威夫特4

这就是我管理它的方式。进行分段控制并使用图像插入段。请务必将一个图像设置为选中，因为这将是初始选择的索引。同时将backgroundColor和tintColor设置为clear，以便分段控件仅显示您的图像。

var newSegmentedControl: UISegmentedControl = {
        let segmentedControl = UISegmentedControl()

        segmentedControl.insertSegment(with: UIImage(named: "x_Selected.jpg"), at: 0, animated: true)
        segmentedControl.insertSegment(with: UIImage(named: "y_Normal.jpg"), at: 1, animated: true)

        segmentedControl.addTarget(self, action: #selector(segmentedControlChanged), for: .valueChanged)

        segmentedControl.selectedSegmentIndex = 0
        segmentedControl.backgroundColor = .clear
        segmentedControl.tintColor = .clear            

    }()

当分段控件的值发生变化时调用的函数。

@objc func segmentedControlChanged(sender: UISegmentedControl) {

    if sender.selectedSegmentIndex == 0 {
        sender.setImage(UIImage(named: "x_Selected.jpg"), forSegmentAt: sender.selectedSegmentIndex)
        sender.setImage(UIImage(named: "y_Normal.jpg"), forSegmentAt: 1)
    } else if sender.selectedSegmentIndex == 1 {
        sender.setImage(UIImage(named: "x_Normal.jpg"), forSegmentAt: 0)
        sender.setImage(UIImage(named: "y_Selected.jpg"), forSegmentAt: sender.selectedSegmentIndex)
    } 

}

希望你觉得这个有用 ：）

Answer 3

您可以使用iOS开发人员库中描述的方法：

http://developer.apple.com/library/ios/ipad/#documentation/uikit/reference/UISegmentedControl_Class/Reference/UISegmentedControl.html

向下滚动到“自定义外观”部分。有几种方法可以为多个按钮状态，按钮分割器图像等设置背景图像。

这些方法仅适用于iOS5及更高版本。

@property tintColor  
– backgroundImageForState:barMetrics:
– setBackgroundImage:forState:barMetrics:
– contentPositionAdjustmentForSegmentType:barMetrics:
– setContentPositionAdjustment:forSegmentType:barMetrics:
– dividerImageForLeftSegmentState:rightSegmentState:barMetrics:
– setDividerImage:forLeftSegmentState:rightSegmentState:barMetrics:
– titleTextAttributesForState:
– setTitleTextAttributes:forState:

Answer 4

最简单的方法是创建自己的模仿UISegmentedControl的控件。 UISegmentedControl只是安排一系列按钮并为您管理他们的图像状态;它没有做任何特别的事情。

Answer 5

是的，您需要为分段栏的每个部分提供2张图像（打开和关闭）。 （4段...... 8张图片。）但它可以让你设置16个选项！ （所有只在GUI中消耗1行。）

我得到了一切工作除了...你如何隐藏原始段条形图？

无法将alpha设置为0.（它也会隐藏您的图像。）

无法将“tintClear”设置为“clear”。 （不知道为什么它会变成黑色和白色。）

无法将其设置为“隐藏”......根本不会有任何作用。

无法将“背景”设置为“清除”。 （背景不是分段栏图形。）

Answer 6

我写了一些有用的东西，因为@rpetrich正在解释而不放在一个数组中，在我看来这是最容易解决的问题。希望有人觉得这很有用

。H

IBOutlet UIButton *index0;
IBOutlet UIButton *index1;
IBOutlet UIButton *index2;
IBOutlet UIImageView *segMentControl;

-(IBAction)segmentSwitch:(UIButton *) buttonIndexPressed;

.M

-(IBAction)segmentSwitch:(UIButton *) buttonIndexPressed
{
    if (buttonIpressed == index0)
    {
        [segmentControl setImage:[UIImage imageNamed:@"Seg1Sel.png"]];
        NSLog(@"index 0 pushed");

        index0.enabled = NO;
        index1.enabled = YES;
        index2.enabled = YES;        
    }
    else if (buttonIpressed == index1)
    {
         [segmentControl setImage:[UIImage imageNamed:@"Seg2Sel.png"]];
         NSLog(@"index 1 pushed");

         index0.enabled = YES;
         index1.enabled = NO;
         index2.enabled = YES;
    }
    else if (buttonIpressed == index2)
    {
        [segmentControl setImage:[UIImage imageNamed:@"Seg3Sel.png"]];
        NSLog(@"index 2 pushed");

        index0.enabled = YES;
        index1.enabled = YES;
        index2.enabled = NO;
    }
}

Answer 7

它工作得很好

[segmentControl setImage:[UIImage imageNamed:@"Rolenew.png"] forSegmentAtIndex:0];

Answer 8

尝试HMSegmentedControl，它也允许图像和其他设置。可在https://github.com/HeshamMegid/HMSegmentedControl购买

Answer 9

为了做到这一点，你必须听UIControlEventValueChanged并自己更改图像。你不应该需要子类化UISegmentedControl - remember composition over inheritance是首选！

Answer 10

Swift 3.0版Jon的回答。

var transparentImage = UIGraphicsGetImageFromCurrentImageContext() as? UIImage
UIGraphicsEndImageContext()
segControl.setBackgroundImage(transparentImage, for: .normal, barMetrics: .default)
segControl.setDividerImage(transparentImage, forLeftSegmentState: .normal, rightSegmentState: .normal, barMetrics: .default)