UIButton Obraz + tekst IOS

Potrzebuję UIButtonz obrazem i tekstem . Obraz powinien znajdować się na górze, a tekst pod obrazem, oba powinny być klikalne.

Widzę bardzo skomplikowane odpowiedzi, wszystkie przy użyciu kodu. Jeśli jednak używasz Interface Builder , możesz to zrobić w bardzo prosty sposób:

1. Wybierz przycisk i ustaw tytuł oraz obraz. Zwróć uwagę, że jeśli ustawisz tło zamiast obrazu, rozmiar obrazu zostanie zmieniony, jeśli jest mniejszy niż przycisk.
2. Ustaw położenie obu elementów, zmieniając krawędź i wstawki. Możesz nawet kontrolować wyrównanie obu w sekcji Sterowanie.

Możesz nawet użyć tego samego podejścia w kodzie, bez tworzenia w nim UILabels i UIImages, jak w przypadku innych proponowanych rozwiązań. Zawsze zachowuj prostotę!

EDYCJA: Załączam mały przykład z ustawionymi 3 rzeczami (tytuł, obraz i tło) z poprawnymi wstawkami

Myślę, że szukasz tego rozwiązania swojego problemu:

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

... reszta dostosowania przycisku jest teraz Twoim obowiązkiem i nie zapomnij dodać przycisku do widoku.

UPDATE # 1 i UPDATE # 2

lub, jeśli nie potrzebujesz dynamicznego przycisku, możesz dodać przycisk do swojego widoku w programie Interface Builder i ustawić te same wartości również w tym miejscu. to jest całkiem to samo, ale tutaj jest również ta wersja na jednym prostym obrazku.

możesz również zobaczyć ostateczny wynik w Interface Builder, tak jak jest na zrzucie ekranu.

Xcode-9 i Xcode-10 Apple dokonały teraz kilku zmian dotyczących Edge Inset, możesz to zmienić w inspektorze rozmiaru.

Wykonaj poniższe kroki:

Krok 1: Wprowadź tekst i wybierz obraz, który chcesz pokazać:

Krok 2: Wybierz sterowanie przyciskiem zgodnie z wymaganiami, jak pokazano na poniższym obrazku:

Step-3: Teraz przejdź do inspektora rozmiaru i dodaj wartość zgodnie z wymaganiami:

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

ale poniższy kod pokaże etykietę powyżej i obraz w tle

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

Nie ma potrzeby używania etykiety i przycisku w tej samej kontrolce, ponieważ UIButton ma właściwości UILabel i UIimageview.

Użyj tego kodu:

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

Użyj tego kodu:

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]

Napotkałem ten sam problem i naprawiam go, tworząc nową podklasę UIButtoni zastępując layoutSubviews:metodę, jak poniżej:

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

}

Myślę, że odpowiedź Angel García Olloqui jest kolejnym dobrym rozwiązaniem, jeśli umieścisz je ręcznie za pomocą narzędzia do tworzenia interfejsu, ale zachowam swoje rozwiązanie, ponieważ nie muszę modyfikować wstawek zawartości dla każdego przycisku.

Utwórz UIImageViewi UILabel, ustaw obraz i tekst na oba te elementy .... a następnie umieść niestandardowy przycisk nad imageView i etykietą ....

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

Powinieneś utworzyć niestandardowy widok obrazu dla obrazu i własną etykietę dla tekstu i dodać do przycisku jako podglądy. Otóż ​​to.

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

Do celów testowych użyj yourButtonSelected:metody

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

}

Myślę, że to ci pomoże.

To naprawdę proste, po prostu dodaj obraz do tła swojego przycisku i nadaj tekstowi tytuł etykiety przycisku, aby uicontrolstatenormal. Otóż ​​to.

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

szybka wersja:

var button = UIButton()

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