带有图像和文本的 UIBarButtonItem

Posted

技术标签:

【中文标题】带有图像和文本的 UIBarButtonItem【英文标题】:UIBarButtonItem with image and text 【发布时间】:2012-08-21 09:05:44 【问题描述】:

我必须在地球上创建一个 UIBarButton,并在其上写一个文本“地图”。

我做了什么:

    我添加了一个 UIButton,其中地球的图像作为 backgroundImage。 设置按钮上的文字。 然后从上面的按钮创建了一个 UIBarButton initWithCustomView。 将其样式设为带边框。

结果:

现在我得到的是一个平面按钮,其中地球图像被拉伸到与其中的文本重叠的地方。

我已经搜索了很多,但我只找到了显示背景图像和按钮上方文本的链接。没有什么比图像和文字结合在一起的了。

谁能帮助我按照attachment 中显示的方式创建它。

【问题讨论】:

图像必须是主图像(不是背景),然后您需要正确设置标题和/或图像插图。 ***.com/questions/4344847/… 【参考方案1】:

试试这个:

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];  
[button setTitle:@"Title" forState:UIControlStateNormal];
UIImage *butImage_on = [[UIImage imageNamed:@"closebutton_on.png"] stretchableImageWithLeftCapWidth:10 topCapHeight:10];  
UIImage *butImage_over = [[UIImage imageNamed:@"closebutton_over.png"] stretchableImageWithLeftCapWidth:10 topCapHeight:10];  
[button setBackgroundImage:butImage_on forState:UIControlStateNormal];  
[button setBackgroundImage:butImage_over forState:UIControlStateHighlighted];  
[button setImage:[UIImage imageNamed:@"globe.png"] forState:UIControlStateNormal];  
[button addTarget:self action:@selector(closeProfilePage) forControlEvents:UIControlEventTouchUpInside];
button.frame = CGRectMake(0, 0, 61, 30);  

[button setTitleEdgeInsets:UIEdgeInsetsMake(0, -15, 0, 2)];
[button setImageEdgeInsets:UIEdgeInsetsMake(30,
                                         20,
                                         0,
                                         20)];

UIBarButtonItem *backButton = [[[UIBarButtonItem alloc] initWithCustomView:button] autorelease];  
self.navigationItem.leftBarButtonItem = backButton;

注意:您需要根据自己的要求管理插图。

【讨论】:

【参考方案2】:

使用带有@2x 的图像。如果您的图形是高分辨率的。根据 640 X 960 像素;:-

UIView *parentView1 = [[UIView alloc] initWithFrame:CGRectMake(0, 6,51, 44)];
UIButton *btnBack = [[UIButton alloc] initWithFrame:CGRectMake(0, 6, 51, 30)];

[btnBack setBackgroundImage:[UIImage imageNamed:@"back@2x.png"] forState:UIControlStateNormal];

[btnBack addTarget:self action:@selector(backButtonClicked) forControlEvents:UIControlEventTouchUpInside];  

[parentView1 addSubview:btnBack];

[btnBack release];  

UIBarButtonItem *homeBarButtomItem2 = [[UIBarButtonItem alloc] initWithCustomView:parentView1]; 

[parentView1 release];  

[self.navigationItem setLeftBarButtonItem:homeBarButtomItem2];

[homeBarButtomItem2 release];

【讨论】:

以上是关于带有图像和文本的 UIBarButtonItem的主要内容,如果未能解决你的问题,请参考以下文章

Flutter - 如何在图像下方使用带有图像和文本/图标的容器小部件

UIBarButtonItem 带有图像和文本以及边框?

带有图像和文本的 WinForms 按钮

带有图像和文本的 UIBarButtonItem

我有一个带有图像和文本的按钮 - 如何给文本本身填充?

带有资产图像和文本的卡片