0

UIButtonでオリジナルの画像を使い、カスタムボタンを作っているのですが、画像とテキストを一緒に載せることができません。ボタンは画像のみしか表示されないです。どうすればテキストもボタン上に表示できるのでしょうか?宜しくお願い致します。また都合上storyboardは使っていないのでコードでの改善策を教えていただけると嬉しいです。

let buttonImageDefault :UIImage? = UIImage(named:"btn_default")//ボタンの画像
let buttonImageSelected :UIImage? = UIImage(named:"btn_selected")//押された時のボタンの画像


let exitButton = UIButton(type: UIButtonType.Custom)
exitButton.frame = CGRect(x: board.bounds.midX -buttonImageDefault!.size.width / 2,
                          y: board.bounds.midY - buttonImageDefault!.size.height / 2,
                          width: buttonImageDefault!.size.width,
                          height: buttonImageDefault!.size.height)

exitButton.setImage(buttonImageDefault!, forState: UIControlState.Normal)
exitButton.setImage(buttonImageSelected!, forState: UIControlState.Highlighted)
exitButton.setTitleColor(UIColor.blackColor(), forState: .Normal)//ボタンが白系なのでテキストは黒色
exitButton.setTitle("終了", forState: .Normal)

1 件の回答 1

1

自分で回答することになりますが、修正できましたので一応載せておきます。一番下のtitleEdgeInsetsの一行を追加したら文字の位置を修正できました。おそらくテキストは存在していたのだけれど、位置が悪く見えてなかったのだと思われます。なぜテキストの位置がずれるのか、わかる方いましたらご教授願います。また、他の改善方法がありましたら是非お教え願います。

let buttonImageDefault :UIImage? = UIImage(named:"btn_default")//ボタンの画像
let buttonImageSelected :UIImage? = UIImage(named:"btn_selected")//押された時のボタンの画像

let exitButton = UIButton(type: UIButtonType.Custom)
exitButton.frame = CGRect(x: board.bounds.midX -buttonImageDefault!.size.width / 2,
                      y: board.bounds.midY - buttonImageDefault!.size.height / 2,
                      width: buttonImageDefault!.size.width,
                      height: buttonImageDefault!.size.height)

exitButton.setImage(buttonImageDefault!, forState: UIControlState.Normal)
exitButton.setImage(buttonImageSelected!, forState: UIControlState.Highlighted)
exitButton.setTitleColor(UIColor.blackColor(), forState: .Normal)//ボタンが白系なのでテキストは黒色
exitButton.setTitle("終了", forState: .Normal)

//ここの部分

exitButton.titleEdgeInsets = UIEdgeInsetsMake(0.0, -board.bounds.midX+exitButton.bounds.midX, 0, 0)
2
  • あれ?回答が消えていますがsetBackgroundImageで教えてくださった方ありがとうございます。そちらの方が断然楽ですね! setImageをsetBackgroundImageに変えると、文字のズレなく表示されました。
    – yamajyn
    Commented 2016年6月29日 11:39
  • setImage()はコンテンツとして画像を表示するメソッドなので、通常ですとタイトルラベルは指定した画像の右側(exitButton.titleLabel?.frameを参照)へ配置されます。このため、ボタンのframeとして画像サイズ分しか渡していないので見切れてしまいます。背景画像であれば、setBackgroundImage()を使うのが適切ですね。
    – quesera2
    Commented 2016年6月29日 12:18

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。