Corner Radius — mi ez, lekerekítési sugár mobilalkalmazásokban

Mi az a corner radius?

Corner radius — egy numerikus érték, amely meghatározza a téglalap alakú elem sarkainak lekerekítési fokát. Minél magasabb az érték, annál kerekebbé válik a sarok. 0 értéknél a sarok egyenes marad (90°), a rövidebb oldal felével egyenlő értéknél az elem körré (négyzet esetén) vagy lekerekített téglalappá egyenes oldalakkal (kapszulává) alakul.

A mobil dizájnban a corner radius a következőkhöz használatos: kártyák és csempék, gombok, beviteli mezők, modális ablakok, képek és avatárok, folyamatjelzők, chipek és jelvények. Minden elemtípusnak van ajánlott tartománya a lekerekítésre, a Material Design és a Human Interface Guidelines alapján.

A Material Design 3 (Google, 2026) szerint a sarkok lekerekítése három szintre osztható: small (4 dp) gombokhoz és beviteli mezőkhöz, medium (8–12 dp) kártyákhoz és lapokhoz, large (16–28 dp) párbeszédablakokhoz és bottom sheet-ekhez. HIG Apple (2025) egységes 10–12 pt corner radius-t ajánl a rendszerelemekhez (UIButton, UITextField) és 20+ pt-t a modális prezentációkhoz.

Corner radius iOS-en: CALayer és SwiftUI

iOS-en a sarkok lekerekítése a CALayer cornerRadius tulajdonságán keresztül valósul meg. UIKit-ben minden UIView rendelkezik egy réteggel, amelyen beállítható a cornerRadius. Összetettebb lekerekítésekhez (különböző sugarak a különböző sarkokhoz) a maskedCorners és CACornerMask használatos UIBezierPath kombinációjával.

// UIKit: lekerekítés CALayer segítségével
import UIKit

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

SwiftUI-ban a lekerekítés a cornerRadius() módosítóval vagy a ClipShape segítségével RoundedRectangle-val állítható be. A SwiftUI támogatja az egyedi saroklekerekítést is az UIRectCorner segítségével a clipped() és overlay() kombinációjával.

// SwiftUI: lekerekítés RoundedRectangle segítségével
import SwiftUI

VStack {
    Text("Sarok sugara 16")
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 16)
                .fill(Color.blue)
        )
}

// Egyedi saroklekerekítés
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radius — az Apple által iOS 7 óta használt lekerekítési stílus iOS-en. Ellentétben a klasszikus sugárral (circular), a continuous radius simább lekerekítést hoz létre egy harmadrendű Bezier-görbe használatával a körív helyett. A SwiftUI ezt a stílust a style: .continuous paraméterrel támogatja a RoundedRectangle-ban. Az Apple a continuous corner radius-t ajánlja minden rendszerelemhez, mivel vizuálisan természetesebb.

Corner radius Androidon: shape és Compose

Androidon a sarkok lekerekítése hagyományosan XML shape erőforrásokon keresztül valósul meg a res/drawable mappában. A shape meghatározza a háttér alakját a cornerRadius és solid paraméterekkel. Különböző sarkokhoz a <, bottom, top és <right használatos. A Material Design 3-ban hozzáadták a MaterialShapeDrawable-t témák és dinamikus formák támogatásával.

<!-- 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-ban a lekerekítés a Modifier shape paraméterén keresztül állítható be. A Compose RoundedCornerShape-t biztosít különböző sugarak támogatásával minden sarokhoz és stílushoz (CircularShape vagy CutCornerShape). A Compose a continuous corner radius-t is támogatja a RoundedCornerShape segítségével grafikus kontúr kombinációjával.

// Jetpack Compose: lekerekítés RoundedCornerShape segítségével
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 = "Kártya egyedi lekerekítéssel")
}

MaterialShapeDrawable az Android View System-ben lehetővé teszi a corner radius dinamikus megváltoztatását a drawable újraalkotása nélkül. Használja a ShapeAppearanceModel-t a pontos konfigurációhoz: állítsa be a cornerFamily-t (rounded vagy cut) és a cornerSize-t minden sarokhoz külön-külön.

Hogyan válasszuk ki a megfelelő corner radius-t

A corner radius kiválasztása függ az elem típusától, a használati kontextustól és a platformtól. Nincs univerzális szabály, de a Material Design és a HIG Apple egyértelmű ajánlásokat ad a standard komponensekhez. Az alapelv: a lekerekítés legyen észrevehető, de ne zavarja a tartalmat.

Kontraszt szabálya: az eltérő corner radius-szal rendelkező elemeknek egy felületen legalább 4 dp-vel kell különbözniük, hogy a vizuális különbség észrevehető legyen. Ne használjon 3 lekerekítési szintet egy képernyőn — ez vizuális zajt teremt. A Material Design 3 legfeljebb két lekerekítési szint használatát ajánlja képernyőnként: egyet a konténerekhez (kártyák, párbeszédablakok) és egyet az interaktív elemekhez (gombok, mezők).

Corner radius Flutter-ben

Flutter-ben a sarkok lekerekítése a BorderRadius osztályon keresztül valósul meg, amely Radius.circular() vagy Radius.elliptical() értékeket fogad. A Flutter támogatja az egyedi lekerekítést a BorderRadius.only() és BorderRadius.horizontal()/vertical() segítségével. A ClipRRect widget a megadott BorderRadius szerint vágja ki a gyermekelemet.

// Flutter: lekerekítés ClipRRect és Container segítségével
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('Egyedi saroklekerekítés'),
)

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

ClipRRect Flutter-ben akkor használatos, amikor egy képet vagy összetett widgetet kell lekerekített határ mentén kivágni. Egyszerű háttérkonténerekhez elegendő a BoxDecoration borderRadius-szal — ez hatékonyabb, mert nem hoz létre külön vágó réteget. A Material Flutter 3.22+ támogatja a continuous corner radius-t a ContinuousRectangleBorder segítségével.