Corner Radius — bu nima, mobil ilovalarda yumaloqlash radiusi

Corner radius nima?

Corner radius — to'rtburchak element burchaklarining yumaloqlash darajasini belgilaydigan raqamli qiymat. Qiymat qanchalik yuqori bo'lsa, burchak shunchalik yumaloq bo'ladi. 0 qiymatida burchak to'g'ri (90°) qoladi, kichik tomonning yarmiga teng qiymatda element aylanaga (kvadrat uchun) yoki to'g'ri tomonlari bo'lgan yumaloq to'rtburchakka (kapsulaga) aylanadi.

Mobil dizaynda corner radius quyidagilar uchun ishlatiladi: kartalar va plitkalar, tugmalar, kiritish maydonlari, modal oynalar, tasvirlar va avatarlar, borish ko'rsatkichlari, chiplar va badge lar. Har bir element turi Material Design va Human Interface Guidelines ga asoslangan tavsiya etilgan diapazonga ega.

Material Design 3 (Google, 2026) ma'lumotlariga ko'ra, burchaklarni yumaloqlash uch darajaga bo'linadi: small (4 dp) tugmalar va kiritish maydonlari uchun, medium (8–12 dp) kartalar va varaqlar uchun, large (16–28 dp) dialoglar va bottom sheet lar uchun. HIG Apple (2025) tizim elementlari (UIButton, UITextField) uchun yagona corner radius 10–12 pt va modal taqdimotlar uchun 20+ pt tavsiya qiladi.

iOS da corner radius: CALayer va SwiftUI

iOS da burchaklarni yumaloqlash CALayer dagi cornerRadius xususiyati orqali amalga oshiriladi. UIKit da har bir UIView cornerRadius o'rnatilishi mumkin bo'lgan qatlamga ega. Murakkabroq yumaloqlashtirishlar (turli burchaklar uchun turli radiuslar) uchun UIBezierPath bilan birgalikda maskedCorners va CACornerMask ishlatiladi.

// UIKit: CALayer orqali yumaloqlash
import UIKit

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

SwiftUI da yumaloqlash cornerRadius() modifikatori yoki RoundedRectangle bilan ClipShape orqali o'rnatiladi. SwiftUI shuningdek clipped() va overlay() bilan birgalikda UIRectCorner orqali individual burchak yumaloqlashni qo'llab-quvvatlaydi.

// SwiftUI: RoundedRectangle orqali yumaloqlash
import SwiftUI

VStack {
    Text("Burchak radiusi 16")
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 16)
                .fill(Color.blue)
        )
}

// Individual burchak yumaloqlash
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radius — Apple tomonidan iOS 7 chiqarilishidan beri iOS da ishlatiladigan yumaloqlash uslubi. Klassik radiusdan (circular) farqli o'laroq, continuous radius aylana yoyi o'rniga uchinchi darajali Bezier egri chizig'idan foydalanib, silliqroq yumaloqlash yaratadi. SwiftUI bu uslubni RoundedRectangle da style: .continuous parametri orqali qo'llab-quvvatlaydi. Apple continuous corner radius ni barcha tizim elementlari uchun vizual jihatdan tabiiyroq deb tavsiya qiladi.

Android da corner radius: shape va Compose

Android da burchaklarni yumaloqlash an'anaviy ravishda res/drawable papkasidagi XML shape resurslari orqali amalga oshiriladi. Shape cornerRadius va solid parametrlari bilan fon shaklini belgilaydi. Turli burchaklar uchun <, bottom, top va <right ishlatiladi. Material Design 3 ga mavzular va dinamik shakllarni qo'llab-quvvatlaydigan MaterialShapeDrawable qo'shilgan.

<!-- 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 da yumaloqlash Modifier dagi shape parametri orqali o'rnatiladi. Compose har bir burchak uchun turli radiuslar va uslubni (CircularShape yoki CutCornerShape) qo'llab-quvvatlaydigan RoundedCornerShape ni taqdim etadi. Compose shuningdek grafik kontur bilan birgalikda RoundedCornerShape orqali continuous corner radius ni qo'llab-quvvatlaydi.

// Jetpack Compose: RoundedCornerShape orqali yumaloqlash
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 = "Maxsus yumaloqlash bilan karta")
}

MaterialShapeDrawable Android View System da drawable ni qayta yaratmasdan corner radius ni dinamik o'zgartirish imkonini beradi. Aniq sozlash uchun ShapeAppearanceModel dan foydalaning: har bir burchak uchun alohida cornerFamily (rounded yoki cut) va cornerSize ni o'rnating.

To'g'ri corner radius ni qanday tanlash kerak

Corner radius ni tanlash element turiga, foydalanish kontekstiga va platformaga bog'liq. Universal qoida yo'q, lekin Material Design va HIG Apple standart komponentlar uchun aniq tavsiyalar beradi. Asosiy printsip: yumaloqlash sezilarli bo'lishi kerak, lekin tarkibga xalaqit bermasligi kerak.

Kontrast qoidasi: bitta interfeysdagi turli corner radius ga ega elementlar vizual farq sezilarli bo'lishi uchun kamida 4 dp ga farq qilishi kerak. Bir ekranda 3 daraja yumaloqlashdan foydalanmang — bu vizual shovqin yaratadi. Material Design 3 ekranda ikkita darajadan ko'p bo'lmagan yumaloqlashni tavsiya qiladi: biri konteynerlar uchun (kartalar, dialoglar) va biri interaktiv elementlar uchun (tugmalar, maydonlar).

Flutter da corner radius

Flutter da burchaklarni yumaloqlash Radius.circular() yoki Radius.elliptical() qiymatlarini qabul qiladigan BorderRadius sinfi orqali amalga oshiriladi. Flutter BorderRadius.only() va BorderRadius.horizontal()/vertical() orqali individual yumaloqlashni qo'llab-quvvatlaydi. ClipRRect vidjeti berilgan BorderRadius bo'yicha bola elementni kesadi.

// Flutter: ClipRRect va Container orqali yumaloqlash
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('Maxsus burchak yumaloqlash'),
)

// ClipRRect bilan Image
ClipRRect(
    borderRadius: BorderRadius.circular(12.0),
    child: Image.network(
        'https://example.com/image.jpg',
        fit: BoxFit.cover,
    ),
)

ClipRRect Flutter da tasvir yoki murakkab vidjetni yumaloq chegara bo'ylab kesish kerak bo'lganda ishlatiladi. Oddiy fon konteynerlari uchun borderRadius bilan BoxDecoration yetarli — bu samaraliroq, chunki alohida kesuvchi qatlam yaratmaydi. Material Flutter 3.22+ ContinuousRectangleBorder orqali continuous corner radius ni qo'llab-quvvatlaydi.