Published on

SwiftUI da Backgrounds va Overlays

Authors

Yana xush kelibsiz!

Hammaga yana xush kelibsiz! Men Nikman. Bu videoda fonlar (backgrounds) va qatlamlar (overlays) haqida gaplashamiz. Ularning nomi o‘z-o‘zidan tushunarli – fon ob’ekt orqasiga, qatlam esa oldiga joylashadi. SwiftUI’da bu ikkisi juda kuchli vositalar, lekin ko‘pincha, ayniqsa yangi boshlovchilar tomonidan e’tibordan chetda qoladi.

Biz fonlarni fonlar ustiga, qatlamlarni qatlamlar ustiga qo‘sha olamiz va ularni aralashtirib, ajoyib effektlar yaratish mumkin. Men sizlarga:

  • Ularning qanday qo‘llanilishini,
  • O‘lcham va tekislash bilan qanday moslashtirilishini ko‘rsataman,
  • Umuman, fonlar va qatlamlardan qulay foydalanishni o‘rgataman.

Eslatma: Ular ko‘pincha e’tibordan chetda qolsa-da, juda muhim – agar qatlamlashni yaxshi tushunsangiz, SwiftUI’da tezda mutaxassis bo‘lib ketasiz.

Yangi fayl yaratish

Xcode loyihamizga qaytdim. Bu videodagi kod uchun yangi fayl yaratyapman:

  1. Project Navigator’da (chapda) o‘ng tugmani bosing.
  2. “New File” > “SwiftUI View”ni tanlang.
  3. Fayl nomini “BackgroundAndOverlayBootcamp” deb qo‘ying.

Fayl ochilgach, o‘ngdagi preview’da “Resume” tugmasini bosing – preview ulanadi.

Fonlar (Backgrounds)

Fonlar bilan boshlaymiz:

Text("Hello World")
    .background(Color.red)
  • .background() – ob’ekt orqasiga fon qo‘shadi.
  • Hozirgacha biz rang (masalan, Color.red) ishlatdik, ammo esda tuting: .background(View) – istalgan ko‘rinish (view) bo‘lishi mumkin (matn, shakl, gradient).

Gradient fon

Text("Hello World")
    .background(
        LinearGradient(
            gradient: Gradient(colors: [Color.red, Color.blue]),
            startPoint: .leading,
            endPoint: .trailing
        )
    )
  • LinearGradient – fon sifatida gradient qo‘shildi.

Shakl fon

Text("Hello World")
    .frame(width: 100, height: 100, alignment: .center)
    .background(
        Circle()
            .fill(Color.blue)
    )
  • Circle() – fon sifatida ko‘k doira.
  • Matn freymi (100x100) qo‘shildi – fon matnga moslashadi.

Fonlarni qatlamlash

Text("Hello World")
    .frame(width: 100, height: 100, alignment: .center)
    .background(
        Circle()
            .fill(Color.blue)
            .frame(width: 120, height: 120)
    )
    .background(
        Circle()
            .fill(Color.red)
    )
  • Birinchi fon – ko‘k doira (120x120).
  • Ikkinchi fon – qizil doira (standart o‘lchamda matnga mos).
  • Freymlar fonlar ichida yoki matn uchun ishlatilishi mumkin.

Qatlamlar (Overlays)

Overlays fonlar kabi ishlaydi, lekin ob’ekt oldiga qo‘yiladi:

Circle()
    .fill(Color.pink)
    .frame(width: 100, height: 100)
    .overlay(
        Text("1")
            .font(.largeTitle)
            .foregroundColor(.white)
    )
  • .overlay() – pushti doira ustiga “1” matni qo‘shildi.

Fon va qatlam birgalikda

Circle()
    .fill(Color.pink)
    .frame(width: 100, height: 100)
    .overlay(
        Text("1")
            .font(.largeTitle)
            .foregroundColor(.white)
    )
    .background(
        Circle()
            .fill(Color.purple)
            .frame(width: 110, height: 110)
    )
  • Fon – binafsha doira (110x110).
  • Qatlam – matn (oldingi qatlam).

Tekislash bilan ishlash

Fonlar va qatlamlarda tekislash muhim va ko‘pincha e’tibordan chetda qoladi:

Rectangle()
    .frame(width: 100, height: 100)
    .overlay(
        Rectangle()
            .fill(Color.blue)
            .frame(width: 50, height: 50),
        alignment: .topLeading
    )
    .background(
        Rectangle()
            .fill(Color.red)
            .frame(width: 150, height: 150),
        alignment: .bottomTrailing
    )
  • Overlay – ko‘k kichik to‘rtburchak, yuqori chapga (topLeading) tekislangan.
  • Background – qizil katta to‘rtburchak, pastki o‘ngga (bottomTrailing) tekislangan.
  • .overlay(View, alignment:) va .background(View, alignment:) – tekislashni aniq sozlash imkonini beradi.

Real dunyo misoli

Bu bilimlarni birlashtirib, tugma yasaymiz:

Image(systemName: "heart.fill")
    .font(.system(size: 40))
    .foregroundColor(.white)
    .background(
        Circle()
            .fill(
                LinearGradient(
                    gradient: Gradient(colors: [
                        Color(red: 0.6, green: 0.2, blue: 0.8),
                        Color(red: 0.4, green: 0.0, blue: 0.6)
                    ]),
                    startPoint: .topLeading,
                    endPoint: .bottomTrailing
                )
            )
            .frame(width: 100, height: 100)
            .shadow(color: Color(red: 0.6, green: 0.2, blue: 0.8).opacity(0.5), radius: 10, x: 0, y: 10)
            .overlay(
                Circle()
                    .fill(Color.blue)
                    .frame(width: 35, height: 35)
                    .overlay(
                        Text("5")
                            .font(.headline)
                            .foregroundColor(.white)
                    )
                    .shadow(color: Color(red: 0.6, green: 0.2, blue: 0.8).opacity(0.5), radius: 10, x: 5, y: 5),
                alignment: .bottomTrailing
            )
    )
  • Image – oq yurak ikonkasi (40 o‘lcham).
  • Background:
    • Gradientli binafsha doira (100x100).
    • .shadow() – gradient rangidan 50% shaffof soya.
  • Overlay:
    • Ko‘k kichik doira (35x35), pastki o‘ngga (bottomTrailing) tekislangan.
    • Ichida “5” matni – bildirishnoma sifatida.
    • Kichik doiraga ham moslashtirilgan soya.

Xulosa

Bu videoda fonlar va qatlamlarni:

  • Qo‘shish va qatlamlashni,
  • O‘lcham va tekislash bilan moslashtirishni,
  • Real misolda birlashtirishni o‘rgandik.

SwiftUI’da qatlamlash imkoniyatlari cheksiz – fonlar va qatlamlarni har xil usulda birlashtirib, ijodiy ko‘rinishlar yaratish mumkin. Bu video biroz uzunroq bo‘ldi, lekin tekislash va asoslarni tushunsangiz, ajoyib natijalarga erishasiz. Men Nikman, bu “Swiftful Thinking”, keyingi videoda ko‘rishguncha!

Buy mea coffee