iOS开源:SegmentedControl-可以自定义设置 UI 的 Segmented Control
DanielBogen
8年前
<p>这是我近期完成的一个项目,目前还在寻找那些没有被我发现的 BUG。</p> <p>YUSegment 是一个可以自定义设置 UI 的 Segmented Control,尽可能保留了原生 UISegmentedControl 的接口。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/8b247ff83fbf8bbb63170858187fc619.gif"></p> <p>demo.gif</p> <h2>Features</h2> <ul> <li>支持 (Attributed)text 和 image</li> <li>有两种(线形和圆角矩形的指示器)不同的样式可以选择</li> <li>支持横向滚动</li> <li>需要 iOS 8.0+,支持 ARC</li> </ul> <h2>Installation</h2> <h3>Cocoapods</h3> <ol> <li>在 Podfile 中添加 pod 'YUSegment'</li> <li>执行 pod install 命令</li> <li>导入头文件 #import "YUSegment.h"</li> </ol> <h2>Usage</h2> <p>可以通过 storyboard 和 纯代码的方式创建一个 YUSegment。</p> <h3>Code(推荐)</h3> <pre> <code class="language-objectivec">NSArray *titles = @[@"Left", @"Medium", @"Right"]; YUSegment *segment = [[YUSegment alloc] initWithTitles:titles]; [self.view addSubview:segment]; segment.frame = (CGRect){20, 60, [UIScreen mainScreen].bounds.size.width - 40, 44};</code></pre> <h3>Storyboard</h3> <ol> <li>从 Object Library 拖拽一个 "UIView" 到 storyboard.</li> <li style="text-align:center">修改 view 的位置和大小<br> <img src="https://simg.open-open.com/show/60e7d76b377ed27bb81dc341d55c91eb.png"> <p>storyboard2.png</p> </li> <li style="text-align:center">在 Identify Inspector 中将 class 修改为 YUSegment,然后建立一个 outlet。<br> <img src="https://simg.open-open.com/show/336606af7cf22ead7a74d57ea8d9c02e.png"> <p>storyboard1.png</p> <pre style="text-align:left"> <code class="language-objectivec">@property (weak, nonatomic) IBOutlet YUSegment *segment;</code></pre> </li> <li style="text-align:center">你可以在 Attributes Inspector 修改其他的属性。<br> <img src="https://simg.open-open.com/show/b4fc3497af7ce129525e2bd8f1dec109.png"> <p>storyboard3.png</p> </li> </ol> <h2>APIs</h2> <h3>Target-Action</h3> <p>和 UISegmentedControl 类似,你只需要使用以下的代码:</p> <pre> <code class="language-objectivec">[segment addTarget:self action:@selector(someMethod) forControlEvents:UIControlEventValueChanged];</code></pre> <h3>Attributed Text</h3> <p>YUSegment 没有实例方法能够直接将一个 attributed string 作为参数,你需要通过 -setTitleTextAttributes:forState: 方法来设置 attributed string。</p> <pre> <code class="language-objectivec">NSDictionary *attributes = @{NSFontAttributeName : [UIFont systemFontOfSize:20]}; [segment setTitleTextAttributes:attributes forState:YUSegmentedControlStateNormal];</code></pre> <h3>Layer</h3> <p>你可以在 Attributes Inspector 设置 borderColor , borderWidth , cornerRadius 等属性,如果通过代码的方式来设置这些属性,可以想下面这样:</p> <pre> <code class="language-objectivec">segment.layer.borderWidth = someValue; segment.layer.borderColor = someValue;</code></pre> <p>需要注意的是:你需要通过 cornerRadius 而不是 layer.cornerRadius 来设置圆角,因为前者会自动为指示器设置上圆角。</p> <pre> <code class="language-objectivec">segment.cornerRadius = someValue;</code></pre> <h3>Scrolling Enabled</h3> <p>YUSegment 没有类似 scrollEnabled 的属性,如果你要使 segmented control 能够横向滚动,你需要设置 segmentWidth 的值,该属性能够自动使 segmented control 支持横向滚动。</p> <p> </p> <p> </p>