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) แนะนำ 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("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 ตั้งแต่ iOS 7 ต่างจากรัศมีแบบคลาสสิก (วงกลม) รัศมีต่อเนื่องสร้างการปัดมุมที่นุ่มนวลกว่าโดยใช้เส้นโค้ง Bezier อันดับสามแทนส่วนโค้งของวงกลม SwiftUI รองรับสไตล์นี้ผ่านพารามิเตอร์ style: .continuous ใน RoundedRectangle Apple แนะนำ continuous corner radius สำหรับองค์ประกอบระบบทั้งหมดเนื่องจากดูเป็นธรรมชาติมากกว่า

Corner radius ใน Android: shape และ Compose

บน Android การปัดมุมถูกใช้งานแบบดั้งเดิมผ่านทรัพยากร XML shape ในโฟลเดอร์ res/drawable 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 การปัดมุมถูกตั้งค่าผ่านพารามิเตอร์ 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 = "Card ที่มีการปัดมุมแบบกำหนดเอง")
}

MaterialShapeDrawable ในระบบ View ของ Android อนุญาตให้เปลี่ยน corner radius แบบไดนามิกโดยไม่ต้องสร้าง drawable ใหม่ ใช้ ShapeAppearanceModel สำหรับการกำหนดค่าที่แม่นยำ: ตั้งค่า cornerFamily (rounded หรือ cut) และ cornerSize สำหรับแต่ละมุมแยกกัน

วิธีเลือก corner radius ที่เหมาะสม

การเลือก corner radius ขึ้นอยู่กับประเภทขององค์ประกอบ บริบทการใช้งาน และแพลตฟอร์ม ไม่มีกฎสากล แต่ Material Design และ Apple HIG ให้คำแนะนำที่ชัดเจนสำหรับส่วนประกอบมาตรฐาน หลักการสำคัญ: การปัดมุมควรสังเกตเห็นได้แต่ไม่ควรรบกวนเนื้อหา

กฎความแตกต่าง: องค์ประกอบที่มี 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