Раскадровка для разработки под iOS



Попробуйте наш инструмент устранения неполадок

Раскадровки впервые были представлены разработчикам в выпуске iOS 5. Они избавляют разработчика от необходимости создавать интерфейс каждого экрана в отдельном файле. Раскадровка позволяет вам увидеть концептуальный макет вашего приложения в целом и взаимодействия между каждым экраном. Используя переходы, вы можете установить, как приложение будет переходить между заданными экранами и передавать данные. В этом уроке я покажу вам, как создать простой экран входа в приложение.



Начиная



Первое, что вам нужно сделать, это создать новый проект. Вам понадобится новое одноэкранное приложение, устанавливающее язык на Swift и универсальный язык для устройств. Если вы перейдете к раскадровке, вы должны увидеть пустую сцену контроллера представления. Стрелка на левой стороне контроллера представления указывает, что это корневой контроллер.



раскадровка

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

раскадровка2



Двумя важными для нас являются текст-заполнитель и флажок для безопасного ввода текста. Мы хотим использовать текст-заполнитель, чтобы пользователь знал, какая информация от него требуется, и безопасную запись, чтобы скрыть пароль пользователя от показа. После этого нам понадобится кнопка, чтобы запустить наш переход. Мы можем перетащить его так же, как и текстовое поле. После того, как вы присвоили кнопке заголовок и расположили ваши объекты на экране, они должны выглядеть так:

раскадровка3

Теперь наш первый экран приложения готов, поэтому нам нужно сделать еще один для перехода. Сделайте это, перетащив на экран второй контроллер представления. Чтобы соединить два экрана, вы должны сделать две вещи. Сначала вам нужно будет нажать на кнопку и перетащить ее на новый экран, который вы добавили. Затем вам нужно будет выбрать круг между двумя представлениями. Затем вам нужно будет изменить идентификатор на segue; в этом примере я буду использовать «nextScreen»

раскадровка4

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

class FirstScreen: UIViewController {

@IBOutlet weak var имя пользователя: UITextField!
@IBAction func loginButton (отправитель: AnyObject) {
perfromSegueWithIdentifier («nextScreen», отправитель: сам)
}
}

class SecondScreen: UIViewController {
var user: String!
@IBOutlet weak var имя пользователя: UILabel!

override func viewDidload () {
username.text = пользователь
}
}

После этого не забудьте связать объекты из раскадровки с помощью инспектора соединений на каждом экране. Должны появиться ваши торговые точки, и вы можете щелкнуть кружок справа от них, чтобы связать их.

раскадровка5
Последней реализуемой функцией является функция prepareForSegue в классе первого экрана. Это позволяет передавать данные в новое представление следующим образом:

переопределить удовольствие prepareForSegue (следует: UIStoryboardFollow, отправитель: AnyObject?) {
if segue.identifier == «nextScreen» {
пусть destVC = continue.destinationViewController как UIViewController
destVC.user = self.username
}
}

Теперь у вас есть базовое представление о том, как менять экраны и передавать данные между ними. Это даст вам хороший старт в создании функциональных приложений, удачного программирования!

2 минуты чтения