UIButtonのカスタマイズ - ライトON/OFFを制御するボタンを作成してみた

( iOS )

iPhoneについているライトのON/OFFを制御したいのですが、ボタンをそのまま流量できるのかなと思いきや UIImagePickerControllerを利用しないで実装する場合はイベントしか用意されておらずデザインも自分で実装 しないといけないようです。

なので自分なりにそれっぽいのを実装してみました。 （とりあえず手動でon/offで切り替えるUIにしてます）

    // ライトが利用できたら表示
    if (device.torchAvailable == YES) {
        UIButton* toggleLightButton = [UIButton buttonWithType:UIButtonTypeCustom];
        [toggleLightButton setFrame:CGRectMake(30, 120, 100, 55)];
        [toggleLightButton setTitle:@"ON" forState:UIControlStateNormal];

        // レイヤー内でボタンデザインの編集を行う
        [[toggleLightButton layer] setCornerRadius:25.0f];// 角丸
        [[toggleLightButton layer] setMasksToBounds:YES];
        [[toggleLightButton layer] setBorderWidth:2.5f];// 枠線の太さ
        [[toggleLightButton layer] setBorderColor:[[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.7] CGColor]];// 枠線の色
        [[toggleLightButton layer] setBackgroundColor:[[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.3] CGColor]];// 背景色
        [toggleLightButton addTarget:self action:@selector(toggleChangeTorchMode:) forControlEvents:UIControlEventTouchUpInside];

        // 画像を左側に埋め込む
        UIImage* image = [UIImage imageNamed:@"light.png"];
        CALayer* imgLayer = [CALayer layer];
        imgLayer.contents = CFBridgingRelease([image CGImage]);
        imgLayer.frame    = CGRectMake(10, 13, 30, 30);
        [toggleLightButton.layer addSublayer:imgLayer];

        // 文字列のpaddingを設定する
        UIEdgeInsets insets = toggleLightButton.contentEdgeInsets;
        insets.left = 20.0;
        toggleLightButton.contentEdgeInsets = insets;

        [self.view addSubview:toggleLightButton];
    }

実際できたのがこんな感じ。 なんかそれっぽくできました。（アイコンは当てなのであしからず）

ss

基本はCALayerでデザインの修正をおこなう。

        // レイヤー内でボタンデザインの編集を行う
        [[toggleLightButton layer] setCornerRadius:25.0f];// 角丸
        [[toggleLightButton layer] setMasksToBounds:YES];
        [[toggleLightButton layer] setBorderWidth:2.5f];// 枠線の太さ
        [[toggleLightButton layer] setBorderColor:[[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.7] CGColor]];// 枠線の色
        [[toggleLightButton layer] setBackgroundColor:[[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.3] CGColor]];// 背景色
        [toggleLightButton addTarget:self action:@selector(toggleChangeTorchMode:) forControlEvents:UIControlEventTouchUpInside];

画像を組み込んだ場合は文字と被るといけないので文字の表示位置をずらします。 XIBの場合はIBの左側のメニューで設定できるのですが、それを実装で行うときはUIEdgeInsetsクラスを 利用します。CSSのイメージでいうとpaddingをイメージして設定すると想像できます。

        // 文字列のpaddingを設定する
        UIEdgeInsets insets = toggleLightButton.contentEdgeInsets;
        insets.left = 20.0;
        toggleLightButton.contentEdgeInsets = insets;

UIButtonでいろいろカスタマイズしてみました。ほとんどはUIViewを親にもっていて、そのなかにCALayerをもっているのです。 そのCALayerをうまく使ってデザインすればいい感じにカスタマイズができますよって話でした。