Corner Radius — какво е това, радиус на заобляне в мобилни приложения

Какво е corner radius?

Corner radius — числова стойност, която определя степента на заобляне на ъглите на правоъгълен елемент. Колкото по-висока е стойността, толкова по-заоблен става ъгълът. При стойност 0 ъгълът остава прав (90°), при стойност, равна на половината от по-късата страна, елементът се превръща в кръг (за квадрат) или заоблен правоъгълник с прави страни (капсула).

В мобилния дизайн corner radius се използва за: карти и плочки, бутони, полета за въвеждане, модални прозорци, изображения и аватари, индикатори за напредък, чипове и значки. Всеки тип елемент има препоръчителен диапазон на заобляне, базиран на насоките на Material Design и Human Interface Guidelines.

Според Material Design 3 (Google, 2026), заоблянето на ъгли се класифицира на три нива: small (4 dp) за бутони и полета за въвеждане, medium (8–12 dp) за карти и листове, large (16–28 dp) за диалози и bottom sheet-ове. HIG Apple (2025) препоръчва единен corner radius от 10–12 pt за системни елементи (UIButton, UITextField) и 20+ pt за модални презентации.

Corner radius на iOS: CALayer и SwiftUI

На iOS заоблянето на ъгли се реализира чрез свойството cornerRadius на CALayer. В UIKit всеки UIView има слой, на който може да се зададе cornerRadius. За по-сложни заобляния (различни радиуси за различни ъгли) се използват maskedCorners и CACornerMask в комбинация с UIBezierPath.

// UIKit: заобляне чрез CALayer
import UIKit

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

В SwiftUI заоблянето се задава чрез модификатора cornerRadius() или чрез ClipShape с RoundedRectangle. SwiftUI също поддържа индивидуално заобляне на ъгли чрез UIRectCorner в комбинация с clipped() и overlay().

// SwiftUI: заобляне чрез RoundedRectangle
import SwiftUI

VStack {
    Text("Радиус на ъгъла 16")
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 16)
                .fill(Color.blue)
        )
}

// Индивидуално заобляне на ъгли
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radius — стил на заобляне, използван от Apple в iOS от пускането на iOS 7. За разлика от класическия радиус (circular), continuous radius създава по-гладко заобляне чрез използване на крива на Безие от трети ред вместо дъга от окръжност. SwiftUI поддържа този стил чрез параметъра style: .continuous в RoundedRectangle. Apple препоръчва continuous corner radius за всички системни елементи като визуално по-естествен.

Corner radius в Android: shape и Compose

В Android заоблянето на ъгли традиционно се реализира чрез XML shape ресурси в папката res/drawable. Shape определя формата на фона с параметрите cornerRadius и solid. За различни ъгли се използват <, bottom, top и <right. В Material Design 3 е добавен MaterialShapeDrawable с поддръжка на теми и динамични форми.

<!-- 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>

В Jetpack Compose заоблянето се задава чрез параметъра shape в Modifier. Compose предоставя RoundedCornerShape с поддръжка на различни радиуси за всеки ъгъл и стил (CircularShape или CutCornerShape). Compose също поддържа continuous corner radius чрез RoundedCornerShape в комбинация с графичен контур.

// Jetpack Compose: заобляне чрез 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 = "Карта с персонализирано заобляне")
}

MaterialShapeDrawable в Android View System позволява динамично променяне на corner radius без пресъздаване на drawable. Използвайте ShapeAppearanceModel за точна настройка: задайте cornerFamily (rounded или cut) и cornerSize за всеки ъгъл поотделно.

Как да изберем правилния corner radius

Изборът на corner radius зависи от типа на елемента, контекста на използване и платформата. Няма универсално правило, но Material Design и HIG Apple дават ясни препоръки за стандартните компоненти. Основният принцип: заоблянето трябва да е забележимо, но да не пречи на съдържанието.

Правило за контраст: елементите с различен corner radius в един интерфейс трябва да се различават с поне 4 dp, за да е забележима визуалната разлика. Не използвайте 3 нива на заобляне на един екран — това създава визуален шум. Material Design 3 препоръчва използването на не повече от две нива на заобляне на екран: едно за контейнери (карти, диалози) и едно за интерактивни елементи (бутони, полета).

Corner radius във Flutter

Във Flutter заоблянето на ъгли се реализира чрез класа BorderRadius, който приема стойности Radius.circular() или Radius.elliptical(). Flutter поддържа индивидуално заобляне чрез BorderRadius.only() и BorderRadius.horizontal()/vertical(). Widget-ът ClipRRect изрязва дъщерния елемент според зададения BorderRadius.

// Flutter: заобляне чрез ClipRRect и 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('Персонализирано заобляне на ъгли'),
)

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

ClipRRect във Flutter се използва, когато трябва да се изреже изображение или сложен widget по заоблена граница. За прости фонови контейнери е достатъчен BoxDecoration с borderRadius — това е по-производително, тъй като не създава отделен изрязващ слой. Material Flutter 3.22+ поддържа continuous corner radius чрез ContinuousRectangleBorder.