web-dev-qa-db-ja.com

インセット付きのUIButton画像を中央に配置

UIButtonを作成したいのですが、画像よりもタップ領域が大きくなっています。 (例:40x40ボタンですが、画像は中央に20x20しかありません)。

それがimageEdgeInsetsの目的ですか?

私はそれをプログラムで設定しました:(これは私のボタンを含むUIViewにあります)

- (void)awakeFromNib {
    [_plusButton setImageEdgeInsets:UIEdgeInsetsMake(10, 10, 10, 10)];
    [_plusButton setContentMode:UIViewContentModeCenter];
}

そしてストーリーボードから

enter image description here

しかし、どちらも機能していないようです。

22
Lord Zsolt

了解しました。画像をボタンの背景画像として設定し、画像として設定すると、引き伸ばされることはなく(元の形状のまま)、imageEdgeInsetsが適切に機能します。

お気に入り:

enter image description here

19
Irfan

これは、imageEdgeInsetsの使用方法の簡単な例です。これにより、ヒット可能な領域のある20x20ボタンが10ピクセル大きくなります(40x40)。

    var expandHittableAreaAmt: CGFloat = 10
    var buttonWidth: CGFloat = 20
    var button = UIButton.buttonWithType(UIButtonType.Custom) as UIButton
    button.frame = CGRectMake(0, 0, 
        buttonWidth + expandHittableAreaAmt*2, 
        buttonWidth + expandHittableAreaAmt*2)
    button.imageEdgeInsets = UIEdgeInsetsMake(expandHittableAreaAmt, 
        expandHittableAreaAmt, expandHittableAreaAmt, expandHittableAreaAmt)
    button.setImage(UIImage(named: "buttonImage"), forState: .Normal) //20x20 image
    button.addTarget(self, action: "didTouchButton:", forControlEvents: .TouchUpInside)
8
Harris

Swift 3&4プログラムによるソリューション。

buttonOutlet.setImage(UIImage(name: "iconWhite"), for: .normal)
buttonOutlet.imageEdgeInsets = UIEdgeInsets(top: 10, left:10, bottom: 10, right: 10)
7
Trevor