iOS开源:SegmentedControl-可以自定义设置 UI 的 Segmented Control

DanielBogen 7年前
   <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>