1-2-Lekciya. Mobil qosımshalar jaratıw ushın programmalastırıw ortalıqları

struct ContentView: View {
var body: some View {
HStack {
Image(systemName: "photo")
VStack {
Text("Simon Ng")
Text("Founder of AppCoda")
}
}
}
}

IOS penen13 ten baslap, Apple SFSymbols penendep atalǵan jańa ózgeshelikti usınıs etedi. Apple tárepinen islep shıǵılǵan SF Symbols-qosımshalarda isletiliwi múmkin bolǵan 1500 den artıq belgiler kompleksi. San-Fransisko sisteması shrifti menen ańsatǵana integraciya etiwleri múmkinligi sebepli, belgiler avtomatikalıq túrde hár qanday ólshem degi tekst menen optikalıq vertikal hizalama beredi. Biziń oqıtıwshılarımız ele suwret joq ekenligi sebepli, biz placeholder dep atalatuǵın zatlardan paydalanamız.

Keling, birpara kishi dizayn máselelerine itibar qarataylik. UI Table Row kórinisin eliklew kerek bolǵanı ushın, tekstti shep tárepke tegislang (yaǵnıy, onı tiykarǵı etemiz). Bunı ámelge asırıw ushın vstack-de ⌘+Click-ni basıń hám Inspect-ni basıń. Tómendegi sıyaqlı shep tárepdegi hizalama belgisin saylań:

Keyin kod daǵı ózgerislerdi kóresiz. Bunnan tısqarı, kod jańa ózgerislerdi kórsetiw ushın Real waqıtta ózgertiriledi.
VStack(alignment: .leading) {
...
}

Endi ekinshi tekst kórinisi bas bet bolsa, shriftti ózgertiraylik. Aldınǵı sıyaqlı, predvaritel'nogo +" Appcoda tiykarlawshisi" tekst kórinisinde aldınan kóriw rejiminde basıń hám Inspect-ni saylań. Shriftti "Subheadline" ga ózgertiriń hám janlı kodtı aldınan kóriw hám ózgertiwdi kórsetiń.

Keling, reńni ózgertiraylik jáne onı " kúlreń" ga ornataylik. Bul kod tómendegishe bolıwı kerek:

struct ContentView: View {
var body: some View {
HStack {
Image(systemName: "photo")
VStack(alignment: .leading) {
Text("Simon Ng")
Text("Founder of AppCoda")
.font(.subheadline)
.color(.gray)
}
}
}
}

Endi, bir qatar úlgiler dizayni tawsılǵannan keyin, biz tilsimli bólekke keldik. Dizimdi jaratıw qanshellilik ańsat ekenligin kóriń. Egaligingizni tastıyıqlang qosımsha múmkinshilikler ushın voila! Kod avtomatikalıq túrde qanday ózgeriwin kórip shıǵıń hám bos jay 5 shıraylı jańa qatarlardı kórsetip beredi, olardıń hár biri Simon ngni jámáát aǵzası retinde kórsetedi.

Bunnan tısqarı, List kodta qanday jaratılǵanına itibar beriń. Hstackni alıp taslaw jáne onı tákirarlanıwshı dizim menen almastırıw arqalı keste kórinisi jaratıldı. Keling, qansha waqıt tejewdi hám qansha kod jazǵanıńızdı oylap kóriń, bulardıń barlıǵın aldın alıw UITableviewDataSource, UITableviewDelegate, Auto Layout, Dark Mode ushın ámelge asırıw hám t.b. bulardıń barlıǵı SwiftUI kúshin hám kúshin kórsetedi. Biraq, biz ap-alıs. Keling, jańa dizimge birpara haqıyqıy maǵlıwmatlardı qosamız.

Dizimge maǵlıwmatlardı jalǵaw

Bizge kerek bolǵan maǵlıwmatlar jámáát aǵzalarınıń dizimi hám olardıń barlıq suwretleri menen papka menen birge olardıń ómirbayanı. Bul erda kerekli fayllardı júklep alıwıńız múmkin. Tutor atları menen 2 fayldı tabıwıńız kerek. swift hám Tutor. xcassets.

Júklep alınǵannan keyin, fayldı Swift keńeytpesi hám Xcode joybarına resurslar papkasın import etiń. Olardı import qılıw ushın olardı joybar sortıgatoriga alıp barıń.

Tutor faylında. swift Tutor dúzilisin daǵaza etedi jáne onı identifiable protokolına sáykes keledi. Keyinirek ne ushın zárúrligini túsinesiz. Bunnan tısqarı, ózgeriwshiler anıqlaw ID, name, headline, bio hám imageName. Aqır-aqıbetde, biziń qosımshamızda isletiletuǵın birpara sınaq maǵlıwmatların qosamız. Tutorda. xcassets penenbarlıq jámáát aǵzalarınıń suwretleri bar.

Contentview-ga qaytıp barıń. swift hám kodtı tómendegi tárzde ózgertiriń: