var currentBorderColors: [Color] = [Color("cyan"), Color("cyan").opacity(0), Color("cyan").opacity(0)]
var currentGradient: [Color] = [Color("backgroundColor"), Color("grey")]
var selectedBorderColors: [Color] = [Color("pink"), Color("pink").opacity(0), Color("pink").opacity(0)]
var selectedGradient: [Color] = [Color("majenta"), Color("backgroundColor")]
.
3. `@Binding var isSelected: Bool`: Bu bogʻlash tugma tanlangan yoki tanlanmaganligini koʻrsatish uchun ishlatiladi. Bu ota-ona koʻrinishidan oʻtgan va tugmaning tanlangan holatini aks ettiradi.
4. `@State var action: () -> Void = {}`: Bu holat oʻzgaruvchisi tugma bosilganda ishga tushirilishi mumkin boʻlgan amalni yopishni saqlaydi. U sukut bo'yicha bo'sh yopilish bilan ishga tushirilgan.
5. `var currentBorderColors` va `var currentGradient`: Bu massivlar tugma chegarasi va tanlanmaganda gradient uchun ishlatiladigan ranglarni saqlaydi.
6. `var selectedBorderColors` va `var selectedGradient`: Bu massivlar tanlanganda tugma chegarasi va gradienti uchun ishlatiladigan ranglarni saqlaydi.
Siz tanlagan holatiga qarab turli xil soat qiymatlari, oʻlchamlari va tashqi koʻrinishi bilan moslash mumkin boʻlgan “Vaqt tugmasi” koʻrinishini oʻrnatayotganga oʻxshaysiz. `Harakat` yopilishi tugma bosilganda maxsus amallarni bajarish uchun moslashuvchanlikni ta`minlaydi.
Ushbu "tana" xususiyati "TimeButton" ko'rinishining haqiqiy vizual tasvirini ifodalaydi. Mana u nima qilishi haqida:
1. U bosilganda “harakat”ni ishga tushiradigan yopish bilan “tugma”ni belgilaydi.
2. Tugma yorlig'i ichida "soat" qiymatini aks ettiruvchi "Matn" ko'rinishini o'z ichiga olgan "VStack" mavjud.
3. `Matn` ko'rinishi sarlavha ostidagi shrift, oq rang va markazlashtirilgan tekislash bilan uslublangan.
4. Keyin “VStack” belgilangan “kenglik” va “balandlik” bilan uslublanadi.
5. Fon “LinearGradient” yordamida qo'llaniladi. Gradient ranglari tugma tanlangan yoki yo'qligiga qarab aniqlanadi (`isSelected`). Agar tanlangan bo'lsa, u "selectedGradient" dan foydalanadi; aks holda, u "currentGradient" dan foydalanadi.
6. Tugmachaning burchaklarini yaxlitlash uchun unga `10` burchak radiusi beriladi.
7. Tugmachaga ustki qatlam qo'shiladi, u chiziqli `RoundedRectangle`dan iborat. Chiziq ranglari tanlov holatiga qarab gradientga o'xshash tarzda aniqlanadi.
8. Nihoyat, chiziq tugmachaning o'zidan bir oz kichikroq (`kenglik - 1` va `balandlik - 1`), bu tugma foniga to'g'ri kelmasligiga ishonch hosil qiling.
Ushbu sozlash tanlov holati va soat, kenglik va balandlik kabi boshqa parametrlar asosida sozlanishi koʻrinishga ega vizual jozibador tugmani yaratadi.
Hozirgi navbatlar hammasi action bo’limidagi swift fayllaga yetib keldi. Ularni ham birma bir tahlil qilib chiqamiz.
Ushbu kod SwiftUI ko'rinishi ta'rifining bir qismiga o'xshaydi. Keling, uni bosqichma-bosqich ajratamiz:
``tezkor
VStack {
Matn (hafta kuni)
Matn(numDay)
.fontWeight(.bold)
}
```
Ushbu "VStack" ikkita "Matn" ko'rinishini o'z ichiga oladi. Birinchisi "weekDay" o'zgaruvchisini, ikkinchisi esa qalin shrift og'irligi bilan "numDay" o'zgaruvchisini ko'rsatadi.
``tezkor
.shrift(.subheadline)
.foregroundColor(.white)
Ushbu modifikatorlar “VStack” ichidagi barcha ko‘rinishlar uchun shriftni “.subheadline” o‘lchamiga va matn rangini oq rangga o‘rnatadi.
Ushbu modifikator butun “VStack” ning ramka hajmini belgilangan “kenglik” va “balandlik” ga o'rnatadi.
.background(LinearGradient(ranglar: isSelected ? selectedGradient : currentGradient, startPoint: .topLeading, endPoint: .bottomTrailing))
Ushbu modifikator butun "VStack" uchun fon gradientini qo'llaydi. Amaldagi gradient “isSelected” rost yoki noto‘g‘ri ekanligiga bog‘liq. Agar `isSelected` rost bo`lsa, u `selectedGradient` dan foydalanadi; aks holda, u "currentGradient" dan foydalanadi. Gradient yuqori yetakchi burchakdan boshlanadi va pastki orqa burchakda tugaydi.
.cornerRadius(10)
Ushbu modifikator 10 radiusli `VStack` burchaklarini aylantiradi.
.overlay {
Dumaloq to'rtburchak (burchakRadius: 10)
.stroke(LinearGradient(ranglar: isSelected ? selectedBorderColors : currentBorderColors, startPoint: .topLeading, endPoint: .bottomTrailing), uslub: StrokeStyle(lineWidth: 2))
.ramka(kengligi: eni - 1, balandligi: balandligi - 1)
}
Bu "VStack" ga qo'shimcha qo'shadi. U burchak radiusi 10 bo'lgan shtrixli RoundedRectangle chizadi. Chiziq rangi `isSelected` sharti bilan aniqlanadi: agar rost bo'lsa, u `selectedBorderColors` dan foydalanadi; aks holda, u "currentBorderColors" dan foydalanadi. Qo'l harakati yuqori etakchi burchakdan boshlanadi va pastki orqa burchakda tugaydi. Strok kengligi 2 pikselga o'rnatiladi. "RoundedRectangle" ramkasi qirqishning oldini olish uchun "VStack" ramkasidan biroz kichikroq.
Umuman olganda, ushbu kod gradient fon, yumaloq burchaklar va chegaralangan qoplamali ikkita Matn ko'rinishini ko'rsatish uchun uslubli konteyner yaratadi. Ko'rinish tanlangan yoki tanlanmaganligiga qarab uslub o'zgaradi.
Birinchi qismdagi background qismida animatsionni aylanalar bir joydan boshqa joyga ko’chib yurishi uchun kerak bo’ladigan aylani structini hosil qilishimiz kerak bo’ladi: buning uchun yangi swift fayl ochamiz:
struct CircleBackground: View {
@State var color: Color = Color("greenCircle")
var body: some View {
Circle()
.frame(width: 300, height: 300)
.foregroundColor(color)
}
}
"CircleBackground" strukturasi - bu SwiftUI ko'rinishi bo'lib, belgilangan rangdagi doirani ko'rsatadi. Rang dastlab aktivlar katalogidan "greenCircle" deb nomlangan rangga o'rnatiladi. Doira 300x300 pikseldan iborat qattiq ramka o'lchamiga ega.
Holat o‘zgaruvchisi: `@State` xossalari o‘rami `rang` xususiyati uchun o‘zgaruvchan holatni yaratish uchun ishlatiladi. Bu rangni dinamik ravishda o'zgartirish imkonini beradi va ko'rinish mos ravishda yangilanadi.
Body Property: Tana xususiyati ko'rinish tartibini belgilaydi. Bunday holda, bu belgilangan ramka o'lchami va old fon rangiga ega bo'lgan doiradir.
Custom Initializer bilan takomillashtirilgan versiya
Agar siz “CircleBackground” yaratilganda turli xil ranglarni qabul qilishiga ruxsat berishni istasangiz, maxsus ishga tushirgichni qo'shishingiz mumkin:
struct CircleBackground: Ko‘rish {
@State var rang: Rang
// Standart rang qiymati bilan moslashtirilgan ishga tushirgich
init (rang: Rang = Rang ("yashil doira")) {
self._color = Holat (boshlang'ichValue: rang)
}
var body: ba'zi ko'rinish {
Circle()
.ramka(kengligi: 300, balandligi: 300)
.foregroundColor(rang)
}
}
1. Custom Initializer: Bu initsializator “CircleBackground” ko‘rinishida “Color” parametrini ishga tushirilganda qabul qilish imkonini beradi. Ushbu parametr uchun standart qiymat `Color("greenCircle")` bo'lib, asl dastur bilan orqaga qarab muvofiqligini ta'minlaydi.
2. Holatni ishga tushirish: Initsializator ichida `@State` xususiyati oʻramining oʻtkazilgan rang qiymati bilan toʻgʻri ishga tushirilganligini taʼminlash uchun ʻStat(initialValue:)’ yordamida ʻself._colorʻ tayinlanadi.
Siz quyida ko'rsatilgandek standart rang yoki maxsus rang bilan "CircleBackground" ko'rinishini yaratishingiz mumkin:
// Standart rangdan foydalanish
CircleBackground()
// Maxsus rangdan foydalanish
CircleBackground(rang: .red)
Ushbu takomillashtirish "CircleBackground" ko'rinishining ko'proq moslashuvchanligi va qayta ishlatilishiga imkon beradi, bu esa turli xil kontekstlarda turli xil boshlang'ich ranglarda foydalanishni osonlashtiradi.
Kod parchasi SwiftUI-da joriy qilingan maxsus yorliqlar panelini ifodalaydi. Mavjud kenglik asosida sozlanadigan dinamik tartibni yaratish uchun "GeometryReader" dan foydalanadi. Aniqlik va to'g'ri tuzilmani ta'minlash uchun kodning parchalanishi va biroz takomillashtirilgan versiyasi:
1. Xususiyatlar:
- `backgroundColors`: fon gradienti uchun ranglar qatori.
- `gradientCircle`: doiraning gradient chizig'i uchun ranglar qatori.
2. Tanasi:
- Mavjud kenglikni olish uchun "GeometryReader" dan foydalanadi.
- Tartib yorlig'i tugmalari uchun "HStack" ni o'z ichiga oladi.
- Har bir tugma 'joriy Tab' holatini o'zgartirishni jonlantiradi.
- Fon ko'rinishi tanlangan yorliq asosida harakatlanadigan gradient chiziqli doirani o'z ichiga oladi.
Takomillashtirish
Quyida o'qish va texnik xizmat ko'rsatish uchun yaxshilanishlar bilan qayta tahrirlangan kod keltirilgan:
SwiftUI-ni import qiling
struct CustomTabBar: Ko'rish {
@State private var currentTab: Tab = .home
var backgroundColors: [Color] = [Color("binafsharang"), Color("och Blue"), Color("pushti")]
var gradientCircle: [Color] = [Color("siyan"), Rang("ko'k").shaffoflik(0,1), Rang("ko'k")]
var body: ba'zi ko'rinish {
GeometryReader { geometriya ichida
kengligi = geometriya.size.width
HStack (boʻshliq: 0.0) {
ForEach(Tab.allCases, id: \.rawValue) { tab
Tugma {
withAnimation(.easeInOut) {
currentTab = tab
}
} teg: {
Rasm (tab.rawValue)
.renderingMode(.template)
.frame(maxWidth: .infinity)
.foregroundColor(.white)
.offset(y: currentTab == tab ? -17 : 0)
}
}
}
.frame(maxWidth: .infinity)
.fon (hizalama: .leading) {
Circle()
.fill(.ultraThinMaterial)
.ramka (kengligi: 80, balandligi: 80)
.soya(rang: .qora.shaffoflik(0,25), radius: 20, x: 0, y: 10)
.offset(x: indikatorOffset(kenglik: en), y: -17)
.overlay(
Circle()
.trim(dan: 0, dan: 0,5)
.stroke(LinearGradient(ranglar: gradientCircle, startPoint: .top, endPoint: .pastki), uslub: StrokeStyle(lineWidth: 2))
.rotationEffect(.degrees(135))
.ramka(kengligi: 78, balandligi: 78)
.offset(x: indikatorOffset(kenglik: en), y: -17)
)
}
}
.frame(balandlik: 80) // Aylanani joylashtirish uchun balandlikni sozlang
.padding(.yuqori, 30)
.fon (.ultraThinMaterial)
.background(LinearGradient(ranglar: backgroundColors, startPoint: .leading, endPoint: .trailing))
}
xususiy func ko'rsatkichiOffset(kenglik: CGFloat) -> CGFloat {
// Kenglik va joriy yorliq asosida ofsetni hisoblang
// Oddiylik uchun 3 ta yorliq mavjud deb hisoblasak
ruxsat tabWidth = width / CGFloat(Tab.allCases.count)
qaytish CGFloat(currentTab.rawValue) * tabWidth + (tabWidth / 2) - 40 // kerak bo'lganda sozlang
}
}
enum yorlig'i: String, CaseIterable {
case home = "uy"
case search = "magnifyingglass"
ish profili = "shaxs"
}
struct ContentView: Ko'rish {
var body: ba'zi ko'rinish {
CustomTabBar()
}
}
struct ContentView_Previews: PreviewProvider {
statik parametrlarni oldindan ko'rish: ba'zi ko'rinishlar {
ContentView()
}
}
O'zgarishlarni tushuntirish
1. Enum `tab`:
- O'qish va yozish xavfsizligini yaxshilash uchun yorliqlar uchun raqam belgilandi.
2. CustomTabBar View:
- "joriy Tab" holati "CustomTabBar" ko'rinishida boshqariladi.
- Doira siljishi uchun tepada bo'sh joy berish uchun "padding(.top, 30)" qo'shildi.
- Doira o'lchamini moslashtirish uchun `ramka(balandlik: 24)` `ramka(balandlik: 80)`ga o'zgartirildi.
- Ko'rib chiqish va sinovdan o'tkazish uchun "ContentView" va "ContentView_Previews" qo'shildi.
3. indicatorOffset funksiyasi:
- Tanlangan yorliq va umumiy kenglik asosida doira uchun ofsetni hisoblaydi. Muayyan yorliq tartibi uchun formulani kerakli tarzda sozlang.
Ushbu qayta tahrirlangan versiya sizning shaxsiy yorliqlar panelini amalga oshirishning aniqligi va barqarorligini yaxshilaydi.
Sizning Swift kod parchasi tanlangan yoki tanlanmaganligiga qarab dinamik uslubga ega SwiftUI tugmasidan iborat. Kodda oʻzbek tilidagi baʼzi oʻzgaruvchilar nomlari va izohlari borga oʻxshaydi, men ularni yaxshiroq oʻqilishi va funksionalligi uchun tarjima qilaman va aniqlayman.
struct CustomButton: Ko‘rish {
@State o'zgaruvchan vaqti: String = "18:00"
@Statening kengligi: CGFloat = 50
@State var balandligi: CGFloat = 40
@Binding var isSelected: Bool
var action: () -> Void = {}
var currentBorderColors: [Color] = [Color("siyan"), Color("cyan").opacity(0), Color("cyan").opacity(0)]
var currentGradient: [Color] = [Color("backgroundColor"), Color("kulrang")]
var selectedBorderColors: [Color] = [Color("pushti"), Color("pushti").shaffoflik(0), Color("pushti").shaffoflik(0)]
var selectedGradient: [Color] = [Color("magenta"), Color("backgroundColor")]
var body: ba'zi ko'rinish {
Tugma (harakat: {
harakat()
}) {
VStack {
Matn (vaqt)
}
.shrift(.subheadline)
.foregroundColor(.white)
.frame(kenglik: kenglik, balandlik: balandlik)
.fon(
LinearGradient(ranglar: isSelected ? selectedGradient : currentGradient, startPoint: .topLeading, endPoint: .bottomTrailing)
)
.cornerRadius(10)
.overlay(
Dumaloq to'rtburchak (burchakRadius: 10)
.stroke(
LinearGradient(ranglar: isSelected ? selectedBorderColors : currentBorderColors, startPoint: .topLeading, endPoint: .bottomTrailing),
uslub: StrokeStyle (chiziq kengligi: 2)
)
.ramka(kengligi: eni - 1, balandligi: balandligi - 1)
)
}
}
}
struct ContentView: Ko'rish {
@State private var isSelected = false
var body: ba'zi ko'rinish {
CustomButton(isSelected: $isSelected, amal: {
isSelected.toggle()
})
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
statik parametrlarni oldindan ko'rish: ba'zi ko'rinishlar {
ContentView()
}
}
1. Tarjima va nomlash:
- Oʻzgaruvchilar nomlari va izohlari izchillik uchun oʻzbek tilidan ingliz tiliga tarjima qilingan.
- `soat` `vaqt`, `kengligi` `keng`, `balandligi` `balandlik` va boshqalar yangilandi.
2. Harakatni tugatish:
- “Action”dan “@State” atributi olib tashlandi, chunki bu shart emas.
- Harakatning yopilishi to'g'ri o'tkazilishi va chaqirilganligiga ishonch hosil qiling.
3. Gradient va ranglar:
- SwiftUI konventsiyalariga mos keladigan rang nomlari va gradient mantiqi tuzatildi.
4. Tuzilish va uslub:
- Tugma va uning qoplamasi izchil ramka o'lchamlari va burchak radiusiga ega bo'lishini ta'minlang.
- “isSelected” holati asosida gradient fon va chegara chizig‘i qo‘llanildi.
Qo'llash misoli:
- Tanlovni almashtirish uchun holat oʻzgaruvchisi bilan “CustomButton”dan foydalanishni koʻrsatish uchun “ContentView” qoʻshildi.
Ushbu qayta tahrirlangan versiya o'qishni yaxshilaydi, SwiftUI konventsiyalariga rioya qiladi va "isSelected" ulanishi asosida tugmaning vizual holati o'zgarishini ta'minlaydi.
“VStack” ilovangiz sarlavha va gorizontal aylanuvchi plakatlar ro‘yxatini ko‘rsatadi, ularning har biri “BookingView”ga o‘tuvchi “NavigationLink” bilan o‘ralgan. Quyida o'qish va texnik xizmat ko'rsatish uchun kichik yaxshilanishlar bilan kodingizning takomillashtirilgan versiyasi keltirilgan:
struct PostersScrollView: Ko'rish {
var sarlavhasi: String
var posterlar: [String]
var body: ba'zi ko'rinish {
VStack (hizalama: .leading) {
Matn (sarlavha)
.shrift(.sarlavha)
.foregroundColor(.white)
.padding(.gorizontal, 20)
ScrollView(.gorizontal, showIndicators: false) {
HStack (boʻshliq: 20) {
ForEach(posters.indices, id: \.self) { index in
NavigationLink(manzil: BookingView()) {
Rasm (plakatlar[indeks])
.resizable()
.ramka(kengligi: 100, balandligi: 130)
.cornerRadius(20)
}
}
}
.padding(.gorizontal, 20) // Ikkala tomonni to'ldirish
}
}
}
}
struct BookingView: Ko'rish {
var body: ba'zi ko'rinish {
Matn ("Buyurtma ko'rinishi")
.font(.largeTitle)
}
}
struct ContentView: Ko'rish {
var body: ba'zi ko'rinish {
NavigationView {
PostersScrollView(sarlavha: "Taniqlangan plakatlar", plakatlar: ["poster1", "plakat2", "plakat3"])
.background(Color.black) // Fon rangini qabul qilish
}
}
}
struct ContentView_Previews: PreviewProvider {
statik parametrlarni oldindan ko'rish: ba'zi ko'rinishlar {
ContentView()
}
}
1. Komponentlashtirish:
- Qayta foydalanish qulayligi va ravshanligi uchun aylantiruvchi ko'rinish "PostersScrollView" strukturasiga kiritilgan.
2. To‘ldirish va tekislash:
- Oʻtkazish koʻrinishining har ikki tomonidagi toʻldirishni boshqarish uchun “HStack” ga “.padding(.gorizontal, 20)” qoʻllanildi, bu esa izchil gorizontal chegarani taʼminlaydi.
- Tartib mantig'ini soddalashtirish uchun `.offset(x: 20)` va `.padding(.trailing, 40)` `padding(.gorizontal, 20)` foydasiga olib tashlandi.
3. Navigatsiya ko‘rinishi:
- "BookingView" ga navigatsiyani yoqish uchun "ContentView" "NavigationView" ga o'ralgan.
4. Qo‘g‘irchoq ma’lumotlar:
- `ContentView` `PostersScrollView` uchun misol ma`lumotlarini taqdim etadi.
Ko‘rib chiqish:
- SwiftUI-ning oldindan ko'rish tuvalida oldindan ko'rishni osonlashtirish uchun "ContentView_Previews" tuzilmasi kiritilgan.
Ushbu refaktoring tartibni sodda va tushunarli bo'lishini ta'minlaydi va u qayta foydalanish mumkin bo'lgan komponentlar ichidagi funksionallikni qamrab oladi.
Manashu kodlarni MVC dizyni bo’yicha joylashtirib chiqamiz :
XULOSA
Bugungi kunda Axbarot komunikatsion texnalogiyalari, IT sohasiga katta etibor berilmoqda. Ayniqsa hozirda Iphone IOS operatsion tizimida ishlovchi telefonlar kompyuterlar planshetlat televizorlar va smartwatchlarga bulgan talab ancha kuchayib bormoqda. Hozirgi kunda ko’rishimiz mumkin yurtimizda axborot texnologiyalarni va informatsion texnologiyalarni rivojlantirish maqsadida ko’plab ishlar amalga oshirilmoqda. Bunga chiqarilayotgan qonun, qaror va farmonlar katta misol bo’la oladi. Bularning barchasi yurtimizning rivoji va yurtdoshlarimiz uchun juda katta foydali bo’ladi.
Mening bu loyiha ishim “Kinoteatr uchun online bilet tanlovchi” dasturi Iphone telefonlari uchun mo’ljallangan, tashqaridan oddiy ko’rinsa ham uning zamirida juda katta mehnat yotipti.
Ushbu loyiha ishining hisoboti 2 qismdan iborat bo’lib, mavzular to’liq yoritildi. O’ylaymanki bundan keyin boshqa dasturlarni ham tayyorlashga va oldin bajarilgan dasturlarni takomillashtirishga harakat qilinadi.
Umid qilamanki ko’zlangan maqsadga oz bo’lsada erisha olindi. Ushbu loyiha ishi men uchun juda foydali bo’ldi, bilim va ko’nikmalarni takrorlash, yanada ko’proq malumotlarga ega bo’lishimga qaysidir ma’noda sababchi bo’ldi. Kelajakda kasbimning yetuk mutahasislaridan biri bo’lishimga zamin yaratadi degan umiddaman.
|
