Corner Radius — co to je, poloměr zaoblení v mobilních aplikacích

Co je corner radius?

Corner radius — číselná hodnota určující stupeň zaoblení rohů obdélníkového prvku. Čím vyšší hodnota, tím je roh zaoblenější. Při hodnotě 0 zůstává roh rovný (90°), při hodnotě rovné polovině kratší strany se prvek změní v kruh (u čtverce) nebo zaoblený obdélník s rovnými stranami (kapsle).

V mobilním designu se corner radius používá pro: karty a dlaždice, tlačítka, vstupní pole, modální okna, obrázky a avatary, indikátory průběhu, chipy a odznaky. Každý typ prvku má doporučený rozsah zaoblení založený na pokynech Material Design a Human Interface Guidelines.

Podle Material Design 3 (Google, 2026) se zaoblení rohů klasifikuje do tří úrovní: small (4 dp) pro tlačítka a vstupní pole, medium (8–12 dp) pro karty a listy, large (16–28 dp) pro dialogy a bottom sheet. HIG Apple (2025) doporučuje jednotný corner radius 10–12 pt pro systémové prvky (UIButton, UITextField) a 20+ pt pro modální prezentace.

Corner radius na iOS: CALayer a SwiftUI

Na iOS se zaoblení rohů realizuje přes vlastnost cornerRadius u CALayer. V UIKit má každý UIView vrstvu, u které lze nastavit cornerRadius. Pro složitější zaoblení (různé poloměry pro různé rohy) se používají maskedCorners a CACornerMask v kombinaci s UIBezierPath.

// UIKit: zaoblení přes CALayer
import UIKit

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

Ve SwiftUI se zaoblení nastavuje přes modifikátor cornerRadius() nebo přes ClipShape s RoundedRectangle. SwiftUI také podporuje individuální zaoblení rohů přes UIRectCorner v kombinaci s clipped() a overlay().

// SwiftUI: zaoblení přes RoundedRectangle
import SwiftUI

VStack {
    Text("Poloměr rohu 16")
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 16)
                .fill(Color.blue)
        )
}

// Individuální zaoblení rohů
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radius — styl zaoblení, který Apple používá v iOS od vydání iOS 7. Na rozdíl od klasického poloměru (circular) vytváří continuous radius plynulejší zaoblení pomocí Bezierovy křivky třetího řádu místo oblouku kružnice. SwiftUI podporuje tento styl přes parametr style: .continuous v RoundedRectangle. Apple doporučuje continuous corner radius pro všechny systémové prvky jako vizuálně přirozenější.

Corner radius v Android: shape a Compose

V Android se zaoblení rohů tradičně realizuje přes XML shape zdroje ve složce res/drawable. Shape definuje tvar pozadí s parametry cornerRadius a solid. Pro různé rohy se používají <, bottom, top a <right. V Material Design 3 byl přidán MaterialShapeDrawable s podporou motivů a dynamických tvarů.

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

V Jetpack Compose se zaoblení nastavuje přes parametr shape u Modifier. Compose poskytuje RoundedCornerShape s podporou různých poloměrů pro každý roh a styl (CircularShape nebo CutCornerShape). Compose také podporuje continuous corner radius přes RoundedCornerShape v kombinaci s grafickým obrysem.

// Jetpack Compose: zaoblení přes 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 = "Karta s vlastním zaoblením")
}

MaterialShapeDrawable v Android View System umožňuje dynamicky měnit corner radius bez přetváření drawable. Použijte ShapeAppearanceModel pro přesné nastavení: nastavte cornerFamily (rounded nebo cut) a cornerSize pro každý roh zvlášť.

Jak vybrat správný corner radius

Výběr corner radius závisí na typu prvku, kontextu použití a platformě. Neexistuje univerzální pravidlo, ale Material Design a HIG Apple dávají jasná doporučení pro standardní komponenty. Základní princip: zaoblení by mělo být znatelné, ale nemělo by překážet obsahu.

Pravidlo kontrastu: prvky s různým corner radius v jednom rozhraní by se měly lišit alespoň o 4 dp, aby byl vizuální rozdíl znatelný. Nepoužívejte 3 úrovně zaoblení na jedné obrazovce — vytváří to vizuální šum. Material Design 3 doporučuje používat nejvýše dvě úrovně zaoblení na obrazovku: jednu pro kontejnery (karty, dialogy) a jednu pro interaktivní prvky (tlačítka, pole).

Corner radius ve Flutter

Ve Flutter se zaoblení rohů realizuje přes třídu BorderRadius, která přijímá hodnoty Radius.circular() nebo Radius.elliptical(). Flutter podporuje individuální zaoblení přes BorderRadius.only() a BorderRadius.horizontal()/vertical(). Widget ClipRRect ořezává potomka podle zadaného BorderRadius.

// Flutter: zaoblení přes ClipRRect a 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('Vlastní zaoblení rohů'),
)

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

ClipRRect ve Flutter se používá, když je potřeba oříznout obrázek nebo složitý widget podél zaobleného okraje. Pro jednoduché kontejnery pozadí stačí BoxDecoration s borderRadius — je výkonnější, protože nevytváří samostatnou ořezávací vrstvu. Material Flutter 3.22+ podporuje continuous corner radius přes ContinuousRectangleBorder.