iOSでマテリアルデザインのようなタブが作れるHMSegmentedControl

今回はSegmentedControlがタブのような見た目になるOSSをご紹介します。 タブ自体のデザインがマテリアルデザインっぽいので ^*1、 iOSとAndroid、両方リリースするようなアプリで使えるのかなと思います。(感想)

下記画像はTabs - Components - Google design guidelinesppからお借りしたものです。

こんな感じの雰囲気を目指してみます。

環境

今回は下記で試してます。

また、Objectice-cでコードを書いてます。

インストール方法

新規でプロジェクトを作った後、（プロジェクトテンプレートはSingleViewApplicationでOKです） CocoaPods で

pod 'HMSegmentedControl'

pod installでインストール完了です。

実装サンプル

Storyboard

Storyboardは以下のような感じで配置してみました。赤い枠で囲っている部分に'HMSegmentedControl'を追加します。 'HMSegmentedControl'はコード上で追加するため、配置場所の確保な感じになります。

code

Storyboard上に配置したタブを配置するViewとScrollViewをOutletで接続しておきます。

ViewController.m

#import "ViewController.h"
#import "HMSegmentedControl.h"

@interface ViewController () <UIScrollViewDelegate>
// 画面上部のView
@property (weak, nonatomic) IBOutlet UIView *headerView;
// スクロールエリア
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
// タブ型segmentedControl
@property (nonatomic, strong) HMSegmentedControl *segmentedControl;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    CGFloat scrollWidth = self.view.frame.size.width;
    CGFloat scrollHeight = self.view.frame.size.height - self.headerView.frame.size.height;
    
    // 画面上部のViewのサイズにあわせて生成する
    self.segmentedControl = [[HMSegmentedControl alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.headerView.frame.size.height)];
    // タブのタイトルを設定
    self.segmentedControl.sectionTitles = @[@"ITEM ONE",@"ITEM TWO",@"ITEM THREE"];
    // 最初の選択状態を設定
    self.segmentedControl.selectedSegmentIndex = 0;
    // 非選択状態の背景色を設定
    self.segmentedControl.backgroundColor = [UIColor colorWithRed:0.15 green:0.69 blue:0.79 alpha:1.0];
    // 非選択状態のタイトル文字装飾を設定
    self.segmentedControl.titleTextAttributes = @{NSForegroundColorAttributeName : [UIColor colorWithRed:0.64 green:0.91 blue:0.93 alpha:1.0]};
    // 選択状態のタイトル文字装飾を設定
    self.segmentedControl.selectedTitleTextAttributes = @{NSForegroundColorAttributeName : [UIColor whiteColor]};
    //  Indicatorの色を設定
    self.segmentedControl.selectionIndicatorColor = [UIColor colorWithRed:1.00 green:1.00 blue:0.24 alpha:0.5];
    // 選択状態のスタイルを設定
    self.segmentedControl.selectionStyle = HMSegmentedControlSelectionStyleBox;
    // Indicatorの位置を設定
    self.segmentedControl.selectionIndicatorLocation = HMSegmentedControlSelectionIndicatorLocationDown;
    
    __weak typeof(self) weakSelf = self;
    [self.segmentedControl setIndexChangeBlock:^(NSInteger index) {
        [weakSelf.scrollView scrollRectToVisible:CGRectMake(scrollWidth * index, 0, scrollWidth, 200) animated:YES];
    }];
    
    [self.headerView addSubview:self.segmentedControl];
    
	// スクロール用のコンテンツを生成（色付きのViewを作成する）
    self.scrollView.pagingEnabled = YES;
    self.scrollView.showsHorizontalScrollIndicator = NO;
    self.scrollView.contentSize = CGSizeMake(scrollWidth * 3, scrollHeight);
    self.scrollView.delegate = self;
    
    UIView *page1view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, scrollWidth, scrollHeight)];
    page1view.backgroundColor = [UIColor colorWithRed:0.94 green:0.38 blue:0.57 alpha:1.0];
    [self.scrollView addSubview:page1view];
    
    UIView *page2view = [[UIView alloc] initWithFrame:CGRectMake(scrollWidth, 0, scrollWidth, scrollHeight)];
    page2view.backgroundColor = [UIColor colorWithRed:0.47 green:0.53 blue:0.80 alpha:1.0];
     [self.scrollView addSubview:page2view];
    
    UIView *page3view = [[UIView alloc] initWithFrame:CGRectMake(scrollWidth * 2, 0, scrollWidth, scrollHeight)];
    page3view.backgroundColor = [UIColor colorWithRed:1.00 green:0.72 blue:0.30 alpha:1.0];
     [self.scrollView addSubview:page3view];
    
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}
@end

プロパティ

主に使われそうなものをまとめてみました。

selectionStyle

選択状態のスタイルは以下から選択します。

HMSegmentedControlSelectionStyleTextWidthStripe	文字の長さ
HMSegmentedControlSelectionStyleFullWidthStripe	タブの長さ
HMSegmentedControlSelectionStyleBox	Box型
HMSegmentedControlSelectionStyleArrow	さんかく

selectionIndicatorLocation

Indicatorの位置は以下から選択します

HMSegmentedControlSelectionIndicatorLocationUp	上
HMSegmentedControlSelectionIndicatorLocationDown	下
HMSegmentedControlSelectionIndicatorLocationNone	無し

実行結果

シミュレーターで実行してみました。

脚注