【问题标题】:UIButton with Picture and Text带有图片和文字的 UIButton
【发布时间】:2011-06-23 00:46:11
【问题描述】:

我正在尝试制作一个基本上模仿 iphone 主屏幕上看到的按钮的按钮 - 它有一张垂直放置在某些文本上方的图片,并且两者都是按钮的一部分并且行为适当(暗淡、可点击等)突出显示时。

我尝试将图片或文本放入其自己的框架中,但这不起作用,因为新框架中的任何一个都不会随着按钮的其余部分变暗。

使用背景图像属性不起作用,因为我想要文本上方的图像 - 文本后面的区域应该是透明的。我真的更喜欢编程解决方案,而不是进入并编辑我所有的照片。

【问题讨论】:

标签: iphone image ios text uibutton


【解决方案1】:

创建 UIView 的子类,并将 UIImageView 和 UILabel 作为子视图,并使用代码适当地定位它们。

然后您将 UIImageView 和 UILabel 作为属性,以便您可以访问它们,如下所示:

myCustomButton.imageView.image = [UIImage imageNamed:@"..."];
myCustomButton.textLabel.text = @"...";

或者您可能会在互联网上的 github 或其他地方找到第 3 方自定义 UIView。

【讨论】:

  • 还没有尝试过,但这会像按钮一样正常反应吗? (单击按钮时,图像和文本会“变暗”还是“变灰”?)将 UIView 的新子类放入按钮的正确方法是什么?
  • 您必须自己进行调光。您可能可以继承 UIButton 而不是 UIView,您可能不必在其中继承。
  • 我最终继承了 UIbutton,效果很好,但是移动东西很痛苦
  • 我想出了一个这样的图标按钮,如果我有时间我会做一个可以在其他项目中使用的按钮并将它放在 github 或其他东西上
  • 谢谢...这个帮助了我!并且确定 +1
【解决方案2】:

乔纳森的想法不错,但如果你只是用几张图片来做,那就不值得了。您可以创建UIImageUILabel,然后将它们放在界面构建器中的 UIButton 中。

不过,了解子类化等强大功能始终是一个好主意。

祝你好运,

天鹰座

【讨论】:

  • 但是...出于好奇,如何在 Interface Builder 中将 UIImage 和 UILabel 添加到 UIButton?
  • 我应该更清楚 - 您创建图像和标签,然后将 UIButton 悬停在其上。然后将 UIButton 的类型更改为自定义。然后,它将接受触摸事件,但您将看不到它。
  • 所以你说的只是在图像和标签上放一个清晰的按钮。因此,如果您要移动按钮,则图像和标签不会。你可能会认为我有偏见,但这听起来不太好。
  • 这是一种快速而肮脏的方法。如果您要多次使用它,请子类化。但是,如果您只是将其作为一次性的事情来做,那很好。你对它有怀疑是对的,如果你有多个,它有点难以维护。但是,如果您只是想完成某件事,那也没关系。
【解决方案3】:

这样做:

UIButton *btn_chat = [UIButton buttonWithType:UIButtonTypeCustom];
btn_chat.frame = CGRectMake(40, 50, 100, 30);//CGRectMake(20, 20, 200, 72);
UIImage *image = [UIImage imageNamed:@"chat.png"];
CGSize newSize = CGSizeMake(30, 30);
UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
[image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();    
UIGraphicsEndImageContext();
[btn_chat setImage:newImage forState:UIControlStateNormal];
btn_chat.imageEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
[btn_chat setTitle:@"Chat" forState:UIControlStateNormal];
btn_chat.titleEdgeInsets = UIEdgeInsetsMake(0, 20, 0, 0);
btn_chat.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
[btn_chat addTarget:self action:@selector(menuSelection:) forControlEvents:UIControlEventTouchUpInside];
[btn_chat setTag:1001];
[self.view addSubview:btn_chat];

它已经完成了:)

【讨论】:

    【解决方案4】:

    创建一个新的初始透明位图绘图上下文,将图像绘制到顶部,将文本绘制到底部。然后从这个绘图上下文中创建一个新图像,并将该新图像用于按钮。

    【讨论】:

    • 他还不如自己编辑他的图像,并在每次创建按钮时保存。
    • 如果文本和图像是独立的,则无法进行预编辑。或者如果一个人有无数张图片。
    猜你喜欢
    • 2012-07-27
    • 2013-07-18
    • 2018-01-04
    • 2017-12-12
    • 1970-01-01
    • 1970-01-01
    • 2017-11-09
    • 1970-01-01
    • 2013-03-06
    相关资源
    最近更新 更多