Published on

SwiftUI-da shakllar yaratish

Authors

Hammaga salom!

Hammaga salom va yana xush kelibsiz! Men Nikman. Bu videoda shakllar haqida gaplashamiz. SwiftUI’da framework bilan birga keladigan bir nechta tayyor shakllar bor – biz ularni ekranga qanday qo‘shishni va chiroyli qilishni ko‘rib chiqamiz.

Shakllar oddiy tuyulishi mumkin, lekin SwiftUI’da juda muhim – nafaqat oddiy doira qo‘shish uchun, balki boshqa ko‘rinishlarni shakllantirish uchun ham ishlatiladi. Masalan, dumaloq tugma yoki dumaloq rasm kerak bo‘lsa, shakllardan foydalanib, kerakli ko‘rinishni yaratish mumkin.

Yangi fayl yaratish

Xcode loyihamizga qaytdim va 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 “ShapesBootcamp” deb qo‘ying.

Fayl ochilgach, o‘ngdagi preview’da “Resume” tugmasini bosing – standart Text("Hello, World!") ko‘rinadi. Bu video shakllar haqida, shuning uchun matnni o‘chirib, shakl qo‘shamiz.

Shakllarni qo‘shish

SwiftUI’da bir nechta tayyor shakllar bor, masalan, Circle:

Circle()
  • Yuqori o‘ngdagi “+” (Library) orqali “Circle”ni qo‘shsak yoki Circle() deb yozsak, ekranda mukammal doira paydo bo‘ladi.

Rang o‘zgartirish

Circle()
    .fill(Color.blue)

  • .fill – shaklni rang bilan to‘ldiradi (standart qora). .fill(Color.red) yoki .fill(Color.green) qilish mumkin.

  • Yoki:

    Circle()
    .foregroundColor(.pink)
    • .foregroundColor – shakl rangini o‘zgartirishning boshqa usuli.

Chegara (Stroke)

Circle()
    .stroke(Color.red)
  • .stroke – shaklni to‘ldirish o‘rniga chegarasini chizadi.

Chegara sozlamalari

Circle()
    .stroke(Color.blue, lineWidth: 30)
  • .stroke(Color.blue, lineWidth: 30) – ko‘k rangli, 30 piksel qalin chegara.

Maxsus chegara

Circle()
    .stroke(Color.orange, style: StrokeStyle(lineWidth: 20, lineCap: .round, dash: [10]))
  • .stroke(style:) – chegara uslubini sozlash:
    • lineWidth: 20 – qalinlik
    • lineCap: .round – uchlar yumaloq (.butt – kvadrat)
    • dash: [10] – chiziqcha uzunligi (uzluksiz emas, chiziqcha shaklida).

Kesib ko‘rsatish (Trim)

Circle()
    .trim(from: 0.5, to: 1.0)
    .stroke(Color.purple, lineWidth: 50)
  • .trim(from:to:) – shaklning qismini ko‘rsatadi:
    • 0.0 dan 1.0 – to‘liq doira.
    • 0.5 dan 1.0 – yarim doira.
  • .stroke bilan birlashsa, masalan, yuklanish indikatori sifatida ishlatilishi mumkin.

Boshqa shakllar

Ellipse

Ellipse()
    .frame(width: 200, height: 100)
  • Ellipse – cho‘zinchoq doira.
  • .frame(width:height:) – o‘lchamni aniqlash uchun.

Capsule

Capsule(style: .circular)
    .frame(width: 200, height: 100)
  • Capsule – Ellipse’ga o‘xshaydi, lekin uslublari bor:
    • .circular – yumaloq uchlari.
    • .continuous – silliq uchlari.
  • Tugmalar yoki matn fonida foydali.

Rectangle

Rectangle()
    .frame(width: 300, height: 200)
  • Rectangle – to‘rtburchak.

Rounded Rectangle

RoundedRectangle(cornerRadius: 10)
    .frame(width: 300, height: 200)
  • RoundedRectangle – yumaloq burchakli to‘rtburchak.
  • cornerRadius: 10 – burchak radiusi (50 qilsak, kapsulaga o‘xshaydi).
  • Matn yoki rasmlar fonida juda ko‘p ishlatiladi.

Modifikatorlar

RoundedRectangle(cornerRadius: 10)
    .frame(width: 300, height: 200)
    .fill(Color.green)
    .stroke(Color.red)
    .trim(from: 0.5, to: 1.0)
  • Barcha shakllarga .fill, .stroke, .trim qo‘llaniladi.

Xulosa

Bu videoda SwiftUI’dagi asosiy shakllarni – Circle, Ellipse, Capsule, Rectangle va RoundedRectangle’ni ko‘rdik. Ularni qanday qo‘shish, rang, chegara va o‘lchamlarini o‘zgartirishni o‘rgandik. Keyingi videolarda shakllarni murakkablashtirish, gradientlar, maxsus ranglar va soyalarni qo‘shishni ko‘ramiz.

Bu video qisqa va sodda bo‘ldi – umid qilamanki, yoqdi! Men Nikman, bu “Swiftful Thinking”, keyingi videoda ko‘rishguncha!

Buy mea coffee