UISegmentedControl带有方角

23

我想通过子类修改 UISegmentedControl ,以去除其圆角。我尝试设置 cornerRadius 但似乎无效。将 SegmentedControl 的宽度调整为超出屏幕(因此截去圆角)不是一个选项,因为我有4或5个选项卡,并且它们的大小会变化。

有没有办法实现这个目标?

谢谢。

5个回答

37

要使角落正方形,请使用以下代码:

segmentContrl.layer.borderColor=*anycolor*.CGColor;
segmentContrl.layer.cornerRadius = 0.0;
segmentContrl.layer.borderWidth = 1.5f;

2
这对我的用途起作用,但不需要cornerRadius部分。 - Adam Johns
4
忽略cornerRadius。 - swathy krishnan
这是唯一的非黑客行为。 - AWrightIV

15

如果“裁剪”第一个和最后一个片段的一部分存在问题,则一种替代方法可能是裁剪整个第一个和最后一个片段(即您制作的虚拟未使用的片段)。这样,您仍然可以为每个片段保持共同的大小。


简单而雅致。这样做的好处是,您仍然可以在边缘看到垂直线条的视觉效果。 - Joseph
不错!在布局子视图中,我获取分段控件的宽度,通过除以段数得到一个段的宽度,将遮罩视图的宽度设置为(段数-2)*宽度+2(左右边框),然后就完成了! - Mr Rogers

11

只需使用内置的自定义方法并为每个段状态设置背景图像。这将完全覆盖边框。如果背景图片是正方形的,则您的分段控件将显示为正方形。对于要自定义的每个段状态,请使用以下代码。

[segmentedControl setBackgroundImage:[UIImage imageNamed:@"square-background-image-selected"] forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];


你可能需要为普通控件状态提供一个背景图像,否则选定控件状态的背景图像将不会被应用。 - Andrey Chernukha

10

您可以使用setWidth:forSegmentAtIndex:设置分段控件的宽度,以便您可以轻松地使左侧和右侧端点比其他部分大(比如多10像素),然后可以从任一端点剪切10像素并具有方形角。 您不必使其大于屏幕宽度,而是将其放入UIView中并使用它来剪裁端点。

另一方面,只需在UIControl内部使用一组自定义UIButtons创建自己的分段控件即可。


决定选择10像素版本,因为您没有多余的段和索引。 - Joseph
2个问题:1)如何使用UIView裁剪末端。2)如何使用UIButtons在UIControl内部制作自己的分段控件。 - ladookie
1
@ladookie 1)使控件比父视图更宽,设置父视图的 clipsToBounds 属性;2)创建一个 UIControl 的子类,包含一个 UIButton 数组,并使用这些按钮实现 UISegmentedControl 的方法(只用到需要的),从而使您的子类除了圆角外,以与 UISegmentedControl 相同的方式运行。 - progrmr

6

在界面构建器中实现此功能的另一种方法:

将UIView对象拖到您的UIViewController中,这可能是您的UIView的子视图。

将UISegmentedControl作为UIView的子视图拖动。分段控件现在应该缩进在您的列表UIViewController对象中。(见下面的截图)。

调整SegementedControl的大小,使其框架超出您的UIView对象的边界。在我的情况下,我将SegementedControl的框架设置为X = -10,并将SegementedControl的宽度增加了+20,以使分段控制的总宽度比UIView对象大20。(希望下面的屏幕截图有所帮助)。

我还调整了UIView对象和SegmentedControl的以下设置: UIView:选中“剪辑子视图”,取消选中“自动调整子视图”。 SegementedControl:取消选中“剪辑子视图”,取消选中“自动调整子视图”。

enter image description here


1
这个解决方案干净简洁,非常适用于恰好有两个相等大小的段的情况。 - northernman
非常简单的解决方案,而且如果是通过编程方式创建的话也可以使用 - 所以对于这个绝妙的想法表示赞赏! - Jack Solomon

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接