Канва обеспечивает графическое изображение nib-объекта интерфейса верхнего уровня вместе с его дочерними представлениями, аналогично любому графическому редактору.

В файле . xib можно удалить представление nib-объекта верхнего уровня с канвы (не удаляя сам объект), щелкнув на букве X в ее верхнем левом углу (рис.7.3). Кроме того, графическое представление можно вернуть на канву, щелкнув на nib-объекте в структуре документа. Канву можно прокручивать. Она может автоматически адаптироваться с учетом графических представлений, которые она содержит; канву раскадровки также можно масштабировать с помощью команды Editor => Canvas^Zoom или кнопок масштабирования в нижнем правом углу канвы (см. рис. 7.1).

Файл Main. storyboard нашего проекта Empty Window содержит только одну сцену, поэтому она представляется графически на канве в виде nib-объекта верхнего уровня — контроллера представления сцены. В контроллере находится его главное представление, которое обычно невозможно отличить от самого контроллера на канве. Во время выполнения приложения этот контроллер представления станет корневым контроллером представления окна; следовательно, его представление будет занимать все окно и фактически будет начальным интерфейсом приложения (см. главу 6). Это обстоятельство позволяет провести эксперимент: любое видимое изменение, которое вносится нами в представление, должно быть видимым во время выполнения приложения. Для того чтобы убедиться в этом, добавим дочернее представление.

1. Начнем с канвы, которая показана на рис. 7.1.
2. Откройте библиотеку объектов (<Command+Option+Control+3>). Если она открывается в виде набора пиктограмм без текста, щелкните на кнопке в левой части панели фильтров, чтобы представить ее в виде списка. Наберите на панели фильтров строку “button”, чтобы в списке отображались только объекты кнопок. Объект Button указан в списке первым.
3. Перетащите объект Button из библиотеки объектов на главное представление контроллера на канве (рис. 7.5) и отпустите кнопку мыши.

Puc. 7.5. Перетаскивание кнопки на представление

Теперь в представлении на канве есть кнопка. Действие, которые мы выполнили, — перетаскивание из библиотеки объектов на канву — очень типичное; мы будем часто выполнять его при разработке интерфейса.

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

• Выбор кнопки. Появляются дескрипторы изменения размеров. (Если вы случайно выберете ее дважды и дескрипторы изменения размеров исчезнут, выберите представление и кнопку снова.)
• Используя дескрипторы изменения размеров, измените размер кнопки, чтобы сделать ее больше. На экране появится информация о размерах.
• Перетащите кнопку ближе к краю представления. Появится линия разметки, демонстрирующая стандартное поле между краем кнопки и представления. Аналогично перетащите кнопку ближе к центру, и линия разметки покажет вам, как центрировать кнопку.
• Выбрав кнопку, нажмите клавишу <Option> и одновременно переместите курсор мыши за пределы кнопки. На экране появятся строки и числа, показывающие расстояние между кнопкой и краями представления. (Если вы случайно щелкнули мышью и стали перетаскивать кнопку, удерживая нажатой клавишу <Option>, то на экране появятся две кнопки. Это объясняется тем, что перетаскивание объекта при нажатой клавише <Option> приводит к дублированию объекта. Выберите нежелательную кнопку и нажмите клавишу <Delete>, чтобы удалить ее.)
• Щелкните мышью на кнопке, удерживая нажатыми клавиши <Control+Shift>. На экране появится меню, позволяющее выбрать кнопку или то, что находится под ней (в данном случае представление, а также контроллер представления, потому что он интерпретируется как фон высокого уровня для всего, что мы делаем).
• Дважды щелкните на заголовке кнопки. Теперь этот текст можно редактировать. Введите новый заголовок, например “Howdy! ”

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

1. Проверьте пункт меню Debug ^Activate / Deactivate Breakpoints. Если вы видите команду Deactivate Breakpoints, выберите ее; мы не хотим прерывать выполнение программы ни в одной точке.
2. Проверьте, чтобы целью во всплывающем меню Scheme был экран iPhone Retina (неважно, какое он имеет разрешение — 3,5 или 4 дюйма).
3. Выберите команду Products Run (или щелкните на кнопке Run инструментальной панели).

После некоторой паузы симулятор iOS открывает приложение Empty Window, и наше окно больше не пустое (рис. 7.6) — в нем есть кнопка! Вы можете щелкнуть на этой кнопке мышью, имитируя касание пальцем, и кнопка будет подсвечена.

Puc. 7.6. Окно приложения Empty Window больше не пустое

 

 

 

• Назад
• Вперёд