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

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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

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

components_tabs_typesoftabs_mobile1

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

環境

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

項目 バージョン
XCODE 6.3.2
iOS SDK 8.0
HMSegmentedControl v1.5.1

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

インストール方法

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

pod 'HMSegmentedControl'

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

実装サンプル

Storyboard

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

Storyboardはこんな感じ

code

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

#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

プロパティ

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

プロパティ名 説明
type HMSegmentedControlType 'テキスト'or'画像'or'テキストと画像'を設定する
sectionTitles NSArray タブのタイトルを配列で設定する
selectedSegmentIndex NSInteger タブ選択のindex
backgroundColor UIColor タブの背景色
titleTextAttributes NSDictionary 非選択状態のタイトル文字装飾(NSAttributedString)
selectedTitleTextAttributes NSDictionary 選択状態のタイトル文字装飾(NSAttributedString)
selectionIndicatorColor UIColor Indicatorの色
segmentWidthStyle HMSegmentedControlSegmentWidthStyle 横幅のスタイル。(固定or文字の長さ)
selectionStyle HMSegmentedControlSelectionStyle 選択状態のスタイル
selectionIndicatorLocation HMSegmentedControlSelectionIndicatorLocation Indicatorの位置

selectionStyle

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

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

selectionIndicatorLocation

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

HMSegmentedControlSelectionIndicatorLocationUp HMSegmentedControlSelectionIndicatorLocationUp
HMSegmentedControlSelectionIndicatorLocationDown HMSegmentedControlSelectionIndicatorLocationDown
HMSegmentedControlSelectionIndicatorLocationNone 無し HMSegmentedControlSelectionIndicatorLocationNone

実行結果

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

実行結果

脚注

  1. 個人的な主観です