将 leftbarbuttonitem 的可点击区域限制为自定义 uibarbuttonitem 的大小答案

【问题标题】：Restrict clickable area of leftbarbuttonitem to the size of custom uibarbuttonitem将 leftbarbuttonitem 的可点击区域限制为自定义 uibarbuttonitem 的大小
【发布时间】：2015-01-26 19:19:56
【问题描述】：

我在我的应用上实现了 SWReveal 控件。为了触发动作，我有一个带有自定义视图的 UIBarButtonItem。好吧，一切正常，但我注意到，即使在远离图像（大约 44 像素宽的图像......并且点击最大 100 像素）时，我也可以触发事件。

我已经搜索了一段时间，找到了最好的解决方案（定义自定义按钮并使用“initWithCustomView”实例化 UIBarButtonItem）

这是我之前的代码：

UIBarButtonItem *revealButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"reveal-icon"] style:UIBarButtonItemStylePlain target:_revealController action:@selector(revealToggle:)];
self.navigationItem.leftBarButtonItem = revealButtonItem;

以及带有“解决方案”的代码：

//create the image for your button, and set the frame for its size
UIImage *image = [UIImage imageNamed:@"reveal-icon"];
CGRect frame = CGRectMake(0, 0, image.size.width, image.size.height);
//init a normal UIButton using that image
UIButton* button = [[UIButton alloc] initWithFrame:frame];
[button setBackgroundImage:image forState:UIControlStateNormal];
[button addTarget:_revealController action:@selector(revealToggle:) forControlEvents:UIControlEventTouchUpInside];
//finally, create your UIBarButtonItem using that button
UIBarButtonItem* revealButtonItem = [[UIBarButtonItem alloc] initWithCustomView:button];

self.navigationItem.leftBarButtonItem = revealButtonItem;

通过后面的代码，我知道我有一个正确大小的按钮（我设置了 backgroundColor，并检查了按钮的正确大小），但在远离按钮点击时仍然触发动作。

¿有什么想法吗？

提前谢谢你。

【问题讨论】：

不回答您的问题，但是：您为什么要这样做？ iOS 增加条形按钮项的可触摸区域是有原因的。您似乎在那里有一个菜单按钮（作为左侧唯一的按钮），我真的看不出明确使可触摸区域小于默认值的任何优势。并且：在设备上测试这个，而不是在模拟器上！！
如果你的可触摸区域只有大约 20x20pt（只是猜测你图标的大小），你的用户会杀了你.. ;-)
我已经阅读了苹果的 Humans 指南，我并没有假装做这么小的按钮，但是，正如我在问题中所说，问题是可选择区域比 Apple 大得多按钮的实际大小（您可以在其他著名的应用程序中看到相同的问题，在该应用程序中，您有一个自定义图像用作按钮，但在远离它的地方点击会触发操作。但在 facebook 应用程序中，您会看到此行为已更正. :)
@raululm 我的leftBarButtonItem 遇到了完全相同的问题，您解决了还是接受了？ :)

标签： ios uibarbuttonitem

【解决方案1】：

尝试button.clipsToBounds = YES;，但我必须同意其他cmets，根据Apple的iOS Human Interface Guidelines，每个可点击区域至少应为44x44。

【讨论】：

我已经试过了，还是不行:(我完全同意你关于可点击区域的观点，但是当你只有一个按钮时，导航栏的导航区域比实际大小大按钮的大小（我的按钮尺寸为 44x44），对于我的客户来说，当没有按钮时触摸有点奇怪，无论如何按钮都会被点击。非常感谢 :)

【解决方案2】：

自定义视图路线似乎对我有用，但我确实找到了另一种解决方案，如果它不适合你，你可以尝试。似乎可点击区域仅延伸到用户可以点击的东西为止。我有一个标题视图，用户可以点击它来做某事，所以我的 leftbarbuttonitem 的可点击区域停在那里。但我也尝试添加另一个 uiview，其中 userinteractionenabled 设置为 yes，就在 leftbarbuttonitem 的右侧，这似乎阻止了该区域的扩展。我能够只使用两行标准代码而不是自定义代码。不确定这是否适合您

【讨论】：

【解决方案3】：

It is hard to make uibarbuttonitem touch area override. We can achieve the same using subclassing uinavigationbar.

File-New-CocoaTouch Class-UINavigationBar- Name it.

This is mine:

import UIKit
import Foundation

let navigationItem : UINavigationItem = UINavigationItem()

class CustomNavigationBar: UINavigationBar {

    override init(frame: CGRect) {
        super.init(frame: frame)

        self.backgroundColor = UIColor.redColor()
    }
    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
    }
    override func drawRect(rect: CGRect) {

    }
    func addUIButtonToUIBarButtonitems(leftButton:UIButton,leftButtonFrame:CGRect,rightButton:UIButton,rightButtonFrame:CGRect)
    {
        let leftView = UIView(frame: leftButtonFrame)
        leftView.addSubview(leftButton)

        let leftItem:UIBarButtonItem = UIBarButtonItem(customView: leftView)
        navigationItem.leftBarButtonItem = leftItem

        let rightView = UIView(frame: rightButtonFrame)
        rightView.addSubview(rightButton)

        let rightItem:UIBarButtonItem = UIBarButtonItem(customView: rightView)
        navigationItem.rightBarButtonItem = rightItem

        items = [navigationItem]
    }
}

I have a method for setting uibuttons as uibarbuttonitems. On View Controller, I will add two unbuttons and will pass the same to the navigation bar. The frame of the unbutton will be the click area of the respective uibattonitem.

class CustomNavBarVC: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        self.styleCustomNavigationBar()
    }

    func styleCustomNavigationBar() {

        self.navigationController?.setNavigationBarHidden(true, animated: false)

        let navigationBar : CustomNavigationBar = CustomNavigationBar(frame: CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), 64.0))

        //menu button
        let menubutton: UIButton = UIButton(frame: CGRectMake(0,0,30,30))
        menubutton.setImage(UIImage(named: "menu"), forState: UIControlState.Normal)
        menubutton.addTarget(self, action: "backButtonDidClicked", forControlEvents: UIControlEvents.TouchUpInside)

        //search button
        let searchbutton: UIButton = UIButton(frame: CGRectMake(0,0,30,30))
        searchbutton.setImage(UIImage(named: "search1x"), forState: UIControlState.Normal)
        searchbutton.addTarget(self, action: "backButtonDidClicked", forControlEvents: UIControlEvents.TouchUpInside)


        navigationBar.addUIButtonToUIBarButtonitems(menubutton, leftButtonFrame: CGRectMake(0,0,30,30), rightButton: searchbutton, rightButtonFrame: CGRectMake(0,0,30,30))

        self.view.addSubview(navigationBar)
    }

    func backButtonDidClicked()
    {
        print("CLICK ")
    }
}

【讨论】：

【解决方案4】：

你可以试试这个button.clipsToBounds = YES;

这可能会对你有所帮助。

【讨论】：