Popover Controller на iPhone — пример создания из кода. ч.1

demo6_sized_start_popver_proSwift

Уважаемые читатели! Хочу первый урок на нашем сайте посвятить popoverController’у. То что вы видите — это прототип того, что мы будем делать в этом уроке. Повторюсь это первый урок, так что прошу не сильно критиковать. Однако отзывы и пожелания все же хочется увидеть, чтобы знать, как развиваться дальше.

Давайте начнем!

И для начала подумаем как будет выглядеть наш проект, чтобы прикинуть план действий. Дело в том, что popoverViewController — это контроллер, который открывается модально, т.е. после его открытия на экране пользователь может взаимодействовать только в пределах этого контроллера (еще пример модального контроллера — это контроллер открытый на весь экран, — тут пользователь тоже не может тапнуть кнопку, которая была на предыдущем контроллере). Однако popover контроллер — это окошечко с любым содержимым, определенного размера и стрелочкой, которая указывает на элемент, который вызвал этот контроллер. И закрывается он, если тапнуть на экран вне области popover`а.   В стартовой gif-демонстрации эти стрелочки хорошо видны — они белого цвета, в отличие от цвета фона.

Создать popoverViewController можно двумя способами:

  1. Во встроенном в XCode редакторе интерфейсов (Interface builder)
  2. Создать popover программно, т.е. из кода.

Для разъяснения обоих случаев нам потребуется основной viewController, с двумя элементами на нем. Когда пользователь будет нажимать на эти элементы программа будет показывать наши popover контроллеры, сделанные этими двумя способами. В этом примере будет кнопка и произвольное view. Произвольное view выбрано не случайно — все элементы интерфейса, будь то кнопка, слайдер или переключатель — это все подклассы UIView, следовательно данным способом можно вызвать popover на любом элементе UI.

В итоге нам нужно:

  • создать файлы и классы в них для описания поведения контроллеров
  • создать в Interface builder (Storyboard) эти три контроллера и присвоить им  созданные классы классы
  • приступить к написанию кода,  который описывает поведение и взаимодействия между контроллерами.

 

newProject_popver_proSwift

Создадим новый проект: для этого откроем XCode и выберем «Create a new XCode project». В шаблонах, которые Xcode нам любезно предлагает, следует выбрать «Single view application».   Далее необходимо указать имя проекта, в моем случае это «popoveVC», указать место для сохранения проекта на диске.

Далее добавляем в проект файлы Swift и называем их. Я назвал PopVC и FromViewTapPPC. Классы в этих файлах я назвал точно также. Вот содержимое этих файлов на данном этапе:

//
// proSwift.ru
//
// PopVC.swift

import UIKit

class PopVC: UIViewController {

}

 

//
// proSwift.ru
//
//  FromViewTapPPC.swift

import UIKit

class  FromViewTapPPC: UIViewController {

}

Что у нас в итоге получилось? Один контроллер — ViewController, созданный Xcode и два других, которые мы создали самостоятельно:

fileList_popver_proSwift

Соответственно ViewController — это будет основной контроллер, PopVC — popover, нарисованный в Storyboard, а FromViewTapPPC — popover, сконструированный программно.

Теперь необходимо нарисовать наши контроллеры. Переходим в Main.Storyboard и к уже имеющемуся ViewController’у  из библиотеки элементов перетаскиваем два viewController’а. В инспекторе атрибутов присваиваем этим контроллерам наши созданные классы. Для удобства следует изменить цвет фона для каждого контроллера. Я выбрал следующую цветовую схему:

  • ViewController — серый
  • PopVC — зеленый
  • FromViewTapPPC — голубой

Main.Storyboard приблизительно выглядит вот так:

start_sb_popover_proswift

 

Теперь следует добавить элементы UI на сами контроллеры:

На ViewController нужно добавить кнопку, — на этой кнопке я сделал надпись «Зеленый», а также произвольное View, фоном которого я сделал синий цвет. Далее необходимо сделать outlet для нашего синего view. Обратите внимание, что для кнопки не нужно создавать ни outlet ни action, т.к. по кнопке мы будем открывать popover, созданный в Interface Builder. А вот нажатие на синее view мы должны обработать. Поэтому ссылку на него мы будем держать «под рукой».

Я надеюсь все читатели понимают как сделать оutlet, однако если с этим возникли сложности — напишите в комментариях — я подробнее расскажу о процедуре их создания.

//
// proSwift.ru
//
// ViewController.swift

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var blueView: UIView! // созданный outlet

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

}

На popVC нужно добавить Label и указать в нем произвольный текст. Я написал «popover сделаный в Storyboard»

На FromViewTapPPC следует также добавить Label, однако в данном примере я бы хотел показать возможность передачи информации из текущего контроллера в popover. Поэтому для этого Label необходимо создать outlet.

//
// proSwift.ru
//
// FromViewTapPPC.swift


import UIKit

class FromViewTapPPC: UIViewController {

    @IBOutlet weak var label: UILabel! // outlet для Label FromViewTapPPC
    
    // 1
    var name = "Программно сделаный popover" {
        didSet {
            // 2
            label?.text = name
        }
    }
    
    // 3
    override func viewDidLoad() {
        super.viewDidLoad()
        label.text = name
    }
  
}

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

  1. Создается свойство класса FromViewTapPPC переменная name, которой по умолчанию присваивается значение «Программно сделаный popover». Для этого свойства назначается наблюдатель, который в случае установки нового значения переменной name выполнит замыкание 2, а именно обновит значение Label. Простыми словами все что засунем в переменную name — контроллер отобразит в тексте Label.
  2. Описанное выше замыкание. Кстати, знак вопроса после слова label следует указать потому, что при срабатывании наблюдателя, т.е. при установке свойства name, мы еще не знаем проинициализирован ли label. Поэтому используем опциональную последовательность для доступа к свойству text
  3. В методе жизненного цикла, после загрузки view и инициализации всех outlet’ов, также происходит обновления текста элемента label. Тут этот элемент гарантировано проинициализирован, и к нему можно обращаться без опциональной последовательности

Читатель может спросить, а зачем делать одно и то же разными способами? Для понимания этого советую прочитать статью «Жизненный цикл viewController«. Но если в двух словах, — то в разные моменты работы приложения вызывается либо метод 3 либо замыкание 2. И все эти случаи нам надо обработать.

Элементы пользовательского интерфейса на контролерах я расположил и Main.Storyboard  выглядит следующим образом:

ui_popover_proswift

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

Продолжение урока во второй части.

8 Comments on “Popover Controller на iPhone — пример создания из кода. ч.1

    • Разумеется актуально! Задавайте вопросы, постараюсь опереативно ответить!

      • Спасибо. У Вас два созданных контроллера отображены на скрине- будто они единственные или первые(над ними один и тот же комментарий). На самом же деле во вьюконтроллере икс-кода они же должны быть примерно так видеться?
        http://joxi.ru/vAW40MQhk8KbQr.jpg

        • Надеюсь, я правильно понял Ваш вопрос.

          Итак, у нас действительно три контроллера
          Первый — серый — класс ViewController
          Второй — Зеленый класс PopVC
          Третий — Синий класс FromViewTapPPC

          Если Вы скачаете проект с GitHub, Вы увидите, что я использовал три разных файла для описания классов этих контроллеров. Но это не обязательное условие. Можете описывать функционал и в одном файле.

  1. Добрый день! Изучаю ваш урок, подскажите, как сделать синтаксическую подсветку в редакторе swift файлов.
    Спасибо )

    • Я надеюсь речь идет об Xcode. В Xcode подсветка должна быть включена по умолчанию, но если оне по каким либо причинам отключена, то зайдите в меню Xcode -> Preferences -> Вкладка Fonts & Colors. В левой части окна будут представлены на выбор цветовые схемы «по умолчанию». Однако, никто не мешает взять эти схемы за основу и кастомизировать внешний вид и синтаксическую подсветку под собственные требования.

  2. >>Переходим в Main.Storyboard и к уже имеющемуся ViewController’у из библиотеки элементов перетаскиваем два viewController’а

    Чего я только не таскал, куда только не тыкал — бестолку… Как будто я пропустил первый урок.

Добавить комментарий для Людмила Руссу Отменить ответ

Ваш адрес email не будет опубликован.

*

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.