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 সমর্থন করে।