درس تطبيقي في التعامل مع الUIPickerView
إصدار البرنامج المستخدم : xcode 9
السلام عليكم
في هذا الدرس سنوضح طريقة التعامل الUIPickerView في برنامج الxcode و هي أحد الأدوات المهمة التي تستخدم لتوفير عدد من الخيارات للمستخدم ليختار أحدها. و أحد أهم أنواعها الرئيسية هو الUIDatePicker الذي يستخدم لاختيار التاريخ أو الوقت.
و حتى تكون طريقة استخدام الpicker view واضحة فإننا سنقوم بعمل تطبيق يقوم بتغيير قيم ال rgb : red - green - blue للشاشة
و الrgb هي القيم الأساسية للون الأحمر والأزرق و الأخضر و أي لون هو في الحقيقة حاصل دمج قيم العناصر الأساسية هذه، و بالتالي فأن تغيير قيم أحد العناصر الثلاثة هذه يعني تغيير درجة اللون.
إن لم تكن تعلم مسبقا ذلك فريما يبدو الكلام فيه شيء من الغموض، لكن الفكرة ستكون واضحة عند الانتهاء من العمل.
إذا لنبدأ..
- في البداية قم بإنشاء مشروع xcode جديد..
- قم بإدراج عنصر الUIPickerView من النافذة في الزاوية السفلية على اليمين
- قم بإضافة الconstraints كما هو موضح في الصورة..
- قم بعمل outlet للpickerview في ملف الviewController ليكون بإمكانك التحكم به
- الآن سنقوم بإسناد الdelegate و الdatasource لهذا الinstance من الViewController و لذلك قم بعمل ذلك في الviewDidLoad
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
pickerVeiw.delegate = self
pickerVeiw.dataSource = self
}-- ملاحظة : إذا لم تكن تعلم ما هو الdelegate و الdatasource فبإمكانك مراجعة درس الtableview في الرابط التالي حيث أن العملية مطابقة تماما للعملية في الtableview
- الآن سيظهر البرنامج خطأ لأن الviewController ليس أوبجكت من نوع UIPickerViewDelegate و لا من نوع UIPickerViewDataSource و لذلك قم بإضافة الكود التالي لبداية تعريف الكلاس ليبدو كذلك :
class ViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {
......
}
- الآن سيـظهر خطأ آخر بسبب عدم تنفيذ الfunctions الخاصة بالdatasource حيث أن هذه الfunctions إجبارية و ليست اختيارية - optional- لذلك قم بإضافة الكود التالي إلى داخل الكلاس :
//1
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 3
}
//2
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
return 256
}
//3
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
return "color"
}1- الدالة الأولى تستخدم لتحديد عدد الأعمدة في الpickerview و لأننا سنحتاج ٣ أعمدة ( للأخضر و الأحمر و الأزرق ) قمنا بإرجاع ٣
2- الدالة الثانية تستخدم لتحديد عدد الصفوف في كل عمود، و حيث أن كل لون تتفاوت درجاته من 0 - 255 قمنا بإرجاع 256
3- و أخيرا.. الدالة الأخيرة تستخدم لتحديد العنوان الذي سيظهر لكل صف، و مبدئيا وضعنا color لتكون عنوان لكل الصفوف و سنقوم بتغييرها بعد ذلك..
-الآن قم بعمل run و شاهد النتيجة ليتضح لك الكلام أعلاه.
و الآن يفترض أن تكون عنواين الصفوف هي القيم الخاصة بالألوان من 0-256 و لعمل ذلك قم بإضافة الكود التالي..
class ViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {
//1
var values=[Int]();
....
override func viewDidLoad() {
super.viewDidLoad()
//2
for i in 0...256 {
values.append(i)
}
// Do any additional setup after loading the view, typically from a nib.
pickerVeiw.delegate = self
pickerVeiw.dataSource = self
}
}
1- في البداية قمنا بعمل array باسم values و التي ستمثل datasource للpickerview
2- قمنا بملء هذه الarray في الviewDidLoad بالقيم من 0-256 حيث أنه من الصعب ملؤها يدويا
و الآن قم بتعديل الfunctions الخاصة بالpickerview لتبدو كالتالي :
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 3
}
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
return values.count
}
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
return String(values[row]);
}الآن قمنا بإرجاع عدد الصفوف ليكون مساويا لعدد العناصر في الarray ( بحيث إذا قمت بالتعديل على القيم في الarray فإن عدد الصفوف سيتعد تلقائيا معها )
و قمنا كذلك بجعل عناوين الصفوف تساوي العناوين الموجودة في الarray و هي القيم من 0-256 و قمنا بتحويلها إلى String
و الآن قم بتشغيل البرنامج و شاهد النتيجة
- الآن نريد تغيير لون خلفية شاشة التطبيق متى ما تم تغيير قيمة في الpickerview بحيث تقرأ هذه القيمة وتقوم بتعديل إما عنصر الأحمر أو الأخضر أو الأزرق حسب العنصر الذي تم تغييره و هذا يتم عن طريق استخدام الدالة : didSelectRow - inComponent و التي يتم استدعاؤها متى ما تم تغيير أو تحديد القيمة في الpickerView لذا قم بإضافة الكود التالي داخل الكلاس :
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
//1
let red = pickerView.selectedRow(inComponent: 0)
let green = pickerView.selectedRow(inComponent: 1)
let blue = pickerView.selectedRow(inComponent: 2)
//2
self.view.backgroundColor = UIColor(red: CGFloat(Double(red)/255), green: CGFloat(Double(green)/255), blue:CGFloat(Double(blue)/255), alpha: 1)
}1- في البداية قمنا بتحديد قيمة اللون الأحمر لتكون رقم الصف المحدد في العمود الأول من الpickerview عن طريق استخدام الfunction التي تسمى selectedRow حيث أن القيمة المرجعة هي ترتيب الصف حسب العمود الذي تحدده في البارامتر الخاص بهذه الfunction
2- قمنا بعمل نفس الشيء للحصول على قيم اللون الأزرق و الأخضر
3- قمنا بتغيير لون خلفية الview بناء على قيم الpickerview للعناصر الثلاثة ( الأحمر و الأزرق و الأخضر )
-- لاحظ أننا قمنا بتقسيم القيم على 256 و ذلك بسبب أن درجة اللون في الUIColor يجب أن تعرف في القيم ما بين 0-1 و بالتالي فإن القيم التي تكون أكبر من 1 ستعتبر مساوية لل1 و لن تلاحظ وجود أي فرق في هذه الحالة في اللون حيث أن أي تغيير في قيم الpickerview في هذه الحالة هو ليس إلا تغيير للقيمة من ١ إلى ١ و لذلك فإن الحل هو تقسيم هذه القيمة على أقصى قيمة ممكنة في درجات اللون و هي 256 و بالتالي سنحصل على قيم من 0 -1
-- لاحظ أننا قمنا بتحويل القيم في البداية إلى double و ذلك لأنها في الأصل من نوع Int و عند تقسيم الInt على أي رقم أكبر منه يساوي 0 و لذلك يجب تحويلها إلى double لتفادي ذلك
-- أخيرا.. قيم الألوان يجب أن تكون من نوع CGFloat لذلك قمنا قمنا بتحويل القيمة النهائية إلى هذا النوع و إلا سيظهر البرنامج وجود خطأ لعدم تناسب الأنواع
-الآن قم بتشغيل التطبيق و ابدأ بتغيير القيم و ستلاحظ أن لون الخلفية يتغير حسب تغييرك لها 
إلى هنا نصل إلى نهاية هذا الدرس و إلى لقاء قريب في درس جديد
التعليقات (0)
لايوجد لديك حساب في عالم البرمجة؟
تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !