UIButton の底(bottom) だけ境界線を太くする
やること
- 甲. UIButton の境界線太さを設定しました
- 乙. 底(bottom) の境界線だけ更に微調整で太くしたくなりました
- (立体的な影をつけるイメージ)
乙. を実現する
前提
登場人物
- CustomButtonsViewController(.xib | .h | .m)
内部処理
xib
h
#import <UIKit/UIKit.h> @interface CustomButtonsViewController : UIViewController @end
m
#import "CustomButtonsViewController.h" @interface CustomButtonsViewController () // アウトレット接続する @property (weak, nonatomic) IBOutlet UIView *viewButtons; @end @implementation CustomButtonsViewController // ボタンの境界線 // 太さ static const CGFloat BUTTON_BORDER_WIDTH = 1.2f; // 丸み強度 static const CGFloat BUTTON_CORNER_RADIUS = 6.0f; // bottom 境界線 // 丸め強度の割合 static const CGFloat RATIO_BEND_LAYER_COERNER = 1.5f; #pragma mark - support methods - (UIColor *)createColorWithRed:(CGFloat)red green:(CGFloat)green blue:(CGFloat)blue alpha:(CGFloat)alpha { return [UIColor colorWithRed:red / 255.0 green:green / 255.0 blue:blue / 255.0 alpha:alpha]; } #pragma mark - lifecycle methods - (void)viewDidLoad { [super viewDidLoad]; // メインボタンのインスタンスを取得する UIButton *mainButton = (UIButton *)self.viewButtons.subviews[0]; // ボタン境界線の色は 青紫 (r,g,b) = (116,69,170) mainButton.layer.borderColor = [[self createColorWithRed:116 green:69 blue:170 alpha:1.0] CGColor]; // ボタン境界線 // 太さ = 四方均一 = BUTTON_BORDER_WIDTH // 丸み = 四方均一 = BUTTON_CORNER_RADIUS mainButton.layer.borderWidth = BUTTON_BORDER_WIDTH; mainButton.layer.cornerRadius = BUTTON_CORNER_RADIUS; // bottom 境界線 // 開始点 // X 座標 = ボタン の X座標 左端 // Y 座標 = ボタン の Y座標 最底辺 // 幅 = ボタンの幅 + bottom 境界線丸め強度の割合 // 高さ = ボタン境界線の太さ // ---- // 太さを調整したいとき // 高さを調整する -> (BUTTON_BORDER_WIDTH * 1.5f) など // 太さを調整したら // bottom 境界線 丸め強度の割合を調整する -> 1.6f など CALayer *bottomBorder = [CALayer layer]; bottomBorder.frame = CGRectMake(0, mainButton.frame.size.height, mainButton.frame.size.width + RATIO_BEND_LAYER_COERNER, BUTTON_BORDER_WIDTH); // bottom 境界線の色は 青紫 (r,g,b) = (116,69,170) bottomBorder.backgroundColor = [[self createColorWithRed:116 green:69 blue:170 alpha:1.0] CGColor]; // bottom 境界線を曲げる bottomBorder.cornerRadius = BUTTON_CORNER_RADIUS * RATIO_BEND_LAYER_COERNER; // bottom 境界線 を ボタン境界線に付与する [mainButton.layer addSublayer:bottomBorder]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; } @end
参考
割合を加算に使うってどうなん(自己叱責)
もう少し努力を