Skip to content

Latest commit

 

History

History
127 lines (96 loc) · 5.02 KB

README.md

File metadata and controls

127 lines (96 loc) · 5.02 KB
Raw

ToggleView

========== 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