web-dev-qa-db-ja.com

ボタン内の画像の下にテキストを配置するストーリーボード

ボタンの画像とテキストを設定できます。ただし、水平方向に配置されます。画像とテキストをボタンの内側に垂直に配置する必要があります。つまり、画像の下のテキスト

ストーリーボードを使用してこれらの変更を行う方法

私が欲しいのはこれです：

enter image description here

私が今得ているのはこれです： enter image description here

iosxcodeuibutton
43
Ahalya

はい、ストーリーボードからロジックを作成せずに実行できます。

1）ボタンを選択し、Attribute Inspectorストーリーボードで。

2）ボタンに画像を割り当てます。 （背景画像を使用しないでください）

3）タイトルテキストをそのボタンに設定します。

4）EdgeとInsetを設定する必要があるため、まずEdgeから画像を選択し、必要に応じてInsetを設定してから、Edgeからタイトルを選択し、必要に応じてインセットを設定します。

お役に立てれば。

19
Jigar Tarsariya

このような出力を探している場合

Button Image with Text

1）ボタンを選択し、ストーリーボードのAttribute Inspectorに移動して、ボタンサイズ50 * 50のこの結果を取得します

enter image description here

2）ボタンのタイトルインセットを設定する

enter image description here

46
Sourabh Sharma

Swift 4互換性のある、あなたのために機能する拡張機能を作成しました。

public extension UIButton {

    func alignTextBelow(spacing: CGFloat = 6.0) {
        if let image = self.imageView?.image {
            let imageSize: CGSize = image.size
            self.titleEdgeInsets = UIEdgeInsetsMake(spacing, -imageSize.width, -(imageSize.height), 0.0)
            let labelString = NSString(string: self.titleLabel!.text!)
            let titleSize = labelString.size(withAttributes: [NSAttributedStringKey.font: self.titleLabel!.font])
            self.imageEdgeInsets = UIEdgeInsetsMake(-(titleSize.height + spacing), 0.0, 0.0, -titleSize.width)
        }
    }

}

ここで、spacingは画像とテキストの間の距離です。

20
Luca Davanzo

ボタンのEdgeプロパティを使用して、Property Window（Attribute Inspector）から簡単かつ視覚的に位置合わせを行うことができ、insetのTitle値を変更できます。 Imageは必要に応じて、下の画像を参照してください

enter image description here

それが役に立てば幸い。

乾杯。

8
iphonic

Swift 4.2互換コードはこちら、この関数を呼び出すだけです

  public extension UIButton
  {

    func alignTextUnderImage(spacing: CGFloat = 6.0)
    {
        if let image = self.imageView?.image
        {
            let imageSize: CGSize = image.size
            self.titleEdgeInsets = UIEdgeInsets(top: spacing, left: -imageSize.width, bottom: -(imageSize.height), right: 0.0)
            let labelString = NSString(string: self.titleLabel!.text!)
            let titleSize = labelString.size(withAttributes: [NSAttributedString.Key.font: self.titleLabel!.font])
            self.imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: 0.0, bottom: 0.0, right: -titleSize.width)
        }
    }
}
5
Shahzaib Maqbool

洗練されたもの

func alignTextUnderImage(spacing: CGFloat = 6.0) {
    guard let image = imageView?.image, let label = titleLabel,
      let string = label.text else { return }

      titleEdgeInsets = UIEdgeInsets(top: spacing, left: -image.size.width, bottom: -image.size.height, right: 0.0)
      let titleSize = string.size(withAttributes: [NSAttributedString.Key.font: label.font])
      imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: 0.0, bottom: 0.0, right: -titleSize.width)
  }
1
rbiard

@rbiardありがとうございます。多言語モバイルアプリを開発するとき、およびUISemanticContentAttributeを使用するとき（右から左、左から右）の別の回避策。これは動作するはずです：

func alignTextBelow(spacing: CGFloat = 10.0) {

    //when the selected language is English
    if L102Language.currentAppleLanguage() == "en" {
        guard let image = imageView?.image, let label = titleLabel,
            let string = label.text else { return }

        titleEdgeInsets = UIEdgeInsets(top: spacing, left: -image.size.width, bottom: -image.size.height, right: 0.0)
        let titleSize = string.size(withAttributes: [NSAttributedString.Key.font: label.font])
        imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: 0.0, bottom: 0.0, right: -titleSize.width)
    } else {
        //When selecting a right to left language. For example, Arabic
        guard let image = imageView?.image, let label = titleLabel,
            let string = label.text else { return }

        titleEdgeInsets = UIEdgeInsets(top: spacing, left: 0, bottom: -image.size.height, right: -image.size.width)
        let titleSize = string.size(withAttributes: [NSAttributedString.Key.font: label.font])
        imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: -titleSize.width, bottom: 0.0, right: 0)
    }
}
0
Maryoomi1

UIButtonでレイアウトを直接変更することはできませんが、UIButtonでこれらのプロパティを使用することはできます。

UIButton *button = ...
button.titleEdgeInsets = UIEdgeInsetsMake(....);
button.imageEdgeInsets = UIEdgeInsetsMake(....);

それでも解決しない場合は、UIResponderからサブクラス化し、独自のコンポーネントを作成し、必要に応じて独自のレイアウトを作成することをお勧めします。

0
Konstantin