Corner Radius — ano ito, radius ng pagbilog sa mga mobile app

Ano ang corner radius?

Corner radius — isang numerikong halaga na tumutukoy sa antas ng pagbilog ng mga sulok ng isang parihabang elemento. Kung mas mataas ang halaga, mas nagiging bilog ang sulok. Sa halagang 0, ang sulok ay nananatiling tuwid (90°), sa halagang katumbas ng kalahati ng mas maikling gilid, ang elemento ay nagiging bilog (para sa parisukat) o isang bilugang parihaba na may tuwid na mga gilid (kapsula).

Sa mobile design, ang corner radius ay ginagamit para sa: mga card at tile, mga buton, mga field ng input, mga modal window, mga larawan at avatar, mga indicator ng progreso, mga chip at badge. Ang bawat uri ng elemento ay may inirerekomendang saklaw ng pagbilog, batay sa mga alituntunin ng Material Design at Human Interface Guidelines.

Ayon sa Material Design 3 (Google, 2026), ang pagbilog ng mga sulok ay inuuri sa tatlong antas: small (4 dp) para sa mga buton at field ng input, medium (8–12 dp) para sa mga card at sheet, large (16–28 dp) para sa mga dialog at bottom sheet. HIG Apple (2025) ay nagrerekomenda ng pare-parehong corner radius na 10–12 pt para sa mga elemento ng system (UIButton, UITextField) at 20+ pt para sa mga modal presentation.

Corner radius sa iOS: CALayer at SwiftUI

Sa iOS ang pagbilog ng mga sulok ay isinasagawa sa pamamagitan ng property na cornerRadius sa CALayer. Sa UIKit, bawat UIView ay may layer kung saan maaaring itakda ang cornerRadius. Para sa mas kumplikadong pagbilog (iba't ibang radius para sa iba't ibang sulok) ay ginagamit ang maskedCorners at CACornerMask kasama ng UIBezierPath.

// UIKit: pagbilog sa pamamagitan ng CALayer
import UIKit

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

Sa SwiftUI ang pagbilog ay itinatakda sa pamamagitan ng modifier na cornerRadius() o sa pamamagitan ng ClipShape na may RoundedRectangle. Sinusuportahan din ng SwiftUI ang indibidwal na pagbilog ng sulok sa pamamagitan ng UIRectCorner kasama ng clipped() at overlay().

// SwiftUI: pagbilog sa pamamagitan ng RoundedRectangle
import SwiftUI

VStack {
    Text("Radius ng sulok 16")
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 16)
                .fill(Color.blue)
        )
}

// Indibidwal na pagbilog ng sulok
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radius — ang istilo ng pagbilog na ginagamit ng Apple sa iOS mula noong paglabas ng iOS 7. Hindi tulad ng klasikong radius (circular), ang continuous radius ay lumilikha ng mas makinis na pagbilog sa pamamagitan ng paggamit ng Bezier curve ng ikatlong order sa halip na arko ng bilog. Sinusuportahan ng SwiftUI ang istilong ito sa pamamagitan ng parameter na style: .continuous sa RoundedRectangle. Inirerekomenda ng Apple ang continuous corner radius para sa lahat ng elemento ng system bilang mas natural sa paningin.

Corner radius sa Android: shape at Compose

Sa Android ang pagbilog ng mga sulok ay tradisyonal na isinasagawa sa pamamagitan ng XML shape resources sa folder na res/drawable. Ang Shape ay tumutukoy sa hugis ng background na may mga parameter na cornerRadius at solid. Para sa iba't ibang sulok ay ginagamit ang <, bottom, top at <right. Sa Material Design 3 ay idinagdag ang MaterialShapeDrawable na may suporta para sa mga tema at dynamic na hugis.

<!-- 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>

Sa Jetpack Compose ang pagbilog ay itinatakda sa pamamagitan ng parameter na shape sa Modifier. Nagbibigay ang Compose ng RoundedCornerShape na may suporta para sa iba't ibang radius para sa bawat sulok at istilo (CircularShape o CutCornerShape). Sinusuportahan din ng Compose ang continuous corner radius sa pamamagitan ng RoundedCornerShape kasama ng graphical contour.

// Jetpack Compose: pagbilog sa pamamagitan ng 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 na may custom na pagbilog")
}

MaterialShapeDrawable sa Android View System ay nagbibigay-daan sa dynamic na pagbabago ng corner radius nang hindi muling nililikha ang drawable. Gamitin ang ShapeAppearanceModel para sa tumpak na configuration: itakda ang cornerFamily (rounded o cut) at cornerSize para sa bawat sulok nang hiwalay.

Paano pumili ng tamang corner radius

Ang pagpili ng corner radius ay depende sa uri ng elemento, konteksto ng paggamit at platform. Walang unibersal na patakaran, ngunit ang Material Design at HIG Apple ay nagbibigay ng malinaw na rekomendasyon para sa mga karaniwang component. Ang pangunahing prinsipyo: ang pagbilog ay dapat na kapansin-pansin, ngunit hindi makagambala sa nilalaman.

Panuntunan ng contrast: ang mga elementong may magkaibang corner radius sa isang interface ay dapat magkaiba ng hindi bababa sa 4 dp upang ang visual na pagkakaiba ay kapansin-pansin. Huwag gumamit ng 3 antas ng pagbilog sa isang screen — ito ay lumilikha ng visual na ingay. Inirerekomenda ng Material Design 3 ang paggamit ng hindi hihigit sa dalawang antas ng pagbilog bawat screen: isa para sa mga container (card, dialog) at isa para sa mga interactive na elemento (buton, field).

Corner radius sa Flutter

Sa Flutter ang pagbilog ng mga sulok ay isinasagawa sa pamamagitan ng klase na BorderRadius, na tumatanggap ng mga halaga na Radius.circular() o Radius.elliptical(). Sinusuportahan ng Flutter ang indibidwal na pagbilog sa pamamagitan ng BorderRadius.only() at BorderRadius.horizontal()/vertical(). Ang widget na ClipRRect ay pumuputol sa child element ayon sa ibinigay na BorderRadius.

// Flutter: pagbilog sa pamamagitan ng ClipRRect at 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('Custom na pagbilog ng sulok'),
)

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

ClipRRect sa Flutter ay ginagamit kapag kailangang putulin ang isang larawan o kumplikadong widget sa kahabaan ng bilugang hangganan. Para sa simpleng background container, ang BoxDecoration na may borderRadius ay sapat — ito ay mas mahusay dahil hindi ito lumilikha ng hiwalay na cutting layer. Ang Material Flutter 3.22+ ay sumusuporta sa continuous corner radius sa pamamagitan ng ContinuousRectangleBorder.