美文网首页iOSiOS10~最新系统适配相关iOS大咖说
iOS11-设置导航栏、搜索框和TableView

iOS11-设置导航栏、搜索框和TableView

作者: RayJiang97 | 来源:发表于2017-06-08 17:24 被阅读5206次

    两天前在WWDC上苹果发布了iOS11 beta1版本,让我们看下导航栏、搜索框和TableView有什么不一样的地方。

    正常的导航栏

    01.jpeg

    iOS11的导航栏

    在viewDidLoad中加一段代码

    override func viewDidLoad() {
      super.viewDidLoad()
      createData()
            
      // Navigation Bar
      navigationController?.navigationBar.prefersLargeTitles = true
    }
    

    就可以得到这样的效果

    01.gif

    向下滑动Title变成正常的状态,向上滑动Title变大
    现在点击一个cell进入下一个ViewController

    02.jpeg

    在NavigationController下的所有VC的Title都改变了
    我们可以在一个VC中单独设置Title的样式
    在需改修改Title样式的VC中设置navigationItem.largeTitleDisplayMode属性来改变Title的类型

    override func viewDidLoad() {
      super.viewDidLoad()
            
    // 自动设置
    // navigationController?.navigationItem.largeTitleDisplayMode = .automatic
    // 大标题
    // navigationController?.navigationItem.largeTitleDisplayMode = .always
    // 小标题
      navigationController?.navigationItem.largeTitleDisplayMode = .never
    }
    

    现在Title变成原始状态了

    03.jpeg
    Tip:上述的代码可以在Xcode9中的storyboard上直接设置

    iOS11的搜索框

    添加一个搜索框

    override func viewDidLoad() {
      super.viewDidLoad()
      createData()
            
      // Navigation Bar
      navigationController?.navigationBar.prefersLargeTitles = true
      // Search Controller
      let mySearchController: UISearchController = UISearchController(searchResultsController: UIViewController())
      navigationItem.searchController = mySearchController
    }
    

    效果图

    02.gif

    可以看到搜索框会下拉出现,上拉隐藏,这些系统都帮我们做好了,我们只需要设置一下就可以有这样的效果

    iOS11的UITableView

    UITableView多了两个代理方法
    override func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration?

    override func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration?

    先看下效果

    03.gif

    我们可以看到iOS11中多了从左侧划出来的action
    大幅度向一个方向滑动会直接触发action

    具体的实现方法

    /// 从左侧划出
    override func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
      let action = UIContextualAction(style: .normal, title: "Mark") { (action, view, handler) in
        self.updateMarkState(for: indexPath)
        handler(true)
      }
      action.backgroundColor = UIColor(colorLiteralRed: 73/255.0, green: 175/255.0, blue: 254/255.0, alpha: 1)
            
      if markState(for: indexPath) {
        action.title = "Unmark"
        action.backgroundColor = UIColor.red
      }
            
      let configuration = UISwipeActionsConfiguration(actions: [action])
      return configuration
    }
        
    /// 从右侧划出
    override func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
      let action = UIContextualAction(style: .destructive, title: "Delete") { (action, view, handler) in
        self.removeItem(at: indexPath)
        handler(true)
      }
    
      let configuration = UISwipeActionsConfiguration(actions: [action])
      return configuration
    }
    

    可以设置多个action
    let configuration = UISwipeActionsConfiguration(actions: [action, ...])


    上述的3个特性仅在iOS11上有效

    如果要兼容低版本需要判断当前系统的版本

    if #available(iOS 11.0, *) {
      navigationController?.navigationBar.prefersLargeTitles = true
    } else {
      // Fallback on earlier versions
    }
    

    相关文章

      网友评论

      • 迷曳:搜索栏下面那条线怎么去掉,参考AppStore 的搜索栏
      • d0afe70ea42f:学习喽,不错
      • b240f7376923:xcode9想要设置成iOS 11这样的风格该怎么实现呢

      本文标题:iOS11-设置导航栏、搜索框和TableView

      本文链接:https://www.haomeiwen.com/subject/rhktqxtx.html