Oval button

14
iOSで丸いボタン」 Satoshi Yamada 12825日土曜日

description

 

Transcript of Oval button

Page 1: Oval button

「iOSで丸いボタン」Satoshi Yamada

12年8月25日土曜日

Page 2: Oval button

丸いボタンが独立して存在している場合

12年8月25日土曜日

Page 3: Oval button

丸いボタンが独立して存在している場合

四角いUIButton + 周りが透明な画像でも、問題にならない。

12年8月25日土曜日

Page 4: Oval button

複数の丸いボタンが隣接して存在している場合

12年8月25日土曜日

Page 5: Oval button

複数の丸いボタンが隣接して存在している場合

四角いUIButton + 周りが透明な画像だと反応エリアが重なり合い、タップしたのと別のボタンが反応

する場合も発生する

12年8月25日土曜日

Page 6: Oval button

複数の丸いボタンが隣接して存在している場合

反応エリアを重なり合わないようにしたい。

12年8月25日土曜日

Page 7: Oval button

1. 反応する領域を定義

2. タップした位置が定義した領域に入っているか判定

3. 領域に入っていればタップを受け入れ、入っていなければイベントを他のオブジェクトへ

必要な処理

12年8月25日土曜日

Page 8: Oval button

UIBezierPath

+ (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect

Creates and returns a new UIBezierPath object initialized with an oval path inscribed in the specified rectangle.

1. 反応する領域を定義

12年8月25日土曜日

Page 9: Oval button

UIBezierPath

- (BOOL)containsPoint:(CGPoint)point

Returns a Boolean value indicating whether the area enclosed by the receiver contains the specified point.

2. タップした位置が定義した領域に入っているか判定

12年8月25日土曜日

Page 10: Oval button

UIView

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event

Returns the farthest descendant of the receiver in the view hierarchy (including itself) that contains a specified point.

3. タップイベント受け入れ

12年8月25日土曜日

Page 11: Oval button

demo

12年8月25日土曜日

Page 12: Oval button

問題点

 丸以外は?

12年8月25日土曜日

Page 13: Oval button

タップした点のアルファ値を見れば汎用的に使えるのではないか

12年8月25日土曜日

Page 14: Oval button

demo

12年8月25日土曜日