2016-07-26 3 views
3

У меня есть табличный вид, который я бы хотел найти. Я понимаю, как это сделать, но есть ли способ, которым я могу иметь элемент кнопки панели, который расширяется до строки поиска (определенной ширины) прямо внутри моего заголовка представления таблицы? Например, могу ли я сделать что-то вроде ниже в swift?Swift Расширяемая панель поиска в заголовке?

Expandable Search Bar

+0

Я считаю, что все услуги должны быть погашены. Хотите это в панели навигации или просто в верхней части окна? –

+0

Спасибо! Внутри панели навигации, справа. –

+0

Я только что закончил демонстрацию, но, похоже, на нее уже ответили. Если вам нужен другой вариант, не стесняйтесь отвечать, и я отправлю его. :) –

ответ

5

Вот рабочий пример:

enter image description here

class ExpandableView: UIView { 

    override init(frame: CGRect) { 
     super.init(frame: frame) 
     backgroundColor = .green 
     translatesAutoresizingMaskIntoConstraints = false 

    } 

    required init?(coder aDecoder: NSCoder) { 
     super.init(coder: aDecoder) 
    } 

    override var intrinsicContentSize: CGSize { 
     return UILayoutFittingExpandedSize 
    } 
} 


class ViewController: UIViewController { 

    var leftConstraint: NSLayoutConstraint! 

    override func viewDidLoad() { 
     super.viewDidLoad() 

     assert(navigationController != nil, "This view controller MUST be embedded in a navigation controller.") 

     // Expandable area. 
     let expandableView = ExpandableView() 
     navigationItem.titleView = expandableView 

     // Search button. 
     navigationItem.rightBarButtonItem = UIBarButtonItem(barButtonSystemItem: .search, target: self, action: #selector(toggle)) 

     // Search bar. 
     let searchBar = UISearchBar() 
     searchBar.translatesAutoresizingMaskIntoConstraints = false 
     expandableView.addSubview(searchBar) 
     leftConstraint = searchBar.leftAnchor.constraint(equalTo: expandableView.leftAnchor) 
     leftConstraint.isActive = false 
     searchBar.rightAnchor.constraint(equalTo: expandableView.rightAnchor).isActive = true 
     searchBar.topAnchor.constraint(equalTo: expandableView.topAnchor).isActive = true 
     searchBar.bottomAnchor.constraint(equalTo: expandableView.bottomAnchor).isActive = true 
    } 

    @objc func toggle() { 

     let isOpen = leftConstraint.isActive == true 

     // Inactivating the left constraint closes the expandable header. 
     leftConstraint.isActive = isOpen ? false : true 

     // Animate change to visible. 
     UIView.animate(withDuration: 1, animations: { 
      self.navigationItem.titleView?.alpha = isOpen ? 0 : 1 
      self.navigationItem.titleView?.layoutIfNeeded() 
     }) 
    } 
} 
+0

Что делать, если я хочу сохранить навигационную панель, которая уже существует? (У меня есть кнопка меню на другой стороне) –

+0

Я предлагаю вам играть с константой 'leftConstraint', чтобы ваша кнопка меню никогда не была закрыта панелью поиска. Кроме того, измените все вхождения 'greenColor' на' clearColor', чтобы отобразить нормальную навигационную панель внизу (ваша исходная панель навигации находится внизу). – paulvs

+0

Спасибо за отличный пример. Я скопировал ваш пример кода, чтобы проверить его, но я получаю странный результат. Кажется, что поисковая панель расширяется от центра при открытии и прячется справа при закрытии (как если бы левое ограничение удалялось и * затем * ограничение ширины активировалось, хотя оба они были триггров в одном блоке анимации Вот gif того, что я получаю с указанным выше кодом https://media.giphy.com/media/xUOxeVUTJPfggxG0nK/giphy.gif Я попытался сделать некоторые коррективы и подошел близко, но мне бы хотелось посмотреть, если есть лучший способ получить вышеуказанный результат. – Eden

Смежные вопросы