iOS.& Swift Books 通过教程自动布局

9
动画自动布局约束 由Libranner Santos撰写

到目前为止,您一直在创建静态约束,并学习如何使用自动布局构建应用程序的UI。但是你知道你还可以为你的约束提供动画吗?这是真的 - 在本章中,您将学习如何做到这一点。

有动画,你可以:

  • 向用户提供反馈。
  • 直接关注应用程序的特定部分。
  • 帮助用户应用的部分之间的传送连接。
  • 创造一个更好的外观和感觉。
  • 改善导航。

完成后,动画可以提高用户参与,并且通常是什么(或违反)您的应用程序的成功。创建动画时,您需要考虑三件事:开始值,最终值和时间。

使用核心动画动画自动布局

您可以通过更改约束的常量或通过激活和取消激活约束来动画约束。您选择的方法在很大程度上取决于您正在尝试完成的内容。

在本节中,您将通过更新MessagingApp项目来使用约束动画。具体来说,您将为应用程序添加新功能,允许用户喜欢邮件并将其标记为收藏夹。这是它的工作原理:当用户双重点击消息时,该应用程序将显示一个带有按钮的工具栏,以喜欢消息,并将消息标记为收藏夹。此功能仅适用于用户未发送的消息。

首先,打开MessagingApp项目,构建和运行它。

该应用程序显示两个用户之间的聊天;右边的消息是您发送的消息。如果您现在双击其中一个蓝色泡沫消息,则不会发生任何反应。但那即将改变!

设置为MessageBubbleTableViewCell委托

打开 MessageBubbletableViewCell.swift. 并添加类声明上面下面的代码:

protocol MessageBubbleTableViewCellDelegate {
  func doubleTapForCell(_ cell: MessageBubbleTableViewCell)
}
var delegate: MessageBubbleTableViewCellDelegate?
@objc func doubleTapped() {
    delegate?.doubleTapForCell(self)
 }
let gesture = UITapGestureRecognizer(
  target: self, 
  action: #selector(doubleTapped))
gesture.numberOfTapsRequired = 2
gesture.cancelsTouchesInView = true
contentView.addGestureRecognizer(gesture)
private let toolbarView = ToolbarView()
private var toolbarViewTopConstraint: NSLayoutConstraint!
private func setupToolbarView() {
  //1
  view.addSubview(toolbarView)

  //2
  toolbarViewTopConstraint = 
    toolbarView.topAnchor.constraint(
      equalTo: view.safeAreaLayoutGuide.topAnchor, 
      constant: -100)

  toolbarViewTopConstraint.isActive = true

  //3  
  toolbarView.leadingAnchor.constraint(
    equalTo: view.safeAreaLayoutGuide.leadingAnchor, 
    constant: 30).isActive = true
}
setupToolbarView()
cell.delegate = self
extension MessagesViewController: MessageBubbleTableViewCellDelegate {
  func doubleTapForCell(_ cell: MessageBubbleTableViewCell) {
    //1
    guard let indexPath = self.tableView.indexPath(for: cell)
      else { return }
    let message = messages[indexPath.row]
    guard message.sentByMe == false else { return }

    //2
    toolbarViewTopConstraint.constant = cell.frame.midY

    //3
    toolbarView.alpha = 0.95

    //4
    toolbarView.update(
      isLiked: message.isLiked, 
      isFavorited: message.isFavorited)
    
    //5
    toolbarView.tag = indexPath.row

    //6
    UIView.animate(
      withDuration: 1.0,
      delay: 0.0,
      usingSpringWithDamping: 0.6,
      initialSpringVelocity: 1,
      options: [],
      animations: {
        self.view.layoutIfNeeded()
      },
      completion: nil)
  }
}

@objc func hideToolbarView() {
  //1
  self.toolbarViewTopConstraint.constant =  -100
  
  //2
  UIView.animate(
    withDuration: 1.0,
    delay: 0.0,
    usingSpringWithDamping: 0.6,
    initialSpringVelocity: 1,
    options: [],
    animations: {
      self.toolbarView.alpha = 0
      self.view.layoutIfNeeded()
  },
  completion: nil)
}
let gesture = UITapGestureRecognizer(
  target: self, 
  action: #selector(hideToolbarView))
gesture.numberOfTapsRequired = 1;
gesture.delegate = self
tableView.addGestureRecognizer(gesture)
extension MessagesViewController: UIGestureRecognizerDelegate {
  func gestureRecognizer(
    _ gestureRecognizer: UIGestureRecognizer, 
    shouldReceive touch: UITouch
  ) -> Bool {
    return touch.view == tableView
  }
}

toolbarView.delegate = self
extension MessagesViewController: ToolbarViewDelegate {
  func toolbarView(
    _ toolbarView: ToolbarView, 
    didFavoritedWith tag: Int
  ) {
    messages[tag].isFavorited.toggle()
  }
  
  func toolbarView(
    _ toolbarView: ToolbarView, 
    didLikedWith tag: Int
  ) {
    messages[tag].isLiked.toggle()
  }
}

关键点

  • 记住,你可以激活和关闭的约束来创建动画。
  • 使用动画来创建一个更具吸引力的用户体验。
  • To force Auto Layout to satisfy the new constraints, call layoutIfNeeded() on the affected view.

有一个技术问题?想报告一个错误吗? 你可以问的问题和bug报告本书的作者在我们的官书论坛 这里 .

有关于网上阅读体验反馈给份额? 如果您有关于UI,UX,突出显示或我们在线阅读器的其他功能的反馈,您可以将其发送到设计团队,其中表格如下所示:

© 2021 Razeware LLC

您正在阅读的自由,以显示为本章的部分 混淆了 文本。解开这本书,我们的书籍和视频整个目录,具有raywenderlich.com专业订阅。

现在解锁

为了突出或做笔记,你需要通过自己拥有这本书的订阅或能力。