Corner Radius — ce este, raza de rotunjire în aplicațiile mobile

Ce este corner radius?

Corner radius — o valoare numerică care determină gradul de rotunjire a colțurilor unui element dreptunghiular. Cu cât valoarea este mai mare, cu atât colțul devine mai rotunjit. La valoarea 0 colțul rămâne drept (90°), la valoarea egală cu jumătatea laturii mai scurte, elementul se transformă într-un cerc (pentru pătrat) sau într-un dreptunghi rotunjit cu laturi drepte (capsulă).

În designul mobil, corner radius este utilizat pentru: carduri și plăci, butoane, câmpuri de introducere, ferestre modale, imagini și avataruri, indicatoare de progres, cipuri și ecusoane. Fiecare tip de element are un interval recomandat de rotunjire, bazat pe ghidurile Material Design și Human Interface Guidelines.

Conform Material Design 3 (Google, 2026), rotunjirea colțurilor se clasifică în trei niveluri: small (4 dp) pentru butoane și câmpuri de introducere, medium (8–12 dp) pentru carduri și foi, large (16–28 dp) pentru dialoguri și bottom sheet-uri. HIG Apple (2025) recomandă un corner radius unitar de 10–12 pt pentru elementele de sistem (UIButton, UITextField) și 20+ pt pentru prezentări modale.

Corner radius pe iOS: CALayer și SwiftUI

Pe iOS rotunjirea colțurilor se realizează prin proprietatea cornerRadius la CALayer. În UIKit, fiecare UIView are un strat la care se poate seta cornerRadius. Pentru rotunjiri mai complexe (diferite raze pentru colțuri diferite) se utilizează maskedCorners și CACornerMask în combinație cu UIBezierPath.

// UIKit: rotunjire prin CALayer
import UIKit

let cardView = UIView()
cardView.backgroundColor = .systemBackground
cardView.layer.cornerRadius = 12
cardView.layer.maskedCorners = [
    .layerMinXMinYCorner,
    .layerMaxXMinYCorner
]

În SwiftUI rotunjirea se setează prin modificatorul cornerRadius() sau prin ClipShape cu RoundedRectangle. SwiftUI suportă și rotunjirea individuală a colțurilor prin UIRectCorner în combinație cu clipped() și overlay().

// SwiftUI: rotunjire prin RoundedRectangle
import SwiftUI

VStack {
    Text("Raza colțului 16")
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 16)
                .fill(Color.blue)
        )
}

// Rotunjirea individuală a colțurilor
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radius — stilul de rotunjire utilizat de Apple în iOS de la lansarea iOS 7. Spre deosebire de radiusul clasic (circular), continuous radius creează o rotunjire mai lină prin utilizarea unei curbe Bezier de ordinul trei în locul arcului de cerc. SwiftUI suportă acest stil prin parametrul style: .continuous în RoundedRectangle. Apple recomandă continuous corner radius pentru toate elementele de sistem ca fiind vizual mai natural.

Corner radius în Android: shape și Compose

În Android rotunjirea colțurilor se realizează în mod tradițional prin resursele XML shape în folderul res/drawable. Shape definește forma fundalului cu parametrii cornerRadius și solid. Pentru colțuri diferite se utilizează <, bottom, top și <right. În Material Design 3 a fost adăugat MaterialShapeDrawable cu suport pentru teme și forme dinamice.

<!-- res/drawable/bg_card.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <corners android:radius="12dp" />
</shape>

În Jetpack Compose rotunjirea se setează prin parametrul shape la Modifier. Compose oferă RoundedCornerShape cu suport pentru raze diferite pentru fiecare colț și stil (CircularShape sau CutCornerShape). Compose suportă și continuous corner radius prin RoundedCornerShape în combinație cu conturul grafic.

// Jetpack Compose: rotunjire prin RoundedCornerShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

Card(
    shape = RoundedCornerShape(
        topStart = 16.dp,
        topEnd = 16.dp,
        bottomStart = 4.dp,
        bottomEnd = 4.dp
    ),
    elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
) {
    Text(text = "Card cu rotunjire personalizată")
}

MaterialShapeDrawable în Android View System permite schimbarea dinamică a corner radius fără recrearea drawable-ului. Utilizați ShapeAppearanceModel pentru configurarea precisă: setați cornerFamily (rounded sau cut) și cornerSize pentru fiecare colț în parte.

Cum să alegeți corner radius potrivit

Alegerea corner radius depinde de tipul elementului, contextul de utilizare și platformă. Nu există o regulă universală, dar Material Design și HIG Apple oferă recomandări clare pentru componentele standard. Principiul de bază: rotunjirea trebuie să fie vizibilă, dar să nu interfereze cu conținutul.

Regula contrastului: elementele cu corner radius diferit într-o singură interfață trebuie să difere cu cel puțin 4 dp pentru ca diferența vizuală să fie sesizabilă. Nu utilizați 3 niveluri de rotunjire pe un singur ecran — aceasta creează zgomot vizual. Material Design 3 recomandă utilizarea a cel mult două niveluri de rotunjire pe ecran: unul pentru containere (carduri, dialoguri) și unul pentru elemente interactive (butoane, câmpuri).

Corner radius în Flutter

În Flutter rotunjirea colțurilor se realizează prin clasa BorderRadius, care acceptă valorile Radius.circular() sau Radius.elliptical(). Flutter suportă rotunjirea individuală prin BorderRadius.only() și BorderRadius.horizontal()/vertical(). Widgetul ClipRRect decupează elementul copil după BorderRadius-ul specificat.

// Flutter: rotunjire prin ClipRRect și Container
import 'package:flutter/material.dart';

Container(
    decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(16.0),
            topRight: Radius.circular(16.0),
            bottomLeft: Radius.circular(4.0),
            bottomRight: Radius.circular(4.0),
        ),
    ),
    child: Text('Rotunjirea personalizată a colțurilor'),
)

// ClipRRect cu Image
ClipRRect(
    borderRadius: BorderRadius.circular(12.0),
    child: Image.network(
        'https://example.com/image.jpg',
        fit: BoxFit.cover,
    ),
)

ClipRRect în Flutter este utilizat atunci când trebuie decupată o imagine sau un widget complex după o margine rotunjită. Pentru containere simple de fundal, BoxDecoration cu borderRadius este suficient — este mai performant deoarece nu creează un strat de decupare separat. Material Flutter 3.22+ suportă continuous corner radius prin ContinuousRectangleBorder.