【问题标题】:Is it possible to have a UIButton comprised of text, but at the end has an image?是否可以有一个由文本组成的 UIButton,但最后有一个图像?
【发布时间】:2013-12-01 16:23:09
【问题描述】:

例如,这样的按钮可以实现吗?

我已经看到像this 这样的问题,他们在之前讨论过如何放置它,这确实很容易,但我不完全确定如何将它附加到按钮文本的末尾时文本可以是任何东西。从概念上讲,它就像有文本,然后在其右侧 10pt 处显示一个 UIButton。

最好的方法是简单地使用UIView,其中包含UILabelUIImageView,并附加点击手势识别器?

【问题讨论】:

    标签: ios objective-c uiview uibutton uilabel


    【解决方案1】:

    快速示例:

    - (void)viewDidLoad
    {
        [super viewDidLoad];
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    
        UIImage *img = [UIImage imageNamed:@"Arrow.png"];
        [button setTitle:@"A Button" forState:UIControlStateNormal];
        [button setImage:img forState:UIControlStateNormal];
        [button sizeToFit];
    
        CGRect imageRect = [button imageRectForContentRect:button.bounds];
        CGRect titleRect = [button titleRectForContentRect:button.bounds];
    
        UIEdgeInsets imageInset = UIEdgeInsetsZero;
        UIEdgeInsets titleInset = UIEdgeInsetsZero;
    
        titleInset.left = -2 * imageRect.size.width;
        imageInset.left = titleRect.size.width;
    
        button.titleEdgeInsets = titleInset;
        button.imageEdgeInsets = imageInset;
        [self.view addSubview:button];
    
        CGFloat prevHeight = button.frame.size.height;
        UIButton *anotherButton = [UIButton buttonWithType:UIButtonTypeCustom];
    
        [anotherButton setTitle:@"Another Button" forState:UIControlStateNormal];
        [anotherButton setImage:img forState:UIControlStateNormal];
        [anotherButton sizeToFit];
    
        imageRect = [anotherButton imageRectForContentRect:anotherButton.bounds];
        titleRect = [anotherButton titleRectForContentRect:anotherButton.bounds];
    
        imageInset = UIEdgeInsetsZero;
        titleInset = UIEdgeInsetsZero;
    
        titleInset.left = -2 * imageRect.size.width;
        imageInset.left = titleRect.size.width;
    
        anotherButton.titleEdgeInsets = titleInset;
        anotherButton.imageEdgeInsets = imageInset;
    
        CGRect frame = anotherButton.frame;
        frame.origin.y += prevHeight + 4;
    
        [anotherButton setFrame:frame];
    
        [self.view addSubview:anotherButton];
    }
    

    如果你想在标题和图片之间添加空格,你只需要调整按钮的大小和插图。

    【讨论】:

    • 第一个按钮的框架在哪里定义? sizeToFit 有必要吗?
    • @DougSmith sizeToFit 计算按钮的大小。所以是的,如果您自己没有定义框架,则有必要发送它。如果没有sizeToFit button.bounds 和其他矩形将等于 CGRectZero。
    • 使用 viewDidLoad 中的这个 sn-p,当点击按钮时,该方法永远不会被调用:gist.github.com/anonymous/28f2d5536ff2c1bd9482
    • @DougSmith 在我的测试中使用UIControlEventTouchUpInsideUIControlEventTouchUpOutside 没有问题,小心使用UIControlEventTouchUpOutside
    • 因为我是个白痴,谢谢你的理解。我的最后一个问题是,如果我将其设为navigation.titleView,它的效果非常好,但我希望它基于文本而不是整个按钮居中(因此它会稍微靠右一些)。如果我将它设置为titleView,是否可以将它推到更右边?
    【解决方案2】:

    您也可以只在它们上面加上一个UILabel 和一个UIImageView 和一个不可见的UIButton

    或者如您所说,UIView 包含自定义内容和手势识别器。然而,在这种情况下,实现与常规按钮相同的行为可能会更加困难(没有突出显示,在松开之前不能移动手指等)

    另外,UIButtonUIView 的子类。这意味着,您可以轻松地在UIButton 中添加额外的子视图(例如UIImageView)。

    您可以使用一个空的UIButton,然后在其中放入一个UILabel 和一个UIImageView。并使用自动布局将它们定位在按钮内。

    【讨论】:

    • 似乎您无法在 Interface Builder 中向 UIButton 添加其他子视图。那么我认为最好在代码中做?
    • 好的。当我在viewDidLoad 中使用这个 sn-p 时,该方法永远不会被调用。我究竟做错了什么? gist.github.com/anonymous/7736502
    • 无法在 Interface Builder 中添加图像是有原因的。 Apple 将标准控件的子视图视为其实现细节,并建议您不要添加自己的子视图:developer.apple.com/library/IOS/documentation/WindowsViews/…
    • 啊,很公平。搜索继续。
    【解决方案3】:

    只需创建UIButton

    UIImage *arrowDownImage = [UIImage imageNamed:@"arrowDown.png"];
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setImage:arrowDownImage forState:UIControlStateNormal];
    [button setTitle:@"Test" forState:UIControlStateNormal];
    
    // set image and title Inset 
    
    [button setImageEdgeInsets:UIEdgeInsetsMake(<#CGFloat top#>, <#CGFloat left#>, <#CGFloat bottom#>, <#CGFloat right#>)];
    [button setTitleEdgeInsets:UIEdgeInsetsMake(<#CGFloat top#>, <#CGFloat left#>, <#CGFloat bottom#>, <#CGFloat right#>)];
    

    使用 Insets,这将为您提供所需的一切。

    这是按钮的 IB 示例,但您可以以编程方式执行相同操作。

    这是 ImageInset

    标题插图

    【讨论】:

    • 我应该尝试什么样的插图?
    • 好吧^如果你的图像是从按钮的左侧插入的,那么使用(按钮的宽度 - 图像的宽度)值,只需使用这些值,你就会知道什么它给了你。
    • 当文本发生变化时,我看不出它是如何工作的。看来需要硬编码了。
    • 如果按钮大小动态变化,请使用按钮大小设置图像和文本的 Insets。
    • 如何在不设置框架的情况下获取按钮大小?如果我设置框架,大小永远不会改变,但如果我使用自动布局,button.bonds.size.width 似乎总是 0。
    猜你喜欢
    • 1970-01-01
    • 2019-03-07
    • 1970-01-01
    • 1970-01-01
    • 2016-11-21
    • 2018-09-11
    • 2021-04-12
    • 2019-08-24
    • 2022-01-27
    相关资源
    最近更新 更多