ios6制作扁平化的segmentedControl(仿iOS7风格)

Sian

先上效果图：

像 UISegmentControl 通过自定义或者第三方控件，很容易实现 iOS6 和 iOS7 一致风格，如果你就想用系统的控件让 iOS6 实现 iOS7 的风格也不是没有办法。我们可以设置 segment 部分选中状态和非选中状态下的背景图片，segment 之间的分割线图片。因为 iOS6 上 UISegmentControl 的 title 字体比 iOS7 上大，也可以一并做一下修改：
1、通过appearance修改属性

1.         
2.         UISegmentedControl *seg = [UISegmentedControl appearance];
3.         
4.         // 默认状态
5.         UIImage *normal = [UIImage imageNamed:@"image_RMSegmented_background_normal.png"];
6.         [seg setBackgroundImage:normal forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
8.         // 选择状态
9.         UIImage *selected = [UIImage imageNamed:@"image_RMSegmented_background_selected.png"];
10.         [seg setBackgroundImage:selected forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];
11.         
12.         // 高亮状态
13.         UIImage *highlight = [UIImage imageNamed:@"image_RMSegmented_background_highlight.png"];
14.         [seg setBackgroundImage:highlight forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];
15.         
16.         // 中分隔线
17.         [seg setDividerImage:selected forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateSelected barMetrics:UIBarMetricsDefault];
18.         
19.         // 文字属性
20.         [seg setTitleTextAttributes:@{ UITextAttributeTextColor: kBlueColor, UITextAttributeFont: [UIFont systemFontOfSize:14], UITextAttributeTextShadowOffset: [NSValue valueWithUIOffset:UIOffsetMake(0, 0)] } forState:UIControlStateNormal];
21.         [seg setTitleTextAttributes:@{ UITextAttributeTextColor: [UIColor whiteColor], UITextAttributeFont: [UIFont systemFontOfSize:14], UITextAttributeTextShadowOffset: [NSValue valueWithUIOffset:UIOffsetZero]} forState:UIControlStateSelected];

复制代码

2、设置圆角属性

1.     <span style="background-color: rgb(255, 255, 255);">segment</span>.layer.cornerRadius = 4.0f;
2.     <span style="background-color: rgb(255, 255, 255);">segment</span>.layer.masksToBounds = YES;
3.     <span style="background-color: rgb(255, 255, 255);">segment</span>.layer.borderWidth = 1.0f;
4.     <span style="background-color: rgb(255, 255, 255);">segment</span>.layer.borderColor = kBlueColor.CGColor;

复制代码

注意：
1、第1点可以在任何地方实现，只要在创建segment之前能执行就OK
2、第2点设置圆角只能创建segment后再设置才会生效，如果是自定义segment，把该部分代码写在init方法中是不生效的
3、个人建议自定义segment，然后把第二部分在Frame的set方法中实现，如：

1. - (void)setFrame:(CGRect)frame
2. {
3.     [super setFrame:frame];
4.     self.layer.cornerRadius = 4.0f;
5.     self.layer.masksToBounds = YES;
6.     self.layer.borderWidth = 1.0f;
7.     self.layer.borderColor = kBlueColor.CGColor;
8. }

复制代码

附：提供上述使用到的样式图，让你的ios6的segment实现扁平化，高仿ios7风格
image.zip (17.59 KB, 下载次数: 1)

2014-8-9 18:15 上传

点击文件名下载附件
阅读权限: 20


参考链接：http://blog.sina.com.cn/s/blog_605409770101ovdk.html