วิธีปรับแต่งปุ่ม (Button) บน iOS: ตั้งข้อความ สีพื้นหลัง และสีตัวอักษร

การปรับแต่ง UIButton บน iOS 2 วิธี

บทความนี้สาธิตการเปลี่ยนข้อความ สีพื้นหลัง และสีตัวอักษรของปุ่ม ด้วย Storyboard และโค้ด

ขั้นตอนที่ 1: สร้างโปรเจกต์

Xcode → Single View App → ชื่อ "CustomiseButton"

ขั้นตอนที่ 2: เพิ่ม Button ใน Storyboard

ลาก Button มาวางบน View Controller

วิธีที่ 1: ปรับแต่งผ่าน Storyboard (Attribute Inspector)

1. คลิกที่ Button
2. เปิด Attribute Inspector (แท็บขวาบน)
3. แก้ไข:
   • Title: ข้อความบนปุ่ม
   • Text Color: สีตัวอักษร
   • Background: สีพื้นหลัง
   • Font: ขนาด/สไตล์ตัวอักษร
4. รันโปรเจกต์ → ดูผลลัพธ์ทันที

วิธีที่ 2: ปรับแต่งด้วยโค้ด (Programmatically)

ขั้นตอน 1: สร้าง IBOutlet

@IBOutlet weak var customButton: UIButton!

ขั้นตอน 2: ตั้งค่าใน viewDidLoad

override func viewDidLoad() {
    super.viewDidLoad()
    
    customButton.setTitle("My Custom Button", for: .normal)
    customButton.backgroundColor = .systemGreen // หรือ UIColor.green
    customButton.setTitleColor(.white, for: .normal) // สีตัวอักษร
    customButton.titleLabel?.font = .systemFont(ofSize: 18, weight: .semibold)
    customButton.layer.cornerRadius = 8 // มุมโค้ง (optional)
}

สถานะต่างๆ ของปุ่ม (Control States)

สามารถตั้งค่าแยกแต่ละสถานะได้:

• .normal - ปกติ
• .highlighted - กำลังถูกกด
• .disabled - ปิดใช้งาน
• .selected - ถูกเลือก

customButton.setTitle("Pressed", for: .highlighted)
customButton.setTitleColor(.gray, for: .disabled)

ขั้นตอนที่ 3: รันและทดสอบ

ปุ่มจะแสดงตามรูปแบบที่กำหนดในโค้ด