Главная > Руководства > Как использовать пользовательскую графику UIButton в приложениях на iPhone

Как использовать пользовательскую графику UIButton в приложениях на iPhone


6 апреля 2012, 10:55. Разместил: Design FactoRy
Любой, кто знаком с Xcode, возможно, оценит глубину и широту библиотеки Cocoa Touch. Данный набор для разработки мобильных приложений включает заранее подготовленные компоненты для любого функционала iOS (поля ввода, переключатели, слайдеры и, конечно же, кнопки).

Как использовать пользовательскую графику UIButton в приложениях на iPhone

В данном руководстве мы хотели бы показать вам простой способ создания собственной графики для кнопок. Мы будем использовать последний выпуск Xcode 4.2, и займемся разработкой приложения в iOS5. Вам не нужно будет уметь разрабатывать на Objective-C, и это вряд ли помешает процессу разработки. При разработке iPhone-приложений вам придется сталкиваться с кодом, поэтому стоит немого подучить нужные технологии.

Выбираем кнопки

Для начала нам нужно найти отличные графические элементы, которые мы будем использовать в нашем приложении. Существует множество веб-сайтов с бесплатностями, на которых дизайнеры выкладывают собственные эксперименты. Давайте обратимся за помощью к 365psd, где, как нам кажется, предложены лучшие PSD-проекты для дизайнеров мобильных приложений.

Если у вас есть дизайнерские навыки, и вы можете собственноручно создать графику для кнопок, то не тяните, приступайте! Наше руководство сосредоточено на Xcode, и именно поэтому мы используем заранее подготовленную графику, дабы сэкономить время. Мы рекомендуем вам использовать векторные графические элементы. Они должны быть минимум годными для дисплеев типа Retina, где разрешение графики требуется в два раза больше.

Как использовать пользовательскую графику UIButton в приложениях на iPhone

Мы будем работать с кнопками Cloudy UI, созданными Себастьяном Габриэлем (Sebastien Gabriel). Мы удалили весь текст с плашек и масштабировали их, создали два разных разрешения (стандартное и для дисплеев формата Retina). Мы также создали два набора кнопок: один обычный и один с подсветкой, чтобы создать анимационный эффект при нажатии. В итоге у нас получилось 4 файла, которые вы можете скачать здесь.

Создаем новый проект

Сейчас было бы отлично, если вы уже знакомы с тем, как создавать новый проект в Xcode. Но, дабы освежить память, перейдите в меню File -> New -> New Project. Далее из шаблонов выбирайте Single View Application. Затем задайте имя вашего приложения и идентификатор узла. Здесь нам не нужна панель истории, вне зависимости от того, будете ли вы использовать файлы формата .xib или нет, но мы советуем вам пока что оставить этот пункт активным.

С левой стороны вашего навигатора по проекту вы сможете видеть папку под названием «Supporting Files». Сюда вам нужно перетащить ваши 4 изображения кнопок. Учтите, что каждая из кнопок должна быть названа соответствующим образом, по правилам Apple Developer. Мы использовали следующие имена:

* Button.png
* Button@2x.png
* ButtonHighlighted.png
* ButtonHighlighted@2x.png

При импорте файлов, не забудьте выделить пункт «Create groups for any added folders». Нажмите «Finish» и, если потребуется, отсортируйте ваши файлы.

Разработка кода для контроллера просмотра

Вероятно, вы заметили, что в нашем навигаторе по проекту всего несколько файлов. Выберите ViewController.m и взгляните на функцию viewDidload. Именно здесь мы будем устанавливать кнопки и настраивать их.

// creating custom button properties
UIFont *buttonFont = [UIFont fontWithName:@"Noteworthy-Bold" size:17.0];
UIColor *buttonColorDefault = [UIColor colorWithRed:90.0f/255.0f green:90.0f/255.0f blue:90.0f/255.0f alpha:1.0];
UIColor *buttonColorHighlight = [UIColor colorWithRed:255.0f/255.0f green:255.0f/255.0f blue:255.0f/255.0f alpha:1.0];

UIImage *btn = [UIImage imageNamed:@"Button.png"];
UIImage *btnh = [UIImage imageNamed:@"ButtonHighlighted.png"];

Для начала мы включили несколько переменных, которые мы будем использовать для стилизации наших кнопок. Мы также создали две новые переменные, которые будут содержать в себе тип данных UIImage для двух положений кнопок (обычное положение и положение при нажатии). Учтите, что нам не нужно указывать изображения @2x, предназначенные для дисплеев Retina, так как компилятор iOS автоматически распознает их и отображает.

Пользовательские параметры кнопок

Если вы не отстаете от нас, то давайте уже скорее перейдем к разработке кода для кнопок. Для этого нам потребуется создать новый UIButton и настроить параметр buttonWithType на UIButtonTypeCustom. После этого мы сможем добавлять другие настройки и оформление.

// building the buttons
UIButton *aboutBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[aboutBtn addTarget:self action:@selector(showAboutPage) forControlEvents:UIControlEventTouchUpInside];
[aboutBtn setTitle:@"About Me" forState:UIControlStateNormal];
[aboutBtn setFrame:CGRectMake(80.0, 120.0, 162.0, 42.0)];
[aboutBtn setBackgroundImage:btn forState:UIControlStateNormal];
[aboutBtn setBackgroundImage:btnh forState:UIControlStateHighlighted];

[aboutBtn.titleLabel setFont:buttonFont];
[aboutBtn setTitleColor:buttonColorDefault forState:UIControlStateNormal];
[aboutBtn setTitleColor:buttonColorHighlight forState:UIControlStateHighlighted];

Вы можете выделить основные параметры в данном отрывке кода. Шрифты кнопок и параметр backgroundImage используют заранее встроенные переменные, которые мы упоминали в первом отрывке кода. Функция CGRectMake может немного смущать, если вы не знакомы с синтаксисом.

Таким образом мы создаем объект с заранее определенными параметрами ширины, высоты и координат X/Y. Нашей первой кнопкой будет «About Me», и она будет вызывать функцию пустого селектора под названием showAboutPage. Мы внесли этот код сразу после нашего метода viewDidLoad() (ниже приведена копия).

- (void)showAboutPage
{
// use this method to display your about page
// only when the button is tapped and released
}

Отображение UIButton

Если вы запустите приложение прямо сейчас, то ничего не увидите. Наша кнопка уже готова и оформлена, но нам потребуется еще одна последняя строка кода. После всего кода с настройками кнопки (но не выходя за пределы viewDidLoad) добавьте следующий код:

// place the button into the view
[self.view addSubview:aboutBtn];

Таким образом, мы задействуем метод CGRectMake для создания и отображения нашей кнопки с определенными размерами и координатами расположения на экране. Теперь компилируйте приложение, и тогда вы сможете увидеть нашу первую кнопку! Вы даже можете нажать на нее и проверить эффект при нажатии (но не забывайте, что функция обратного вызова еще не задействована). Вам нужно будет отредактировать функцию showAboutPage, которую мы создали ранее, которая переносила бы нас на новый элемент окна просмотра. Либо вы можете задействовать функцию по вашему личному предпочтению.

Если вы считаете, что все уже поняли, то можете просто копировать и вставлять код первой кнопки, чтобы создавать последующие. Помните, что вам нужно будет поменять координаты функции CGRectMake(), чтобы передвинуть новую кнопку либо вверх, либо вниз, чтобы она не заслоняла предыдущую. Вам также нужно будет придумать новое имя переменной (нельзя второй раз использовать aboutBtn).

Если же вы не совсем поняли процесс, то не стесняйтесь этого. Xcode – сложная штука, и требует довольно много практики. Скачивайте наши исходные файлы примера, приведенные ниже, и попытайтесь сравнить собственный проект с нашим.

* Исходные файлы
Внимание! У вас нет прав для просмотра скрытого текста.


Как использовать пользовательскую графику UIButton в приложениях на iPhone

Завершение

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

Не говоря уже о том, что Xcode предлагает превосходный IDE для разработки кода на Objective-C. Вы можете поискать в Google несколько подобных бесплатных примеров (не обязательно только кнопки). Талантливые дизайнеры очень часто предлагают бесплатные полноценные наборы интерфейсов! Если у вас есть какие-либо идеи или вопросы касательно нашего сегодняшнего руководства, не стесняйтесь высказаться в комментариях!
Вернуться назад