Урок 4. Работаем с надписями и текстовыми полями

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

Итак, сегодня мы узнаем, как создавать текст на экране.



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

Создайте новый проект, как я показывал это в уроке 3 (или откройте старый).

Давайте начнем с того, что создадим интерфейс нашего приложения.
Начнем с интерфейса для айфона. Нажмите на файле "ViewController_iPhone.xib" - через секунду XCode откроет вам визуальный редактор экрана нашего приложения.

У меня это выглядит следующим образом:

Если у вас нет большого поля справа, то это можно исправить.

Посмотрите в правый верхний угол, там есть три кнопки "View" - нажмите на правую - и появится панелька. Если нажать еще раз - она исчезнет. Очень удобно :)

 На этой панельке справа, в правом нижнем углу, нажмите на "Кубик":

Перед вами откроются визуальные элементы, которые мы можем использовать в приложении.
Перенесите на "холст" элементы Label и TextField (он чуть ниже).

Выравняйте их так, чтобы было красиво, ну хотя бы так:

Еще два важных момента.
Во-первых, если у вас есть девайсы не с iOS 6, а с более ранней iOS  - необходимо выключить новую фичу "Constraints", которая не идет на пятой айос.
Важно: если у вас старый XCode, то описанные ниже действия не нужны (если у вас установлена iOS 5 SDK), тем не менее на всякий случай рекомендую их выполнить :)
Для этого:
Посмотрите на панельку слева. У вас есть вкладка Objects, на которой перечислены только что добавленные объекты, TextField (текстовое поле) и Label(надпись).

Нажмите на объект View левой кнопкой мыши и посмотрите на правую панельку, на ней появятся свойства View. Выберите вверху пиктограмму с "листком":

И убедитесь, что галочка "Use autolayot" выключена (или выключите ее вручную).

Отлично! Теперь вот еще какой момент.
Наш "холст" сейчас рассчитан на iPhone 5 с его большим четырехдюймовым экраном.
А что делать, если у вас не iPhone 5? Очевидно, включить другой холст.
Для этого, опять же, нажимаем на View и смотрим на панельку справа, где перечислены свойства (выбираем четвертую слева вкладку, с "ползунком"):

И видим, что во вкладке Simulated Metrics (вкладка, описывающая, что должен показывать холст) в пункте Size (размер) у нас стоит Retina 4 Full Screen - то есть айфон с четырехдюймовой ретиной.
Я выбрал Retina 3.5 Full Screen, чтобы симулировать предыдущие поколения айфона (для 3GS эта опция так же подходит, хоть он и без ретины). Однако, это менять не обязательно.

Ладно, мы провели много времени, копаясь в настройках, теперь давайте чуток попишем код.
Но сначала - теория :)

Мы только что "рисовали" на холсте, используя готовые компоненты. Но чтобы их можно было как-то задействовать в программе, ей необходимо об этом знать.
Сейчас мы посмотрим, как именно это делается.

Откройте файл ViewController.h.
У вас там сейчас находится примерно такой код:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

Пока что мы не будем подробно разбирать, что тут к чему.

В целом, вам важно знать только, что это - объявление класса нашего экрана. По сути, весь код, работающий с экраном, мы будем писать во ViewController.h и ViewController.m (по крайней мере, пока мы начинающие :) потом научимся другим техникам).

Добавьте следующий код:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

{

    IBOutlet UILabel *myText;

    IBOutlet UITextField *inputText;

}

@end

Что делают эти строки?

Только что я говорил, что для того, чтобы задействовать нашу надпись (label) и текстовое поле (textfield) в программе, нужно дать программе знать о них.

 Это делается в два шага.

Сначала мы добавляем вышеуказанным образом информацию, что мы хотим использовать UILabel (надпись), которую мы будем называть в коде myText, а так же хотим текстовой поле UITextField, которое в коде мы будем называть inputText.

А что такое IBOutlet? Это - волшебное слово, которое говорит XCode, что наши надпись и текстовое поле сейчас находятся на холсте.

Это был первый шаг.

Второй шаг еще более веселый - нам надо связать надпись myText с конкретной надписью и поле inputText с конкретным полем на холсте. Для этого откройте снова наш ViewController_iPhone.xib и нажмите правой кнопкой на нашей надписи. Появится такое окно:

Наведите мышкой на кружок рядом с  New Referencing Outlet (ссылка на код). У вас вместо кружка появится "плюсик". Нажмите левой кнопкой мышки на этот плюсик и протащите влево на "File Owner":

 а затем отпустите. Тогда у вас появится список возможных ссылок, выберите myText:

 Класс! Теперь, если нажать правой кнопкой мыши на надпись, мы увидим, что она связана с myText.

Сделайте то же самое для текстового поля.

Вот так вот мы "подружили" код и интерфейс.

Аналогично, можно подружить с кодом любой другой объект.

Но подружить - это только полдела, нам надо еще и использовать его.

Давайте в этом уроке сделаем что-нибудь простенькое.

Откройте ViewController.m и найдите там такой кусок кода:

- (void)viewDidLoad

{

    [super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

}

Этот код вызывается, когда окно загрузилось. Мы можем  использовать это место для "донастройки" нашего окна.

Например, вот так:

- (void)viewDidLoad

{

    [super viewDidLoad];

    myText.text = @"Я - крутая надпись!";

    inputText.text = @"А меня можно редактировать!";

}

Я показываю сейчас самый простой пример использования надписи и текстового поля.

В первой выделенной жирным строке мы присваиваем свойству text строку "Я - крутая надпись" (в Objective-C все строки начинаются со значка собачки @).

Во второй строке мы присваиваем свойству text у текстового поля другую надпись.

Свойство text, как не сложно догадаться, отвечает за то, что именно будет отображено на экране.

Давайте напоследок запустим наше приложение. Для этого, выберите в схеме iPhone Simulator (я выбрал симулятор ios 6) и нажмите кнопку Run.

 Тогда на экране появится следующее:

Если вдруг надпись у вас отобразилась не полностью, а с точками - вернитесь в редактор интерфейса и "растяните" ее.

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

А в следующем уроке мы научимся управлять текстом надписи из нашего текстового поля ;)

По любым вопросам - прошу в комменты :)

Удачи!