iOS UITextField’s Placeholder customisation

วันนี้ว่ากันด้วยเรื่อง การ Custom การแสดงผลของ UITextField แบบที่มันเกินปกติไป “นิดหน่อย” ผมเขียน Article นี้จากที่ต้องใช้ในงานจริง และเห็นว่าน่าสนใจดีด้วย …เริ่มเลยแล้วกัน

เปลี่ยนสี UITextField PlaceHolder

เปลี่ยนสี TextColor ใน TextField เป็นเรื่องธรรมดาๆ เปลี่ยนได้ทั้งใน StoryBoard และ Coding แต่การเปลี่ยนสี PlaceHolder อันนี้ต้องมี Trick นิดหน่อย

Place Holder คือคำที่ขึ้นไว้เพื่ออธิบายการกรอกข้อมูลใน Field นั้นๆ ปกติก็เป็นตัวจางๆ ที่จะหายไปตอนที่ User เริ่มกดพิมพ์ใน Field ซึ่งปกติส่วนใหญ่ก็เห็นจะใช้สี default กันหมดที่เป็นสีดำ transparent นั่นแหละ แต่คราวนี้ถ้าอยาก Custom เป็นสีอื่นละทำไง? ดูจาก Code ด้านล่างครับ

extension UITextField {
public override func drawPlaceholderInRect(rect: CGRect) {
let newColor = UIColor(white: 1, alpha: 0.4)
let range = NSMakeRange(0, self.attributedPlaceholder!.length)
    var mutatedAttributedPlaceholder = NSMutableAttributedString(attributedString: self.attributedPlaceholder!)
    mutatedAttributedPlaceholder.setAttributes([ NSForegroundColorAttributeName : newColor ], range: range)
    self.attributedPlaceholder = mutatedAttributedPlaceholder
super.drawPlaceholderInRect(rect)
}
}

ทำได้โดยการ override method ของ UITextField ที่ชื่อว่า -drawPlaceholderInRect: ส่วนการทำงานก็ไปดึง TextFiled PlaceHolder จาก method ที่ชื่อว่า -attributedPlaceholder ซึ่ง Type จะเป็น NSAttributedString มาแปลงค่าตามที่เราต้องการ

การแปลงค่า เราจะเอา attributedString ที่ได้มาสร้างใหม่ แต่ให้เป็น NSMutableAttributedString เพื่อให้เราปรับเปลี่ยนค่าได้ด้วย อยากเปลี่ยนอะไรก็เซตด้วยคำสั่ง -setAttributes ได้เลย อย่างในโค้ด จะเป็นการเปลี่ยนสีเป็นสีขาว Transparent แต่ถ้าอยากให้เป็นอย่างอื่นด้วย เช่น ขีดเส้นใต้, เปลี่ยน Font, ปรับขนาด, ฯลฯ ก็ทำได้เช่นกัน ปรับเสร็จแล้วก็เซตกลับเข้าไปที่ property เดิมที่ get มาได้ และสั่งคำสั่ง -drawPlaceholderInRect: ขอตัวเองให้ทำงานไปตามปกติ !!เสร็จแล้ว :)

วิธีการ override class แบบนี้ เหมาะสำหรับการทำกรณีที่เราต้องการเปลี่ยนทั้งแอพนะครับ จะดีกว่ามาเซตให้ TextField ทีละตัว เพราะนอกจากเยอะแล้ว โค้ดก็รกและซ้ำซ้อนด้วย ทั้งนี้ก็ขึ้นกับลักษณะงานนะครับ :)

เกี่ยวกับ UITextField ยังมีการ Config แบบอื่นๆอยู่อีก ซึ่งจะเขียนต่อไปใน Entry ต่อๆไปแล้วกัน

Happy Coding ครับ

ปล. Source code เอาขึ้น gist ไว้ให้แล้วครับ