ToggleView 0.0.1

ToggleView 0.0.1

×

TestsTested ✗
LangLanguage Obj-CObjective C
License MIT
ReleasedLast Release Dec 2014

Maintained by Unclaimed.

ToggleView 0.0.1

  • By
  • SOMTD

ToggleView is easy-to-use original toggle button.
(see sample Xcode project in /Sample) toggleView_design1

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;
    }
}

デザイン上の注意点

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

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

toggleView_design2