Corner Radius — ما هو نصف قطر التدوير في تطبيقات الجوال

ما هو corner radius؟

Corner radius هو قيمة رقمية تحدد درجة تدوير زوايا عنصر مستطيل. كلما زادت القيمة، أصبحت الزاوية أكثر استدارة. عند القيمة 0، تظل الزاوية قائمة (90°)؛ عند القيمة المساوية لنصف الجانب الأقصر، يتحول العنصر إلى دائرة (للمربع) أو مستطيل مستدير بجوانب مستقيمة (كبسولة).

في تصميم الجوال، يُستخدم corner radius لـ: البطاقات والبلاطات، الأزرار، حقول الإدخال، النوافذ المشروطة، الصور والصور الرمزية، مؤشرات التقدم، الرقاقات والشارات. كل نوع عنصر له نطاق موصى به من التدوير بناءً على إرشادات Material Design وHuman Interface Guidelines.

وفقًا لـ Material Design 3 (Google، 2026)، يُصنف تدوير الزوايا إلى ثلاثة مستويات: صغير (4 dp) للأزرار وحقول الإدخال، متوسط (8–12 dp) للبطاقات والأوراق، كبير (16–28 dp) للحوارات ولوحات القاع. Apple HIG (2025) يوصي بـ corner radius موحد 10–12 pt لعناصر النظام (UIButton، UITextField) و20+ 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("Corner Radius 16")
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 16)
                .fill(Color.blue)
        )
}

// تدوير فردي للزوايا
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radius هو نمط تدوير تستخدمه Apple في iOS منذ iOS 7. على عكس نصف القطر الكلاسيكي (الدائري)، يخلق نصف القطر المستمر تدويرًا أكثر سلاسة باستخدام منحنى Bezier من الدرجة الثالثة بدلاً من قوس دائري. يدعم SwiftUI هذا النمط من خلال المعامل style: .continuous في RoundedRectangle. توصي Apple بـ continuous corner radius لجميع عناصر النظام كونه أكثر طبيعية بصريًا.

Corner radius في Android: shape وCompose

في Android، يتم تنفيذ تدوير الزوايا تقليديًا من خلال موارد XML shape في مجلد res/drawable. يحدد Shape شكل الخلفية بمعاملي cornerRadius وsolid. للزوايا المختلفة، يُستخدم <corners android:bottomLeftRadius="..." />. في 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 = "Card بتدوير مخصص")
}

MaterialShapeDrawable في نظام View في Android يسمح بتغيير corner radius ديناميكيًا دون إعادة إنشاء drawable. استخدم ShapeAppearanceModel للتكوين الدقيق: عيِّن cornerFamily (rounded أو cut) وcornerSize لكل زاوية على حدة.

كيفية اختيار corner radius المناسب

اختيار corner radius يعتمد على نوع العنصر وسياق الاستخدام والمنصة. لا توجد قاعدة عالمية، لكن Material Design وApple HIG يقدمان توصيات واضحة للمكونات القياسية. المبدأ الرئيسي: يجب أن يكون التدوير ملحوظًا لكن لا يتداخل مع المحتوى.

قاعدة التباين: العناصر ذات corner radius المختلفة في نفس الواجهة يجب أن تختلف بما لا يقل عن 4 dp ليكون الفرق البصري ملحوظًا. لا تستخدم 3 مستويات من التدوير في شاشة واحدة — هذا يخلق ضوضاء بصرية. يوصي 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 3.22+ يدعم continuous corner radius عبر ContinuousRectangleBorder.