Автор статті: Олександр Ф.

Все, що ви хотіли дізнатися про перші кроки у SwiftUI

SwiftUI — це новий метод створення користувацького інтерфейсу з дійсно класними функціями. Його можна використовувати для всіх платформ Apple, і він має всю делікатність та потужність мови Swift. У цій статті я зроблю вступ до SwiftUI, розповім про його можливості, і ми разом створимо невеликий додаток зі списком постів.

Зробіть себе комфортно і бажаю приємного читання цього типу навчального посібника з SwiftUI!

Переваги SwiftUI:

Декларативний синтаксис

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

import SwiftUI
 
struct FeatureCard: View {
  var landmark: Landmark
 
  var body: some View {
     landmark.featureImage
        .resizable()
        .aspectRatio(3/2, contentMode: .fit)
        .overlay(TextOverlay(landmark))}}

Декларативний стиль також використовується в анімації. Використовуючи його, можна легко додати анімацію до майже будь-якого об'єкта та вибрати її з колекції готових анімованих ефектів.

З таким простим впровадженням анімації вам не потрібно шукати інші способи, щоб зробити додаток живим.

Інструменти дизайну

Xcode постачається з інтуїтивно зрозумілими інструментами дизайну, які роблять створення інтерфейсу з SwiftUI надзвичайно простим та приємним.

  • Перетягування. Просто перетягніть елементи UI на полотно або в код, а потім змініть шрифт, колір та інші властивості прямо там.
  • Динамічна заміна. Тепер додаток створюється та запускається з Xcode. Полотно праворуч — це ваш додаток в реальному часі, коли ви редагуєте полотно, Xcode відразу змінює код у вашому додатку за допомогою «динамічної заміни».
  • Попередні перегляди. Ви також можете створювати попередні перегляди для SwiftUI, щоб бачити все, що бачать користувачі, чи то DarkMode, чи локалізації. У попередньому перегляді ви можете додати відображення для будь-якого пристрою та орієнтації.

Нативний для всіх платформ Apple

SwiftUI працює нативно для всіх платформ Apple, будь то смартфон, планшет, ноутбук, телевізор чи смарт-годинник. Це дозволяє створити ідеальний користувацький інтерфейс.

Створення нового проекту

Відкрийте XCode, і або натисніть «Створити новий проект Xcode» у діалоговому вікні запуску XCode, або виберіть Файл > Новий > Проект.

У наступному вікні виберіть iOS як платформу, виберіть шаблон додатка та натисніть кнопку «Далі».

Потім введіть назву проекту та встановіть «SwiftUI» як користувацький інтерфейс, і натисніть «Далі».

Виберіть місце, де ваш проект має бути збережений на вашому Mac.

Після цього ви повинні побачити вікно проекту з відкритим файлом ContentView, якщо воно не відображається, виберіть його вручну. Ви побачите 2 редактори: один зліва з кодом і один справа з канвасом (якщо ви не бачите канвас — натисніть «Продовжити»).

Тепер перед вами шаблонний проект «Hello world» з одним текстовим полем. Давайте трохи пограємо з редактором справа, утримуючи ⌘, і натисніть на текстове поле. Ви побачите меню, в якому потрібно натиснути «Показати SwiftUI Інспектор».

Після цього ви побачите вікно з властивостями тексту:

Давайте змінимо сам текст, шрифт, ширину, колір. Ви відразу побачите зміни на канвасі, але зупиніться, якщо подивитесь на лівий редактор, ви побачите ті ж зміни! Це круто!

Спробуйте зробити те ж саме в лівому редакторі. Утримуйте ⌘ і натисніть на «Текст», з'явиться вікно, яке виглядає так само, як у правому редакторі.

Зробіть все те ж саме, і ви побачите всю силу динамічної заміни, всі зміни в коді призводять до змін на канвасі, і всі зміни на канвасі призводять до змін у коді.

Ви також можете просто додати елементи користувацького інтерфейсу звичайним способом, лише натиснувши на «+» і перетягнувши елемент на канвас, але тепер ми можемо перетягувати його безпосередньо в код.

Створення списку постів

Тепер давайте спробуємо створити список постів, у разі використання старих методів ви б використовували UITableView, але тепер все інакше, давайте подивимося, яким чином.

Один з способів — використовувати Stack, вертикальний, у цьому випадку. Давайте вбудуємо текст у Stack, Apple додала цю функцію безпосередньо в меню для зручності. Коли ви натискаєте на властивість, утримуючи ⌘, зробіть це і виберіть «Вбудувати в VStack».

Потім скопіюйте текст кілька разів всередині VStack, і ви побачите результат, як на малюнку нижче.

Однак другий метод — List є більш зручним для цієї мети.

Просто змініть VStack у коді на List, і ви побачите щось подібне до UITableView — елементи будуть розташовані у верхньому лівому куті списку.

Тепер давайте зробимо щось цікавіше з посту, ніж просте текстове поле. Додайте новий файл SwiftUI View для цієї мети таким чином: виберіть Файл > Новий > Файл і назвіть його «PostRow».

Додайте наступний код до тіла створеного файлу:

// 1
VStack(alignment: .leading, spacing:10){// 2
            HStack {// 3	
                Image("userOne")
                    .resizable()
                    .clipShape(Circle())
                    .frame(width:50, height:50)// 4
                VStack(alignment: .leading){
                    Text("Марія Сміт")
                        .font(.title)
                        .fontWeight(.bold)
                        .foregroundColor(.purple)
 
                    Text("Привіт, світ!")}// 5
                Spacer()
 
                Text("11.10.2019")}
.padding(.horizontal, 10)// 6
            Image("one")
                .resizable()
                .frame(height:200)}

Розглянемо цей код детальніше:

  1. Тут створено вертикальний стек з вирівнюванням зліва та відстанню між об'єктами 10 пунктів.
  2. Горизонтальний стек з горизонтальним відступом 10 (це зроблено через властивість padding, тут можна вказати будь-який відступ)
  3. Додайте зображення з фотографією автора, яке можна змінювати — звузьте його, щоб воно вмістилося у ваш кадр, clipShape — зробіть його круглим, frame — встановіть розмір.
  4. Вертикальний стек з вирівнюванням зліва, з ім'ям автора та назвою посту посередині.
  5. Spacer — заповнює пустий простір, після чого дата посту буде з лівого боку горизонтального стека.
  6. Зображення посту з висотою 200.

Ось що у вас вийшло:

Наступний крок — замінити структуру ContentView на:

struct ContentView: View {
    var body: some View {
        List {
            PostRow()
            PostRow()
            PostRow()}.padding(.horizontal, -20)}}

Горизонтальний відступ становить −20, щоб зображення прилягало до кутів, оскільки List має свій власний вбудований відступ, і, на жаль, не було більш елегантного способу їх усунути на момент написання статті.

Тепер у нас є список дуже гарних постів. Наступний крок — зробити їх динамічними. Для цього потрібно трохи підготуватися.

1) Додайте файл Swift “Post” з сутністю посту:

import SwiftUI
 
struct Post: Codable, Identifiable {
    var firstName: String
    var lastName: String
    var title: String
    var avatar: String
    var photo: String
    var id: Int
    var date: String
    var description: String
 
    var fullName: String {return firstName +" "+ lastName
    }}

2) Додайте файл Swift “PostsData” з інформацією про пости:

import UIKit
import SwiftUI
 
let posts:[Post]= getPosts()
 
private func getPosts()-> [Post]{return[
        Post(firstName:"Maria",
             lastName:"Holms",
             title:"Прекрасне фото",
             avatar:"userOne",
             photo:"one",
             id:0,
             date:"10.11.2019",
             description:"Lorem ipsum dolor sit amet, eam ne tibique reformidans, mea ea quando fabellas persequeris. Sed fabulas voluptatum te. Petentium concludaturque et has, te quem appareat percipitur nec. Dignissim scriptorem ne qui, errem feugait ei vis, ut nam aeque referrentur."),
        Post(firstName:"Tom",
             lastName:"Riddle",
             title:"Божевільний світ",
             avatar:"userTwo",
             photo:"two",
             id:1,
             date:"10.11.2019",
             description:"Lorem ipsum dolor sit amet, eam ne tibique reformidans, mea ea quando fabellas persequeris. Sed fabulas voluptatum te. Petentium concludaturque et has, te quem appareat percipitur nec. Dignissim scriptorem ne qui, errem feugait ei vis, ut nam aeque referrentur."),
        Post(firstName:"Victor",
             lastName:"Tsoy",
             title:"Посмішка людини",
             avatar:"userThree",
             photo:"three",
             id:2,
             date:"10.11.2019",
             description:"Lorem ipsum dolor sit amet, eam ne tibique reformidans, mea ea quando fabellas persequeris. Sed fabulas voluptatum te. Petentium concludaturque et has, te quem appareat percipitur nec. Dignissim scriptorem ne qui, errem feugait ei vis, ut nam aeque referrentur.")]}

3) Змініть файл PostRow, щоб він отримував дані з сутності Post:

import SwiftUI
 
struct PostRow: View {
    var post: Post
 
    var body: some View {
        VStack(alignment: .leading, spacing:10){
            HStack {
                Image(post.avatar)
                    .resizable()
                    .clipShape(Circle())
                    .frame(width:50, height:50)
 
                VStack(alignment: .leading){
                    Text(post.fullName)
                        .font(.title)
                        .fontWeight(.bold)
                        .foregroundColor(.purple)
                    Text(post.title)}
                Spacer()
                Text(post.date)}.padding(.horizontal, 10)
            Image(post.photo)
                .resizable()
                .frame(height:200)
 
        }}}
 
struct PostRow_Previews: PreviewProvider {static var previews: some View {
        PostRow(post: posts[1])}}
 

4) Нарешті, змініть ContentView на:

struct ContentView: View {
    var body: some View {
        List(posts, id: \.id){ post in
            PostRow(post: post)}
        .padding(.horizontal, -20)}}

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

І ось що ви отримаєте:

Створення детального перегляду поста

Тепер ви рухаєтеся далі і додаєте можливість переглядати пост, натискаючи на нього. Перш за все, вам слід створити новий файл SwiftUI під назвою "PostDetail":

import SwiftUI
 
struct PostDetail: View {
    var post: Post
 
    var body: some View {// 1
        ScrollView {// 2
            VStack {// 3
                Image(post.avatar)
                    .resizable()
                    .clipShape(Circle())
                    .overlay(
                        Circle().stroke(Color.black, lineWidth:2))
                    .shadow(radius:10)
                    .frame(height:300)
                    .offset(y:20)
                    .padding(.bottom, -300)// 4
                HStack(alignment: .top){
                    Text(post.firstName)
                        .font(.title)
                        .fontWeight(.bold)
                        .foregroundColor(Color.orange)
                    Spacer()
                    Text(post.lastName)
                        .font(.title)
                        .fontWeight(.bold)
                        .foregroundColor(Color.orange)}
                .padding()// 5
                Text(post.title)
                    .font(.title)
                    .fontWeight(.bold)
                    .padding(.top, 260)// 6
                Image(post.photo)
                    .resizable()
                    .frame(height:300)
 
                Text(post.description)}}}}struct PostDetail_Previews: PreviewProvider {static var previews: some View {
        PostDetail(post: posts[0])}}

Давайте розглянемо цей код більш детально:

  1. Ви створюєте ScrollView, щоб користувач міг прокручувати ваш контент.
  2. Вертикальний стек необхідний, оскільки прокрутка має бути вертикальною.
  3. Додаєте зображення з фото автора з можливістю зміни розміру — звужуєте його так, щоб воно вміщалося в рамку, clipShape — робите його круглим, overlay — створюєте чорну обводку, shadow — додаєте тінь з радіусом 10, frame — встановлюєте висоту 300, offset — відступаєте на 20 пунктів, padding — робите нижній відступ -300, щоб елементи, що розташовані нижче у вертикальному стеці, не враховували положення аватара.
  4. Горизонтальний стек з текстом імені автора.
  5. Текст з заголовком поста.
  6. Зображення поста з висотою 300.

І, дивлячись на полотно, ви побачите:

Тепер вам потрібно додати навігацію, і з SwiftUI це зовсім не проблема.

Змініть файл ContentView:

struct ContentView: View {
    var body: some View {// 1
        NavigationView {
            List(posts, id: \.title){ post in// 2
                VStack {
                    PostRow(post: post)
                    NavigationLink(destination: PostDetail(post: post)){
                        EmptyView()}}}
            .padding(.horizontal, -20)// 3
            .navigationBarTitle(Text("Пости"))}}}
  1. Вбудуйте список постів у NavigationView, це додасть NavigationBar у верхній частині інтерфейсу.
  2. Вертикальний стек з постом та NavigationLink — передає до призначення. Ви також могли б вбудувати PostRow у NavigationLink, але це створило б індикатори розкриття праворуч від PostRow. Саме тому ви помістите NavigationLink з порожнім View у стек.
  3. Встановіть заголовок NavigationBar на «Пости».

Це все, тепер, коли ви натискаєте на пост, ви бачите його детальний перегляд.

Висновок

Підсумуємо, у цій статті ви ознайомилися з дуже класною технологією SwiftUI, з її декларативним синтаксисом та інтерактивним створенням дизайну. Ви також створили невелику програму, використовуючи цю чудову технологію. Тепер ви можете:

  • створити проект з SwiftUI
  • створити та змінити вигляд
  • створити списки та
  • перехід між екранами

Swift UI — мені дійсно сподобалося, і це чудово, що цей новий шлях, хоч і не ідеальний, відкрився. Сподіваюся, стаття була корисною і бажаю вам удачі у ваших досягненнях.

Ви можете знайти повний демонстраційний проект на Bitbucket.