Створення найпершого додатка для iOS.

Ця стаття навчить вас створювати власний додаток для iOS Tap Counter. Це дійсно просте додаток, яке в значній мірі підраховує кількість разів натискання кнопки дотику, і коли ви скидаєтесь, воно знову починає рахувати з нуля. Ось простий перегляд того, що ви створите.

Перш ніж ми продовжимо, я хочу повідомити вам, що цей підручник буде перевіряти кілька концепцій як початківців. Тут нічого занадто божевільного, але це чудовий закваска.

Налаштування

  1. Спочатку потрібно переконатися, що ви завантажили Xcode. Переконайтеся, що у вас є і останній XCode. Зверніться до App Store і переконайтеся, що оновлення не потрібне.
  2. Я використовую Xcode 8.3.2 із Swift 3 під час роботи цього підручника. Якщо до моменту, коли ви побачите цю статтю, щось змінилося або не працює, будь ласка, повідомте мене, щоб я міг змінити статтю відповідно.
  3. Створіть свій перший проект. Запустіть Xcode, і ви повинні бути на екрані привітання.
  4. Клацніть на Створити новий проект Xcode.
  5. Клацніть на додаток Single View, оскільки це дуже просте додаток, і ми використовуємо View. Існують і інші варіанти, такі як ігри - добре ви можете створювати ігри, додаток iMessage - створити додаток для iMessage це може бути і клавіатура, і гра на клавіатурі, і додаток на базі сторінки - аналогічно iBooks тим, що є багато розмивання та менш взаємодія видів поглядів.
  6. Потім натисніть кнопку Далі та введіть назву програми у назві продукту. Виберіть назву команди та організації, ідентифікатор організації. Переконайтеся, що мова є швидкою. Для пристроїв ви можете вибрати те, що вам подобається. Я буду використовувати Universal - можна використовувати як для iPad, так і для iPhone. Але ви можете використовувати лише iPad для iPad або iPhone лише для iPhone.
  7. Звідти Xcode запропонує вам вибрати місце для збереження цього проекту. Ви можете зберегти його де завгодно.
  8. Після того як ви закінчите, у вас повинен вийти досить порожній проект. Але ми це скоро виправимо.
  9. Клацніть на Main.storyboard
  10. Це ваш Interface Builder. Тут ви робите більшу частину передньої роботи. Ви робите дизайн і виглядає тут.
  11. У правому нижньому куті тут ви можете вибрати елементи та контролери, такі як TableViewController, Кнопки, Мітки та Перегляд тексту.
  12. Там же є панель пошуку, яку ви можете використовувати для пошуку того, що вам потрібно.

Main.storyboard

  1. Знайдіть контролер навігації та перетягніть його на екран.
  2. Звідти видаліть rootViewController. Подивіться на праву панель, виберіть rootViewController. Натисніть клавішу "видалити". Тепер виконайте контроль і перетягніть навігаційний контролер на контролер перегляду та встановіть його як контролер кореневого перегляду.

Потім ви натиснете на навігаційний контролер, а праворуч - порожній прапорець із написом Isit Controller Controller. Переконайтесь, що ви натискаєте це

Це в основному говорить про те, що Xcode починається з навігаційного контролера, а не просто з виду. Це так працює наш навігаційний бар, який ми маємо зараз. Навігаційна панель - це майже смуга, яку ви побачили у відео у верхній частині із заголовком «Лічильник» та кнопкою «Скинути».

  1. Звідти ви знайдете мітку "Бібліотека" та перетягніть її до контролера перегляду.
  2. Тепер шукайте кнопку і робіть те саме, але двічі.
  3. Звідти вирівняйте мітки та кнопки так, як вам подобається, перетягуючи їх. Рядки, які ви бачите під час переміщення цих елементів, - це вирівнювання, які дають вам знати, що ви його десь вирівнюєте. Коли ви закінчите, ви можете вимкнути кнопку скидання на панелі навігації, якщо хочете, що я і зробив, або просто скористатися власним розташуванням. Не хвилюйтесь, це не вплине на функціональність.
  4. Тепер ми хочемо знати, що збиралися подивитися. Тож із міткою натисніть на неї двічі, чи зможете ви змінити її з мітки на те, що вам потрібно. Оскільки це лічильник, виберіть номер. Тепер праворуч є атрибут Font. За замовчуванням це системний шрифт 17. Зробіть його більшим чи меншим, зробіть це відповідно до ваших уподобань. Я використовував 60. Ти можеш робити те, що тобі подобається.
  5. Для кнопок є скидання та натискання. Тому обов'язково позначте їх відповідно. Ви майже так само робите те, що ви робили з Label. Але вам не потрібно змінювати шрифт. Ви можете, якщо хочете.
  6. Нарешті, ми хочемо мати назву цього додатка. Отже, на панелі навігації натискайте на неї, поки панель не буде виділена. Ви помітите, що в правій області тепер відображаються кнопка Назва, Підказка та Назад. змінити заголовок на вподобану назву.

Тепер вам слід щось ближче до цього.

Весела частина

Тепер ми хочемо потрапити до кодуючої частини цього додатка. На вершині Xcode є кнопка помічника редактора. Це схоже на діаграму Венна.

Тепер вам слід побачити дві речі: Builder інтерфейсу та код для Controller View. Зараз ми будемо робити керування натисканням на вашій клавіатурі, утримуючи її та перетягуючи мітку в код у самому верху. Дайте етикетці назву типу "counterLabel".

Тепер, коли у вас є мітка, вам потрібно зробити те саме для двох кнопок. Але ось дещо дещо змінюється. У зв'язку з цим натисніть на спадне меню та виберіть Дія - це дозволяє нам програма робити щось, коли користувач натискає кнопку. Зробіть те саме для обох і дайте їм значущу назву, наприклад "tapButtonTapped".

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

Гаразд, спершу ми введемо цей код у: var counter: Int = 0 (Це змінна, що дозволяє типу Integer, і ми встановимо її до нуля.) Існує var і нехай ми ввійдемо в це з інша стаття. Але в основному вар можна змінити, нехай не може.

Тепер, коли у нас є лічильник, ми повинні показати це число. У функції viewDidLoad введіть це в counterLabel.text = String (counter) (тому змініть conterLabel на те, що ви назвали вашою міткою. наша лічильна змінна типу int.

Гаразд, зараз у нас є програма, яка показує номер, який потрібно відкрити. Тепер нам потрібно додати функції для скидання та натискання. Почнемо з крана.

Всередині IBAction для кнопки натискання ми хочемо додати 1 щоразу, коли користувач натискає 1. Отже, що ми робимо, це додавати його до числа. Потім замініть текст у мітці цифрою. Ми робимо це, зробивши наступне:

Тепер, зробивши це, ви хочете переконатися, що зробили це правильно. Тож запускайте додаток! Використовуйте CMD + R або натисніть кнопку відтворення у верхній частині.

Якщо ви помітили, щось може бути не так, кнопки можуть бути в усьому місці. Але коли ви натискаєте tap, він додається до попереднього номера. Якщо ви не бачите натискання кнопок або мітки та кнопки скрізь є. Поверніться до Main.storyboard. Що ми будемо робити зараз, це встановити їх там, де ми цього хочемо. Тому що це простий підручник. Я не буду заглиблюватися з обмеженнями. Ми будемо використовувати запропоновані Apple протипоказання. Тож у Main.storyboard переконайтеся, що ви перебуваєте в View Controller. Підтвердьте, що ви натискаєте щось у ViewController, наприклад фон, але не елементи в View. Якщо ви подивитесь на Interface Builder, є кнопка, яку ви бачите на зображенні нижче, при натисканні на неї ви побачите деякі параметри, натисніть кнопку Скинути до запропонованих обмежень. Тепер запустіть його ще раз, і все повинно виглядати трохи звично.

Кнопка, яку ви натискаєтеМеню, яке ви побачите.

Тепер повернемося до МБА

Всередині іншого IBAction у нас є кнопка скидання. Ми хочемо повернути число назад до 0. Тож ми зробимо це: число = 0. Це все, число зараз 0. Але воно не відображається в додатку, коли ви натискаєте на нього. Продовжуйте і спробуйте. Запустіть додаток ще раз.

Отже, щоб виправити це, проблема полягає в тому, що ми не оновили counterLabel, тому нам це потрібно зробити. Спробуйте розібратися в цьому. Якщо ви все ще застрягли, відповідь знаходиться внизу сторінки.

Тепер ви майже довели основи. Додаток в значній мірі працює. Ви торкнетесь tap, і він додасть його до лічильника. Ви натискаєте скидання, і лічильник повертається на 0.

Додатково, Екстра!

Тепер, якщо ви хочете зробити щось трохи веселіше чи додатково. Ми можемо позбутися цієї потворної лінії на навігаційній панелі. Ось код для цього:

Давайте спершу звернемось до слона в кімнаті, ЩО ТАК ХЕК? робиш там?

Це необов'язково, в значній мірі, це дає можливість Xcode знати, що існує можливість, що немає NaviController і що добре мати нуль або відсутня. Це так, що код все ще може працювати, якщо немає контролера. Необов’язкові в основному використовуються, коли є можливість нуля, але це сильно не впливає на програму. Ми хочемо дозволити нуль, оскільки він нічого не змінює, але Xcode не дозволяє це за замовчуванням. Якщо він дорівнює нулю, додаток вийде з ладу, тому з необов'язковим буде легше.

Тепер, про що йде мова, давайте говорити код.

Перший рядок - це майже налаштування та порожнє фонове зображення. Якщо ви використовуєте UIImage (), він майже порожній і обходить необхідність насправді використовувати зображення будь-якого типу. Це так, що немає фонового зображення.

Другий рядок в основному видаляє тіньове зображення, яке в основному є лінією / межею внизу. Але вам потрібно обом працювати, тому що ми не хочемо жодного з них, щоб лінія не відображалася.

Тепер, коли це зроблено, у вас є точна копія програми, показана на початку!

Відповідь: counterLabel.text = Рядок (число)

Енді Вонг

Енді - молодший в університеті Сент-Джон. Він захоплюється побудовою продуктів, працює в галузі індустрії, пробує нові речі і взагалі намагається щодня дізнаватися щось нове. В даний час він шукає інженера-програміста / стажування розробника в Нью-Йорку чи Сан-Франциско (Краще ~ закохався у місто). Єдина пристрасть, яку я маю більше, ніж будувати, - це будувати щось корисне. Щось, що допомагає людям способами, які раніше ніколи не було можливим.

Давайте підключимось! (Twitter) (веб-сайт) (Linkedin)