UIButton の底(bottom) だけ境界線を太くする

やること

  • 甲. UIButton の境界線太さを設定しました
  • 乙. 底(bottom) の境界線だけ更に微調整で太くしたくなりました
    • (立体的な影をつけるイメージ)

乙. を実現する

f:id:mat5ukawa:20150524152448j:plain

前提

登場人物

  • CustomButtonsViewController(.xib | .h | .m)

内部処理

xib

f:id:mat5ukawa:20150524152532p:plain

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

参考

stackoverflow.com


割合を加算に使うってどうなん(自己叱責)

もう少し努力を