だいたいそれでいいんじゃないの

つれつれなるkixixixixiの技術的なストック。http://reload.co.jp

UIViewだけでフラットなボタンをつくろう

iOSアプリでは、PhotoshopなどでボタンをつくってUIImageViewやUIButtonでボタンを表示することがあると思います。

フラットなボタンだったらわざわざ画像を作る方がめんどい!なんてことがあったので簡単なボタンをUIImageViewもしくはUIViewでつくる方法をまとめました。

 

「戻る」と表示されるだけの簡単なボタンです。色は適当。

もともと画像で設置していたボタンなのでUIImageViewです。

こんな感じ

f:id:kixixixixi:20140524150719p:plain

コードはこちら。

UIImageView *backBtn = [[UIImageViewalloc]init];

    backBtn.backgroundColor = [UIColor colorWithRed:1.0 green:0.5 blue:0 alpha:1.0];

    backBtn.frame = CGRectMake(60, self.view.frame.size.height -200, 200, 60);

    backBtn.layer.cornerRadius = 10;

    backBtn.clipsToBounds = YES;

    backBtn.tag = 101;

    backBtn.userInteractionEnabled = YES;

    [backBtn addGestureRecognizer:[[UITapGestureRecognizeralloc]initWithTarget:selfaction:@selector(tapAction:)]];

    

    UILabel *btnLabel = [[UILabel alloc]init];

    btnLabel.backgroundColor = [UIColorclearColor];

    btnLabel.textColor = [UIColor whiteColor];

    btnLabel.font = [UIFont boldSystemFontOfSize:20];

    btnLabel.frame = CGRectMake(0, 0, 200, 60);

    btnLabel.textAlignment = NSTextAlignmentCenter;

    btnLabel.text = @"戻る";

    [backBtn addSubview:btnLabel];

    

    CALayer *border = [CALayer layer];

    border.backgroundColor = [UIColorcolorWithWhite:0alpha:0.4].CGColor;

    border.frame = CGRectMake(0, 56, 200, 4);

    [backBtn.layeraddSublayer:border]; 

 押された時の挙動はtapActionというデリゲートで拾ってます。

(tagでボタンの種類を認識。)

 

角丸にするのと、下にboderを追加することでボタンらしいViewになりますのでご参考までに。

あと、touchBeganなどでタッチ時のイベントでボーダーや位置をアニメーションで変更するとすごくリッチなボタンになりますよ。

 

以上〜。