Corner Radius — mobil uygulamalarda yuvarlama yarıçapı nedir

Corner radius nedir?

Corner radius, dikdörtgen bir öğenin köşelerinin yuvarlama derecesini belirleyen sayısal bir değerdir. Değer ne kadar yüksekse, köşe o kadar yuvarlak olur. 0 değerinde köşe dik açılı (90°) kalır; kısa kenarın yarısına eşit bir değerde, öğe bir daireye (kare için) veya düz kenarlı yuvarlak bir dikdörtgene (kapsül) dönüşür.

Mobil tasarımda corner radius şunlar için kullanılır: kartlar ve döşemeler, düğmeler, giriş alanları, modal pencereler, görüntüler ve avatarlar, ilerleme göstergeleri, çipler ve rozetler. Her öğe türünün Material Design ve Human Interface Guidelines'a dayalı önerilen bir yuvarlama aralığı vardır.

Material Design 3'e (Google, 2026) göre köşe yuvarlama üç seviyede sınıflandırılır: küçük (4 dp) düğmeler ve giriş alanları için, orta (8–12 dp) kartlar ve sayfalar için, büyük (16–28 dp) diyaloglar ve alt sayfalar için. Apple HIG (2025), sistem öğeleri (UIButton, UITextField) için 10–12 pt'lik tek tip bir corner radius ve modal sunumlar için 20+ pt önerir.

iOS'ta Corner radius: CALayer ve SwiftUI

iOS'ta, köşe yuvarlama CALayer'ın cornerRadius özelliği aracılığıyla uygulanır. UIKit'te her UIView'in cornerRadius'u ayarlanabilen bir katmanı vardır. Daha karmaşık yuvarlamalar (farklı köşeler için farklı yarıçaplar) için UIBezierPath ile birlikte maskedCorners ve CACornerMask kullanılır.

// UIKit: CALayer ile yuvarlama
import UIKit

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

SwiftUI'da yuvarlama, cornerRadius() değiştiricisi veya RoundedRectangle ile ClipShape aracılığıyla ayarlanır. SwiftUI ayrıca clipped() ve overlay() ile birlikte UIRectCorner aracılığıyla bireysel köşe yuvarlamayı da destekler.

// SwiftUI: RoundedRectangle ile yuvarlama
import SwiftUI

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

// Bireysel köşe yuvarlama
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radius, Apple'ın iOS 7'den beri iOS'ta kullandığı bir yuvarlama stilidir. Klasik yarıçapın (dairesel) aksine, sürekli yarıçap, dairesel bir yay yerine üçüncü dereceden bir Bezier eğrisi kullanarak daha pürüzsüz bir yuvarlama oluşturur. SwiftUI, RoundedRectangle'daki style: .continuous parametresi aracılığıyla bu stili destekler. Apple, görsel olarak daha doğal olduğu için tüm sistem öğeleri için continuous corner radius önerir.

Android'de Corner radius: shape ve Compose

Android'de, köşe yuvarlama geleneksel olarak res/drawable klasöründeki XML shape kaynakları aracılığıyla uygulanır. Shape, cornerRadius ve solid parametreleriyle arka plan şeklini tanımlar. Farklı köşeler için <corners android:bottomLeftRadius="..." /> kullanılır. Material Design 3'te tema desteği ve dinamik şekillerle MaterialShapeDrawable eklenmiştir.

<!-- 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 yuvarlama, Modifier'ın shape parametresi aracılığıyla ayarlanır. Compose, her köşe ve stil (CircularShape veya CutCornerShape) için farklı yarıçapları destekleyen RoundedCornerShape sağlar. Compose ayrıca grafik konturla birlikte RoundedCornerShape aracılığıyla continuous corner radius'u da destekler.

// Jetpack Compose: RoundedCornerShape ile yuvarlama
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 = "Özel yuvarlamalı Card")
}

Android View Sistemindeki MaterialShapeDrawable, drawable'ı yeniden oluşturmadan corner radius'u dinamik olarak değiştirmeye olanak tanır. Hassas yapılandırma için ShapeAppearanceModel kullanın: her köşe için ayrı ayrı cornerFamily (rounded veya cut) ve cornerSize ayarlayın.

Doğru corner radius nasıl seçilir

Corner radius seçimi, öğe türüne, kullanım bağlamına ve platforma bağlıdır. Evrensel bir kural yoktur, ancak Material Design ve Apple HIG standart bileşenler için net öneriler sağlar. Ana ilke: yuvarlama fark edilebilir olmalı ancak içeriğe müdahale etmemelidir.

Kontrast kuralı: aynı arayüzde farklı corner radius'a sahip öğeler, görsel farkın fark edilebilmesi için en az 4 dp farklı olmalıdır. Bir ekranda 3 seviye yuvarlama kullanmayın — bu görsel gürültü yaratır. Material Design 3, ekran başına ikiden fazla yuvarlama seviyesi kullanılmamasını önerir: biri kaplar (kartlar, diyaloglar) için ve biri etkileşimli öğeler (düğmeler, alanlar) için.

Flutter'da Corner radius

Flutter'da, köşe yuvarlama BorderRadius sınıfı aracılığıyla uygulanır; bu sınıf Radius.circular() veya Radius.elliptical() değerlerini kabul eder. Flutter, BorderRadius.only() ve BorderRadius.horizontal()/vertical() aracılığıyla bireysel yuvarlamayı destekler. ClipRRect widget'ı, verilen BorderRadius'a göre alt öğeyi kırpar.

// Flutter: ClipRRect ve Container ile yuvarlama
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('Özel köşe yuvarlama'),
)

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

Flutter'da ClipRRect, bir görüntüyü veya karmaşık widget'ı yuvarlak bir sınır boyunca kırpmanız gerektiğinde kullanılır. Basit arka plan kapları için borderRadius ile BoxDecoration yeterlidir — bu, ayrı bir kırpma katmanı oluşturmadığı için daha verimlidir. Material Flutter 3.22+, ContinuousRectangleBorder aracılığıyla continuous corner radius'u destekler.