在导航栏按钮中使整个 UIView 可点击?
Make whole UIView clickable in nav bar button?
我正在制作一个带有自定义视图 (btnView) 的左栏按钮。我希望此视图位于屏幕边缘,Swift 不允许这样做,因为如果我尝试添加位于左侧更远位置的视图,它会将条形按钮向右移动。当我扩展框架以适合我的 UIView 时,它只是移动所有内容以适合边距。
< 限制设置在距边缘 15 点左右。
启用isUserInteractionEnabled
不会影响 UIView 的可点击性,它仍然响应那个小区域而不是最左边的边缘。
这是我现在的按钮:
func addBackButton() {
// position of btn view on navbar
let btnView = UIView(frame: CGRect(x:-15.5, y:-6, width: 58.5, height: 44))
// position of label in btn view
let label = UILabel(frame: CGRect(x: 24.5, y: 13, width: 0, height: 0))
label.font = UIFont.systemFont(ofSize: 17)
label.textAlignment = .left
label.textColor = .systemBlue
label.text = "VET"
label.sizeToFit()
btnView.addSubview(label)
let icon = UIImage(systemName: "chevron.left", withConfiguration: UIImage.SymbolConfiguration(pointSize: 23, weight: .medium))
// convert UIImage to UIView
let iconView = UIImageView(image: icon)
// position of icon in btn view
iconView.frame.origin.x = 5.5
iconView.frame.origin.y = 12
btnView.addSubview(iconView)
// make small button to stick the view onto
let backBtn = UIButton(type: .custom)
backBtn.addTarget(self, action: #selector(goBack), for: .touchUpInside)
backBtn.addSubview(btnView)
// make button clickable behind btn view
btnView.isUserInteractionEnabled = false
// convert UIButton to UIBarButtonItem and add to navbar
navigationItem.leftBarButtonItem = UIBarButtonItem(customView: backBtn)
}
我还尝试在 btnView 上添加第二个按钮,以便它可以正确定位,但由于某种原因它仍然无法点击,只有导航栏按钮区域有响应。
有没有更简单的方法来实现这个?我想避免额外的 类 或像我在某些主题中看到的那样的扩展,但我现在没有任何更简单的选择,所以我正在重新考虑。
解决方案:
我明白了。您可以将视图和按钮作为子视图添加到导航栏,而不是将它们限制在 leftBarButton 中。
我在我的视图上添加了按钮:
// add button over view to perform action
let clickableBtn = UIButton(type: .custom)
clickableBtn.frame = CGRect(x:0, y:0, width: 58.5, height: 44)
clickableBtn.addTarget(self, action: #selector(goBack), for: .touchUpInside)
btnView.addSubview(clickableBtn)
删除了 isUserInteractionEnabled
和 backBtn 代码
并将视图添加到导航栏:
// add btnView to navbar as subview
navigationController?.navigationBar.addSubview(btnView)
我正在制作一个带有自定义视图 (btnView) 的左栏按钮。我希望此视图位于屏幕边缘,Swift 不允许这样做,因为如果我尝试添加位于左侧更远位置的视图,它会将条形按钮向右移动。当我扩展框架以适合我的 UIView 时,它只是移动所有内容以适合边距。
启用isUserInteractionEnabled
不会影响 UIView 的可点击性,它仍然响应那个小区域而不是最左边的边缘。
这是我现在的按钮:
func addBackButton() {
// position of btn view on navbar
let btnView = UIView(frame: CGRect(x:-15.5, y:-6, width: 58.5, height: 44))
// position of label in btn view
let label = UILabel(frame: CGRect(x: 24.5, y: 13, width: 0, height: 0))
label.font = UIFont.systemFont(ofSize: 17)
label.textAlignment = .left
label.textColor = .systemBlue
label.text = "VET"
label.sizeToFit()
btnView.addSubview(label)
let icon = UIImage(systemName: "chevron.left", withConfiguration: UIImage.SymbolConfiguration(pointSize: 23, weight: .medium))
// convert UIImage to UIView
let iconView = UIImageView(image: icon)
// position of icon in btn view
iconView.frame.origin.x = 5.5
iconView.frame.origin.y = 12
btnView.addSubview(iconView)
// make small button to stick the view onto
let backBtn = UIButton(type: .custom)
backBtn.addTarget(self, action: #selector(goBack), for: .touchUpInside)
backBtn.addSubview(btnView)
// make button clickable behind btn view
btnView.isUserInteractionEnabled = false
// convert UIButton to UIBarButtonItem and add to navbar
navigationItem.leftBarButtonItem = UIBarButtonItem(customView: backBtn)
}
我还尝试在 btnView 上添加第二个按钮,以便它可以正确定位,但由于某种原因它仍然无法点击,只有导航栏按钮区域有响应。
有没有更简单的方法来实现这个?我想避免额外的 类 或像我在某些主题中看到的那样的扩展,但我现在没有任何更简单的选择,所以我正在重新考虑。
解决方案:
我明白了。您可以将视图和按钮作为子视图添加到导航栏,而不是将它们限制在 leftBarButton 中。
我在我的视图上添加了按钮:
// add button over view to perform action let clickableBtn = UIButton(type: .custom) clickableBtn.frame = CGRect(x:0, y:0, width: 58.5, height: 44) clickableBtn.addTarget(self, action: #selector(goBack), for: .touchUpInside) btnView.addSubview(clickableBtn)
删除了
isUserInteractionEnabled
和 backBtn 代码并将视图添加到导航栏:
// add btnView to navbar as subview navigationController?.navigationBar.addSubview(btnView)