Уроки iPhone SDK: Создание контроллера “UITabBarController” программными средствами 3D Chess - Шах и Мат разработчикам
Май 25

Уроки iPhone SDK: Создание вкладок программными средствами

iPhone SDK - Уроки | Автор Artem Add comments

В этом уроке, рассчитанном на тех, кто только начинает осваивать IPhone SDK, мы создадим программными средствами контроллер панели вкладок Tab Bar Controller с двумя вкладками и соответствующими представлениями. Чтобы проиллюстрировать, как элементы интерфейса одного представления взаимодействуют с объектами другого, к одному представлению я добавил элементы “UITextField” и “Button“, а к другому — “UILabel“. Все, что вводится в текстовое поле, по щелчку кнопки  копируется на метку. Я буду работать с 2.0 SDK — в более ранних версиях некоторые функции могут отсутствовать.

Шаг 1. Прочтите урок “Hello World”.

Незнакомым с программированием на Objective C и IPhone SDK предлагаю начать с урока “Hello World“.

Шаг 2. Создайте проект.

Выполните “File > New Project” или вызовите меню нового проекта комбинацией клавиш “Apple + Shft + N“. Из раздела “IPhone OS” в меню слева выберите опцию “Applications“, а среди пиктограмм справа найдите элемент “Window Based Application“. Введите имя проекта (в исходном коде я использовал “TabBar“). Теперь в нашем распоряжении два файла — “TabBarAppDelegate.h” и “TabBarAppDelegate.m“.

picture-21

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

Для каждой из двух вкладок понадобится отдельный контроллер. Соответственно, создайте два файла типа “UIViewController SubClass“. Я назвал их “View1Controller.m” и “View2Controller.m“. Обратите внимание: флажок создания заголовочного файла (Also create “ViewController.h) должен быть установлен.

picture-1a2

picture-1

Теперь в проекте шесть файлов:

  • TabBarAppDelegate.m
  • TabBarAppDelegate.h
  • View1Controller.m
  • View1Controller.h
  • View2Controller.m
  • View3Controller.h

Шаг 4. Настройка контроллеров представления.

View1Controller
Сначала настроим представление с кнопкой и текстовым полем. Перейдите к заголовочному файлу “View1Controller.h” и добавьте элементы интерфейса “UITextField“, “UIButton“, “UIView“, а также ссылку на делегата “Application“, с помощью которого представления будут обмениваться информацией. Теперь создаем свойства для каждой из назначенных переменных. Итоговый код будет выглядеть примерно так:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#import <UIKit/UIKit.h>
#import "TabBarAppDelegate.h"

@class TabBarAppDelegate;
@interface View1Controller : UIViewController
{
UITextField                *textField;
UIButton                    *cmdButton;
UIView                       *myView;
TabBarAppDelegate  *delegateRef;
}

@property (nonatomic, assign)    UITextField                  *textField;
@property (nonatomic, assign)    UIButton                      *cmdButton;
@property (nonatomic, assign)    UIView                        *myView;
@property (nonatomic, assign)  TabBarAppDelegate   *delegateRef;

@end

В файле “View1Controller.m” синтезируйте свойства, пропишите и инициализируйте метод создания элементов пользовательского интерфейса. Технически, данные должны содержаться в методе загрузки представления, но поскольку я разрешаю одному представлению напрямую обращаться к другому, необходимо, чтобы они инициализировались даже без загрузки. Правильный способ добиться этого — хранить данные отдельно и получать при загрузке представления, но для этого урока выберем путь проще.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
- (id)init
{
if (self = [super init])
{
// код инициализации
self.title = @"Text and Button"; //Настройте заголовок представления для вывода на панели вкладок
// создайте представление и задайте его конфигурацию
CGRect cgRct = CGRectMake(0.0, 0.0, 480, 320); //define size and position of view
myView = [[UIView alloc] initWithFrame:cgRct]; //initilize the view
myView.autoresizesSubviews = YES;              //allow it to tweak size of elements in view
self.view = myView;                            //настройте свойства контроллера для вновь созданного представления

// создайте "UIButton" (UIButtonTypeRoundedRect)
cmdButton = [[UIButton buttonWithType:UIButtonTypeRoundedRect] retain];
cmdButton.frame = CGRectMake(100, 100, 100, 50);
[cmdButton setTitle:@"Click Me" forState:UIControlStateNormal];
cmdButton.backgroundColor = [UIColor clearColor];
[cmdButton addTarget:self action:@selector(action:) forControlEvents:UIControlEventTouchUpInside];
cmdButton.adjustsImageWhenHighlighted = YES;

//создайте текстовое поле
cgRct = CGRectMake(60, 170, 200, 50); //укажите размер и положение текстового поля
textField = [[UITextField alloc] initWithFrame:cgRct];
textField.text = @"Enter Text Here";
textField.borderStyle = UITextBorderStyleBezel;

//добавьте к основному представлению текстовое поле и кнопку
[self.view addSubview:cmdButton];
[self.view addSubview:textField];
}
return self;
}

Нам понадобится еще и обработчик действий, который будет заниматься щелчком на кнопке. К файлу “View1Controller.m” добавьте приведенный ниже метод. Обратите внимание: доступ к метке мы получаем с помощью контроллера представления, на который ссылаемся через экземпляр “AppDelegate“, указанный свойством “delegateRef“.

1
2
3
4
5
- (void)action:(id)sender
{
[self.textField resignFirstResponder]; //скрыть клавиатуру
self.delegateRef.view2Controller.label.text = self.textField.text;//Ubdate label
}

View2Controller
Для второго контроллера представления у нас здесь нет экземпляра делегата, поскольку второе представление не будет инициировать взаимодействие с первым. В противном случае нам бы понадобилась здесь ссылка:

1
2
3
4
5
6
7
8
9
10
11
12
#import <UIKit/UIKit.h>

@interface View2Controller : UIViewController
{
UILabel    *label;
UIView    *myView;
}

@property (nonatomic, assign)     UILabel    *label;
@property (nonatomic, assign)    UIView      *myView;

@end

В файле “View2Controller.m” синтезируйте свойства, пропишите и инициализируйте метод создания элементов пользовательского интерфейса.

Шаг 5. Настройка “App Delegate”.

В заголовочном файле “TabBarAppDelegate.h” определяем экземпляры “UITabBarController“, а также два только что настроенных представления. Создаем для этих переменных свойства, декларируем релевантные классы и импортируем релевантные заголовочные файлы. Итоговый код должен выглядеть примерно так:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#import <UIKit/UIKit.h>
#import "View1Controller.h"
#import "View2Controller.h"

@class TabBarViewController;
@class View1Controller;
@class View2Controller;

@interface TabBarAppDelegate : NSObject <UIApplicationDelegate>
{
UIWindow *window;
UITabBarController *tabBarController;
View1Controller *view1Controller;
View2Controller *view2Controller;
}

@property (nonatomic, assign) UIWindow *window;
@property (nonatomic, assign) UITabBarController *tabBarController;
@property (nonatomic, assign) View1Controller *view1Controller;
@property (nonatomic, assign) View2Controller *view2Controller;
@end

В файле реализации “TabBarAppDelegate.m” обновляем метод “applicationDidFinishLaunching” — для создания контроллеров представления и панели вкладок с добавлением к окну. Код будет следующим:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@synthesize window;
@synthesize view1Controller;
@synthesize view2Controller;
@synthesize tabBarController;

- (void)applicationDidFinishLaunching:(UIApplication *)application
{
//инициализируйте объекты
tabBarController = [[UITabBarController alloc] init];
view1Controller = [[View1Controller alloc] init];
view2Controller = [[View2Controller alloc] init];

//В контроллер View1Controller добавьте ссылку на самого себя, чтобы через этот объект он мог ссылаться на View2Controller
view1Controller.delegateRef = self;

//Добавьте представления к TabBar
tabBarController.viewControllers = [NSArray arrayWithObjects:view1Controller, view2Controller, nil];

//Добавьте панель вкладок к окну и отобразите
[window addSubview:tabBarController.view];
[window makeKeyAndVisible];
}

Шаг 6. Запуск.

Щелчком на кнопке “Build an Go” запустите код. На экране появится панель вкладок с загруженным первым представлением. Введите текст и щелкните на кнопке. Теперь загрузите второе представление, перейдя на правую вкладку — там появился набранный текст.

picture-42picture-52

Нажмите для увеличения

Шаг 7. Добавляем пиктограммы.

Для пиктограмм создайте два изображения — 32 x 32, 150 dpi, grey scale png. Свои я назвал “icon.png” и “icon1.png”. Импортируйте изображения в папку “Resources“: щелкнув правой кнопкой, выполните “Add > Existing Files…” и выберите нужные файлы. Теперь в методе инициализации обоих контроллеров представления (”View1Controller” и “View2Controller“) добавьте приведенные ниже соответствующие строки:

1
2
self.tabBarItem.image = [UIImage imageNamed:@"icon.png"];
self.tabBarItem.image = [UIImage imageNamed:@"icon1.png"];

Щелкнув на кнопке “Build and Go“, полюбуйтесь результатом.

picture-62

Нажмите для увеличения

Надеюсь, урок был понятным и полезным. Всего хорошего, до новых встречь :)

Исходный код скачать можно [здесь]

Текст оригинальной статьи на английском языке [здесь]

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

1 звезда2 звезд3 звезд4 звезд5 звезд (1 голосов, средний: 5.00 из 5)
Загрузка ... Загрузка ...


2 Responses to “Уроки iPhone SDK: Создание вкладок программными средствами”

  1. 1. Sartharian Says:
    Август 28th, 2009 at 11:32

    Возможно ли создать UITabBarController не в _Project_Name_AppDelegate, а в одном из видов под управлением UIViewController.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    //MyController.h
    @interface MyController : UIViewController {
        IBOutlet UITabBarController * tabBarController;
    }

    @property (nonatomic, retain) IBOutlet UITabBarController * tabBarController;

    @end

    //MyAppDelegate.h
    #import "MyController.h"

    @interface NetworxAppDelegate : NSObject  {
        UIWindow *window;
        MyController * mController;
    }

    @property (nonatomic, retain) IBOutlet UIWindow *window;
    @property (nonatomic, retain) MyController * mController;

    @end

    //MyAppDelegate.m
    @implementation MyAppDelegate

    @synthesize window, mController;


    - (void)applicationDidFinishLaunching:(UIApplication *)application {
        MyController * mc = [[MyController alloc] initWithNibName:@"MyView" bundle:nil];
        self.mController = mc;

        [mc release];
       
        [window addSubview:mController.tabBarContoller.view];

        // Override point for customization after application launch
        [window makeKeyAndVisible];
    }

    - (void)dealloc {
        [window release];
        [self.mController release];
        [super dealloc];
    }

    @end

    Отображает пустой белый экран. У кого есть какие то идеи ~ буду рад выслушать.
    Заранее спасибо.

  2. 2. Leon Says:
    Сентябрь 1st, 2009 at 06:36

    “В файле “View2Controller.m” синтезируйте свойства, пропишите и инициализируйте метод создания элементов пользовательского интерфейса.”

    Тут я сам код догадаться что ли должен ?

Оставьте комментарий