MovieBookingning ko’rinishi manabunaqa ko’rinishda buladi :
2.1 MovieBooking dasturining umumiy ko’rinishi
Oldin MovieBooking dasturimizning TicketView qismini tayyorlab olamiz. TicketView qismini tayyorlash uchun View qismiga yangi Swift file qo’shishimiz kerak bo’ladi.
CircleBackground(color: Color("greenCircle"))
.blur(radius: animate ? 30 : 100)
.offset(x: animate ? -50 : -130, y: animate ? -30 : -100)
.task {
withAnimation(.easeInOut(duration: 7).repeatForever()) {
animate.toggle()
}
Ushbu koddan biz SwiftUI yordamida aylana fonini yaratyapmiz. Doira xiralashishi miqdori va o'rnini aniqlash uchun "animation" deb nomlangan mantiqiy qiymatdan foydalaniladi. Bundan tashqari, "withAnimation" dan foydalanib, biz doirani ma'lum bir animatsiya bilan ma'lum vaqt davomida takrorlashimiz mumkin.
Yuqoridagi kod doira fonini xiralashtiradigan va uning o'rnini o'zgartiradigan animatsiyani qo'shadi. Animatsiyani "animatsiya" deb nomlangan o'zgaruvchi yordamida yoqish yoki o'chirish imkonini beradi. Ushbu animatsiya "easeInOut" egri chizig'i yordamida ma'lum vaqt oralig'ida (bu erda 7 soniya) takrorlanadi. Ushbu kod SwiftUI-da animatsiyalar bilan qanday ishlashni ko'rsatadi.
VStack(spacing: 30.0) {
Text("Mobile Ticket")
.font(.title3)
.foregroundColor(.white)
.fontWeight(.bold)
Text("Once you buy a movie ticket simply scan the barcode to acces to your movie.")
.frame(maxWidth: 248)
.font(.body)
.foregroundColor(.white)
.multilineTextAlignment(.center)
}
.padding(.horizontal, 20)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
Tickets()
.padding(.top, 30)
}
.background(
LinearGradient(gradient: Gradient(colors: [Color("backgroundColor"), Color("backgroundColor2")]), startPoint: .top, endPoint: .bottom)
)
Ushbu kod ikkita matn elementi va "Chiptalar" komponentini o'z ichiga olgan SwiftUI tartibini vertikal stekda (VStack) taqdim etadi. Ikki matn elementida "Mobil chipta" sarlavhasi va tavsif mavjud.
- Birinchi matn elementida "Mobil chipta" sarlavhasi mavjud. `Shrift`, `foregroundColor` va `fontWeight` kabi atributlar matnning ko`rinishini belgilaydi.
- Ikkinchi matn elementida tavsif mavjud. `frame`, `shrift`, `foregroundColor` va `multilineTextAlignment` kabi atributlar matnning o`lchamini, ko`rinishini va tekislanishini belgilaydi.
- VStack atributlari elementlar orasidagi masofani va gorizontal qirralarning to'ldirishni belgilaydi.
- VStack ma'lum bir kenglik va balandlikka (maxWidth va maxHeight) o'rnatiladi va tepaga hizalanadi.
- VStack-dan keyin "Chiptalar" deb nomlangan komponent qo'shiladi. Komponentning yuqori qismiga biroz to'ldirish qo'shilgan.
- VStack va komponentlarning foni ikki rangning chiziqli gradienti bo'lgan gradient ranglar to'plami yordamida aniqlanadi.
Ushbu tartib mobil chiptalar ilovasining bosh sahifasi dizaynini aks ettiradi.
Va nihohat TicketView qismimiz manashu ko’rinishga keladi.
Keyingi navbatda biz MovieBooking dasturimizning home qismini dizaynini tayyorlashimiz kerak bo’ladi.
Ushbu parcha SwiftUI yordamida animatsiya tuzilmasi va uchta turli massiv taʼriflarini yaratadi. Bundan tashqari, "animate" deb nomlangan mantiqiy o'zgaruvchi animatsiyani yoqish yoki o'chirish imkonini beradi.
@State var animate: Bool = false
@State var posters1: [String] = ["poster1", "poster2", "poster3", "poster4", "poster5", "poster6"]
@State var posters2: [String] = ["poster7", "poster8", "poster9", "poster10", "poster11", "poster12"]
@State var posters3: [String] = ["poster13", "poster14", "poster15", "poster16", "poster17", "poster18"]
- `@State var animate: Bool = false`: Bu animatsiya yoqilgan yoki oʻchirilganligini kuzatib boruvchi oʻzgaruvchidir. `@State` atributi oʻzgaruvchi qiymatidagi har qanday oʻzgarish SwiftUI interfeysini yangilashini taʼminlaydi.
- `@State var posters1: [String] = ["poster1", "plakat2", "poster3", "poster4", "poster5", "poster6"]`: Bu seriya "afishalar1" String deb nomlangan filmlar seriyasidir. poster faylining nomini o'z ichiga oladi. Xuddi shunday, `plakatlar2` va `plakatlar3` massivlarida ham turli poster nomlari mavjud.
Ushbu turdagi kod ko'pincha SwiftUI-da animatsiyalar bilan qo'llaniladi va ko'pincha animatsiya holatini kuzatish va ushbu animatsiya holatiga asoslangan interfeysdagi elementlarni yangilash uchun ishlatiladi. Bunday holda, "jonlantirish" o'zgaruvchisi animatsiya yoqilgan yoki o'chirilganligini boshqaradi, "plakatlar1", "afishalar2" va "afishalar3" massivlari esa, ehtimol, slayd-shou yoki turli film plakatlarini ko'rsatadigan shunga o'xshash tuzilmalarda qo'llanilishi mumkin.
Ushbu kod qismi vertikal stekdagi (VStack) turli komponentlarni o'z ichiga olgan SwiftUI tartibini taqdim etadi.
- `Matn("Choose Movie")`: Bu matn sarlavha sifatida ko'rsatiladi va qalin shriftga ega.
- `CustomSearchBar()`: Bu maxsus qidiruv panelini ifodalovchi komponent. Qidiruv paneli maxsus ko'rinish bilan moslashtirilishi mumkin.
- `ScrollView(.vertical, showsIndicators: false)`: Vertikal aylantirish bilan ScrollView yaratadi va aylantirish ko'rsatkichlarini yashiradi.
- ScrollView ichida bir qancha VStacks mavjud. Har birida boshqa "ScrollSection" komponenti mavjud. Bu filmlarning turli toifalarini ifodalaydi.
- `ScrollSection` komponenti sarlavha va film afishalari to`plamini oladi. Ushbu komponent gorizontal ravishda birlashtirilgan plakatlarni ko'rsatishi mumkin.
- VStacks va komponentlar orasidagi bo'shliqlarni aniqlash uchun "bo'shliq" funksiyasidan foydalaniladi.
- VStack orqasida gradient fon mavjud.
Ushbu tartib foydalanuvchiga filmlarni tanlash va turli toifadagi filmlarni ko'rsatish imkonini beruvchi interfeysni yaratadi. Qidiruv paneli hozirda ijro etilayotgan filmlar, kelgusi filmlar, eng yaxshi filmlar va sevimlilar kabi turli yorliqlar bo'ylab harakatlanish imkoniyatini taklif qiladi.
MovieBooking dasturining “Home qismi” tayyorlash jarayoni
@State var gradient: [Color] = [Color("backgroundColor2").opacity(0), Color("backgroundColor2"), Color("backgroundColor2"), Color("backgroundColor2")]
@State var selectedDate: Bool = false
@State var selectedHour: Bool = false
@State var bindingSelection: Bool = false
Endi navbat “BookingView ” qismiga yetib keldi. Bu qismning vazifasi Kinofilmning qaysi kunda va qaysi soatda bo’lishini tanlashdan iborat bo’ladi.
Ushbu parcha SwiftUI ilovasida bir nechta turli holat o'zgaruvchilarini belgilaydi.
- `@State var gradient: [Color]`: Bu ranglar qatorini belgilaydi. Ehtimol, u gradient fon yoki boshqa rangli komponent uchun ishlatiladi. "Opaklik" usuli bilan fonni dastlab butunlay shaffof qilish mumkin.
- `@State var selectedDate: Bool`: Bu mantiqiy oʻzgaruvchi boʻlib, sana tanlanganda “toʻgʻri” boʻladi. Misol uchun, bu qiymat kalendar yoki sana tanlagich bilan o'zaro ta'sir natijasida o'zgartirilishi mumkin.
- `@State var selectedHour: Bool`: Bu mantiqiy oʻzgaruvchi boʻlib, vaqt tanlanganda “toʻgʻri” boʻladi. Misol uchun, bu qiymat vaqt tanlagichi bilan o'zaro ta'sir natijasida o'zgartirilishi mumkin.
- `@State var bindingSelection: Bool`: Bu mantiqiy oʻzgaruvchi boʻlib, tanlanganda “toʻgʻri” boʻladi. Ushbu o'zgaruvchi, ehtimol, boshqa komponent bilan birlashtirilgan selektor qutisi yoki kalit yordamida boshqariladi.
Bu oʻzgaruvchilar foydalanuvchilarning oʻzaro taʼsiri asosida maʼlum holatlar oʻzgarishini kuzatish va bu holatlar SwiftUI interfeysini yangilashini taʼminlash uchun ishlatiladi. Misol uchun, agar foydalanuvchi sana yoki vaqtni tanlasa, tegishli mantiqiy o'zgaruvchilar "true" ga o'rnatilishi mumkin va bu o'zgarishlar interfeysda ma'lum displeylarni ishga tushirishi mumkin.
ZStack {
Image("booking")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(maxHeight: .infinity, alignment: .top)
VStack {
LinearGradient(gradient: Gradient(colors: gradient), startPoint: .top, endPoint: .bottom)
.frame(height: 600)
}
.frame(maxHeight: .infinity, alignment: .bottom)
VStack(spacing: 0.0) {
HStack {
CircleButton(action: {
dismiss()
}, image: "arrow.left")
Spacer()
CircleButton(action: {}, image: "ellipsis")
}
.padding(EdgeInsets(top: 46, leading: 20, bottom: 0, trailing: 20))
Text("Doctor Strange")
.font(.title3)
.fontWeight(.bold)
.foregroundColor(.white)
.padding(.top, 200)
Text("in the Multiverse of Madness")
.font(.title3)
.foregroundColor(.white)
Text("Dr. Stephen Strange casts a forbidden spell that opens the doorway to the multiverse, including alternate versions of... ")
.font(.subheadline)
.foregroundColor(.white)
.padding(30)
Text("Select date and time")
.font(.title3)
.fontWeight(.semibold)
.foregroundColor(.white)
Ushbu SwiftUI kod parchasi film haqidagi ma'lumotlar ko'rsatiladigan interfeysni ishlab chiqadi.
- `HStack`: Gorizontal stek hosil qiladi. U ikkita "CircleButton" va "Spacer" elementini o'z ichiga oladi. Bu sarlavha satridagi orqaga tugmasi va menyu tugmasi kabi funksiyalarni beradi.
- `CircleButton`: dumaloq tugmani ifodalaydi. U vizual belgini o'z ichiga oladi va harakatni boshlaydi. Misol uchun, menyu tugmasi menyuni ochishi mumkin, orqaga tugmasi esa "yopish" amalini bajaradi.
- `Spacer`: Boshqa elementlar orasida bo'sh joy qoldiradi va o'ngga surilgan ko'rinadi.
- Matn elementlari: Film nomi, subtitr va tavsif matnlari "Matn" elementlari bilan ko'rsatiladi.
- `Matn("Doktor Strange")` va `Matn("Tezlik ko'p olamida")`: Film nomi va subtitr.
- `Matn("Doktor Stiven Strenj ko'p olamga eshikni ochadigan taqiqlangan afsun qiladi, jumladan... ning muqobil versiyalari")`: Film tavsifi.
- `Matn("Sana va vaqtni tanlang")`: Sana va vaqtni tanlashni boshlash uchun sarlavha matni.
Matnlar va tugmalarning ko'rinishini aniqlash uchun turli xil shriftlar, qalinliklar va ranglar qo'llaniladi. `padding` matnlar va tugmalar o'rnini sozlash uchun ishlatiladi. Ushbu tartib foydalanuvchiga film haqida ma'lumot beruvchi va sana/vaqt tanlashni boshlaydigan interfeys bilan ta'minlaydi.
Swift tilida UILabel - bu matn yoki tekstni ko'rsatish uchun ishlatiladigan interfeys elementi. UILabel, bir dasturchi interfeysining bir qismi bo'lib, uni orqa tomonda qo'llay olasiz. Matnli qismini UILabel orqali kiritib olish, uni sozlash va turli xususiyatlarni o'zgartirish mumkin.
UILabel obyektini yaratadi va unga bir qancha xususiyatlar (matn, rang, yozuv o'lchamini o'zgartirish va boshqa) beradi. view.addSubview(label) qatorida, UILabel obyektini viewga qo'shadi. Ko'proq o'zgartirish uchun, siz UILabel ni joylashgan joyda, matnda, rangda va boshqa xususiyatlarda o'zgartirishingiz mumkin.
UILabel obyekti bilan ishlashda ko'proq xususiyatlarni bilib bo'lishingiz maqsadga muvofiq. Siz dastur yaratish jarayonida, UILabel elementlarini yaratish, ularga matn va xususiyatlarni o'zgartirish, matnni o'zgartirish va boshqa interfeys elementlari bilan birlashtrishish uchun ishlatishingiz mumkin.
Swift tilida `UIButton` - bu interfeys elementi, foydalanuvchilarga biror tashqi amalni bajarish imkonini beradi. Bu tugma, matn, tasvir yoki ikonani o'z ichiga olishi mumkin. `UIButton` obyektlari dasturchilar uchun muhimdir, chunki ulardan foydalanib, foydalanuvchiga amalni bajarishni sozlash va boshqa interfeys elementlari bilan integratsiya qilish mumkin.
UIButton` obyektini yaratadi va unga bir qancha xususiyatlar (matn, matn rangi, tugma rangi, amalni bajarish metodi va boshqa) beradi. `button.addTarget` qatori, tugma bosilganda bajariladigan funksiyani belgilaydi. `buttonTapped` funksiyasi tugma bosildiğida chaqiriladi va "Tugma bosildi!" matnini konsolga chiqaradi.
Siz `UIButton` obyektlari bilan amalga oshiriladigan boshqa tadbirlarni ham qo'shishingiz mumkin, masalan, tasvirlarni yuklash, ikonalar qo'shish, tugmani sozlash va boshqa holatlar.
HStack(alignment: .top, spacing: 20.0) {
DateButton(weekDay: "Thu", numDay: "21", isSelected: $bindingSelection)
.padding(.top, 90)
DateButton(weekDay: "Fri", numDay: "22", isSelected: $bindingSelection)
.padding(.top, 70)
DateButton(weekDay: "Sat", numDay: "23", width: 70, height: 100, isSelected: $selectedDate, action: {
withAnimation(.spring()) {
selectedDate.toggle()
}
})
.padding(.top, 30)
DateButton(weekDay: "Sun", numDay: "24", isSelected: $bindingSelection)
.padding(.top, 70)
DateButton(weekDay: "Mon", numDay: "25", isSelected: $bindingSelection)
.padding(.top, 90)
}
Ushbu SwiftUI snippetida gorizontal stekdagi (HStack) “DateButton” elementlari qatori mavjud. Ushbu tartib turli kunlarni ko'rsatish uchun ishlatilishi mumkin, har kuni yuqorida haftaning sanasi va kuni ko'rsatilgan.
- `HStack(alignment: .top, interval: 20.0)`: Gorizontal stek hosil qiladi. Elementlar gorizontal o'qda tekislanadi va ular orasida 20 birlik bo'sh joy qoladi.
- `Sana tugmasi`: har biri haftaning sanasi va kunini o'z ichiga olgan tugmani ifodalaydi. Ushbu tugmalar `DateButton` deb nomlangan maxsus komponent yordamida yaratilgan. `padding(.top, ...)`: Har bir `DateButton` tepasini o`rnatish uchun foydalaniladi. Bu turli tugmalarning vertikal holatini sozlash uchun ishlatiladi.
- `isSelected` va `action`: Har bir tugma tanlangan yoki tanlanmaganligini aniqlaydigan `isSelected` bog`langan o`zgaruvchini va tugma bosilganda sodir bo`ladigan amalni belgilaydigan yopishni oladi. “SelectedDate” o‘zgaruvchisining qiymati “true”ga o‘rnatilganda, tugma tanlangan ko‘rinadi va animatsiya bilan o‘sadi yoki kichrayadi.
Ushbu tartib foydalanuvchiga turli kunlarni tanlash va ko'rsatish imkoniyatini beradi. Har kuni yuqoridagi tugma bosilishi mumkin va bosilganda tanlangan holatini o'zgartiradi.
Vaqt tugmalari va navigatsiya havolasini o'z ichiga olgan UI tartibi uchun SwiftUI kodi bilan ishlayotganga o'xshaysiz. Kod nima qilishini quyida ko'rib chiqamiz:
1. “HStack” ko‘rinishlarni gorizontal ravishda “.tepa”ga tekislash va ular orasidagi “20,0” oraliqda joylashtirish uchun ishlatiladi.
2. 'HStack' ichida turli vaqt oralig'ini ifodalovchi bir nechta 'TimeButton' ko'rinishlari mavjud. Ushbu tugmalar 16:00 dan 20:00 gacha bo'lgan soatlarni ifodalaydi. `isSelected` bog'lanishi tugma tanlangan yoki yo'qligini aniqlash uchun ishlatiladi.
3. Soat "18:00" bo'lgan uchinchi "Vaqt tugmasi" kenglik, balandlik va amalni yopish uchun qo'shimcha sozlashlarga ega. Bosilganda, u “tanlangan soat” holatini bahor animatsiyasi bilan almashtiradi.
4. "NavigationLink" faollashtirilganda "SeatsView" ga o'tish uchun sozlangan. U “LargeButton” ichiga oʻralgan boʻlib, u ehtimol tasdiqlash tugmasi yoki navigatsiya triggerining bir turi boʻlib xizmat qiladi. Tugma faqat "selectedDate" va "selectedHour" rost bo'lsa ko'rinadi ("ofset" qo'llaniladi).
Umuman olganda, bu kod foydalanuvchilar sana, vaqtni tanlashi va keyin o‘rindiqlarni tanlash yoki boshqa amallarni bajarishi mumkin bo‘lgan kattaroq UI tartibining bir qismiga o‘xshaydi. Tartib faqat sana va soat tanlanganda ko'rinadigan tasdiqlash tugmasi bilan vaqtni tanlash interfeysini taklif qiladi.
Shunday qilib kodimizni oxiriga manabu kodni qo’shib qoyganimizda u manashunday ko’rinishga keladi :
.frame(maxHeight: .infinity, alignment: .top)
}
.background(Color("backgroundColor2"))
.ignoresSafeArea()
}
.navigationBarBackButtonHidden(true)
}
}
|
