Shadow: istota, tworzenie cieni w aplikacjach mobilnych

Czym jest cień w UI?

cień (shadow) w interfejsach użytkownika — to efekt wizualny imitujący oświetlenie i głębię. Cień tworzy się poprzez rysowanie ciemnej rozmytej kopii elementu przesuniętej względem oryginału. W projektowaniu mobilnym cienie pełnią trzy funkcje: pokazują hierarchię (wyższy element — dłuższy cień), sygnalizują interaktywność (przyciski z cieniem wyglądają na klikalne), oddzielają treść od tła (karty z cieniem są odbierane jako osobne bloki).

W Material Design Google cienie są nierozerwalnie związane z koncepcją elevation (wysokości). Każdy element zajmuje określoną wysokość w współrzędnej Z, a cień to projekcja oświetlenia z góry. Human Interface Guidelines Apple nie nakazują ścisłego systemu wysokości, ale zalecają używanie cieni do tworzenia wizualnej hierarchii i głębi w interfejsach.

Według badań Nielsen Norman Group (2024), prawidłowo rozmieszczone cienie skracają czas znajdowania interaktywnego elementu o 24%. Cienie pomagają również użytkownikom z zaburzeniami wzroku rozróżniać granice elementów. Jednak nadmierne użycie cieni (3+ poziomy na ekranie) zwiększa obciążenie poznawcze i pogarsza percepcję.

Cienie na iOS: CALayer i SwiftUI

Na iOS cienie są implementowane przez właściwości CALayer: shadowColor ustawia kolor cienia, shadowOffset — przesunięcie w CGSize (x, y), shadowRadius — promień rozmycia, shadowOpacity — nieprzezroczystość od 0 do 1. Dla wydajności zaleca się również ustawienie shadowPath — UIBezierPath, który opisuje kształt cienia, aby Core Animation nie obliczała go automatycznie.

// UIKit: konfiguracja cienia przez CALayer
import UIKit

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

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

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

W SwiftUI cienie ustawia się przez modyfikator .shadow() z parametrami color, radius, x, y. SwiftUI automatycznie stosuje shadowPath i zarządza wydajnością renderowania. Do zaawansowanych cieni (wewnętrzne cienie, wielokrotne cienie) używaj overlay() z LinearGradient.

// SwiftUI: cień przez modyfikator shadow
import SwiftUI

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

Wydajność cieni na iOS: jeśli shadowPath nie jest ustawiony, Core Animation oblicza cień na podstawie kształtu warstwy w każdej klatce, co może powodować spadki płynności podczas animacji. Dla statycznych elementów zawsze ustawiaj shadowPath. Dla animowanych elementów używaj shouldRasterize = true na CALayer, aby zapisać cień w osobnej warstwie. W SwiftUI rasteryzacja jest zarządzana przez .drawingGroup().

Cienie w Android: elevation i niestandardowe cienie

W Android cienie w Material Design są implementowane przez elevation — właściwość View, która ustawia wysokość elementu w współrzędnej Z. System automatycznie rysuje cień na podstawie elevation i outlineProvider (konturu elementu). Im wyższe elevation, tym większy i bardziej rozmyty cień. Dla View niedziedziczących po Material Design (np. AppCompat), cienie działają tylko przy włączonym przyspieszeniu sprzętowym.

<!-- XML: elevation przez atrybuty -->
<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">
    <!-- Zawartość karty -->
</androidx.cardview.widget.CardView>

Do niestandardowych cieni w Android View System używa się OutlineProvider. ViewOutlineProvider pozwala ustawić dowolny kształt przez outline.setRoundRect() lub outline.setPath(). Bez OutlineProvider cień jest rysowany w prostokątnym kształcie View, co nie uwzględnia zaokrąglenia rogów.

// Kotlin: niestandardowy OutlineProvider dla cienia
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  // promień zaokrąglenia
        )
    }
}
myView.elevation = 8f  // wysokość cienia w px
myView.translationZ = 4f  // dodatkowa wysokość po naciśnięciu

W Jetpack Compose cienie są zarządzane przez Modifier.shadow() i elevation w komponentach Card i Surface. Modifier.shadow() przyjmuje elevation i shape. W przeciwieństwie do View System, Compose rysuje cienie we własnym potoku renderowania, co daje bardziej przewidywalne zachowanie na wszystkich wersjach Androida.

// Jetpack Compose: cień przez Modifier.shadow
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("Card z niestandardowym cieniem")
}

Zalecenia dotyczące używania cieni

Prawidłowe używanie cieni poprawia odbiór interfejsu, nieprawidłowe — tworzy wizualny szum i pogarsza wydajność. Material Design określa pięć poziomów elevation: 0 dp (bez cienia), 1–4 dp (przyciski, chipy), 6–12 dp (karty, menu), 16–24 dp (dialogi, arkusze dolne), 24+ dp (okna modalne, FAB).

Zasady dobrego stylu: (1) nie używaj cieni dla elementów, które nie powinny przyciągać uwagi (tła, separatory), (2) wysokość cienia powinna odpowiadać ważności elementu — im ważniejszy, tym wyższy, (3) po naciśnięciu przycisku zmniejszaj elevation animacyjnie dla dotykowego sprzężenia zwrotnego, (4) unikaj cieni na ciemnych tłach — używaj overlay (rozjaśnienie/przyciemnienie) zamiast cienia. W Material You (Android 12+) cienie dostosowują się do motywu: na ciemnym tle elevation jest zastępowana warstwą koloru (surface tint).

Cienie we Flutter: BoxShadow i PhysicalModel

We Flutter cienie są implementowane przez BoxShadow wewnątrz BoxDecoration. BoxShadow przyjmuje color, offset, blurRadius i spreadRadius. Flutter obsługuje wielokrotne cienie: przekazanie listy BoxShadow pozwala tworzyć złożone efekty — na przykład zewnętrzny cień + wewnętrzne podświetlenie. PhysicalModel — alternatywa, która symuluje fizyczny cień na podstawie kształtu (BeveledRectangleBorder, CircleBorder).

// Flutter: cień przez BoxDecoration + BoxShadow
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('Kontener z cieniem'),
)

// PhysicalModel dla fizycznego cienia
PhysicalModel(
    color: Colors.white,
    elevation: 6.0,
    shadowColor: Colors.black.withOpacity(0.2),
    borderRadius: BorderRadius.circular(12.0),
    child: Text('Model fizyczny z cieniem'),
)

Wydajność: BoxShadow z wieloma cieniami może powodować przerysowanie przy każdej zmianie (repaint). Dla statycznych elementów używaj PhysicalModel — zapisuje on cień w osobnej warstwie (RepaintBoundary). We Flutter 3.16+ dodano obsługę Material 3 elevation z adaptacyjnymi cieniami, które zmieniają kolor i rozmycie w zależności od motywu (light/dark).