その後のその後

iOSエンジニア 堤 修一のブログ github.com/shu223

UISegmentedControlで複数セグメントを選択する

UISegmentedControl は複数のセグメントの中からどれか1つを選ぶための UI なので、セグメントごとにOn/Offをトグルさせる、といった使い方はできないわけですが、見た目的にそういう挙動を期待したくなることがあります。


たとえば、TableViewやCollectionViewの要素や、マップのアノテーションの、フィルタリング条件を指定してもらうためのUIとか。


そこで、WLSegmentedControlというOSSを使うと、UISegmentedControl と同じような見た目で、複数セグメント選択ができるようになります。


GitHub - an0/WLSegmentedControls: A custom implementation of UISegmentedControl with multiple-selection and vertical layout support.


こんな感じです。



UISegmentedControlのサブクラスとして実装されてるわけではなく、UIControlをベースに、見た目がiOS7のUISegmentedControlっぽくなるように実装されています。

使い方

ビュー生成:

NSArray *items = @[@"item1", @"item2", @"item3", @"item4"];
self.segmentedCtl = [[WLHorizontalSegmentedControl alloc] initWithItems:items];
self.segmentedCtl.allowsMultiSelection = YES;
[self.segmentedCtl addTarget:self
                      action:@selector(segmentChanged:)
            forControlEvents:UIControlEventValueChanged];
[self.view addSubview:self.segmentedCtl];

メソッド名などでやってることは一目瞭然だと思うので、説明は割愛します。

各セグメントの選択状態を指定する

WLSegmentedControl は、NSIndexSet という、複数のインデックス要素を格納するコレクションクラスを利用してつくられています。


選択状態をセットするときは、NSIndexSetオブジェクトを生成して、 setSelectedSegmentIndice: メソッドでセットします。

NSIndexSet *indexSet = [[NSIndexSet alloc] initWithIndexesInRange:NSMakeRange(0, 4)];
[self.segmentedCtl setSelectedSegmentIndice:indexSet];

あまりよくないところ

  • メンテされてない(2014年3月現在、3ヶ月以上前から更新なし)
  • 見た目のカスタマイズ性に乏しい
    • フォントとか。
  • ソースがあまり奇麗ではない
  • CocoaPods非対応
  • プロジェクトに追加すべきクラスファイルだけフォルダにわける、といった配慮もされてない
  • IBで配置できるようにつくられてない

こんな感じで、OSSとしては積極的におすすめできるものではありませんが、pull requestしたり、参考にしつつ自分なりに新たにつくるなどすると良さそうです。