オリジナルデザインのトグル・スイッチをいとも簡単に作れる「ToggleView」をつくってみた。 #iOS

あけましておめでとうございます。
昨年の暮れにちょこちょこと手をいれていたUIコンポーネントを紹介します。

標準UIでは満足できない方へ

標準のスイッチのデザインではどうしてもアプリの雰囲気に合わない時ってありますよね。
実際、仕事の中でも、やはりトグル・スイッチのUIはデザイン変えて欲しいという話がちらほら。

一度作ってしまえばそこまで複雑なものではないのですが、いい機会だったので
ほぼ汎用的に使えるようにUIコンポーネントとしてまとめてみました。

こちらにリポジトリがありますので、まずはサンプルから解説していきます。

ToggleViewの主な要素は、

ToggleView
ToggleButton
ToggleBase

となっており、ToggleViewがToggleBaseというボタンが移動する範囲の背景画像をもつビューと、ToggleBaseの上を左右いったり来たりするToggleButtonというボタンのビューからなりたっています。
ToggleBase、ToggleButtonそれぞれデザインを自由に入れられるようになっています。

ToggleViewのタイプ

ToggleViewのタイプは現在、２種類用意しています。
引数のtoggleViewType:を変更することで簡単に設定可能です。

toggleViewType:ToggleViewTypeWithLabel:ToggleViewの左右にタップ可能なラベルがついているタイプ

toggleViewWithLabel = [[ToggleView alloc]initWithFrame:frame toggleViewType:ToggleViewTypeWithLabel toggleBaseType:ToggleBaseTypeDefault toggleButtonType:ToggleButtonTypeDefault];
toggleViewWithLabel.toggleDelegate = self;

toggleViewType:ToggleViewTypeNoLabel:ToggleViewの左右にラベルがついていないタイプ

toggleViewWithoutLabel = [[ToggleView alloc]initWithFrame:frame toggleViewType:ToggleViewTypeNoLabel toggleBaseType:ToggleBaseTypeDefault toggleButtonType:ToggleButtonTypeDefault];  
toggleViewWithoutLabel.toggleDelegate = self;

ToggleBase（トグル・スイッチの背景）のタイプ

トグル・スイッチの背景を選択している状態に合わせて変更することができます。引数のtoggleBaseType:を変更することで簡単に設定可能です。

toggleBaseType:ToggleBaseTypeChangeImage:ToggleViewの選択状態に応じて背景画像が変わるタイプ

toggleViewBaseChange = [[ToggleView alloc]initWithFrame:frame toggleViewType:ToggleViewTypeNoLabel toggleBaseType:ToggleBaseTypeChangeImage toggleButtonType:ToggleButtonTypeDefault];
toggleViewBaseChange.toggleDelegate = self;

背景画像はToggleBase.mの下記のファイル名を置き換えてください。

//change base image option
NSString *const TOGGLE_BASE_IMAGE_L     = @"toggle_base_l.png";
NSString *const TOGGLE_BASE_IMAGE_R     = @"toggle_base_r.png";

ToggleBase（トグル・スイッチのボタン）のタイプ

トグル・スイッチのボタンを選択している状態に合わせて変更することができます。引数のtoggleButtonType:を変更することで簡単に設定可能です。

toggleButtonType:ToggleButtonTypeChangeImage:ToggleViewの選択状態に応じて背景画像が変わるタイプ

toggleViewButtonChange = [[ToggleView alloc]initWithFrame:frame toggleViewType:ToggleViewTypeNoLabel toggleBaseType:ToggleBaseTypeDefault toggleButtonType:ToggleButtonTypeChangeImage];
toggleViewButtonChange.toggleDelegate = self;

ボタン画像はToggleButton.mの下記のファイル名を置き換えてください。

//change button image option
NSString *const TOGGLE_BUTTON_IMAGE_L    = @"toggle_button_l.png";
NSString *const TOGGLE_BUTTON_IMAGE_R    = @"toggle_button_r.png";

ToggleViewDelegateメソッドの実装

デリゲートというほどでもないですが、 ToggleView側でボタンを切り替える毎にSampleViewController側でも状態の切り替えを受け取るようになってます。

SampleViewController.h

#import "ToggleView.h"
@interface SampleViewController : UIViewController <ToggleViewDelegate>

SampleViewController.m

#pragma mark - ToggleViewDelegate

- (void)selectLeftButton
{
    NSLog(@"LeftButton Selected");
}

- (void)selectRightButton
{
    NSLog(@"RightButton Selected");
}

TogleViewのプロパティ

プロパティに関しては最低限、トグル・スイッチの選択のみ用意しています。

ToggleView.h

@property (nonatomic) ToggleButtonSelected selectedButton;

選択状態を外部からも変更できるように実装しています。

ToggleView.m

- (void)setSelectedButton:(ToggleButtonSelected)selectedButton
{
    switch (selectedButton) {
        case ToggleButtonSelectedLeft:
            [self onLeftButton:nil];
            break;
        case ToggleButtonSelectedRight:
            [self onRightButton:nil];
            break;
        default:
            break;
    }
}

デザイン上の注意点

サンプルで表示されているデザインのようにトグル・スイッチの背景の外形とボタンの外形にマージンをとるためには、ボタンのデザイン部分に下図のように透明部分を作ってあげる必要があります。

背景の外形とスイッチの外形をピッタリにしたい場合はこの限りではありません。

まとめ

今回はじめてUIコンポーネントを公開してみました。使い勝手の面ではまだまだ未熟な部分があると思いますので、「ここイマイチやなー」という部分にはPull reqestお待ちしております。
https://github.com/somtd/ToggleView

簡単にオリジナルのトグル・スイッチを作ってみたいと思っていた人は是非一度試しに使ってみて下さい。