В этой статье я расскажу Вам как создать приложение “Менеджер задач” под IOS, используя Swift. Это приложение позволит Вам быстро создавать задачи перед походом в супермаркет и при покупке товара удалять ненужную задачу и т.д. Эта статья также положит начало, необходимое, чтобы создать собственные приложения на новом языке Swift в будущем если он Вам понравиться.

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

Обратите внимание на то, что для написанния данной статьй был использован Xcode Version 6.1.1, который содержит последние улучшения для языка Swift.

Приступим.

Запустите Xruby и создайте новый проект. Используйте шаблон “Tabbed Application” и нажмите Next.

xruby

Выбрав шаблон “Tabbed Application”, у нас теперь есть проект, который использует tab bar. Это предоставляет пользовательский интерфейс, который сконфигурированн tab bar controller и контроллеры представления для элементов tab bar.

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

Взгляд на структуру проекта.

Наш проект создан. Поздравляю. Если вы посмотрите в левую сторону вашего экрана, вы увидите следующее:

structure

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

  • AppDelegate.swift – Является основной точкой входа в приложения. FirstViewController.swift – Наш контроллер, который являеться нашей первой вкладка и то место, где мы вдальнейшем отобразимнаши текущие задачи.
  • SecondViewController.swift – Наш контроллер, который являеться нашей второй вкладкой и то место, с которого мы сделаем добавиление задачи.
  • Main.storyboard – то, где мы будем добавлять компоненты UI и визуализировать наше приложение.
  • Images.xcassets – содержит иконки или любые изображения, необходимые для приложения.
  • LaunchScreen.xib – Является экраном-заставкой, которую рекомендуют использовать для iPhone 6 и 6 Plus.

Смотрим дальше.

Для начала, добавьте новый файл к проекту. Выберите из шаблонов, “Cocoa Touch Class” и дайте ему название “TaskManager”.

В файл TaskManager.swift который Вы только что создали, добавьте следующий код:

import UIKit
 
var taskMgr: TaskManager = TaskManager()
 
struct task {
    var name = "Name"
    var desc = "Description"
}
 
class TaskManager: NSObject {
    var tasks = [task]()
 
    func addTask(name: String, desc: String){
        tasks.append(task(name: name, desc: desc))
    }
}

Так как мы собираемся собираемся сделать так, чтобы у нас был доступ к данному классу с любого места в нашем приложение, мы можем объявить переменную taskMgr и инстанцировать ее. Тогда мы создаем struct с двумя свойствами, которые будту местить данные с текстовых полей, которые мы собираемся установить в Main.storyboard. Наконец, мы добавили задачу в массив, который будет местить имя и описание задачи, чтобы упростить работу с введенными данными позже при работе с tableview.

Создание UI.

Выберите файл Main.storyboard, и Вы должны увидеть следующее:

storyboard

ПЕРВЫЙ ВЬЮ КОНТРОЛЛЕР (ОТОБРАЖАЕТ ЗАДАЧИ, КОТОРЫЕ УЖЕ ЗАВЕРШЕНЫ),

  • Удалите две лейбы/labels (Просто выделите их, и нажатие delete)
  • Добавьте TableView выбрав ее с Object Library и удостоверьтесь, что она соответствует экрану, оставляя информацию о поставщике услуг доступной.
  • Выделите TableView и выберите inspector, соедините dataSouce и delegate к Task View Controller как показано ниже:

tableview

  • Щелкните по значку “First” и выберите инспектор атрибутов и измените заголовок на “Tasks/Задачи”.
  • Так как мы хотим, чтобы наше приложение выглядело отлично на всех моделях iPhone (как 6 и 6 плюс), мы должны будем выбрать “Resolve Auto Layout Issue” в внизу нашего вью контролера и щелкнуть по “Add Missing Constaints”. Обратите внимание на то, что иногда, “Add Missing Constraints” не всегда решит Ваши проблемы, особенно для более старых устройств таких как iPhone 4S. Для будущей информации проверьте Xruby’s Help Documentation.

textfielddelegate

ВТОРОЙ КОНТРОЛЛЕР (СОЗДАНИЕ ЗАДАЧИ)

  • Удалите две лейбы/labels (Просто выделите их, и нажатие delete)
  • Добавьте label к вверх и измените текст на, “Add Task” снова проверка, что это соответствует экрану, оставляя информацию поставщика услуг доступной.
  • Добавить два текстовых поля по центру под лейбой и изменить шаблонный текст для первого текстового поля на “Name/Имя”, и второго - “Description/Описание”.
  • Добавить кнопку ниже второго текстовое поле и измените для нее текст, чтобы сказать, “save/сохранить”.
  • Выберите значок “Second” и выберите инспектор атрибутов и изменить название на “Add Tasks/Добавить задачи”.
  • Выберите текстовое поле (Text Field) и нажмите на connection inspector и перетащите deleget к Add Task View Controller, как показано ниже:

Снова, мы должны будем щелкнуть по “Resolve Auto Layout Issue” и щелкнуть по “Add Missing Constaints”.

ПРЕЖДЕ ЧЕМ ПРОДОЛЖИТЬ

Если вы посмотрите на иконки на панели “Tasks” и “Add Tasks”, то вы, наверное, заметите, что они не имеют какой-либо смысл для пользователя, так как они являются кругом и квадратом. То, что я обычно делаю в подобных случаев поиск бесплатных коммерческих иконок, такие как те, от icons8. После поисков я нашел “Create New” (http://icons8.com/web-app/6697/Create-New) иконки, который я мог бы использовать для “Add Tasks”.

first_icon

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

second_icon

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

ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС

Финальная версия Вашего storyboard должна выглядеть следующим образом:

firstview

Время писать код!

FIRSTVIEWCONTROLLER.SWIFT

Мы должны расширить наш класс, чтобы добавить необходимые протоколы, необходимые для использования TableView. Вы можете сделать это путем добавления UITableViewDelegate и uitableviewdatasource в наш класс, как показано ниже:

class FirstViewController: UITableViewController, UITableViewDelegate, UITableViewDataSource

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

Мы должны объявить outlet для TableView, на которой мы будет отображать наши Задачи/Tasks.

@IBOutlet var tblTasks : UITableView!

Переключиться обратно на Main.storyboard, выберите нащу TableView на нашем контроллере, нажмите на кнопку “Connection Inspector” и убедитесь, что Referencing Outlets подключен к нашему Tasks View Controller, как показано ниже:

tableviewoutlet

Вы можете просто перетащить outlet от tblTasks до FirstViewController, как мы делали это ранее для dataSource и delegate.

Мы собираемся добавить одну строку кода в метод viewDidLoad, чтобы обновить данные в таблице при каждой нагрузки этого view/представления.

override func viewDidLoad() {
    super.viewDidLoad()
    tblTasks.reloadData()
}

Теперь мы должны добавить функцию, которая будет возвращать количество строк в TableView. Эта информация будет поступать непосредственно из массива, который мы создали ранее. К счастью, у массивов есть свойство count, которое мы будем использовать, чтобы вернуть количество строк для отображения.

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int{
    return taskMgr.tasks.count
}

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

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell{
    let cell: UITableViewCell = UITableViewCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: "Default Tasks")
 
    cell.textLabel?.text = taskMgr.tasks[indexPath.row].name
    cell.detailTextLabel?.text = taskMgr.tasks[indexPath.row].desc
 
    return cell
}

Если пользователь проводит (делает свайп) пальцем по ячейке с левой стороны, мы хотим показать кнопки “удалить” и когда пользователь нажмет удалить, нам нужно" удалить элемент из массива, а затем обновить нашу таблицу (TableView).

func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath){
    if (editingStyle == UITableViewCellEditingStyle.Delete){
 
        taskMgr.tasks.removeAtIndex(indexPath.row)
        tblTasks.reloadData()
    }
}

SECONDVIEWCONTROLLER.SWIFT

Мы начнем с расширения нашего класса c подключение протокола необходимого для облегчения работы с TextField. Вы можете сделать это путем добавления UITextFieldDelegate, как мы это делали для работы с нашей таблицей немного рение ну или сделайте как показано ниже :

class SecondViewController: UIViewController, UITextFieldDelegate

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

@IBOutlet var txtTask: UITextField!
@IBOutlet var txtDesc: UITextField!

Переключиться обратно на Main.storyboard и для каждого TextField нажмите на кнопку “Connection Inspector” и убедитесь, что ссылки Referencing Outlets для каждого TextField сопоставляется с соответствующим outlet, как показано ниже:

textfieldoutlet

Так же мы собираемся добавить действие для нашей кнопки. Во-первых, добавьте следующий код в SecondViewController.swift:

@IBAction func btnAddTask(sender : UIButton){
    if (txtTask.text == ""){
        //Task Title is blank, do not add a record
    } else {
    //add record
    taskMgr.addTask(txtTask.text, desc: txtDesc.text)
 
    //dismiss keyboard and reset fields
 
    self.view.endEditing(true)
    txtTask.text = nil
    txtDesc.text = nil
 
    }
}

Далее, переключиться обратно на Main.storyboard и для нажатия на кнопку в “Connection Inspector” и убедитесь в том, что “Touch Up Inside ” сопоставляется с методом btnAddTask, как показано ниже.

buttontouch

Этот код будет просто проверить и убедиться, что пользователем что-то было введено в поле "Title" перед добавлением данных в массив. Мы сделаем необязательным ввод описания при создание новой задачи.

Далее добавьте две функции в SecondViewController.swift они будут просто закрыть/скрывать клавиатуру, если пользователь каснеться экрана, а также при нажатии на клавишу return на клавиатуре.

override func touchesBegan(touches: NSSet, withEvent event: UIEvent) {
    self.view.endEditing(true)
}
 
func textFieldShouldReturn(textField: UITextField) -> Bool{
    textField.resignFirstResponder()
    return true
}

Если вы все сделали правильно, то выберите iPhone 6, как устройство на котором будет запущенно ваше приложение и нажмите кнопку выполнить. После запуска Ваше приложение должно выглядеть следующим образом:

demo

Примечание: исходный код этого приложения можно найти на Github. Если вы хотите более подробный пример с использования Core Data для сохранения задачь и других косметических изменений, Вы это можете сделать самы или подождать следующую статью от меня.

Заключение.

Сегодня мы узнали, как использовать новый язык программирования отApple под названием Swift. Сегодня мы с Вами написали простое и в тоже время отличное приложение, которое работает на iPhone. Язык Swift не так давно был представлен широкой публике, и эта небольшая статья надеюсь поможет вам при написание собственного iOS-приложения с использованием этого молодого языка, который компания Apple с полной самоотдачей создала. Я хотел бы призвать Вас, чтобы ВЫ взяли это приложение и либо продолжили его или создали другое приложение, используя методы, которые Вы сегодня узнали для будущий экспериментов с языком Swift.

До скорых встреч.

Код самого приложения можно скачать здесь

оригинал статьи

Comments

Спасибо за статью! Очень полезно для тех, кто хочет сразу попробовать как все работает.

У вас ошибка в коде )) если мы запустим все что вы выше написали то выпадет ошибка - '-[UITableViewController loadView] loaded the "" nib but didn't get a UITableView.' - вас xib не видет uitable

Уточните какая версия Xcode у Вас, я только что выкачал код с репозитория, запустил и все работает. Так как статья была написанная еще до выхода Swift 1.2 то может что-то и поменялось.

Add new comment