Как создать выпадающий селектор в iOS?

Создайте выпадающий селектор в iOS с помощью tableView, который показывает пользователю диапазон вариантов вместо использования UIPickerView по умолчанию.

Табличные представления в iOS очень эффективны и могут использоваться для решения самых разных задач. Они просты в управлении и легко настраиваются.

В этом руководстве давайте создадим выпадающий селектор, который можно использовать для ввода данных пользователем.

Вот как будет выглядеть окончательное приложение после того, как мы закончим.

В этом руководстве предполагается, что вы знаете:

• Быстрый
• Xcode
• Автоматический макет

Приступим.

1. Создайте пользовательский интерфейс в раскадровке.

Первое, что нам нужно сделать, это создать пользовательский интерфейс с помощью компонентов iOS и автоматического макета в раскадровке.

Здесь мы собираемся использовать UILabels, UITextFields, UITableView и UIButton.

1. Разработайте ViewController.

Добавьте UITableView под последним текстовым полем (текстовое поле опыта), установите для него ограничения и добавьте submitButton, который будет использоваться для хранения данных, введенных пользователем.

2. Создайте настраиваемую ячейку TableViewCell.

Теперь мы создаем настраиваемую ячейку TableViewCell, используя Cocoa Touch для присоединения к нашему TableView. Не забудьте установить флажок «Создать файл XIB», чтобы создать файл XIB. В этом файле мы будем создавать TableViewCell, вот описание

XIB расшифровывается как XML Interface Builder. Interface Builder - это программное приложение, которое позволяет разрабатывать графический пользовательский интерфейс с помощью какао и углерода.

2. Подключите пользовательский интерфейс к коду.

Мы должны соединить компоненты в раскадровке с ViewController. Затем мы расширяем наш ViewController, используя протоколыUITableViewDataSource and UITableViewDelegate, чтобы мы могли использовать tableView.

import UIKit
class HomeViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    //outlets
    @IBOutlet var containerView: UIView!
    @IBOutlet var personImage: UIImageView!
    //textField outlets
    @IBOutlet var emailTextField: UITextField!
    @IBOutlet var passwordTextField: UITextField!
    @IBOutlet var nameTextField: UITextField!
    @IBOutlet var experienceTextField: UITextField!
    //tableView outlet
    @IBOutlet var experienceTableView: UITableView!
    //button outlets
    @IBOutlet var nextButton: UIButton!
    @IBOutlet var expandButton: UIButton!
    static let identifier = "HomeViewController"
    var experiences = ["Novice", "Intermediate", "Expert"]

Затем мы настраиваем UIComponents для нашего приложения, добавляя свойства. Нам также необходимо зарегистрировать класс Cocoa Touch, который мы создали выше, в нашем TableView.

override func viewDidLoad() {
    super.viewDidLoad()
    // for making the components circular
    self.personImage.clipsToBounds = true
    self.personImage.layer.cornerRadius = self.personImage.frame.height / 2.0
    self.nextButton.clipsToBounds = true
    self.nextButton.layer.cornerRadius = self.nextButton.frame.height / 2.0
    // for adding a border for the textFields
    self.nameTextField.layer.borderColor = UIColor(named: "primaryTextDark")?.cgColor
    self.nameTextField.layer.borderWidth = 0.8
    self.nameTextField.layer.cornerRadius = 6.0
    self.emailTextField.layer.borderColor = UIColor(named: "primaryTextDark")?.cgColor
    self.emailTextField.layer.borderWidth = 0.8
    self.emailTextField.layer.cornerRadius = 6.0
    self.passwordTextField.isSecureTextEntry = true
    self.passwordTextField.layer.borderColor = UIColor(named: "primaryTextDark")?.cgColor
    self.passwordTextField.layer.borderWidth = 0.8
    self.passwordTextField.layer.cornerRadius = 6.0
    self.experienceTextField.layer.borderColor = UIColor(named: "primaryTextDark")?.cgColor
    self.experienceTextField.layer.borderWidth = 0.8
    self.experienceTextField.layer.cornerRadius = 6.0
    // specifying the delegate and dataSource of the tableView
    self.experienceTableView.delegate = self
    self.experienceTableView.dataSource = self
    // registering the custom cocoa touch table view cell
    self.experienceTableView.register(UINib(nibName: "ExperienceTableViewCell", bundle: nil), forCellReuseIdentifier: ExperienceTableViewCell.identifier)
    // adding a shadow for the tableView so that it looks like a drop down
    self.experienceTableView.layer.masksToBounds = false
    self.experienceTableView.layer.shadowOffset = CGSize(width: 0, height: 2)
    self.experienceTableView.layer.shadowColor = UIColor.black.cgColor
    self.experienceTableView.layer.shadowOpacity = 0.5
    self.experienceTableView.layer.shadowRadius = 1
    // hiding the tableView initially
    self.experienceTableView.isHidden = true
}

Наконец, мы пишем код для методов протокола tableView и кнопки расширения.

// setting the number of rows for the tableView
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return experiences.count
}
// setting the height for the rows for the tableView
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return 40.0
}
// setting the cell for the tableView
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    if let cell = tableView.dequeueReusableCell(withIdentifier: ExperienceTableViewCell.identifier, for: indexPath) as? ExperienceTableViewCell {
        cell.experienceText = experiences[indexPath.row]
        return cell
    }
fatalError()
}
// updating the textField on the selection of the cell
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    self.experienceTextField.text = experiences[indexPath.row]
}
// toggling the visibility of the tableView
@IBAction func expandButtonPressed(_ sender: Any) {
    UIView.animate(withDuration: 0.1) {
        self.experienceTableView.isHidden = !self.experienceTableView.isHidden
        self.expandButton.transform =
self.expandButton.transform.rotated(by: +CGFloat.pi + 0.00000001)
    }
 }
}

Заключение

Во-первых, мы разработали пользовательский интерфейс, добавив UILabels, UIButtons, UITextFields, UITableView и UIButton с помощью Auto Layout.

Затем мы создали собственный класс Cocoa Touch для использования его с tableView и разработали пользовательский интерфейс в файле XIB.

Наконец, после подключения выходов пользовательского интерфейса к ViewController мы зарегистрировали ячейку и написали код для скрытия и отображения TableView при нажатии кнопки раскрывающегося списка.

Мы подошли к концу этой статьи, я надеюсь, что она была полезной, и вы кое-что узнали!

Спасибо за чтение!