[iOS UI] 透明なボタンの押した感じをお手軽に表現する UIButton のカスタムクラス

透明なボタンとは？

この記事で内での透明なボタンとは、背景色がclearColorのボタンのことです。

やりたいこと

• Viewのまとまりを一つのボタンとして扱いたいような時に、View全体で押した感じを表現したい。
• 汎用的に使えるクラスを作っておきたい

実装

#import <UIKit/UIKit.h>

@interface TransparentButton : UIButton

@end

#import "TransparentButton.h"

@implementation TransparentButton

- (void)setHighlighted:(BOOL)highlighted
{
    [super setHighlighted:highlighted];
    if (highlighted) {
        self.backgroundColor = [self.tintColor colorWithAlphaComponent:0.1];
    } else {
        [UIView transitionWithView:self
                          duration:0.2
                           options:UIViewAnimationOptionCurveEaseOut
                        animations:^{
                            self.backgroundColor = [UIColor clearColor];
                        } completion:nil];
    }
}

@end

まず、UIButtonを継承したクラスを作ります。ボタンの押した感じを表現したいので、ボタンをタップした時とボタンから指が離れたことがわかる- (void)setHighlighted:(BOOL)highlighted; をオーバーライドして処理を記述します。

ボタンをタップした時にhighlighted = YES、ボタンから指が離れた時にhighlighted = NOになるので、それぞれのタイミングで、透明なボタンの背景色を操作しています。

ボタンタップ時

９行目では、[self.tintColor colorWithAlphaComponent:0.1]でボタンの背景色に指定されているtintColorの10%の透明度の色をセットしています。

今回は、Interface BuilderでtintColorを指定してその色を使いたかったのでこのようにしています。

ボタンから指が離れた時

ボタンタップ時に透明なボタンの背景色を変えてしまったので、ボタンから指が離れた時には背景色を透明に戻してあげる必要があります。単純にボタンの背景色を透明にするだけであればself.backgroundColor = [UIColor clearColor]だけでいいのですが、iOSっぽくふわっと色が消えて欲しかったので１１行目からの処理でアニメーションしています。

使い方

任意の場所にボタンを配置した後にCustom ClassにTransparentButtonを指定します。このボタンに対して、ボタンをタップした時に使用したい色をtintColorに指定しておきます。

これで透明なボタンをタップしたときに、押した感じを表現することができるようになります。

とっても簡単なので、好みの設定にカスタマイズしておためしください。