UIButton รูปภาพ + ข้อความ IOS

ฉันต้องการUIButtonที่มีภาพและข้อความ รูปภาพควรอยู่ด้านบนและมีข้อความอยู่ใต้รูปภาพทั้งคู่ควรคลิกได้

ฉันเห็นคำตอบที่ซับซ้อนมากซึ่งทั้งหมดนี้ใช้รหัส อย่างไรก็ตามหากคุณใช้ Interface Builderมีวิธีง่ายๆในการทำสิ่งนี้:

1. เลือกปุ่มและตั้งชื่อเรื่องและรูปภาพ โปรดทราบว่าหากคุณตั้งค่าพื้นหลังแทนรูปภาพรูปภาพจะถูกปรับขนาดหากมีขนาดเล็กกว่าปุ่ม
2. กำหนดตำแหน่งของทั้งสองรายการโดยเปลี่ยนขอบและอินเซ็ต คุณสามารถควบคุมการจัดตำแหน่งของทั้งสองได้ในส่วนการควบคุม

คุณสามารถใช้แนวทางเดียวกันนี้โดยใช้โค้ดโดยไม่ต้องสร้าง UILabels และ UIImages ภายในเหมือนโซลูชันอื่น ๆ ที่เสนอ ทำให้มันง่ายเสมอ!

แก้ไข: แนบตัวอย่างเล็ก ๆ ที่มีการตั้งค่า 3 สิ่ง (ชื่อภาพและพื้นหลัง) พร้อมสิ่งที่ใส่เข้าไปที่ถูกต้อง

ฉันคิดว่าคุณกำลังมองหาวิธีแก้ปัญหานี้:

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

... ส่วนที่เหลือของการปรับแต่งปุ่มเป็นหน้าที่ของคุณตอนนี้และอย่าลืมเพิ่มปุ่มในมุมมองของคุณ

อัปเดต # 1และอัปเดต # 2

หรือหากคุณไม่ต้องการปุ่มไดนามิกคุณสามารถเพิ่มปุ่มของคุณในมุมมองของคุณในตัวสร้างอินเทอร์เฟซและคุณสามารถตั้งค่าเดียวกันได้ที่นั่นเช่นกัน มันค่อนข้างเหมือนกัน แต่นี่คือเวอร์ชันนี้เช่นกันในภาพง่ายๆภาพเดียว

คุณยังสามารถดูผลลัพธ์สุดท้ายในตัวสร้างอินเทอร์เฟซได้เช่นเดียวกับภาพหน้าจอ

Xcode-9และXcode-10 Apple ทำการเปลี่ยนแปลงเล็กน้อยเกี่ยวกับ Edge Inset ในตอนนี้คุณสามารถเปลี่ยนได้ภายใต้ตัวตรวจสอบขนาด

โปรดปฏิบัติตามขั้นตอนด้านล่าง:

ขั้นตอนที่ 1: ป้อนข้อความและเลือกภาพที่คุณต้องการแสดง:

ขั้นตอนที่ 2: เลือกปุ่มควบคุมตามความต้องการของคุณดังแสดงในภาพด้านล่าง:

ขั้นตอนที่ 3: ตอนนี้ไปที่ตัวตรวจสอบขนาดและเพิ่มมูลค่าตามความต้องการของคุณ:

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

ใช้รหัสนี้:

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

ใช้รหัสนี้:

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]

ฉันพบปัญหาเดียวกันและฉันแก้ไขโดยการสร้างคลาสย่อยใหม่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;

}

ฉันคิดว่าคำตอบของ Angel García Olloqui เป็นอีกหนึ่งวิธีแก้ปัญหาที่ดีหากคุณวางทั้งหมดด้วยตนเองด้วยตัวสร้างอินเทอร์เฟซ แต่ฉันจะเก็บวิธีแก้ปัญหาไว้เพราะฉันไม่ต้องแก้ไขการแทรกเนื้อหาสำหรับแต่ละปุ่มของฉัน

สร้าง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];  

คุณควรสร้างมุมมองภาพที่กำหนดเองสำหรับรูปภาพและป้ายกำกับที่กำหนดเองสำหรับข้อความและคุณเพิ่มลงในปุ่มของคุณเป็นมุมมองย่อย แค่นั้นแหละ.

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");

}

ฉันคิดว่ามันจะเป็นประโยชน์กับคุณ

มันง่ายมากเพียงแค่เพิ่มภาพลงในพื้นหลังของปุ่มของคุณและให้ข้อความไปยังป้ายชื่อของปุ่มสำหรับ uicontrolstatenormal แค่นั้นแหละ.

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

รุ่นที่รวดเร็ว:

var button = UIButton()

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