Shadow: mohiyati, mobil ilovalarda soyalami yaratish

UI da soya nima?

Soya (shadow) foydalanuvchi interfeyslarida — yorug'lik va chuqurlikni taqlid qiluvchi vizual effektdir. Soya elementning asl nusxaga nisbatan siljigan qora xira nusxasini chizish orqali yaratiladi. Mobil dizaynda soyalar uchta vazifani bajaradi: iyerarxiyani ko'rsatadi (yuqori element — uzunroq soya), interaktivlikni bildiradi (soyali tugmalar bosiladigan ko'rinadi), tarkibni fondan ajratadi (soyali kartalar alohida bloklar sifatida o'qiladi).

Google-ning Material Design ida soyalar elevation (balandlik) tushunchasi bilan uzviy bog'liq. Har bir element Z-koordinatasida ma'lum bir balandlikni egallaydi va soya yuqoridan yorug'lik proyeksiyasidir. Apple-ning Human Interface Guidelines i qat'iy balandlik tizimini belgilamaydi, lekin interfeyslarda vizual iyerarxiya va chuqurlik yaratish uchun soyalardan foydalanishni tavsiya qiladi.

Nielsen Norman Group (2024) tadqiqotiga ko'ra, to'g'ri joylashtirilgan soyalar interaktiv elementni qidirish vaqtini 24% ga qisqartiradi. Soyalar, shuningdek, ko'rish qobiliyati zaif foydalanuvchilarga elementlar chegaralarini farqlashda yordam beradi. Biroq, soyalardan haddan tashqari foydalanish (ekranda 3+ daraja) kognitiv yukni oshiradi va idrokni yomonlashtiradi.

iOS da soyalar: CALayer va SwiftUI

iOS da soyalar CALayer xususiyatlari orqali amalga oshiriladi: shadowColor soya rangini, shadowOffset — CGSize da siljishni (x, y), shadowRadius — xiralashish radiusini, shadowOpacity — 0 dan 1 gacha shaffoflikni belgilaydi. Samaradorlik uchun shadowPath — soya shaklini tavsiflovchi UIBezierPath ni ham belgilash tavsiya etiladi, shunda Core Animation uni avtomatik hisoblamaydi.

// UIKit: CALayer orqali soya sozlash
import UIKit

let cardView = UIView()
cardView.backgroundColor = .systemBackground
cardView.layer.cornerRadius = 12

// Soya sozlash
cardView.layer.shadowColor = UIColor.black.cgColor
cardView.layer.shadowOpacity = 0.15
cardView.layer.shadowOffset = CGSize(width: 0, height: 4)
cardView.layer.shadowRadius = 8

"> Optimizatsiya: aniq shadowPath
cardView.layer.shadowPath = UIBezierPath(
    roundedRect: cardView.bounds,
    cornerRadius: 12
).cgPath

SwiftUI da soyalar .shadow() modifikatori orqali color, radius, x, y parametrlari bilan belgilanadi. SwiftUI avtomatik ravishda shadowPath ni qo'llaydi va render samaradorligini boshqaradi. Murakkab soyalar uchun (ichki soyalar, bir nechta soyalar) overlay() bilan LinearGradient dan foydalaning.

// SwiftUI: shadow modifikatori orqali soya
import SwiftUI

VStack {
    Text("Soyali karta")
        .padding()
        .background(Color.white)
        .cornerRadius(16)
        .shadow(
            color: .black.opacity(0.15),
            radius: 10,
            x: 0,
            y: 4
        )
}

iOS da soyalar samaradorligi: agar shadowPath belgilanmagan bo'lsa, Core Animation har bir kadrda soya shaklini qatlam shakli asosida hisoblaydi, bu animatsiya paytida sekinlashuvga olib kelishi mumkin. Statik elementlar uchun doimo shadowPath ni belgilang. Animatsiya qilinadigan elementlar uchun CALayer da shouldRasterize = true dan foydalaning, soya alohida qatlamda keshlansin. SwiftUI da rastrlash .drawingGroup() orqali boshqariladi.

Android da soyalar: elevation va maxsus soyalar

Android da Material Design dagi soyalar elevation — elementning Z-koordinatadagi balandligini belgilovchi View xususiyati orqali amalga oshiriladi. Tizim avtomatik ravishda elevation va outlineProvider (element konturi) asosida soya chizadi. Elevation qanchalik baland bo'lsa, soya shunchalik katta va xira bo'ladi. Material Design dan meros olmagan View lar uchun (masalan, AppCompat) soyalar faqat apparat tezlashtirish yoqilgan holda ishlaydi.

<!-- XML: atributlar orqali elevation -->
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="12dp"
    app:cardElevation="6dp">
    <!-- Karta tarkibi -->
</androidx.cardview.widget.CardView>

Maxsus soyalar uchun Android View tizimida OutlineProvider ishlatiladi. ViewOutlineProvider outline.setRoundRect() yoki outline.setPath() orqali ixtiyoriy shakl belgilash imkonini beradi. OutlineProvider bo'lmasa, soya View ning to'rtburchak shakli bo'yicha chiziladi, bu burchaklarning yumaloqligini hisobga olmaydi.

// Kotlin: soya uchun maxsus OutlineProvider
import android.graphics.Outline
import android.view.View
import android.view.ViewOutlineProvider

val myView: View = findViewById(R.id.myView)
myView.outlineProvider = object : ViewOutlineProvider() {
    override fun getOutline(view: View, outline: Outline) {
        outline.setRoundRect(
            0, 0, view.width, view.height,
            12f  // burchak radiusi
        )
    }
}
myView.elevation = 8f  // soya balandligi px da
myView.translationZ = 4f  // bosganda qo'shimcha balandlik

Jetpack Compose da soyalar Modifier.shadow() va Card hamda Surface komponentlaridagi elevation orqali boshqariladi. Modifier.shadow() elevation va shape ni qabul qiladi. View tizimidan farqli o'laroq, Compose soyalarni o'z render quvurida chizadi, bu Android ning barcha versiyalarida oldindan bashorat qilinadigan xatti-harakatni ta'minlaydi.

// Jetpack Compose: Modifier.shadow orqali soya
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

Card(
    modifier = Modifier.shadow(
        elevation = 6.dp,
        shape = RoundedCornerShape(12.dp),
        clip = false
    ),
    colors = CardDefaults.cardColors(containerColor = Color.White)
) {
    Text("Maxsus soyali Card")
}

Soyalardan foydalanish bo'yicha tavsiyalar

Soyalardan to'g'ri foydalanish interfeysni idrok etishni yaxshilaydi, noto'g'ri foydalanish — vizual shovqin yaratadi va samaradorlikni pasaytiradi. Material Design besh daraja elevation ni belgilaydi: 0 dp (soyasiz), 1–4 dp (tugmalar, chiplar), 6–12 dp (kartalar, menyular), 16–24 dp (dialoglar, pastki panellar), 24+ dp (modal oynalar, FAB).

Yaxshi uslub qoidalari: (1) e'tiborni jalb qilmasligi kerak bo'lgan elementlar (fonlar, ajratgichlar) uchun soya ishlatmang, (2) soya balandligi elementning ahamiyatiga mos kelishi kerak — qanchalik muhim bo'lsa, shunchalik baland, (3) tugmani bosganda taktil teskari aloqa uchun elevation ni animatsiya bilan kamaytiring, (4) qorong'i fonlarda soyalardan qoching — soya o'rniga overlay (yoritish/qoraytirish) dan foydalaning. Material You (Android 12+) da soyalar mavzuga moslashadi: qorong'i fonda elevation rang qatlami (surface tint) bilan almashtiriladi.

Flutter da soyalar: BoxShadow va PhysicalModel

Flutter da soyalar BoxDecoration ichidagi BoxShadow orqali amalga oshiriladi. BoxShadow color, offset, blurRadius va spreadRadius ni qabul qiladi. Flutter bir nechta soyalarni qo'llab-quvvatlaydi: BoxShadow ro'yxatini uzatish murakkab effektlar yaratish imkonini beradi — masalan, tashqi soya + ichki yoritish. PhysicalModel — shaklga asoslangan fizik soyani simulyatsiya qiluvchi muqobil (BeveledRectangleBorder, CircleBorder).

// Flutter: BoxDecoration + BoxShadow orqali soya
import 'package:flutter/material.dart';

Container(
    decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12.0),
        boxShadow: [
            BoxShadow(
                color: Colors.black.withOpacity(0.15),
                offset: Offset(0, 4),
                blurRadius: 8.0,
                spreadRadius: 0,
            ),
        ],
    ),
    child: Text('Soyali konteyner'),
)

// Fizik soya uchun PhysicalModel
PhysicalModel(
    color: Colors.white,
    elevation: 6.0,
    shadowColor: Colors.black.withOpacity(0.2),
    borderRadius: BorderRadius.circular(12.0),
    child: Text('Soyali fizik model'),
)

Samaradorlik: Bir nechta soyalarga ega BoxShadow har bir o'zgarishda qayta chizishga (repaint) sabab bo'lishi mumkin. Statik elementlar uchun PhysicalModel dan foydalaning — u soyani alohida qatlamda keshlaydi (RepaintBoundary). Flutter 3.16+ da mavzuga (yorug'/qorong'i) qarab rang va xiralikni o'zgartiruvchi adaptiv soyalar bilan Material 3 elevation qo'llab-quvvatlanishi qo'shilgan.