トップ «前の日記(2012-02-10) 最新 次の日記(2012-02-13)» 編集

Cocoa練習帳

iOS/iPhone/iPad/watchOS/tvOS/MacOSX/Android プログラミング, Objective-C, Cocoa, Swiftなど

2012|01|02|03|04|05|06|07|08|09|10|11|12|
2013|01|02|03|04|05|06|07|08|09|10|11|12|
2014|01|02|03|04|05|06|07|08|09|10|11|12|
2015|01|02|03|04|05|06|07|08|09|10|11|12|
2016|01|02|03|04|05|06|07|08|09|10|11|12|
2017|01|02|03|04|05|06|07|08|09|10|11|12|
2018|01|02|03|04|05|06|07|08|09|10|11|12|
2019|01|02|03|04|05|06|07|08|09|10|11|12|
2020|01|02|03|04|05|06|07|08|09|10|11|12|
2021|01|02|03|04|05|06|07|08|09|10|11|12|
2022|01|02|03|04|05|06|07|08|09|10|11|12|
2023|01|02|03|04|05|06|07|08|09|10|11|12|
2024|01|02|

2012-02-12 [iOS]項目を選択する

複数の表示項目(テキストのラベルや画像etc)がある場合、そのどれが有効で、どれが無効なのかを選択するUIはどう実現できるのだろうか?
iPhoneらしいのは、別の設定画面があって、そこで項目をスイッチでOn/Offする。
画面遷移が煩わしくないか。
表示画面そのもので、On/Offを選択する。
良さそうだ。だが、チェック的なモノがあるのも煩わしくないか。
今回は、項目の表示状態からOn/Offが選択できるUIを実験してみた。

項目が選択されたら表示を変更したいのなら、ユーザー操作、つまり、イベントを取得できるようにしないといけない。
今回は、画像とラベルの選択を実践してみたが、こららのビューを管理するビュー・コントローラでイベントを取得する方法と、個々のビューのサブクラスを作成して、そのサブクラスでイベントを取得する方法に二通りが考えられる。
ビュー・コントローラで対応する方法だと、新たにサブクラスを作成する手間が減るが、ユーザーの操作に対して、どのビューが対象なのかを判断しないといけないが、サブクラスを作成する方法は、その判断が不要となる。
そこで、今回の実験では、サブクラスを作成する方法を選択した。

プロジェクトにQuartzCore.frameworkを追加する。

QuartzCore.framework

画面のビュー・コントローラに画像とラベルを追加する(下図の赤丸)。

ViewController

そして、それぞれのクラスをカスタムクラス(MyImageViewとMyLabel)に変更する。

CustomClass

MyImageViewの選択処理のコードは以下のとおり。

- (void)awakeFromNib
{
    self.selected = NO;
     
    self.layer.masksToBounds = YES;
    self.layer.cornerRadius = 4.0f;
     
    self.layer.borderWidth = 3.0f;
    self.layer.borderColor = [[UIColor grayColor] CGColor];
}
 
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    [self toggleSwitch];
}
 
- (void)toggleSwitch
{
    if (self.selected) {
        self.selected = NO;
        self.layer.borderColor = [[UIColor grayColor] CGColor];
    }
    else {
        self.selected = YES;
        self.layer.borderColor = [[UIColor blueColor] CGColor];
    }
}

MyLabelの選択処理のコードは以下のとおり。

- (void)awakeFromNib
{
    self.selected = NO;
    self.textColor = [UIColor grayColor];
}
 
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    [self toggleSwitch];
}
 
- (void)toggleSwitch
{
    if (self.selected) {
        self.selected = NO;
        self.textColor = [UIColor grayColor];
    }
    else {
        self.selected = YES;
        self.textColor = [UIColor blueColor];
    }
}

実行。

Run

_ 関連情報

User Experience Coding How-To's
iOS Developer Libraryの情報です。
本日のツッコミ(全1件) [ツッコミを入れる]
_ eien (2012-02-13 20:37)

タッチする位置間違いもあるので、touchsBeganよりかtouchesEndedのほうが私は好きなんですが、どうでしょう。 <br> <br>あと最近はUIGestureRecognizerを使えるのでこのためだけにサブクラスを作るよりもUIGestureRecognizerをアタッチしたほうが圧倒的に楽です。


トップ «前の日記(2012-02-10) 最新 次の日記(2012-02-13)» 編集