web-dev-qa-db-ja.com

画像とテキストの両方が可能なUIButton？

サイズが幅200および高さ270のボタンがあります。同じボタンにテキストと画像を配置します。そのテキストの背景画像としてではありません。これの代わりに、高さ120のテキストと高さ150の画像を同じボタンに表示したいと思います。どうやるか？

iosiphonexcodeuibutton
65
Viral Narshana

このコードを使用できます、それはあなたの目的に役立ちます

.h file code
IBOutlet UIButton *testBtn;

.m file code
[testBtn setImage: [UIImage imageNamed:@"Image name.png"] forState:UIControlStateNormal];
[testBtn setTitleEdgeInsets:UIEdgeInsetsMake(70.0, -150.0, 5.0, 5.0)];
[testBtn setTitle:@"Your text" forState:UIControlStateNormal];

必要に応じてボタンの座標とサイズを調整します。これは、サンプルコードです。

PS：nibファイルでUIButtonを取得>カスタムボタンに変更> iboutletをnibファイルのカスタムボタンに接続します。

114
Aditya

以下のコードは、UIButtonクラスのsetImageEdgeInsetsおよびsetTitleEdgeInsetsプロパティを使用して、ボタンに画像とテキストを配置することを示しています。

UIButton *butt=[UIButton buttonWithType:UIButtonTypeCustom ];
    [butt setFrame:CGRectMake(0, 0, 100, 100)];
    [butt setBackgroundImage:[UIImage imageNamed:@"sig.png"] forState:UIControlStateNormal];
    [butt setImageEdgeInsets:UIEdgeInsetsMake(0.0, 0.0, 50.0, 0.0)];
    [butt setTitleEdgeInsets:UIEdgeInsetsMake(75.0, 0.0, 0.0, 0.0)];
    [butt setTitle:@"hello" forState:UIControlStateNormal];
    [butt setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [self.view addSubview:butt];
14
Abhilash Reddy kallepu

サブビューの概念を使用します。 UIButton（200x270）、UILabel（200x120）、UIImageView（200x150）の3つのコントロールを使用します。 UIImageViewに画像を割り当て、UILabelのテキストを設定します。 UIButtonの（x、y）の位置に基づいて、ラベルとイメージビューコントロールを配置します。

最後に、次のようなものが必要です。

次の場合：

UIButton *button;
UILabel *label;
UIImageView *imageView;

[button addSubView:imageView];
[button addSubView:label];
6
Vaishnavi Naidu
[testBtn setBackgroudImage: [UIImage imageNamed:@"Image name.png"] forState:UIControlStateNormal];
[testBtn setTitle:@"Your text" forState:UIControlStateNormal];
5
Amit Battan

はい、画像とタイトルが両方とも収まるほど小さい限り、同じボタンで表示できます。難しいのは、配置を処理する必要がある場合です。

contentVerticalAlignmentのcontentHorizontalAlignmentプロパティとUIButtonプロパティ（UIControlから継承）で遊ぶことができます。

titleEdgeInsetsプロパティとimageEdgeInsetsプロパティを使用して、配置プロパティに基づいてタイトルと画像を配置から移動することもできます。

非常に正確な配置またはカスタム配置が必要な場合は、UIButtonのtitleRectForContentRect:およびimageRectForContentRect:メソッドをオーバーライドすることをお勧めします。これらにより、タイトルと画像のフレームを定義することができ、ボタンをレイアウトする必要があるときに呼び出されます。 self.titleLabelの内部でtitleRectForContentRect:を参照する場合は、最初にself.currentTitleが定義されていることを確認してください。不正なアクセスエラーが発生しました。おそらく、titleLabelを最初に初期化するときにメソッドが呼び出されます。

5
ohnit

In Swift

let button = UIButton()

//make sure the image (jpg, png) you are placing in the button
//is about the right size or it will Push the label off the button

//add image
let image = UIImage(named:"my_button_image")
button.setImage(image, for: .normal)
button.imageView?.contentMode = .scaleAspectFit
button.imageEdgeInsets = UIEdgeInsets(top:0, left:-30, bottom:0, right:0) //adjust these to have fit right

//add title
button.setTitle("Fan", for: .normal)
button.titleEdgeInsets = UIEdgeInsets(top:0, left:10, bottom:0, right:0) //adjust insets to have fit how you want

//add button to your view - like in viewDidLoad or your own custom view setup
addSubview(button)

ストーリーボードを使用している場合、Interface Builderでボタン参照に表示/添付するためにプログラムでアンカーを設定することを忘れないでください

3
ColossalChris

レイアウトをさらに制御したい場合は、UIControlのサブクラスを作成し、希望するビュー（UILabel、UIImageView）をxibファイルに配置します。その後、UIEdgeInsetsを整理することなく、定期的にAutolayoutを使用できます。

1
orkoden

Swift 4。

  • ボタンを作成する
  • ボタンの画像を設定します
  • テキストのラベルを作成します
  • ラベルをボタンのサブビューとして追加します

  • ボタン内のラベルを制限する

           let imageAndTextButton : UIButton = {
            let button = UIButton(frame: .zero)
            button.tintColor = .clear
            button.setImage(#imageLiteral(resourceName: "buttonImage"), for: .normal)
            button.imageView?.contentMode = .scaleToFill
            button.translatesAutoresizingMaskIntoConstraints = false
            return button
        }()
        let textForButtonLabel = UILabel(frame: .zero)
        textForButtonLabel.translatesAutoresizingMaskIntoConstraints = false
        textForButtonLabel.attributedText = NSAttributedString(string: "Text For Button", attributes: buttonTextAttributes)
        textForButtonLabel.textAlignment = .center
        textForButtonLabel.backgroundColor = .clear
        imageAndTextButton.addSubview(textForButtonLabel)
        imageAndTextButton.addConstraint(NSLayoutConstraint(item: textForButtonLabel, attribute: .centerX, relatedBy: .equal, toItem: imageAndTextButton, attribute: .centerX, multiplier: 1.0, constant: 0))
        imageAndTextButton.addConstraint(NSLayoutConstraint(item: textForButtonLabel, attribute: .centerY, relatedBy: .equal, toItem: imageAndTextButton, attribute: .centerY, multiplier: 1.0, constant: 0))
0
Femi Loki

これを試してみてください、それは私のために働いています、

ボタンのサイズと要件に基づいてIEdgeInsetsの値を設定する必要があります。

[self.testButton setTitle: @"myTitle" forState: UIControlStateNormal];
UIImage *iconImage = [UIImage imageWithIcon:@"fa-dot-circle-o" backgroundColor:[UIColor clearColor] iconColor:[UIColor whiteColor] fontSize:10.0f];

//UIEdgeInsets insets = {top, left, bottom, right};

[self.testButton setImageEdgeInsets:UIEdgeInsetsMake(3.0, 0.0, 3.0, 2.0)];
[self.testButton setTitleEdgeInsets:UIEdgeInsetsMake(3.0, 1.0, 3.0, 0.0)];
[self.testButton setImage:iconImage forState:UIControlStateNormal];
[self.testButton addTarget:self action:@selector(testButtonTapped:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:self.testButton];

これが誰かの助けになることを願っています。

0
Jaywant Khedkar