※本記事は、旧ブログからの再掲です。
UIButtonに影を付けると立体的に見え、さらにボタンを押した時に少し動くようにすると本当にボタンを押した感覚になります。
今回は背景色を青にしているので、UIButtonTypeCustomを指定しプログラムで角を丸くしています。そのためには、CALayerのcornerRadiusプロパティに角丸の半径を設定します。
（<QuartzCore/CALayer.h>のインポートが必要です）
ボタンに影を付けるには、CALayerのshadowOpacityプロパティに影の透明度(0.00～1.00)、shadowOffsetプロパティに影の表示位置を設定します。
このとき、masksToBoundsプロパティをYESに設定しているときちんと影が表示されません。
ボタンを押下したときにボタンが動くようにするには、ボタンへのイベントを検出し、そのタイミングでボタンを動かす処理を行います。
addTarget:action:forControlEvents:メソッドを使用し、タッチを検出したときに呼び出してもらうメソッドを登録します。
イベントの種類はいくつもありますが、今回は以下の2つを使用します。
・UIControlEventTouchDown：ボタン押下時
・UIControlEventTouchUpInside：ボタンから押している指が離れた時
ボタン押下時呼び出されるメソッド(myBtnTouchDown:)では、ボタンを1px分右下に動かし、
押している指が離れた時に呼び出されるメソッド(myBtnTouchUpInside)では、動かした1px分を元に戻しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
#import <QuartzCore/CALayer.h> - (void)viewDidLoad { ： 略 ： // ボタンの設定 UIButton *myBtn = [UIButton buttonWithType:UIButtonTypeCustom]; [myBtn setTitle:@"ボタン" forState:UIControlStateNormal]; myBtn.frame = CGRectMake(0, 0, 100, 25); [myBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; [myBtn setBackgroundColor:[UIColor blueColor]]; [myBtn setTitleEdgeInsets:UIEdgeInsetsMake(0, 5, 0, 5)]; [myBtn.titleLabel setFont:[UIFont boldSystemFontOfSize:10]]; [myBtn.layer setBorderColor:[[UIColor blueColor] CGColor]]; [myBtn.layer setBorderWidth:1.0f]; // [myBtn.layer setMasksToBounds:YES]; [myBtn.layer setCornerRadius:5.0f]; [myBtn.layer setShadowOpacity:0.5f]; [myBtn.layer setShadowOffset:CGSizeMake(2, 2)]; [myBtn addTarget:self action:@selector(myBtnTouchDown:) forControlEvents:UIControlEventTouchDown]; [myBtn addTarget:self action:@selector(myBtnTouchUpInside:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:myBtn]; ： 略 ： } /* * ボタン押下時にボタンを下に少しずらす */ - (void)myBtnTouchDown:(id)sender { UIButton *btnView = (UIButton *)sender; btnView.layer.frame = CGRectMake(btnView.layer.frame.origin.x+1, btnView.layer.frame.origin.y+1, btnView.frame.size.width, btnView.frame.size.height); } /* * ボタンを押し離した時にボタンを元に戻す */ - (void)myBtnTouchUpInside:(id)sender { UIButton *btnView = (UIButton *)sender; btnView.layer.frame = CGRectMake(btnView.layer.frame.origin.x-1, btnView.layer.frame.origin.y-1, btnView.frame.size.width, btnView.frame.size.height); } |
＜おすすめの書籍＞
私がUIKitを使用する時に一番お世話になった本です。とても分かりやすいので初心者の方にもオススメです。