Задачи iOs — Домашний экран | Кодементор

Хотите найти список дел? Google Tasks — хороший выбор для вас. Очень прост в использовании, очень здорово продолжать использовать.

Я восхищаюсь этим приложением и хочу сделать хорошее приложение, подобное этому. В этой серии я попытаюсь скопировать Google Tasks в iOS. Надеюсь, вы продолжите читать.

Я использую некоторую коллекцию кода из моей личной кодовой базы. Вы можете скачать его на гитхаб

Инициируйте пустой проект и добавьте мой mustHave папка

Сегодня мы проектируем этот экран

Есть некоторые части, которые нам нужно сделать:

  • Создайте настраиваемые представления для представления состояния (центральная часть) и представления функций (нижняя часть).
  • Представления дизайна и установка автоматического макета
  • Добавить анимацию при выборе Add a new task

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

  • Добавить новый файл StateView.swift
  • Вставьте этот код в файл
class tkStateView: knView {
    let imageView = knUIMaker.makeImageView(image: UIImage(named: "first_empty"), contentMode: .scaleAspectFill)
    let emptyBoldLabel = knUIMaker.makeLabel(text: "A fresh start",
                                            font: UIFont.boldSystemFont(ofSize: 16),
                                            color: .black, alignment: .center)
    let emptyActionLabel = knUIMaker.makeLabel(text: "Anything to add?",
                                            font: UIFont.systemFont(ofSize: 16),
                                            color: UIColor.color(r: 96, g: 99, b: 104),
                                            alignment: .center)
    override func setupView() {
        addSubviews(views: imageView, emptyBoldLabel, emptyActionLabel)
        addConstraints(withFormat: "V:|[v0]-44-[v1]-8-[v2]|", views: imageView, emptyBoldLabel, emptyActionLabel)

        imageView.square(edge: screenWidth / 2)
        imageView.horizontal(toView: self)

        emptyBoldLabel.horizontal(toView: self)

        emptyActionLabel.horizontal(toView: self)
    }
}

*Примечание

Обычно я использую псевдоним для начала имени класса/структуры. В этом проекте это tk. С помощью этого псевдонима мы можем предотвратить некоторые одинаковые имена, такие как NotificationCenter…

Код Hope прост для понимания. Мы добавляем imageView, emptyBoldLabel, emptyActionLabel к tkStateView и установите для них автоматическую раскладку. Сложите их все по вертикали и установите в центре по горизонтали.

  • Этот вид может автоматически рассчитать размер. Его ширина screen width / 2равно imageView.
  • Его высота рассчитывается по ограничениям V:|[v0]-44-[v1]-8-[v2]|.
  • Добавить новое имя файла FunctionView.swift и вставьте код ниже
class tkFunctionView: knView {
    let addButton = knUIMaker.makeButton()
    let listOptionButton = knUIMaker.makeButton(image: UIImage(named: "dot_menu"))
    let accountOptionButton = knUIMaker.makeButton(image: UIImage(named: "dash_menu"))

    override func setupView() {
        let plusIcon = knUIMaker.makeImageView(image: UIImage(named: "add")!,
                                            contentMode: .scaleAspectFit)
        plusIcon.change(color: .white)
        let addLabel = knUIMaker.makeLabel(text: "Add a new task",
                                       font: .boldSystemFont(ofSize: 16),
                                       color: .white)
        let addView = knUIMaker.makeView()
        addView.addSubviews(views: plusIcon, addLabel)
        addView.addConstraints(withFormat: "H:|[v0]-16-[v1]|",
                           views: plusIcon, addLabel)
        plusIcon.centerY(toView: addView)
        addLabel.centerY(toView: addView)

        addButton.addSubviews(views: addView)
        addView.center(toView: addButton)
        addButton.createRoundCorner(30)
        addButton.backgroundColor = UIColor.color(r: 71, g: 136, b: 241)

        let line = knUIMaker.makeLine(color: .color(value: 234), height: 3)
        addSubviews(views: line, addButton, listOptionButton, accountOptionButton)

        line.horizontal(toView: self)
        line.centerY(toView: addButton)

        addButton.top(toView: self)
        addButton.centerX(toView: self)
        addButton.size(CGSize(width: screenWidth / 1.8, height: 60))

        listOptionButton.right(toView: self, space: -24)
        listOptionButton.verticalSpacing(toView: addButton)

        accountOptionButton.left(toView: self, space: 24)
        accountOptionButton.verticalSpacing(toView: addButton)
    }
}

Примечание

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

Реализовать пользовательский интерфейс домашнего экрана

let titleLabel = knUIMaker.makeLabel(text: "My Tasks",
                                    font: UIFont.systemFont(ofSize: 36),
                                    color: .black)
let stateView = tkStateView()
let functionView = tkFunctionView()
  • Переопределить setupView метод из базового класса
override func setupView() {
  view.addSubviews(views: titleLabel, stateView, functionView)

  titleLabel.topLeft(toView: view, top: 68, left: 54)

  stateView.center(toView: view)

  functionView.horizontal(toView: view)
  functionView.bottom(toView: view)
  functionView.height(120)        
}

Мне не нравятся тени, поэтому я пропускаю тень для линии и кнопку добавления в tkFunctionView

Добавить новое имя файла CreateTaskView.swift и вставьте код ниже

class tkCreateTaskView: knView {
    let taskNameTextView = knUIMaker.makeTextView(placeholder: "New task",
                                              font: .systemFont(ofSize: 18),
                                              color: .black)
    let addButton = knUIMaker.makeButton(image: UIImage(named: "add_fill"))
    let saveButton = knUIMaker.makeButton(title: "Save",
                                      titleColor: .color(r: 68, g: 137, b: 242),
                                      font: .boldSystemFont(ofSize: 18))
    var officalBounds = CGRect.zero

    override func setupView() {
        taskNameTextView.showsVerticalScrollIndicator = false
        taskNameTextView.returnKeyType = .done
        taskNameTextView.autocorrectionType = .no

        addSubviews(views: taskNameTextView, addButton, saveButton)

        taskNameTextView.horizontal(toView: self, space: 24)
        taskNameTextView.top(toView: self, space: 16)

        addButton.bottomLeft(toView: self, bottom: -16, left: 24)
        addButton.square(edge: 44)

        saveButton.right(toView: self, space: -24)
        saveButton.centerY(toView: addButton)

        taskNameTextView.height(44)
        backgroundColor = .white
    }

    override func layoutSubviews() {
        // (1)
        guard officalBounds != bounds else { return }
        officalBounds = bounds
        makeRoundCorner()
    }

    func makeRoundCorner() {
        let maskPath = UIBezierPath(roundedRect: bounds,
                                    byRoundingCorners: [.topRight, .topLeft],
                                    cornerRadii: CGSize(width: 20, height: 20))
        let shape = CAShapeLayer()
        shape.path = maskPath.cgPath
        layer.mask = shape
    }
}

(1)

  • Метод layoutSubviews вызывается много раз. Нам не нужно ничего делать, если bounds не меняется.

Интерфейс выглядит так.

Шаг 1: Открытым ViewController класс и добавить немного кода

let newTaskView: tkCreateTaskView = {
    let view = tkCreateTaskView()
    view.frame.size = CGSize(width: screenWidth, height: 130)
    // (1)
    view.alpha = 0
    return view
}()

// (2)
override var inputAccessoryView: UIView? { return newTaskView }
override var canBecomeFirstResponder: Bool { return true }

(1)

  • Мы будем анимировать непрозрачность вида на следующем шаге.

(2)

  • Есть 2 способа сделать пользовательский интерфейс таким
    1. Добавлять newTaskView к view и установите автоматическую раскладку. Наблюдайте за уведомлением клавиатуры и анимируйте ограничения.
    2. Установлен newTaskView в качестве inputAccessoryView. Намного легче. Это то, что я делаю

Шаг 2: добавить действие для отображения newTaskView в setupView метод

override func setupView() {
    ...
    functionView.addButton.addTarget(self, action: #selector(showCreateTaskView))
}

@objc func showCreateTaskView() {
    newTaskView.taskNameTextView.becomeFirstResponder()
    UIView.animate(withDuration: 0.35, animations: { [weak self] in
        self?.newTaskView.alpha = 1
    })
}
  • Беги и смотри.
  • Почти сделано. Просто пропустите черный вид, наложенный на основной вид. Сделай это.
@objc func showBlackView() {
    let blackButton = knUIMaker.makeButton()
    blackButton.backgroundColor = UIColor.black.withAlphaComponent(0.5)
    blackButton.tag = 1001
    view.addSubviews(views: blackButton)
    blackButton.fill(toView: view)
    blackButton.addTarget(self, action: #selector(hideCreateTaskView))
}

@objc func hideCreateTaskView() {
    let blackButton = view.viewWithTag(1001)
    newTaskView.taskNameTextView.resignFirstResponder()
    UIView.animate(withDuration: 0.35, animations: { [weak self] in
        self?.newTaskView.alpha = 0
        blackButton?.alpha = 0
    })

    run({ blackButton?.removeFromSuperview()
        }, after: 0.35)
}

@objc func showCreateTaskView() {
    showBlackView() 
    ...
}
  • ОК, запустить еще раз для окончательного результата

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

Продолжайте кодировать. Наслаждайтесь кодированием.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *