Gambar UIButton + Teks IOS

Saya perlu UIButtondengan gambar & teks . Gambar harus di atas & teks di bawah gambar keduanya harus dapat diklik.

Saya melihat jawaban yang sangat rumit, semuanya menggunakan kode. Namun, jika Anda menggunakan Interface Builder , ada cara yang sangat mudah untuk melakukan ini:

1. Pilih tombol dan atur judul dan gambar. Perhatikan bahwa jika Anda mengatur latar belakang daripada gambar maka gambar akan diubah ukurannya jika lebih kecil dari tombol.
2. Atur posisi kedua item dengan mengubah tepi dan inset. Anda bahkan dapat mengontrol perataan keduanya di bagian Kontrol.

Anda bahkan dapat menggunakan pendekatan yang sama dengan kode, tanpa membuat UILabel dan UIImages di dalamnya sebagai solusi lain yang diusulkan. Selalu Tetap Sederhana!

EDIT: Terlampir contoh kecil memiliki 3 hal yang ditetapkan (judul, gambar dan latar belakang) dengan inset yang benar

Saya pikir Anda mencari solusi ini untuk masalah Anda:

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

... sisa penyesuaian tombol adalah tugas Anda sekarang, dan jangan lupa untuk menambahkan tombol ke tampilan Anda.

UPDATE # 1 dan UPDATE # 2

atau, jika Anda tidak memerlukan tombol dinamis Anda bisa menambahkan tombol Anda ke tampilan Anda di Interface Builder dan Anda bisa mengatur nilai yang sama di sana juga. itu cukup sama, tetapi di sini adalah versi ini juga dalam satu gambar sederhana.

Anda juga dapat melihat hasil akhir di Interface Builder seperti pada screenshot.

Xcode-9 dan Xcode-10 Apple telah melakukan beberapa perubahan terkait Edge Inset sekarang, Anda dapat mengubahnya di bawah size-inspector.

Ikuti langkah-langkah di bawah ini:

Langkah-1: Masukkan teks dan pilih gambar yang ingin Anda tampilkan:

Langkah-2: Pilih kontrol tombol sesuai kebutuhan Anda seperti yang ditunjukkan pada gambar di bawah ini:

Langkah-3: Sekarang pergi ke inspektur ukuran dan tambahkan nilai sesuai kebutuhan Anda:

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

tetapi kode berikut akan menampilkan label di atas dan gambar di latar belakang

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

Tidak perlu menggunakan label dan tombol dalam kontrol yang sama karena UIButton memiliki properti UILabel dan UIimageview.

Gunakan kode ini:

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];

Gunakan kode ini:

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]

Saya mengalami masalah yang sama, dan saya memperbaikinya dengan membuat subclass baru UIButtondan menimpa layoutSubviews:metode seperti di bawah ini:

-(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;

}

Saya pikir jawaban Angel García Olloqui adalah solusi lain yang baik, jika Anda menempatkan semuanya secara manual dengan pembangun antarmuka tetapi saya akan menyimpan solusi saya karena saya tidak perlu memodifikasi inset konten untuk setiap tombol saya.

Buat UIImageViewdan UILabel, dan atur gambar dan teks untuk kedua hal ini .... lalu Tempatkan tombol khusus di atas imageView dan 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];  

Anda harus membuat tampilan gambar khusus untuk gambar dan label khusus untuk teks dan Anda menambahkan ke tombol Anda sebagai subview. Itu dia.

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];

Untuk tujuan pengujian, gunakan yourButtonSelected:metode

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

}

Saya pikir ini akan sangat membantu Anda.

Ini sangat sederhana, cukup tambahkan gambar ke latar belakang tombol Anda dan beri teks ke label tombol untuk uicontrolstatenormal. Itu dia.

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

versi cepat:

var button = UIButton()

newGameButton.setTitle("Новая игра", for: .normal)
newGameButton.setImage(UIImage(named: "energi"), for: .normal)
newGameButton.backgroundColor = .blue
newGameButton.imageEdgeInsets.left = -50