从左侧滑动 UIBarButtonItem

Posted

技术标签:

【中文标题】从左侧滑动 UIBarButtonItem【英文标题】:Slide UIBarButtonItem from the left 【发布时间】:2018-12-13 20:02:00 【问题描述】:

当转到辅助页面时,我试图在 0.33 秒内从左侧滑入后退按钮。现在动画似乎没有这样做,即使在将持续时间减慢到 2 秒以进行视觉澄清之后也是如此。想知道是否有人可以告诉我我在代码中做错了什么以及如何纠正它?

要站出来说我可能只是误解了动画的某些方面是如何工作的。

func addBackButton() 
        let backButton = UIButton(type: .custom)
        backButton.setImage(#imageLiteral(resourceName: "backArrow"), for: .normal)
        backButton.setTitle("", for: .normal)
        backButton.setTitleColor(backButton.tintColor, for: .normal)
        backButton.addTarget(self, action: #selector(backAction), for: .touchUpInside)
        let backBarButtonItem = UIBarButtonItem(customView: backButton)
        backBarButtonItem.customView?.transform = CGAffineTransform(translationX: -backButton.frame.width, y: 0)
        navigationItem.leftBarButtonItems?.insert(backBarButtonItem, at: 0)
        UIView.animate(withDuration: 2, delay: 0.5, animations: 
            backBarButtonItem.customView?.transform = CGAffineTransform(translationX: 2 * backButton.frame.width, y: 0)
        )
    

【问题讨论】:

【参考方案1】:

您只需将此自定义按钮放在containerView 中,并将containerView 设置为UIBarButtonItem's 自定义视图。您的设置将如下所示,

let containerFrame = CGRect(origin: .zero, size: CGSize(width: 44.0, height: 44.0))
let container = UIView(frame: containerFrame)

let buttonFrame = CGRect(origin: CGPoint(x: -100, y: 0), size: CGSize(width: 44, height: 44))  
let backButton = UIButton(frame: buttonFrame)
backButton.setImage(#imageLiteral(resourceName: "backArrow"), for: .normal)
backButton.setTitle("", for: .normal)
backButton.setTitleColor(backButton.tintColor, for: .normal)
backButton.addTarget(self, action: #selector(backAction), for: .touchUpInside)
container.addSubview(backButton)

let backBarButtonItem = UIBarButtonItem(customView: container)
UIView.animate(withDuration: 2, delay: 0.5, animations: 
    backButton.transform = CGAffineTransform(translationX: 2 * backButton.frame.width, y: 0)
)

您可以检查为什么需要将自定义 button 包装在另一个 UIView here 中。

【讨论】:

这个答案解决了它,尽管我也赞成@Procrastin8 以及转换身份的帮助。谢谢你们俩【参考方案2】:

UIBarButtonItem 不是 UIView 子类是有原因的。如果这是您想要的效果(平台一致性表明您应该使用UINavigationItem.setLeftBarButtonItems(_:animated:)),那么您应该将backButton 添加到您的视图层次结构中,对其进行动画处理,然后在完成块中将其设置为leftBarButtonItem

请记住,您可能必须将其添加到导航栏视图层次结构中,以便它显示在其顶部。这种方法也意味着你基本上是在复制导航栏的布局代码,你必须弄清楚它应该在哪里结束。

navigationController?.navigationBar.addSubview(backButton)

// layout back button in it's final spot here, either via constraints or frame math

backButton.transform = CGAffineTransform(translationX: -(button.bounds.width + leadingSpacing), translationY: 0.0)

UIView.animate(duration: 0.3, animations: 
    backButton.transform = .identity
  completed in
    self.navigationItem.leftBarButtonItem = UIBarButtonItem

【讨论】:

以上是关于从左侧滑动 UIBarButtonItem的主要内容,如果未能解决你的问题,请参考以下文章

自定义导航栏切换(从下拉菜单到左侧滑动)

从左侧(或右侧)滑动UIView的动画事务

当使用 Tailwind CSS 单击按钮时,从屏幕左侧制作侧边栏滑动

Bootstrap 4 移动导航栏从左侧滑动

Leetcode练习(Python):滑动窗口:第239题:滑动窗口最大值:给定一个数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动

Leetcode练习(Python):滑动窗口:第239题:滑动窗口最大值:给定一个数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动