2012-07-30 59 views
93

我需要一個UIButton圖像&文本。圖片應該位於頂部&下的圖片應該可點擊。UIButton圖像+文本IOS

+0

希望這有助於 參見[UIButton的用文字和圖像] [1 ] http://stackoverflow.com/questions/4926581/uibutton-with-picture-and-text [1]:http:// stackoverflow。com/questions/4926581/uibutton-with-picture-and-text 然後,您可以在視圖中添加UITapGestureRecognizer以處理自定義按鈕點擊。 – 2012-08-10 03:33:24

+15

聽起來更像一個需求規格而不是問題。 – Abizern 2012-08-10 10:35:57

+0

查看接受的答案和http://commandshift.co.uk/blog/2013/03/12/uibutton-edge-insets/關於UIButton Edges – onmyway133 2014-12-19 03:17:12

回答

250

我看到非常複雜的答案,他們都使用代碼。然而,如果你正在使用Interface Builder,有一個很簡單的方法來做到這一點:

  1. 選擇按鈕,設置標題和圖像。請注意,如果您設置的是背景而不是圖像,則圖像的大小將小於按鈕的大小。 IB basic image and title
  2. 通過更改邊和插圖設置兩個項目的位置。你甚至可以在控制部分控制兩者的對齊。

IB position set IB Control set

你甚至可以使用通過代碼相同的方法,無需內部創建UILabels和UIImages作爲提出其他解決方案。始終保持簡單!

EDIT:附帶具有正確插圖 Button preview

+2

這是正確的。您需要在標題和圖像上使用邊緣插頁來正確對齊。您可以通過設置titleEdgeInsets和contentEdgeInsets屬性在代碼中執行此操作。 – 2012-08-08 22:41:08

+3

是的,它幾乎是正確的。只需要設置「背景」圖像而不是「圖像」,否則就不會看到標題甚至沒有設置插入值來重新定位標題。 – holex 2012-08-09 09:42:37

+0

不正確?其實,你可以一起看到標題,圖像和背景。我爲我的按鈕使用了這種技術,它可以正常工作。 – 2012-08-09 10:00:38

3

使用此代碼:

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

UIImageViewUILabel,並設置圖像和文字都這樣....然後,將自定義按鈕上的ImageView和標籤....

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

簡單而有用。如何設置突出顯示的圖像和標題? – 2017-04-15 10:22:32

+0

爲標籤setHighlightedTextColor和你必須玩forControlEvents – Rajneesh071 2017-05-25 10:13:31

7
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屬性,所以不需要在同一控件中使用標籤和按鈕。

+1

我需要將圖像放置在頂部和圖像下方的文本都應該是可點擊的。 – Codesen 2012-07-30 08:28:22

+0

你可以使用我的第一部分代碼 – Vinodh 2012-07-30 08:29:36

59

我覺得您正在尋找這種解決方案您的問題:

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

,或者如果你並不需要一個動態按鈕你可以在Interface Builder中添加按鈕,你的看法,你可以設置在那裏也有相同的值。它是相同的,但這是這個版本,以及在一個簡單的圖片。

也可以在界面生成器中看到最終結果,因爲它在屏幕截圖上。

enter image description here

+0

EdgeInsets只有當你有「設置按鈕圖像」,當你設置按鈕圖像,你不能看到標題。如果你設置了背景圖像,那麼EdgeInsets不能應用於圖像。你可以看到標題。所以,你不能同時設置edgeinsect。 – 2015-12-03 12:23:38

+0

@BadalShah,是的,當你說的是真實的,並且你不能同時看到_title_和_image_時,有一些場景(取決於按鈕的大小,圖像大小,標題的長度等等),因爲_image_推出可見區域的_title_;但是這種情況根本不是通用的,一般的情況是_title_和_image_可以同時出現。 – holex 2015-12-03 13:13:41

3

你應該創建爲文本圖像和自定義標籤定製的ImageView並將您添加到您的按鈕子視圖。而已。

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

使用此代碼:

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

它非常簡單,只需添加圖片到你的按鍵背景,給文本按鈕titlelabel爲uicontrolstatenormal。 就是這樣。

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

...以及文字如何在圖像下移動? – holex 2012-08-09 08:45:14

+0

@holex:非常感謝你指導我,我發現它的缺陷,然後相應地改變。 – Dhruv 2012-08-09 09:36:40

3

我遇到同樣的問題,我通過創建的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; 

} 

我認爲天使加西亞Olloqui的答案是另一種很好的解決方案,如果你把所有的人都與界面生成器手動,但我會繼續我的解決方案,因爲我沒有修改內容嵌入s爲我的每個按鈕。

+0

但它工作;)檢查我的意見和編輯 – 2012-08-10 13:29:24

1

檢查這真棒LIB ImageCenterButton 它解決了所有的問題,其他庫的臉和我確認它的工作原理與iOS 9

enter image description here

4

的Xcode-8的Xcode-9蘋果做了幾現在更改Edge Inset,您可以在尺寸檢查器下更改它。

請按照下列步驟操作:

第1步: 要顯示輸入文字,然後選擇圖片:

enter image description here

步驟2: 選擇按鈕控制根據您的要求如下圖所示:

enter image description here

步驟3: 現在去到尺寸檢查,並添加值按您的要求:

enter image description here