Программирование под iPhone, iPad Objective-C уроки на русском статьи новости

2013-09-30 13:50


Шаг 1 Создание проекта. Расстановка объектов UI Оглавление Шаг 3. Модель

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

Нарисуем окружность в Adobe Illustrator

06_17E7F2C9.png

С помощью "ножниц" щелкним на верхней и на нижней точки окружности

07_17E7F359.png

Затем выберем и удалим левую часть окружности

08_17E7F3A8.png

Выбираем правую часть окружности

10_17E7F47F.png

И выбираем для нее цвет

11_17E7F4B7.png

Затем заходим в меню Effect ->3D ->Revolve...

12_17E7F4DE.png

и получили объемный шарик

Сохраняем как 1.png, затем меняем цвет на зеленый и сохраняем как 2.png и так далее. Получим семь шариков.

Причем, картинка 0.png соответствует пустой клетки, а остальные картинки с прозрачным фоном, являются изображением наших шариков.

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

Продолжим, скачайте Cells.zip, с моими картинками, либо нарисуйте свои.

Перенесите папку с картинками в открытое окно Xcode в Supporting Files

Отметьте Copy items into destination group's folder (if needed), при этом то что вы добавляете скопируется в папку проекта, иначе будут просто добавлены ссылки на оригиналы. Так же необходимо отметить Add to targets iLines, иначе файлы будут видны проекту, но программе они будут не доступны.

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

Картинки появились в нашем проекте и доступны нашей программе

Теперь нам понадобится класс, который будет отвечать за вывод игрового поля на экран. Для этого заходим в Меню File -> New -> File...

Выбираем Objective-C class

Создаем Class: CLGameFieldView Subclass of UIView

Сохраняем в папке нашего проекта iLines

В CLGameFieldView.m вы увидите:

 

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // Drawing code
}
*/

 

Во первых мы видим метод drawRect, который нам необходим для вывода нашего объекта на экран. Во вторых, мы видим комбинации символов /*, //, */ - это комментарии, т.е. часть текста, которая будет игнорироваться компилятором. Для того чтоб закомментировать одну строчку используют // в начале строки, если вам необходимо закомментировать несколько строк, то в начале первой ставится /* в конце последней */

Уберем комментарии и напишем:

- (void)drawRect:(CGRect)rect
{
    NSString *filename = [[NSString alloc] initWithFormat:@"0.png"];
    NSString *imagePath = [[NSBundle mainBundle] pathForResource:filename ofType:nil];
    UIImage *img = [UIImage imageWithContentsOfFile:imagePath];
    CGImageRef image=CGImageRetain(img.CGImage);
    
    CGRect imageRect=CGRectMake(70.0, 70.0, 70.0, 70.0);
    CGContextRef context=UIGraphicsGetCurrentContext();
    CGContextDrawImage(context, imageRect, image);
}

Пока не будем вдаваться в подробности, но мы ожидаем вывода картинки с именем 0.png в прямоугольнике с координатами 70, 70 и размерами 70 на 70.

 

Переходим в Main_iPhone.storyboard и добавляем объект View

 

Выравниваем его по центру

Делаем фиксированной ширину и высоту 297 пикселей (9x33=297)

Выбираем созданный нами класс CLGameFieldView

 

Выбираем Redraw

Копируем созданный нами объект, переходим в Main_iPad.storyboard и вставляем. Задаем высоту и ширину 630.

Запускаем приложение. Красота! Выбранная нами картинка появилась на экране. Но, нам этого мало. Нам необходимо построить из этой картинки игровое поле 9 на 9. Перепишем метод drawRect:

 

 - (void)drawRect:(CGRect)rect
 {
     NSString *filename = [[NSString alloc] initWithFormat:@"0.png"];
     NSString *imagePath = [[NSBundle mainBundle] pathForResource:filename ofType:nil];
     UIImage *img = [UIImage imageWithContentsOfFile:imagePath];
     CGImageRef image=CGImageRetain(img.CGImage);
     CGRect imageRect;
     CGContextRef context=UIGraphicsGetCurrentContext();
     int cellSize=self.frame.size.height/9;
     imageRect.size = CGSizeMake(cellSize, cellSize);
     int i, j;
     for (i=0; i<9; i++) {
         for (j=0; j<9; j++) {
             imageRect.origin = CGPointMake(cellSize*j, cellSize*i);
             CGContextDrawImage(context, imageRect, image);
         }
     }
 }

Запускаем приложение. Игровое поле на экране!

Перенесем переменную image в раздел переменных класса, тем самым сделаем ее доступной для всего класса, в том числе и для метода drawRect

@interface CLGameFieldView : UIView {
    CGImageRef image;
}

Напишем наш первый метод, выделив часть кода из drawRect, относящегося к инициализации картинки, дадим ему название getImageForGame

- (void) getImageForGame {
    NSString *filename = [[NSString alloc] initWithFormat:@"0.png"];
    NSString *imagePath = [[NSBundle mainBundle] pathForResource:filename ofType:nil];
    UIImage *img = [UIImage imageWithContentsOfFile:imagePath];
    image=CGImageRetain(img.CGImage);
}

А в методе drawRect вызовем созданный нами метод

[self getImageForGame];

Проверям. Работает. Но, чего то не хватает. Одной переменной image явно мало. Пусть это будет массив из 8 элементов

    CGImageRef image[8];

А метод getImageForGame переделаем так, чтоб он принимал парамметр i, и брал i-yю картинку и присваивал i-му элементу массива image

- (void) getImageForGame: (int) i {
    NSString *filename = [[NSString alloc] initWithFormat:@"%d.png", i];
    NSString *imagePath = [[NSBundle mainBundle] pathForResource:filename ofType:nil];
    UIImage *img = [UIImage imageWithContentsOfFile:imagePath];
    image[i]=CGImageRetain(img.CGImage);
}

Теперь у нас есть массив с картинками наших шариков. Переделаем метод drawRect

- (void)drawRect:(CGRect)rect
 {
     int i, j, k;
     for (i=0; i<8; i++) {
         [self getImageForGame:i];
     }
     CGRect imageRect;
     CGContextRef context=UIGraphicsGetCurrentContext();
     int cellSize=self.frame.size.height/9;
     imageRect.size = CGSizeMake(cellSize, cellSize);
     
     for (i=0; i<9; i++) {
         for (j=0; j<9; j++) {
             imageRect.origin = CGPointMake(cellSize*j, cellSize*i);
             CGContextDrawImage(context, imageRect, image[0]);
             k=random()%8;
             if (k>0) {
                 CGContextDrawImage(context, imageRect, image[k]);
             }
         }
     }
 }

Мы задали массив image, затем использовав случайные числа от 0 до 7, вывели на экран.

Создадим метод initGameImages:

- (void) initGameImages {
    int i;
    for (i=0; i<8; i++) {
        [self getImageForGame:i];
    }
}

Из drawRect уберем этот код, а вызов initGameImages добавим в методе initWithCoder

 

- (id) initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if (self) {
        [self initGameImages];
    }
    return self;
}

Мы научились добавлять картинки в проект и выводить их на экран.

Добавим в CLViewContoller.h

 

#import "CLGameFieldView.h"

 

Переходим в Main_iPhone.storyboard, выбираем Assistant Editor и с нажатой клавишей Control перетягиваем объект Game Field View в окно CLViewContoller.h. Даем имя gameFieldView.

Переходим в Main_iPad.storyboard и связываем Game Field View с @property (strong, nonatomic) IBOutlet CLGameFieldView *gameFieldView;

А в CLViewContoller.m добавим:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    int i, j;
    UITouch *touch = [touches anyObject];
    if ([touch view]==_gameFieldView) {
        int cellSize=_gameFieldView.frame.size.height/9;
        CGPoint P1 = [touch locationInView:_gameFieldView];
        i=P1.y/cellSize + 1;
        j=P1.x/cellSize + 1;
        NSLog(@"Строка - %d, столбец - %d", i, j);
    }
}

 

Запустим наше приложение и пощелкаем мышкой по игровому полю, если окно iOS Симулятора и окно нашего проекта расположить так, чтоб было видно консоль, то мы увидим в каком стобце и какой строке мы щелкнули на игровом поле

В методе touchesBegan: withEvent: мы проверяем, было ли касание в _gameFieldView, если да, то в каком месте и выводим в консоль эти значения. Функция NSLog в этом плане очень удобна, когда нам хочется узнать, что и в каком месте программы у нас происходит.

На следующем шаге продолжим дополнять функциональность нашего приложения.

Скачать iLines.1.02.zip

Будем рады вашим комментариям. Так же можете связаться с нами по адресу ilines@ifamily.kz

Шаг 1 Создание проекта. Расстановка объектов UI Оглавление Шаг 3. Модель