Skip to content

Latest commit

History

13 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

ToggleView

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

ToggleViewの主な要素は、

  • ToggleView
  • ToggleButton
  • ToggleBase

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

##ToggleViewのタイプ ToggleViewのタイプは現在、2種類用意しています。 引数の**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 optionNSString *constTOGGLE_BASE_IMAGE_L = @"toggle_base_l.png";
NSString *constTOGGLE_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 optionNSString *constTOGGLE_BUTTON_IMAGE_L = @"toggle_button_l.png";
NSString *constTOGGLE_BUTTON_IMAGE_R = @"toggle_button_r.png";

##ToggleViewDelegateメソッドの実装

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

SampleViewController.h

#import"ToggleView.h"@interfaceSampleViewController : 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:
[selfonLeftButton:nil];
break;
case ToggleButtonSelectedRight:
[selfonRightButton:nil];
break;
default:
break;
}
}

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

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

toggleView_design2

About

original toggle button

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Contributors