iOS UI Navigation Bar

เคยสงสัยไหม Navigation bar color กับ color ที่เราใช้ view อื่น ๆ สีไม่เหมือนกันทั้ง ๆ ที่ code สีเดียวกัน

หรืออาจจะเป็นเพราะ break line ของ navigation bar

มาลองลบ break line ออกหน่อยดีกว่า

navigationController?.navigationBar.shadowImage = UIImage()

ยิ่งเห็นชัดเลยว่า color ต่างกันชัดเจน ลองทดลองคำสั่งด้านล่างต่อกัน

navigationController?.navigationBar.isTranslucent = false

🎉 🎉 🎉 เกิดจาก Translucent และ Break line นี้เองที่ทำให้ navigation color กับ view color สีต่างกัน

และเราสามารถ set navigation background ได้ โดย concept มันคือให้แปลง Color เป็น image จากนั้น set เข้ากับ backgroundImage ของ navigation และตัว navigation translucent มันจะเป็น false เอง

let image = UIImage(color: bgColor)
navigationController?.navigationBar.setBackgroundImage(image, for: .default)
navigationController?.navigationBar.shadowImage = UIImage()

เพิ่ม Extension เข้ากับ UIImage

extension UIImage {
     convenience init?(color: UIColor, size: CGSize = CGSize(width: 1, height: 1)) {
       let rect = CGRect(origin: .zero, size: size)
       UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
       color.setFill()
       UIRectFill(rect)
       let image = UIGraphicsGetImageFromCurrentImageContext()
       UIGraphicsEndImageContext()
       guard let cgImage = image?.cgImage else { return nil }
       self.init(cgImage: cgImage)
    }
}