web-dev-qa-db-ja.com

UIButton画像+テキストIOS

image＆textを指定したUIButtonが必要です。画像が上部にあり、画像の下にテキストが表示され、両方がクリック可能である必要があります。

iosiphoneipaduibutton
114
Codesen

非常に複雑な答えがありますが、それらはすべてコードを使用しています。ただし、Interface Builderを使用している場合には、これを行う非常に簡単な方法があります。

  1. ボタンを選択し、タイトルと画像を設定します。画像の代わりに背景を設定する場合、ボタンよりも小さい場合、画像のサイズが変更されることに注意してください。IB basic image and title
  2. エッジとインセットを変更して、両方のアイテムの位置を設定します。 Controlセクションで両方のアライメントを制御することもできます。

IB position setIB Control set

他のソリューションが提案したように、内部にUILabelsとUIImagesを作成せずに、コードで同じアプローチを使用することさえできます。常にシンプルにしましょう！

編集：3つのもの（タイトル、画像、背景）が正しいインセットで設定された小さな例を添付しました Button preview

293
Angel G. Olloqui

あなたはこの解決策を探していますあなたの問題について：

UIButton *_button = [UIButton buttonWithType:UIButtonTypeCustom];
[_button setFrame:CGRectMake(0.f, 0.f, 128.f, 128.f)]; // SET the values for your wishes
[_button setCenter:CGPointMake(128.f, 128.f)]; // SET the values for your wishes
[_button setClipsToBounds:false];
[_button setBackgroundImage:[UIImage imageNamed:@"jquery-mobile-icon.png"] forState:UIControlStateNormal]; // SET the image name for your wishes
[_button setTitle:@"Button" forState:UIControlStateNormal];
[_button.titleLabel setFont:[UIFont systemFontOfSize:24.f]];
[_button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; // SET the colour for your wishes
[_button setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted]; // SET the colour for your wishes
[_button setTitleEdgeInsets:UIEdgeInsetsMake(0.f, 0.f, -110.f, 0.f)]; // SET the values for your wishes
[_button addTarget:self action:@selector(buttonTouchedUpInside:) forControlEvents:UIControlEventTouchUpInside]; // you can ADD the action to the button as well like

...ボタンのカスタマイズの残りは今あなたの義務であり、ビューにボタンを追加することを忘れないでください。

PDATE＃1およびPDATE＃2

または、動的ボタンが必要ない場合Interface Builderでビューにボタンを追加できます、同じ値を設定できますそこにも。それはかなり同じですが、このバージョンも1つの簡単な図にあります。

あなた最終結果も見ることができますInterface Builderでスクリーンショットにあります。

enter image description here

64
holex

Xcode-9およびXcode-10Appleエッジインセットに関するいくつかの変更が行われたので、サイズインスペクターで変更できます。

以下の手順に従ってください。

ステップ-1：テキストを入力し、表示する画像を選択します。

enter image description here

ステップ-2：以下の画像に示すように、要件に応じてボタンコントロールを選択します。

enter image description here

ステップ-3：サイズインスペクターに行き、要件に従って値を追加します：

enter image description here

20
Alok
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.imageView.image = [UIImage imageNamed:@"your image name here"];
button.titleLabel.text = @"your text here";

しかし、次のコードは、上のラベルと背景の画像を表示します

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.background.image = [UIImage imageNamed:@"your image name here"];
button.titleLabel.text = @"your text here";

UIButtonにはUILabelプロパティとUIimageviewプロパティがあるため、同じコントロールでラベルとボタンを使用する必要はありません。

7
Vinodh

UIImageViewとUILabelを作成し、イメージとテキストの両方を設定します。..その後、imageViewとLabel ....の上にカスタムボタンを配置します。

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"search.png"]];
    imageView.frame = CGRectMake(x, y, imageView.frame.size.width, imageView.frame.size.height);
    [self.view addSubview:imageView];

UILabel *yourLabel = [[UILabel alloc] initWithFrame:CGRectMake(x, y,a,b)];
yourLabel.text = @"raj";
[self.view addSubview:yourLabel];

UIButton * yourBtn=[UIButton buttonWithType:UIButtonTypeCustom];
[yourBtn setFrame:CGRectMake(x, y,c,d)];
[yourBtn addTarget:self action:@selector(@"Your Action") forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:yourBtn];
3
Rajneesh071

このコードを使用してください：

UIButton *button=[UIButton buttonWithType:UIButtonTypeRoundedRect];
    button.imageView.frame=CGRectMake(0.0f, 0.0f, 50.0f, 44.0f);///You can replace it with your own dimensions.
    UILabel *label=[[UILabel alloc] initWithFrame:CGRectMake(0.0f, 35.0f, 50.0f, 44.0f)];///You can replace it with your own dimensions.
    [button addSubview:label];
3
iPhone Developer

このコードを使用してください：

UIButton *sampleButton = [UIButton buttonWithType:UIButtonTypeCustom];
[sampleButton setFrame:CGRectMake(0, 10, 200, 52)];
[sampleButton setTitle:@"Button Title" forState:UIControlStateNormal];
[sampleButton setFont:[UIFont boldSystemFontOfSize:20]];
[sampleButton setBackgroundImage:[[UIImage imageNamed:@"redButton.png"] 
stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0] forState:UIControlStateNormal];
[sampleButton addTarget:self action:@selector(buttonPressed)
forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:sampleButton]
3
Hemant Dixit

私は同じ問題に遭遇したので、UIButtonの新しいサブクラスを作成し、以下のようにlayoutSubviews:メソッドをオーバーライドすることで修正します。

-(void)layoutSubviews {
    [super layoutSubviews];

    // Center image
    CGPoint center = self.imageView.center;
    center.x = self.frame.size.width/2;
    center.y = self.imageView.frame.size.height/2;
    self.imageView.center = center;

    //Center text
    CGRect newFrame = [self titleLabel].frame;
    newFrame.Origin.x = 0;
    newFrame.Origin.y = self.imageView.frame.size.height + 5;
    newFrame.size.width = self.frame.size.width;

    self.titleLabel.frame = newFrame;
    self.titleLabel.textAlignment = UITextAlignmentCenter;

}

AngelGarcíaOlloquiの答えは、インターフェイスビルダーですべてを手動で配置する場合、別の良いソリューションだと思いますが、ボタンごとにコンテンツインセットを変更する必要がないので、ソリューションを保持します。

3
Oyashiro

画像用のカスタム画像ビューとテキスト用のカスタムラベルを作成し、サブビューとしてボタンに追加する必要があります。それでおしまい。

UIButton *yourButton = [UIButton buttonWithType:UIButtonTypeCustom];
yourButton.backgroundColor = [UIColor greenColor];
yourButton.frame = CGRectMake(140, 40, 175, 30);     
[yourButton addTarget:self action:@selector(yourButtonSelected:) forControlEvents:UIControlEventTouchUpInside]; 
[self.view addSubview:yourButton];

UIImageView *imageView1 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, yourButton.frame.size.width, yourButton.frame.size.height/2)];
imageView1.image =[UIImage imageNamed:@"images.jpg"];
[yourButton addSubview:imageView1];

UILabel *label=[[UILabel alloc] initWithFrame:CGRectMake(0, yourButton.frame.size.height/2, yourButton.frame.size.width, yourButton.frame.size.height/2)];
label.backgroundColor = [UIColor greenColor];
label.textAlignment= UITextAlignmentCenter;
label.text = @"ButtonTitle";
[yourButton addSubview:label];

テストのために、yourButtonSelected:メソッドを使用します

-(void)yourButtonSelected:(id)sender{
    NSLog(@"Your Button Selected");

}

役に立つと思います。

3
Prasad G

それは本当にシンプルで、ボタンの背景に画像を追加し、uicontrolstatenormalのボタンのタイトルラベルにテキストを与えるだけです。それでおしまい。

[btn setBackgroundImage:[UIImage imageNamed:@"img.png"] forState:UIControlStateNormal];
[btn setContentVerticalAlignment:UIControlContentVerticalAlignmentBottom];
[btn setTitle:@"Click Me" forState:UIControlStateNormal];
2
Dhruv

この素晴らしいライブラリを確認してください ImageCenterButton それは他のライブラリが直面するすべての問題を解決し、iOS 9で動作することを確認します

enter image description here

1
Mohamed Saleh