تغيير لون الأيقونات في iOS وWatchKit: tintColor للمبتدئين

لماذا لا تريد الأيقونات تغيير لونها؟ التعرف على tintColor

تخيل: أنت تكتب تطبيقًا لـ iPhone أو Apple Watch. صمم المصمم مجموعة جميلة من الأيقونات السوداء. تضعها في UIImageView، وتطبق tintColor — ولا يحدث شيء. تظل الأيقونة سوداء كما كانت. هل هذا مألوف؟ هذا السؤال هو أحد أكثر الأسئلة شيوعًا على Stack Overflow، واليوم سنقوم بتحليله على المستوى الجزيئي.

المشكلة هي أن tintColor يعمل فقط مع الصور الموجودة في وضع Template Image. إذا قمت ببساطة بتعيين لون لصورة عادية (Original Image)، سيتجاهل النظام طلبك. دعنا نتعلم كيفية التحكم في هذه الآلية.

ما هو Template Image وما الغرض منه؟

في iOS وWatchKit، تنقسم جميع الصور إلى نوعين:

\n
• Original Image — صورة عادية بكل ألوانها. لا يمكن تلوينها عبر tintColor.
\n
• Template Image — صورة حيث يعتبر اللون هو قناة ألفا (الشفافية) فقط. تصبح جميع البكسلات المرئية "فارغة" — وهي جاهزة لقبول أي لون تحدده.
\n

عند تطبيق tintColor على Template Image، يقوم النظام بتعبئة جميع المناطق غير الشفافة باللون المحدد. هذا مثالي للأيقونات والأزرار وعناصر الواجهة التي يجب أن تتكيف مع سمة التطبيق.

طرق تغيير tintColor في iOS (Swift)

1. أسهل طريقة: عبر Interface Builder

إذا كنت تعمل في Storyboard أو XIB:

\n
1. اختر UIImageView أو UIButton الخاص بك.
\n
2. في مفتش الخصائص، ابحث عن حقل Render Mode.
\n
3. اضبطه على Template Image.
\n
4. الآن ستعمل خاصية Tint في المفتش.
\n

2. الطريقة البرمجية: كود Swift

إليك كيفية القيام بذلك بشكل صحيح:

// تحميل الصورة\nlet originalImage = UIImage(named: "myIcon")\n\n// تحويلها إلى Template\nlet templateImage = originalImage?.withRenderingMode(.alwaysTemplate)\n\n// تطبيقها على UIImageView\nimageView.image = templateImage\nimageView.tintColor = UIColor.systemBlue

الطريقة الأساسية هي withRenderingMode(.alwaysTemplate). تقول للنظام: "لا تهتم بالألوان الأصلية، سأقوم بتلوينها بنفسي".

3. تغيير اللون لـ UIButton

بالنسبة للأزرار، العملية مشابهة ولكن هناك فارق بسيط:

button.setImage(UIImage(named: "heart")?.withRenderingMode(.alwaysTemplate), for: .normal)\nbutton.tintColor = UIColor.red

لاحظ: نحن نطبق withRenderingMode مباشرة على الصورة التي نضبطها للزر.

خصائص tintColor في WatchKit

تطوير Apple Watch له قيوده الخاصة. في WatchKit لا يوجد UIImageView — بدلاً من ذلك يُستخدم WKInterfaceImage. وهنا يعمل tintColor بشكل مختلف.

النهج الصحيح لـ WatchKit

// في InterfaceController.swift\n@IBOutlet weak var watchImage: WKInterfaceImage!\n\noverride func awake(withContext context: Any?) {\n    super.awake(withContext: context)\n    \n    // تعيين الصورة\n    watchImage.setImage(UIImage(named: "watchIcon"))\n    \n    // تطبيق اللون\n    watchImage.setTintColor(UIColor.green)\n}

هام: الطريقة تُسمى setTintColor(_:)، وليس مجرد tintColor. ونعم، يجب أن تكون الصورة بتنسيق Template Image. في WatchKit يتم ذلك عبر السمة Render As في كتالوج الأصول.

مثال عملي: إنشاء أيقونة متكيفة

دعنا نجمع كل شيء معًا. لنفترض أن لدينا تطبيقًا مع تبديل بين السمة الداكنة والفاتحة. يجب أن تغير أيقونة الإعدادات لونها حسب السمة.

class SettingsView