Corner Radius — τι είναι, ακτίνα στρογγυλοποίησης σε εφαρμογές κινητών

Τι είναι το corner radius;

Corner radius — μια αριθμητική τιμή που καθορίζει τον βαθμό στρογγυλοποίησης των γωνιών ενός ορθογώνιου στοιχείου. Όσο υψηλότερη είναι η τιμή, τόσο πιο στρογγυλεμένη γίνεται η γωνία. Στην τιμή 0 η γωνία παραμένει ορθή (90°), στην τιμή ίση με το μισό της μικρότερης πλευράς, το στοιχείο μετατρέπεται σε κύκλο (για τετράγωνο) ή σε στρογγυλεμένο ορθογώνιο με ευθείες πλευρές (κάψουλα).

Στον σχεδιασμό κινητών, το corner radius χρησιμοποιείται για: κάρτες και πλακίδια, κουμπιά, πεδία εισαγωγής, modal παράθυρα, εικόνες και avatar, δείκτες προόδου, τσιπ και σήματα. Κάθε τύπος στοιχείου έχει ένα συνιστώμενο εύρος στρογγυλοποίησης, βασισμένο στις οδηγίες Material Design και Human Interface Guidelines.

Σύμφωνα με το Material Design 3 (Google, 2026), η στρογγυλοποίηση γωνιών ταξινομείται σε τρία επίπεδα: small (4 dp) για κουμπιά και πεδία εισαγωγής, medium (8–12 dp) για κάρτες και φύλλα, large (16–28 dp) για διαλόγους και bottom sheets. HIG Apple (2025) συνιστά ενιαίο corner radius 10–12 pt για στοιχεία συστήματος (UIButton, UITextField) και 20+ pt για modal παρουσιάσεις.

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 η στρογγυλοποίηση ορίζεται μέσω του modifier cornerRadius() ή μέσω ClipShape με RoundedRectangle. Το SwiftUI υποστηρίζει επίσης μεμονωμένη στρογγυλοποίηση γωνιών μέσω UIRectCorner σε συνδυασμό με clipped() και overlay().

// SwiftUI: στρογγυλοποίηση μέσω RoundedRectangle
import SwiftUI

VStack {
    Text("Ακτίνα γωνίας 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 δημιουργεί πιο ομαλή στρογγυλοποίηση χρησιμοποιώντας καμπύλη Bezier τρίτης τάξης αντί για τόξο κύκλου. Το 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 δίνουν σαφείς συστάσεις για τυπικά components. Η βασική αρχή: η στρογγυλοποίηση πρέπει να είναι αισθητή, αλλά να μην εμποδίζει το περιεχόμενο.

Κανόνας αντίθεσης: στοιχεία με διαφορετικό corner radius σε μια διεπαφή πρέπει να διαφέρουν τουλάχιστον κατά 4 dp για να είναι αισθητή η οπτική διαφορά. Μην χρησιμοποιείτε 3 επίπεδα στρογγυλοποίησης σε μία οθόνη — αυτό δημιουργεί οπτικό θόρυβο. Το Material Design 3 συνιστά τη χρήση όχι περισσότερων από δύο επιπέδων στρογγυλοποίησης ανά οθόνη: ένα για δοχεία (κάρτες, διάλογοι) και ένα για διαδραστικά στοιχεία (κουμπιά, πεδία).

Corner radius στο Flutter

Στο Flutter η στρογγυλοποίηση γωνιών υλοποιείται μέσω της κλάσης BorderRadius, η οποία δέχεται τιμές Radius.circular() ή Radius.elliptical(). Το Flutter υποστηρίζει μεμονωμένη στρογγυλοποίηση μέσω BorderRadius.only() και BorderRadius.horizontal()/vertical(). Το widget 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 χρησιμοποιείται όταν χρειάζεται να κοπεί μια εικόνα ή σύνθετο widget κατά μήκος στρογγυλεμένου περιγράμματος. Για απλά δοχεία φόντου, το BoxDecoration με borderRadius είναι αρκετό — είναι πιο αποδοτικό επειδή δεν δημιουργεί ξεχωριστό επίπεδο κοπής. Το Material Flutter 3.22+ υποστηρίζει continuous corner radius μέσω ContinuousRectangleBorder.