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) سسٹم عناصر (UIButton، UITextField) کے لیے 10–12 pt کا یکساں corner radius اور موڈل پریزنٹیشنز کے لیے 20+ pt تجویز کرتا ہے۔

iOS پر Corner radius: CALayer اور SwiftUI

iOS پر، کونے کی گولائی CALayer کی cornerRadius خاصیت کے ذریعے لاگو کی جاتی ہے۔ UIKit میں، ہر UIView کی ایک پرت ہوتی ہے جس کا cornerRadius سیٹ کیا جا سکتا ہے۔ زیادہ پیچیدہ گولائی (مختلف کونوں کے لیے مختلف رداس) کے لیے، UIBezierPath کے ساتھ maskedCorners اور CACornerMask استعمال کیا جاتا ہے۔

// UIKit: CALayer کے ذریعے گولائی
import UIKit

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

SwiftUI میں، گولائی cornerRadius() موڈیفائر یا RoundedRectangle کے ساتھ ClipShape کے ذریعے سیٹ کی جاتی ہے۔ SwiftUI clipped() اور overlay() کے ساتھ UIRectCorner کے ذریعے انفرادی کونے کی گولائی کو بھی سپورٹ کرتا ہے۔

// 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 7 سے iOS میں استعمال کر رہا ہے۔ کلاسیکی رداس (دائرہ نما) کے برعکس، مسلسل رداس ایک دائرہ نما قوس کی بجائے تیسرے درجے کے Bezier منحنی کا استعمال کرکے ہموار گولائی پیدا کرتا ہے۔ SwiftUI RoundedRectangle میں style: .continuous پیرامیٹر کے ذریعے اس اسٹائل کو سپورٹ کرتا ہے۔ Apple تمام سسٹم عناصر کے لیے continuous corner radius تجویز کرتا ہے کیونکہ یہ بصری طور پر زیادہ قدرتی ہے۔

Android میں Corner radius: shape اور Compose

Android میں، کونے کی گولائی روایتی طور پر res/drawable فولڈر میں XML shape وسائل کے ذریعے لاگو کی جاتی ہے۔ 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 میں، گولائی Modifier کے shape پیرامیٹر کے ذریعے سیٹ کی جاتی ہے۔ Compose ہر کونے اور اسٹائل (CircularShape یا CutCornerShape) کے لیے مختلف رداس کی حمایت کے ساتھ RoundedCornerShape فراہم کرتا ہے۔ Compose گرافک اسٹروک کے ساتھ RoundedCornerShape کے ذریعے continuous corner radius کو بھی سپورٹ کرتا ہے۔

// 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")
}

Android View سسٹم میں MaterialShapeDrawable drawable کو دوبارہ بنائے بغیر corner radius کو متحرک طور پر تبدیل کرنے کی اجازت دیتا ہے۔ عین مطابق ترتیب کے لیے ShapeAppearanceModel استعمال کریں: ہر کونے کے لیے علیحدہ طور پر cornerFamily (rounded یا cut) اور cornerSize سیٹ کریں۔

صحیح corner radius کا انتخاب کیسے کریں

Corner radius کا انتخاب عنصر کی قسم، استعمال کے سیاق و سباق اور پلیٹ فارم پر منحصر ہے۔ کوئی عالمگیر اصول نہیں ہے، لیکن Material Design اور Apple HIG معیاری اجزاء کے لیے واضح سفارشات فراہم کرتے ہیں۔ بنیادی اصول: گولائی قابل توجہ ہونی چاہیے لیکن مواد میں مداخلت نہیں کرنی چاہیے۔

کنٹراسٹ قاعدہ: ایک ہی انٹرفیس میں مختلف corner radius والے عناصر میں کم از کم 4 dp کا فرق ہونا چاہیے تاکہ بصری فرق نمایاں ہو۔ ایک اسکرین پر 3 سطحوں کی گولائی استعمال نہ کریں — یہ بصری شور پیدا کرتا ہے۔ Material Design 3 فی اسکرین دو سے زیادہ سطحوں کی گولائی استعمال نہ کرنے کی سفارش کرتا ہے: ایک کنٹینرز (کارڈز، ڈائیلاگز) کے لیے اور ایک انٹرایکٹو عناصر (بٹن، فیلڈز) کے لیے۔

Flutter میں Corner radius

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('کسٹم کونے کی گولائی'),
)

// Image کے ساتھ ClipRRect
ClipRRect(
    borderRadius: BorderRadius.circular(12.0),
    child: Image.network(
        'https://example.com/image.jpg',
        fit: BoxFit.cover,
    ),
)

Flutter میں ClipRRect اس وقت استعمال ہوتا ہے جب آپ کو کسی تصویر یا پیچیدہ ویجیٹ کو گول بارڈر کے ساتھ کراپ کرنے کی ضرورت ہو۔ سادہ پس منظر کنٹینرز کے لیے، borderRadius کے ساتھ BoxDecoration کافی ہے — یہ زیادہ موثر ہے کیونکہ یہ علیحدہ کراپنگ پرت نہیں بناتا۔ Material Flutter 3.22+ ContinuousRectangleBorder کے ذریعے continuous corner radius کو سپورٹ کرتا ہے۔