Corner Radius — шта је то, радијус заобљења у мобилним апликацијама

Шта је corner radius?

Corner radius — нумеричка вредност која одређује степен заобљења углова правоугаоног елемента. Што је вредност већа, угао постаје заобљенији. При вредности 0 угао остаје прав (90°), при вредности једнакој половини краће странице, елемент се претвара у круг (за квадрат) или заобљени правоугаоник са правим страницама (капсула).

У мобилном дизајну corner radius се користи за: картице и плочице, дугмад, поља за унос, модалне прозоре, слике и аватаре, индикаторе напретка, чипове и беџеве. Сваки тип елемента има препоручени опсег заобљења, заснован на смерницама Material Design и Human Interface Guidelines.

Према Material Design 3 (Google, 2026), заобљавање углова се класификује на три нивоа: small (4 dp) за дугмад и поља за унос, medium (8–12 dp) за картице и листове, large (16–28 dp) за дијалоге и bottom sheet-ове. HIG Apple (2025) препоручује јединствени corner radius 10–12 pt за системске елементе (UIButton, UITextField) и 20+ pt за модалне презентације.

Corner radius на iOS: CALayer и SwiftUI

На iOS заобљавање углова се реализује кроз својство cornerRadius у CALayer. У UIKit, сваки UIView има слој код којег се може подесити cornerRadius. За сложенија заобљења (различити радијуси за различите углове) користе се maskedCorners и CACornerMask у комбинацији са UIBezierPath.

// UIKit: заобљавање кроз CALayer
import UIKit

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

У SwiftUI заобљење се поставља кроз модификатор cornerRadius() или кроз ClipShape са RoundedRectangle. SwiftUI такође подржава индивидуално заобљавање углова кроз UIRectCorner у комбинацији са clipped() и overlay().

// SwiftUI: заобљавање кроз RoundedRectangle
import SwiftUI

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

// Индивидуално заобљавање углова
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radius — стил заобљавања који Apple користи у iOS од изласка iOS 7. За разлику од класичног радијуса (circular), continuous radius ствара глаткије заобљење коришћењем Безијерове криве трећег реда уместо лука круга. SwiftUI подржава овај стил кроз параметар style: .continuous у RoundedRectangle. Apple препоручује continuous corner radius за све системске елементе као визуелно природнији.

Corner radius у Android-у: shape и Compose

У Android-у заобљавање углова се традиционално реализује кроз XML shape ресурсе у фолдеру res/drawable. Shape дефинише облик позадине са параметрима cornerRadius и solid. За различите углове користе се <, bottom, top и <right. У 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 заобљење се поставља кроз параметар shape у Modifier-у. Compose пружа RoundedCornerShape са подршком за различите радијусе за сваки угао и стил (CircularShape или CutCornerShape). Compose такође подржава continuous corner radius кроз RoundedCornerShape у комбинацији са графичким контуром.

// 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 = "Картица са прилагођеним заобљењем")
}

MaterialShapeDrawable у Android View System омогућава динамичку промену corner radius без поновног креирања drawable-а. Користите ShapeAppearanceModel за прецизно подешавање: подесите cornerFamily (rounded или cut) и cornerSize за сваки угао понаособ.

Како изабрати прави corner radius

Избор corner radius зависи од типа елемента, контекста употребе и платформе. Не постоји универзално правило, али Material Design и HIG Apple дају јасне препоруке за стандардне компоненте. Основни принцип: заобљење треба да буде приметно, али не и да омета садржај.

Правило контраста: елементи са различитим corner radius у једном интерфејсу треба да се разликују за најмање 4 dp да би визуелна разлика била приметна. Немојте користити 3 нивоа заобљења на једном екрану — то ствара визуелни шум. Material Design 3 препоручује коришћење највише два нивоа заобљења на екрану: један за контејнере (картице, дијалози) и један за интерактивне елементе (дугмад, поља).

Corner radius у Flutter-у

У 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('Прилагођено заобљавање углова'),
)

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

ClipRRect у Flutter-у се користи када је потребно обрезати слику или сложени виџет по заобљеној ивици. За једноставне позадинске контејнере довољан је BoxDecoration са borderRadius — то је перформантније јер не ствара посебан слој за обрезивање. Material Flutter 3.22+ подржава continuous corner radius кроз ContinuousRectangleBorder.