Как сделать кнопку в xcode

Обновлено: 04.07.2024

Несмотря на то, что мы уже многому научились в этой серии по разработке под iOS, я уверен, что вы готовы начать создавать приложения для iOS, которые делают что-то классное или полезное. В этом уроке ваше желание исполняется. Используя XCode, вы собираетесь создать проект iOS с нуля, изменить исходный код проекта и запустить свое приложение в симуляторе или на физическом устройстве.

Представляем Colorific

Colorific — это название приложения, которое вы собираетесь создать. Идея Colorific проста: каждый раз, когда пользователь касается экрана устройства, цвет экрана меняется. Несмотря на то, что концепция является базовой, Colorific идеально подходит для начала и изучения преимуществ разработки под iOS.

1. Создайте новый проект Xcode

Как мы видели ранее в этой серии, каждое iOS-приложение проходит через проект Xcode. Что такое проект Xcode? Проект XCode — это контейнер или репозиторий, содержащий файлы, ресурсы и информацию, необходимые для создания одного или нескольких продуктов.

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

Запустите Xcode и создайте новый проект Xcode, выбрав New> Project … в меню File . Вы можете сделать то же самое, нажав Shift + Command + N.

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

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

2. Выберите шаблон приложения

Начать работу с новым приложением или проектом в Xcode легко благодаря прилагаемым шаблонам приложений. Для приложения, которое мы собираемся создать, нам нужен шаблон приложения Single View . Не стесняйтесь взглянуть на другие шаблоны приложений, но обязательно выберите шаблон приложения Single View для Colorific.

Выберите шаблон приложения

3. Настройте проект

Теперь вы должны хорошо понимать различные параметры конфигурации при настройке нового проекта XCode. Для этого проекта я рекомендую использовать параметры, показанные на скриншоте выше. Обратите внимание, что большинство параметров можно легко изменить после создания проекта. Нажмите Next, когда закончите настройку вашего проекта.

4. Сохраните проект

На следующем шаге Xcode спросит вас, где вы хотите сохранить ваш новый проект. Возможно, вы заметили маленький флажок в нижней части окна с надписью Создать репозиторий Git на моем Mac . Серый текст под флажком гласит: Xcode поставит ваш проект под контроль версий .

Сохранить проект

Как я упоминал ранее в этой серии, контроль исходного кода незаменим при разработке программного обеспечения. Эта серия не будет подробно освещать эту тему, но если вы серьезно относитесь к разработке программного обеспечения, я настоятельно рекомендую ознакомиться с системой контроля версий.

Git — самая популярная система управления исходным кодом в сообществе какао. Однако вполне возможно использовать другую систему SCM, например SVN или Mercurial.

5. Изучение пользовательского интерфейса XCode

Прежде чем мы продолжим, я хочу потратить несколько минут на изучение пользовательского интерфейса Xcode. Есть четыре отличных области:

Панель инструментов

Панель инструментов в верхней части содержит кнопки и меню, которые вы чаще всего используете. Как мы видели ранее в этой серии, кнопки для запуска и остановки приложения также находятся на панели инструментов.

Изучение панели инструментов интерфейса пользователя XCode

Дисплей в центре панели инструментов похож на дисплей в iTunes. Он отображает информацию о состоянии вашего проекта или о том, что XCode в настоящее время делает в фоновом режиме. Он скажет вам, например, когда сборка удалась или не удалась.

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

навигатор

Основное назначение левой боковой панели — навигация, и ее часто называют навигатором XCode.

Изучение пользовательского интерфейса Xcode Navigator

В навигаторе есть разные вкладки, а навигатор проекта находится слева. Выбор в левой боковой панели определяет, что отображается в главном представлении Xcode, рабочей области.

Главный вид или рабочая область

Главный вид или рабочее пространство — это область, где вы проводите большую часть своего времени. Это рабочая лошадка Xcode, которая отображает все, что выбрано в навигаторе.

Изучение основного интерфейса пользователя Xcode или рабочей области

Инспектор

В то время как левая боковая панель контролирует то, что отображается на главном экране Xcode, содержимое правой боковой панели отражает то, что отображается или выбирается на главном экране.

Изучение Инспектора пользовательского интерфейса XCode

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

6. Изучение проекта

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

Изучение проекта

Основной вид состоит из двух разделов: боковой панели слева и подробного вида справа. На боковой панели вы видите два элемента: ваш проект с одним элементом и цели с одним элементом.

Рано знать, в чем разница между проектом и целью. Помните, что проект является хранилищем файлов, ресурсов и данных, необходимых для создания одного или нескольких продуктов. Цель относится к одному из этих продуктов. Цель содержит необходимые инструкции для создания продукта с использованием ресурсов проекта. Это означает, что проект может содержать несколько целей для создания нескольких продуктов. Как видите, проект Xcode — это больше, чем просто папка с кучей файлов в нем.

Выбор схемы и симулятора

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

8. Изменить пользовательский интерфейс

Давайте запачкаем руки и изменим пользовательский интерфейс приложения. Откройте Навигатор проекта и выберите файл с именем Main.storyboard . Файл с расширением .storyboard является файлом пользовательского интерфейса. В этом файле мы создаем пользовательский интерфейс приложения.

Изучение основной раскадровки проекта

Раскадровка содержит один элемент — контроллер представления с белым видом, который вы видели в симуляторе несколько минут назад. Рабочая область состоит из боковой панели, показывающей объектное представление сцен раскадровки. Большая часть рабочей области содержит сцены или пользовательский интерфейс приложения.

Выберите объект с именем View в View Controller Scene на левой боковой панели и посмотрите, как рабочее пространство и правая боковая панель обновляют свое содержимое. Куча вкладок появляется в верхней части правой боковой панели. Каждая вкладка содержит коллекцию атрибутов, связанных с объектом с именем View .

Изучение Представления Контроллера Представления

Нижняя половина правой боковой панели содержит раздел с четырьмя вкладками. Третья вкладка представлена ​​изображением трехмерной рамки. Это поле показывает, как объекты обычно отображаются в XCode.

Изучение библиотеки объектов

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

В начале этого урока я говорил вам, что мы собираемся создать функциональное приложение. Пользователь должен иметь возможность касаться экрана, чтобы изменить его цвет.

Существует несколько подходов к обнаружению касаний в приложении для iOS. Одним из решений является использование кнопки. В библиотеке объектов найдите элемент с именем Button и перетащите его из библиотеки объектов в белый вид в рабочей области XCode.

Добавление кнопки

Пользователь должен иметь возможность касаться любой части экрана, а это означает, что кнопка должна охватывать весь экран. Вы заметили шесть крошечных квадратов по краям кнопки? Перемещая крошечные квадраты, вы можете изменить размеры кнопки. Отрегулируйте размер кнопки, чтобы она покрывала весь экран. Не беспокойтесь о строке состояния в верхней части экрана.

Изменение размера кнопки

Вид за кнопкой — это вид, который меняет цвет, когда пользователь касается экрана. На данный момент кнопка блокирует представление от представления пользователя, поэтому нам нужно изменить атрибуты кнопки.

Начните с изменения типа кнопки с System на Custom . Это сделает кнопку прозрачной.

Изменить тип кнопки

Второе изменение, которое нам нужно сделать, — это проинструктировать пользователя, что делать, изменив заголовок кнопки. Текстовое поле рядом с надписью Заголовок в настоящее время читает кнопку . Измените это на Tap, чтобы изменить цвет и установите цвет текста на черный, чтобы сделать его более читабельным.

Изменить заголовок и цвет текста кнопки

9. Добавьте действие в контроллер вида

Если вы знакомы с шаблоном MVC ( M odel- V iewController), то у вас есть преимущество в освоении разработки под iOS. Шаблон MVC — это шаблон, который можно найти во многих языках и средах, таких как Laravel и Ruby on Rails .

Представление в нашем пользовательском интерфейсе относится к категории V шаблона MVC. Представление контролируется контроллером. Посмотрите на имена файлов в Project Navigator слева. ViewController.swift представляет контроллер представления, который управляет представлением в нашем пользовательском интерфейсе.

Что делает контроллер представления? Контроллер представления может делать все, что вы хотите, но он в первую очередь отвечает за обработку всего, что происходит в представлении, которым он управляет. Это включает, например, прикосновения от пользователя. Если пользователь нажимает кнопку в представлении, ответственность за обработку события касания лежит на контроллере представления.

Как мы справляемся с сенсорным событием? В случае нашей кнопки мы добавляем действие в контроллер представления. Действие — это причудливое название метода. Что такое метод? Метод — это функция Swift. Подождите. Какая? Не стоит слишком беспокоиться о терминологии. Следующие два поста будут более подробно освещать язык программирования Swift. Необходимо помнить, что метод подобен методу в Ruby и PHP или функции в JavaScript.

Если вы вызываете метод контроллера представления, он что-то делает в ответ. Другими словами, если пользователь нажимает кнопку и мы подключаем метод к этому событию касания, контроллер представления будет что-то делать в ответ на событие касания.

Я знаю, как добавить IBAction к кнопке, перетащив его из конструктора интерфейса, но я хочу добавить это действие программно, чтобы сэкономить время и избежать постоянного переключения туда и обратно. Решение, вероятно, очень просто, но я просто не могу найти ответы, когда я его ищу. Спасибо!

ОТВЕТЫ

Ответ 1

Swift 4

Objective-C

Вы можете найти богатый источник информации в документации Apple. Взгляните на документацию UIButton, там будет показано, что UIButton является потомком UIControl, который реализует метод добавления целей.

Вам нужно обратить внимание на то, следует ли добавлять двоеточие или нет после myAction в action:@selector(myAction)

Ответ 2

Ответ 3

Ответ 4

Ответ 5

сначала напишите это в вашем .h файле viewcontroller

Теперь напишите это в вашем .m файле viewcontrollers viewDidLoad.

напишите этот внешний метод viewDidLoad в .m файле вашего контроллера представления

Ответ 6

Для Swift 3

Сначала создайте функцию для действия кнопки, а затем добавьте функцию к цели кнопки

Ответ 7

Ответ 8

10 ответы

Swift 4

Objective-C

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

Вам нужно будет обратить внимание на то, добавлять ли двоеточие после myAction in action:@selector(myAction)

ответ дан 17 мая '19, 14:05

Что, если я хочу передать параметр селектору при нажатии моей кнопки (например, у меня есть кнопка внутри UITableViewCell, и я хочу передать объект в этой ячейке при нажатии кнопки ячейки)? - acecapades

@acecapades Я думаю, вы смешиваете две вещи. Вы не можете прикрепить параметр, как вы могли бы сделать с performSelector. Шаблон действия, используемый потомком UIControl UIButton, состоит в том, чтобы уведомить некоторую цель с помощью определенного селектора, когда запускается controlEvent. Когда это происходит в вашем случае, вы можете перейти к супервизорам, чтобы увидеть, кто инкапсулирует вашу кнопку, и попросить метод разрешить отношение tablecell к модели, а затем сделать с этим все, что вы хотите. - Ник Уивер

Я понимаю. В этом есть смысл. Думаю, я понимаю, о чем вы говорите. Спасибо за подсказку, Ник! - acecapades


Решил отойти от понятия уроков, теперь буду просто писать статьи. В этой статье расскажу как работать в Tab Bar Controller и как добавлять новые view и подключить их к основному Tab Bar Controllerу. Итак начнем же!

Для начала, создайте Single page проект с любым названием и расположением на жеском диске. После создание его по умолчанию активный View Controller.


Его надо удалить)) и выделяем View Controller Scene и нажимаем Delete.


Переходим Библиотеку объектов и находим Tab Bar Controller


И переносим в наш Main.storyboard.


Xcode сразу подставил по умочанию два View Controllera. Если запустить приложение, то можно уже сразу увидеть рабочий вариант. Но к сожалению можно увидеть пока только черный экран.


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


После этого у нас появится указатель на экран, с которого и будет запускаться наше приложение.


Для наглядности работы давайте зададим цвет фона у View Controlleroв, для это выделите, любой ViewController и задайте ему любой цвет. Это можно сделать вот так.


Тоже самое надо проделать и для второго ViewControllerа.


Теперь можно запускать приложение и смотреть как работает.

И теперь давайте представим, что двух экранов мало и надо еще добавить, а как это сделать не понятно, сейчас расскажу как это можно сделать.

Выбираете экран, который надо добавить, я добавлю TableVIewController. Находим его в библиотеки объектов элемент.


И переносим его в Main.Storyboard.


Теперь выделаем Tab Bar Controller Scene, зажимаем клавишу ctrl и левый клик мыши, чтобы была голубая линия и перености на экран Table View Controller. И в открывшем меню жмем на View Controllers и мы подключили новый экран.

Теперь запустите приложение и убедитесь в его работе.

Если надо изменить название экранов или вставить иконку соответствующую, это делается очень просто. Надо выделить item на созданный контролерах.

Alt text

И теперь, тут уже можно поставить System item или поставить свою иконку (Image) или изменить имя наших экранов (Tittle) и многое другое, но пока нам этого не надо.

Alt text

Вот так выглядит приложение если добавить иконки.

И вот теперь можно создавать и подлючать файлы к контролерам и продолжать работу уже с тремя экранами. Всем спасибо! Встретимся в следующей статье.

Читайте также: