Corner Radius — bu nədir, mobil tətbiqlərdə yuvarlaqlaşdırma radiusu

Corner radius nədir?

Corner radius — düzbucaqlı elementin künclərinin yuvarlaqlaşdırma dərəcəsini təyin edən ədədi dəyər. Dəyər nə qədər yüksək olsa, künc bir o qədər yuvarlaqlaşır. 0 dəyərində künc düz (90°) qalır, kiçik tərəfin yarısına bərabər dəyərdə element dairəyə (kvadrat üçün) və ya düz tərəfləri olan yuvarlaqlaşdırılmış düzbucaqlıya (kapsula) çevrilir.

Mobil dizaynda corner radius aşağıdakılar üçün istifadə olunur: kartlar və piltələr, düymələr, daxiletmə sahələri, modal pəncərələr, şəkillər və avatarlar, gedişat göstəriciləri, çiplər və badge-lər. Hər bir element növü Material Design və Human Interface Guidelines qaydalarına əsaslanan tövsiyə olunan diapazona malikdir.

Material Design 3 (Google, 2026) məlumatına görə, künc yuvarlaqlaşdırması üç səviyyəyə bölünür: small (4 dp) düymələr və daxiletmə sahələri üçün, medium (8–12 dp) kartlar və vərəqlər üçün, large (16–28 dp) dialoqlar və bottom sheet-lər üçün. HIG Apple (2025) sistem elementləri (UIButton, UITextField) üçün vahid corner radius 10–12 pt və modal təqdimatlar üçün 20+ pt tövsiyə edir.

iOS-da corner radius: CALayer və SwiftUI

iOS-da künc yuvarlaqlaşdırması CALayer-də cornerRadius xüsusiyyəti ilə həyata keçirilir. UIKit-də hər UIView-un cornerRadius təyin edilə bilən təbəqəsi var. Daha mürəkkəb yuvarlaqlaşdırmalar (müxtəlif künclər üçün fərqli radiuslar) üçün UIBezierPath ilə birlikdə maskedCorners və CACornerMask istifadə olunur.

// UIKit: CALayer vasitəsilə yuvarlaqlaşdırma
import UIKit

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

SwiftUI-də yuvarlaqlaşdırma cornerRadius() modifikatoru və ya RoundedRectangle ilə ClipShape vasitəsilə təyin edilir. SwiftUI həmçinin clipped() və overlay() ilə birlikdə UIRectCorner vasitəsilə fərdi künc yuvarlaqlaşdırmasını dəstəkləyir.

// SwiftUI: RoundedRectangle vasitəsilə yuvarlaqlaşdırma
import SwiftUI

VStack {
    Text("Künc radiusu 16")
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 16)
                .fill(Color.blue)
        )
}

// Fərdi künc yuvarlaqlaşdırması
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radius — Apple tərəfindən iOS 7-dən etibarən istifadə olunan yuvarlaqlaşdırma üslubu. Klassik radiusdan (circular) fərqli olaraq, continuous radius dairə qövsü əvəzinə üçüncü dərəcəli Bezier əyrisindən istifadə edərək daha hamar yuvarlaqlaşdırma yaradır. SwiftUI bu üslubu RoundedRectangle-da style: .continuous parametri ilə dəstəkləyir. Apple continuous corner radius-u vizual olaraq daha təbii olduğu üçün bütün sistem elementləri üçün tövsiyə edir.

Android-də corner radius: shape və Compose

Android-də künc yuvarlaqlaşdırması ənənəvi olaraq res/drawable qovluğunda XML shape resursları vasitəsilə həyata keçirilir. Shape cornerRadius və solid parametrləri ilə fon formasını təyin edir. Müxtəlif künclər üçün <, bottom, top və <right istifadə olunur. Material Design 3-ə temaları və dinamik formaları dəstəkləyən MaterialShapeDrawable əlavə edilmişdir.

<!-- 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-da yuvarlaqlaşdırma Modifier-də shape parametri ilə təyin edilir. Compose hər künc üçün fərqli radiusları və üslubu (CircularShape və ya CutCornerShape) dəstəkləyən RoundedCornerShape təqdim edir. Compose həmçinin qrafik konturla birlikdə RoundedCornerShape vasitəsilə continuous corner radius-u dəstəkləyir.

// Jetpack Compose: RoundedCornerShape vasitəsilə yuvarlaqlaşdırma
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 = "Fərdi yuvarlaqlaşdırma ilə kart")
}

MaterialShapeDrawable Android View System-də drawable-ı yenidən yaratmadan corner radius-u dinamik dəyişməyə imkan verir. Dəqiq konfiqurasiya üçün ShapeAppearanceModel-dən istifadə edin: hər künc üçün ayrıca cornerFamily (rounded və ya cut) və cornerSize təyin edin.

Düzgün corner radius-u necə seçməli

Corner radius seçimi elementin növündən, istifadə kontekstindən və platformadan asılıdır. Universal qayda yoxdur, lakin Material Design və HIG Apple standart komponentlər üçün aydın tövsiyələr verir. Əsas prinsip: yuvarlaqlaşdırma nəzərə çarpan olmalı, lakin məzmuna mane olmamalıdır.

Kontrast qaydası: bir interfeysdə fərqli corner radius-a malik elementlər vizual fərqin nəzərə çarpması üçün ən azı 4 dp ilə fərqlənməlidir. Bir ekranda 3 səviyyə yuvarlaqlaşdırmadan istifadə etməyin — bu vizual səs-küy yaradır. Material Design 3 ekranda iki səviyyədən çox olmayan yuvarlaqlaşdırma tövsiyə edir: biri konteynerlər üçün (kartlar, dialoqlar) və biri interaktiv elementlər üçün (düymələr, sahələr).

Flutter-də corner radius

Flutter-də künc yuvarlaqlaşdırması Radius.circular() və ya Radius.elliptical() dəyərlərini qəbul edən BorderRadius sinfi ilə həyata keçirilir. Flutter BorderRadius.only() və BorderRadius.horizontal()/vertical() vasitəsilə fərdi yuvarlaqlaşdırmanı dəstəkləyir. ClipRRect vidjeti verilmiş BorderRadius üzrə uşaq elementi kəsir.

// Flutter: ClipRRect və Container vasitəsilə yuvarlaqlaşdırma
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('Fərdi künc yuvarlaqlaşdırması'),
)

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

ClipRRect Flutter-də şəkli və ya mürəkkəb vidjeti yuvarlaqlaşdırılmış sərhəd boyunca kəsmək lazım olduqda istifadə olunur. Sadə fon konteynerləri üçün borderRadius ilə BoxDecoration kifayətdir — bu daha məhsuldardır, çünki ayrıca kəsici təbəqə yaratmır. Material Flutter 3.22+ ContinuousRectangleBorder vasitəsilə continuous corner radius-u dəstəkləyir.