—»     —»   Как использовать пользовательскую графику UIButton в приложениях на iPhone
  Раздел: Руководства   Комментариев: 1  

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

Любой, кто знаком с 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 несколько подобных бесплатных примеров (не обязательно только кнопки). Талантливые дизайнеры очень часто предлагают бесплатные полноценные наборы интерфейсов! Если у вас есть какие-либо идеи или вопросы касательно нашего сегодняшнего руководства, не стесняйтесь высказаться в комментариях!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 10905   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 3 апреля 2015 @ 10:23
Написал: Андрей — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
А как в коде выравнивать текст по левому, правому краю
Я так понял текст по середине это дефолтовое значение
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Сайт визитка
Стоимость услуг Форум, веселые рассказы, статьи и др
ra-don.ru
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2020    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031