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 System में 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 का समर्थन करता है।