Corner Radius — چیست، شعاع گرد کردن در برنامه‌های موبایل

corner radius چیست؟

Corner radius — مقدار عددی است که درجه گرد کردن گوشه‌های یک عنصر مستطیلی را تعیین می‌کند. هرچه مقدار بیشتر باشد، گوشه گردتر می‌شود. در مقدار ۰ گوشه مستقیم (۹۰°) باقی می‌ماند، در مقداری برابر با نصف ضلع کوچکتر، عنصر به دایره (برای مربع) یا مستطیل گرد با اضلاع مستقیم (کپسول) تبدیل می‌شود.

در طراحی موبایل corner radius برای موارد زیر استفاده می‌شود: کارت‌ها و کاشی‌ها، دکمه‌ها، فیلدهای ورودی، پنجره‌های مودال، تصاویر و آواتارها، نشانگرهای پیشرفت، چیپ‌ها و نشان‌ها. هر نوع عنصر دارای محدوده توصیه شده گرد کردن بر اساس راهنماهای Material Design و Human Interface Guidelines است.

طبق Material Design 3 (Google، ۲۰۲۶)، گرد کردن گوشه‌ها به سه سطح طبقه‌بندی می‌شود: small (۴ dp) برای دکمه‌ها و فیلدهای ورودی، medium (۸-۱۲ dp) برای کارت‌ها و برگه‌ها، large (۱۶-۲۸ dp) برای دیالوگ‌ها و bottom sheetها. HIG Apple (۲۰۲۵) برای عناصر سیستمی (UIButton، UITextField) corner radius واحد ۱۰-۱۲ pt و برای ارائه‌های مودال ۲۰+ 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("شعاع گوشه ۱۶")
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 16)
                .fill(Color.blue)
        )
}

// گرد کردن فردی گوشه‌ها
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radius — سبک گرد کردنی است که اپل از iOS 7 به بعد در iOS استفاده می‌کند. برخلاف radius کلاسیک (circular)، continuous radius با استفاده از منحنی بزیه درجه سوم به جای قوس دایره، گرد کردن نرم‌تری ایجاد می‌کند. SwiftUI از این سبک از طریق پارامتر style: .continuous در RoundedRectangle پشتیبانی می‌کند. اپل 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 متفاوت در یک رابط باید حداقل ۴ dp تفاوت داشته باشند تا تفاوت بصری قابل توجه باشد. از ۳ سطح گرد کردن در یک صفحه استفاده نکنید — این باعث ایجاد نویز بصری می‌شود. Material Design 3 استفاده از حداکثر دو سطح گرد کردن در یک صفحه را توصیه می‌کند: یکی برای ظروف (کارت‌ها، دیالوگ‌ها) و یکی برای عناصر تعاملی (دکمه‌ها، فیلدها).

Corner radius در Flutter

در Flutter گرد کردن گوشه‌ها از طریق کلاس BorderRadius که مقادیر Radius.circular() یا Radius.elliptical() را می‌پذیرد، پیاده‌سازی می‌شود. Flutter از گرد کردن فردی از طریق BorderRadius.only() و BorderRadius.horizontal()/vertical() پشتیبانی می‌کند. ویجت 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 زمانی استفاده می‌شود که نیاز به برش تصویر یا ویجت پیچیده در امتداد مرز گرد باشد. برای ظروف ساده پس‌زمینه، BoxDecoration با borderRadius کافی است — این کارایی بیشتری دارد، زیرا لایه برش جداگانه ایجاد نمی‌کند. Material Flutter ۳.۲۲+ از continuous corner radius از طریق ContinuousRectangleBorder پشتیبانی می‌کند.