Voit itse lisätä ja muuttaa sisältöä muokkaa-painikkeiden avulla
Ennen tallennusta suositellaan ottamaan kopio muokkausruudusta (ctrl-a -> ctrl-c)
Olet itse vastuussa tämän teoksen käytöstä aiheutuvista vahingoista Lue lisää.
Swift
Johdanto
Ohjeita kielenopiskeluun
Aiheesta myös sivu IOS sovellus.
Perusteet
import SwiftUI
struct EsitysView: View {
var body: some View { // body on property
HStack { // teksti ja kuvat peräkkäin samalla rivillä
Text("Tekstiä")
.font(.largeTitle)
Image("KuvanNimi")
} // HStack
VStack {
HStack {
Image("KuvanNimi")
VStack {
Text("Tekstiä")
.font(.caption)
}
}
}
Image("KuvanNimi") // kuvanäkymä (view), kuvainstannsi
.resizable() // modifier
.scaledToFit()
Text("Tekstiä") // tekstinäkymä (view)
}
}
Seuraava tuottaa esikatselun edellisestä:
struct EsitysView_Previews: PreviewProvider {
static var prewiews: some View {
Stack {
EsitysView()
}
}
}
- argument on syötettävä arvo funktiolle sen toiminnan ohjaamiseksi. romuta(auto: 5) tai Text("teksti") jossa testi-muotoinen string syötetään argumenttina Text-funktiolle. Muuttujaa ei välttämättä tarvitse käyttää varastoimaan arvoa, esimerkiksi var romutaNäkymä = Text("Romuta"), vaan arvon voi suoraan syöttää Textille.
- assign on toiminto joka asettaa arvon muuttujalle tai vakiolle.
- asynchronous process Koodin osa joka voi toimia samalla kun muu osa ohjelmasta suorittaa.
- binding @Binding on property wrapper joka luo kaksisuuntaisen yhteyden tietoa tallentavan propertyn ja näkymän välille, joka näyttää ja muuttaa tietoa. Binding yhdistää propertyn muualla säilöttävään tiedon lähteeseen. Tiedon vaihto eri näkymien välillä. Alinäkymä voi muuttaa tiedonlähdettä.
struct Harjoitus: View {
@State var onOn = false // paikallisesti (local) tallennettu Harjoitus-näkymään
var body: some View {
VStack {
Toggle("Teksti", onOn: $onOn) // $-merkkillä tila päivitetään source of truthiin
Image(systemName: onOn ? "battery.50" : "battery.0") .font(.system(size: 100))
}}}
- boolean arvo on joko tosi (true) tai epätosi (false). Esimerkiksi 2 > 1 on tosi.
- body on näkymä, jossa sisältö tarjotaan. Ei datan luomisaluetta, vain näyttää näkymän.
- callback Funktio tai objekti toimittaa tietoa takaisin tai ilmoittaa jostain toiminnassaan.
- closure on funktio joka suorittaa jotain, mutta ei tarvitse nimeä. Closure voi säilyttää viittauksia kaikkiin vakioihin (constant) ja muuttujiin kontekstista jossa ne on määritelty. Esimerkiksi .toggle() eli onOn.toggle() joka muuttaa onOn arvon välillä tosi/epätosi.
- composition on osien yhdistämistä isommaksi kokonaisuudeksi. Esimerkiksi näkymien yhdistämistä.
- container on näkymä, jonka sisällä on muita näkymiä eli subviews.
- 'Subviews' voivat sisältää omia subviews.
- 'view hierarchy'. Hierarkian ylimpänä näkymäinstanssi.
- data flow Tiedon (data) kulku sovelluksessa ja kuinka tiedon eli arvojen muuttuminen vaikuttaa sovellukseen.
- data model Sovellukselle yksittäinen tiedon, totuuden lähde (source of truth), jossa kaikki tieto muokataan (modified) ja jota kaikki näkymät käyttävät.
- data separation Sovelluksen 'data model' tulee tai tulisi määrittää erillään UI:stä eli näkymästä!
- declaration Koodi joka tekee jotain sovelluksessa, kuten funktio ja muuttuja. Esimerkiksi let auto = "romu" deklaroi uuden vakion (constant) auto ja sille arvon romu. Esimerkiksi var auto : AppData deklaroi muuttujan auto tyypiltään AppData mutta ei anna arvoa.
- delegate Erityinen objekti joka tarjotaan toiselle objektille ilmoitettaessa jostain tapahtumasta. Delegate-objekti tavallisesti on yhdenmukainen protokollan kanssa ja funktioiden jotka kommunikoivat takaisinpäin. Liittyy callbackiin.
- dot notation on syntaksi, jota käytetään kutsuttaessa properties tai instanssin metodia. Esim. auto.romutaAuto() kutsuu metodia romutaAuto() auto-instanssissa.
- Double numeroarvon erityinen tyyppi
- framework Hakemisto, joka sisältää jaettuja resursseja. Esimerkiksi tiedostoja, kuvia, paikallisia merkkijonoja. Useat sovellukset voivat käyttää näitä samanaikaisesti. Esimerkiksi import SwiftUI jossa SwiftUI on framework.
- function (funktio) nimetty koodin osa jota kutsutaan nimellä. Sille voidaan syöttää paremetrejä (paremeters) ja se voi palauttaa tietoa lopetettuaan. Funktio joka on määritelty tyypin sisällä on metodi. Esimerkiksi func romutaAuto() { nostaIlmaan() } jossa funktion nimi on romutaAuto ja sitä kutsutaan romutaAuto() ja se suorittaa yhden kerran tehtävän nostaIlmaan().
- import Pääsy symboleihin kuten tyypit, funktiot, properties ja metodit, jotka on määritetty sen hetkisen tiedoston ulkopuolella. Voidaan tuoda moduulissa tai frameworkissa. Esimerkiksi import SwiftUI jossa SwiftUI on framework. import Guide
- initialization on toiminto, jossa luodaan uutta määrätyn tyyppistä instanssia, joka sisältää asetelman properties.
- initializer Kutsu intializeria luodaksesi uuden tyypin instanssin.
- Instance (instanssi) on tyypin määrätty arvo. Esimerkiksi let romuta = RomutaAuto() jossa 'romuta' on tyypin 'RomutaAuto' instanssi.
- label UI-elementin esitys joka luodaan näkymänä.
- List Näyttää minkä tahansa määrän näkymiä skrollaten pystysuorassa sarakkeessa.
- Method (metodi) on nimetty koodin osa joka suoritetaan kutsumalla. Metodi on funktio, mutta se määritellään tyypin sisällä. Esimerkiksi let auto = Auto() auto.romutaAuto() kutsuu metodia romutaAuto instanssista Auto.
- Modifier säätää näkymän (view) ulkoasua ja toimintaa. Esimerkiksi Auto() .foregroundColor(.red) -modifier asettaa auto-näkymän punaiseksi. Jokainen modifier asetetaan omalle rivilleen allekkain käyttöjärjesteyksessä tai voidaan kirjoittaa peräkkäin.
- observe Objektin seuraamista sen tilan muutoksesta.
- Parameter on arvo jolla muokataan funktion toimintaa. Kutsuttaessa funktiota, sille voidaan lähettää paremetrejä. Esimerkiksi
func romuta(auto: Int {
for i in 1...auto {
nostaAuto()
}}
- Module (moduuli) Yksittäinen jakelukoodi. Framework tai sovellus, joka voidaan tuoda toiseen moduuliin import -avainsanalla.
- Navigation
- 'navigation bar'
- 'navigation link' navigoi kohdesivulle käyttäjän valinnasta. Täytyy olla NavigationStack tai NavigationSplitView sisällä. Kohde voi olla teksti, kuva tai composed view.
- 'NavigationStack' Järjestää näkymät toistensa päälle pakaksi.
VStack {
NavigationStack {
List {
Text("Valikko")
NavigationLink("Linkin nimi") {Text("Uusi kohdesivu") .navigationTitle("Kohdesivu") }
}}}
- 'NavigationSplitView' Järjestää näkymät kahteen kolmeen sarakkeeseen vierekkäin, esimerkiksi tabletissa. Sallii valita kohteita johtavasta sarakkeesta ja esitää näkymä trailing-sarakkeessa. Ensimmäinen osa on leading-sarake ja toinen osa on tilapäisen sisällön placeholder-näkymä.
VStack {
NavigationSplitView {
List {
NavigationLink("Linkkinimi") {Text("teksti") }
NavigationLink("Linkkinimi") { JokuJuttu() .navigationTitle("Otsikko") }
NavigationLink { JokuJuttu() .navigationTitle("Otsikko") }
label: { HStack { Text("Linkkinimi") Spacer() Image(systenName: "arrow.forward.circle".font(.largeTitle) } }
} detail: { Text("Valitse valikosta linkki")
}}
- placehoder view Tilapäinen näkymä, joka korvautuu lopullisella sisällöllä. Esimerkiksi latausta osoittava ProgressView.
- Property on tyypin sisällä määritelty muuttuja (variable). Nimetty sisältö, joka säilöö arvon. Propertyyn voidaan päästä instanssilla (instance), joka käyttää pistenotaatiota. Esimerkiksi auto.onRomuttamoHalli jossa onRomuttamoHalli on auto-tyypin property.
- Property wrapper suorittaa propertylle toiminnon yleisen patterinin. Esim. @State -property wrapper kertoo SwiftUI:lle, että se varastoi arvon ja kun arvo muuttuu, kaikissa näkymissä se päivittyy. @State var onOn = true
- Protocol on joukko requiremets, kuten methods ja properties, joita voidaan adoptoida tai seurata tyypillä kuten luokka (class), structure, enumeration. Kun tyyppi adoptoi protokollan, tyyppi tarjoaa sen oman protokollavaatimusten implementaation eli conform protokollaan.
- Range
- 'lower/upper bound' aloitus/lopetusarvio otetaan huomioon. Esimerkiksi var asetettuAlue = 1...5
- 'closed range'. Esimerkiksi var asetettuAlue = 1...5
- half open range'. Esimerkiksi var asetettuAlue = 1..<5
let asetettuAlue = 1...5
for I in asetettuAlue {
print(i) // tulostaa 1 2 3 4 5
}
- Scope Projektin alueet joista on pääsy arvoihin tai tyyppeihin.
- 'global scope' Symboleihin on pääsy kaikista lähdetiedostoista samassa moduulissa. Kaikki instanssit, tyypit, funktiot, jotka on määritelty lähdetiedoston ylätasollä on oletuksena global scope.
- 'local scope' Muodostetaan jokaisella uudella tasolla global scopen alla. Esimerkiksi uusi type. Pääsy vain samasta koodista tai sen alapuolisista koodeista. Tyypissä määritetty muuttuja on vain sen tyypin funktioiden ja koodiblokkien käytettävissä. Metodin sisällä määritelty vakio on käytettävissä vain metodin määrittelyn sisällä.
- Section Section("Nimi") { ... }
- State (tila) Informaatio joka varastoitu määrättynä aikana muuttujaan (variable), sovellukseen tai järjestelmään (system). Esimerkiksi muuttuja auto sisältää arvon 5, joten sen tila on 4. @State var onOn = true @State var auto = Color.primary @State var auto : Double = 0 @State var auto = "kupla"
- 'state change' kun muuttujan arvo muuttuu.
- 'state property' Lisättäessä @State ennen näkymä-propertyä, sen arvon muuttuessa kaikki näkymän osat päivittyvät.
- String on tekstiä.
- 'String interpolation' "Tekstiä \(muuttuja)" jossa muuttujan kohdalle tulee muuttujan arvo. Vakiot, muuttujat ja code expressions.
- ternary conditional operator Lyhyt tapa tehdä ehto. ehto ? tosiArvo : epätosiArvo
- Type (tyyppi) on nimetty ryhmä ominaisuuksia (property, features) ja metodeja (methods, behaviors). Tyypillä luodaan ryhmiä toisiinsa liittyviä toimintoa, joita on helppo kutsua. Esimerkiksi struct Auto { var nimi : String func romutetaanteksti() { print("Romutetaan auto") } }
- user interface UI on käyttäjän kontrolloima sovelluksen osa.
- variable (muuttuja) on container, joka varastoi muutettavan arvon. Muuttuja voi sisältää erilaisia tyyppisiä arvoja. Esimerkiksi integers (5, -5), strings (tekstiä), ranges. Esimerkiksi var romutettavaAuto = 5 var romutettavaAuto = "Audi" var alue = 1...10 var romutettavaAuto = false
- View (näkymä) on sovelluksen käyttäjälle näkyvä "rakennuspalikka", esimerkiksi tekstiä, kuvia tai painikkeita. Luodaan uusi määrätyn tyyppinen instanssi. Esimerkiksi näkymän ulkoasua tai toimintaa voidaan säätää suoraan instansseilla kutsumalla niiden metodeja eli modifiers. Näkymät voivat muuttua aina kun sovelluksen tila muuttuu.
- Missä järjestyksessä sovellus näyttää näkymät: Määriteltävä mikä näkymä näytetään ensimmäisenä, se on ContentView()
import SwiftUI
@main
sturct SovelluksenNimi: App {
var body: some Jotain { // property joka määrittää sisällön.
NavigationStack {
ContentView() // top-level view eli root view, ylin näkymä jossa kaikki muut näkymät
.navigationTitle("Sivun otsikko")
}}}
- 'view hierarchy' Rakenne joka määrittelee näkymien suhteen muihin näkymiin. Viittaus ylätason näkymä-instanssiin. Ylätason alla alanäkymät.
- Text("Teksti") Text("Teksti \(muuttuja) Teksti")
- .font(.largeTitle) // .font on modifier ja .largeTitle on argument.
- .font(.caption)
- Image("KuvanNimi") .resizable() // kuvanäkymä, johon annetaan argumenttina 'KuvanNimi' ja modifier .resizable. Resizable mahdollistaa kuvan koon vaihdon eri suuntiin. .scaledToFit() säätää kuvan ympäröivän tilan kokoiseksi, mutta näyttää koko kuvan. .scaledToFill() täyttää koko ikkunan kokoiseksi, mutta osa kuvasta katoaa.
- Image(systemName: onOn ? "battery.100" : "battery.25") .font(.system(size: 100))
- Image(systemName: "arrow.forward.circle") .font(.largeTitle)
- Button("Painiketeksti")
- Capsule()
- Circle() Ympyrä
- .frame(maxHeight: 100) // modifier
- .frame(width: 100) .frame(width: leveys * 100)
- .foregroundColor (.yellow) .foregroundColor(vari) // vari on muuttuja
- .shadow(color: .red, radius: 20)
- .scaleEffect(onOn ? 1 : 0.5) // vaihtaa kokoa
- .animation(.default, value: onOn)
- .animation(.linear(duration: 3), value: onOn)
- ColorPicker("Valitse väri", selection: $vari)
- .padding() // kiinteä tila näkymän ja kaikkien muiden näkymien ympärillä väliin
- Rectangle()
- Slider(value: $leveys) // arvo välillä 0 ja 1. Tarvittaessa kerro jollain 100-luvulla, jos käytät esim. kehyksen koon muuttamiseen.
- Spacer() // näkymä joka kutistuu/laajenee näkymien välillä
- TextField("Nimi", text: $nimi) // muuttaa string-arvoja.
- Toggle("Teksti", onOn: $onOn)
- 'built-in view' on valmis näkymä kuten painike, teksti. Näkymä, jolla käyttäjä säätää sovelluksen tilaa.
- 'composed view' on näkymä, joka yhdistää yhden tai useampia built-in vies tai composed view. Composed view, joka alkaa struct JokuNimiNäkymä voidaan käyttää muun näkymän sisällä.
- 'HStack' järjestää alanäkymät vaakatasossa vierekkäin. HStack on container näkymä.
- 'VStack' järjestää alanäkymät pystytasossa yhteen.
- Komennot kirjoitetaan yhteen ja ne päättyvät sulkeisiin: romutaAuto() Komento suorittaa määrätyn tehtävän.
- Värejä .black .red .green .purple .mint .yellow .blue .orange .indigo jne.
Jos ja painike
if auto.romutaAuto {
auto.romuta()
} else if auto.korjaaAuto {
auto.korjaa()
} else {
auto.myy()
}
onOn on property. Muokattaessa näkymää on ensin tiedettävä näkymän tila. Tieto tilasta tallennetaan näkymän propertyyn. Tässä tieto on boolean-arvo.
struct JosViews: View {
@State var onOn = false // aluksi ympyrä piilotettuna
var body: some View {
VStack {
if onOn { // sen mukaan ympyrä näkyy onko onOn tosi vai epätosi
Circle()
.frame(maxHeight: 100)
.foregroundColor(.green)
Text("arvo tosi")
}
else { // lisättäessä else alun jälkeen ympyrä vaihtaa väriä muodon ja vihreän ja punaisen välillä
Capsule()
.frame(maxHeight: 100)
.foregroundColor(.red)
Text("arvo epätosi")
}
Button("Paina") {
onOn.toggle()
}
}
}
}
Vaihtoehtoisesti: ehto ? tosiArvo : epätosiArvo
Circle()
.frame(maxHeight: 100)
.foregroundColor(onOn ? .green : .red) // vaihtaa vihreän ja keltaisen välillä
.shadow(color: onOn ? .red : .green, radius: 10) // vaihtaa varjon väriä
.scaleEffect(onOn ? 1 : 0.5) // vaihtaa ympyrän kokoa
.animation(.default, value: isOn) // animoiden vaihtuminen