مقدمة في الtableview مع الـ Swift

يعرب المصطفىمنذ 7 سنوات

في هذا الدرس سنتعلم كيفية التعامل مع الtableview مع الـ Swift و كيفية إنشائه و بنائه داخل تطبيقك.

في البداية ما هو الtableview ؟ 

الtableview هو أداة من أدوات واجهة المستخدم التي تستخدم لعرض البيانات من خلالها. و تحديدا تستخدم في عرض البيانات التي تكون على شكل مجموعة عناصر مثل قائمة بمحتويات مطعم أو أسماء لطلاب في مدرسة..الخ 

و الحقيقة أنه لا يكاد يتواجد تطبيق في متجر البرامج دون وجود tableview بما في ذلك التطبيقات الشهيرة كتطبيق facebook فكل البوستات الموجودة في الfacebook و التي تشاهدها في الصفحة الرئيسية عند فتح التطبيق ما هي إلا شرائح من هذا الtableview و كذلك في twitter و instegram... الخ.

و لذلك يعتبر الtableview أحد أهم الأدوات الموجودة في برنامج الxcode  و من أكثر الأدوات استخداما في بناء التطبيقات إن لم يكن أكثرها لذلك من المهم لمبرمج التطبيقات أن يتعلم طريقة إنشائه و التعامل معه في التطبيق و ما سنقوم بعمله في هذا الدرس هو عرض قائمة لأسماء طلاب في الtableview و لذلك فلنبدأ...

 

في البداية قم بفتح الإكسكود و قم بعمل باختيار create new xcode project ثم single view application و قم بتسميته و حفظه.

1.png

 

2.png

 

 

الآن قم بالتوجه إلى الMain.storyboard لإضافة الtableview إلى تطبيقك.

لإدراج الtableview توجه إلى مكتبة العناصر الموجودة على اليسار و قم بالبحث عن tableview كما ثم اسحبه إلى الشاشة كما هو موضح في الصور.

ملاحظة: تأكد من سحبك لعنصر الtableview و ليس لعنصر الtableview controller  

4.png
 

 

 

الآن قم بتعديل حجم الtableview ليملأ الشاشة بأكملها 

5.png

 

قم بإضافة الconstraints كما هو موضح في الصورة

إذا كنت لا تعلم ما هي الconstraints فيمكنك تجاهلها الآن، و لكنها باختصار طريقة لإظهار الui أو عناصر واجهة المستخدم كالtableview بشكل مناسب في جميع الشاشات المختلفة الحجم.

6.png

 

الآن تم إضافة الtableview إلي التطبيق يمكنك عمل run و تشغيل التطبيق الآن،

ستلاحظ وجود جدول محتويات بخلايا فارغة و الآن سنقوم بإكمال العملية لملء هذه الخانات ببيانات معينة: 

7.png
 

إن الview controller الموجودة في الstoryboard و التي قمنا بإضافة الtableview إليها تمتلك ملف برمجي متصل بها يمكنك من كتابة الأكواد الخاصة بهذا الview controller بداخله و حتى تعرف ما هو هذا الملف البرمجي قم بالضغط على الدائرة الصفراء في زاوية الشريط العلوي للview controller ثم قم باختيار المربع من الشريط الأيمن في البرنامج ثم لاحظ خانة الcustom claass ستجد أن الclass أو ملف الكود المرتبط بهذا الview controller هو ملف ViewController و الذي تم إنشاؤه تلقائيا، لاحظ الصورة:

8(2).png

 

الآن من الشريط العلوي تماما في البرنامج قم باختيار رمز الدائرتين لعرض ملف الكود ViewController بجانب الmain story board 

9.png

 

الآن قم بالضغط على زر ctrl و قم بالسحب من الtableview الذي قمت بإضافته إلى داخل الكلاس على الجانب الآخر و قم بتسميته studentsTebleview أو namesTableview 

10.png

 

11.png

الآن أصبح لدينا متغير بداخل الviewController باسم studentsTableview ليمثل الtableview على شكل كود.

حتى نملأ هذا الtableview بالمحتويات فإننا نحتاج أن نخبر البرنامج أن مصدر هذه المحتويات سيكون هذا الViewController الذي قمنا بإضافة الstudentsTableview إليه، لكن كيف يتم ذلك ؟

اذهب إلى الfunction التي تحمل اسم viewDidLoad و التي يتم استدعاؤها تلقائيا و يتم تنفيذ الكود الذي بداخلها تلقائيا بمجرد تشغيل البرنامج و اكتب بداخلها :


override func viewDidLoad() {

        super.viewDidLoad()

        // Do any additional setup after loading the view, typically from a nib.

        studentsTableview.dataSource = self

}

   

 

و بهذا تكون قد عرّفت أن مصدر البيانات سيكون هذا الاوبجكت من الكلاس ViewController

لكن ستلاحظ ظهور خطأ  و هذا الخطأ يظهر بسبب أن نوع المتغير الذي يجب أن يكون مصدرا لبيانات الtableview يجب أن يكون من نوع UITableViewDataSource بينما نلاحظ أن الكلاس ViewController يرث من الكلاس UIViewController و ليس من UITableViewDataSource لذلك لابد أن يرث كذلك من UITableViewDataSource و بالتالي قم بإضافة هذا إلى الكلاس ViewController ليظهر كما هو موضح في الصورة :

12.png

كما تلاحظ ما زال هناك خطأ و هذا الخطأ بسبب عدم كتابة الfunctions التي تتطلبها الوراثة من UITableViewDataSource و عدد الfunctions التي يجب كتابتها هو ٣ دوال رئيسية

و هم :

- numberOfSections : و هي التي ستقوم فيها بإرجاع عدد المجموعات لتحوي التصنيفات المختلفة ( و غالبا ما تستخدم مجموعة واحدة فقط )

- numberOfRowsInSection : و هي التي تستخدم لتحديد عدد الصفوف أو الخلايا في كل مجموعة 

- cellForRowAtIndexPath : و هي التي تستخدم لتحديد بيانات كل خلية في الtableview 

و لكتابة هذه الfunctions قم بكتابة العناوين الموضحة في الأعلى و سيقوم الإكمال التلقائي في البرنامج باقتراح خيارات لـإكمالها ثم اضغط على enter حالما تجد الfunction الصحيحة التي تريدها..

 

سيكون شكل الكود بعد كتابة الfunctions كالتالي :

13.png

 

في الfunction الأولى قم بكتابة 

return 1 

لتقوم بعمل مجموعة واحدة للخلايا

في الfunction الثانية قم بكتابة

return 7 كعدد مبدئي لإعادة ٧ صفوف في الtableview

و في الfunction الثالثة كما هو موضح من الfunction أن هذه الfunction يجب أن تقوم بإرجاع قيمة من UITAbleviewCell و هي الشريحة التي سيتم عرضها في الtableview لذلك مبدئيا قم بكتابة  :


let cell = UITableViewCell()

        cell.textLabel?.text = "hello"

        return cell

 

و ما قمنا بفعله هنا هو إنشاء cell من نوع UITableviewCell و قمنا بجعل الtext الخاص بها ليحوي كلمة hello و هذا سيطبق على كل الخلايا السبعة في الtableview و بالتالي سيكون شكل الكود كالتالي : 

14.png

الآن قم بتشغيل البرنامج لاختبار الكود

سيظهر لك ٧ خلايا في جدول محتويات و كلها تحتوي على كلمة hello كما يبدو في الصورة..

15.png

أخيرا! قمنا بعمل tableview يقوم بعرض محتويات قمنا بتحديدها على الcell و لكن تبقى المشكلة في أن هذه المحتويات كلها متشابهة و لا تحوي مجموعة لأسماء الطلاب كما نريد فكيف نقوم بذلك ؟

عادة عند التعامل مع الtableview لابد أن يكون هناك مصدر للبيانات لأخذ البيانات منه و عادة ما يكون هذا المصدر على شكل array 

لذلك قم بعمل array من نوع [String] لتحوي أسماء الطلاب و قم بوضع الأسماء كما في الصورة أو كما تريد :

 

الآن قم بالتوجه إلى الfunction التي تحمل الاسم numberOfRowsInSection و قم بإعادة عدد عناصر الarray بدلا من عدد ٧ العشوائي.

return students.count

الآن توجه إلى الfunction التي تحمل اسم cellForRowAtIndexPath و لاحظ أن هذه الfunction تحتوي على بارامتر باسم indexPath.

في الحقيقة.. هذه الfunction يتم استدعؤها عدة مرات و ليس مرة واحدة و عدد المرات التي يتم استدعاؤها فيه يساوي عدد الصفوف التي قمت بإرجاعها في الfunction ذات اسم numberOfRowsInSection و بالتالي عدد مرات استدعائها سيكون مساويا لعدد عناصر الstudents array في هذه الحالة 

حيث يقوم البرنامج بكل مرة بإعادة خلية لتمثل البيانات التي سيتم عرضها في ذلك الصف.

المهم في الأمر أن البارامتر indexPath يحتوي على خاصية باسم row من نوع Int.

و هذه الخاصية لاتحمل قيمة ثابتة في كل استدعاء للcellForRowAtIndex function و أنما تبدأ بقيمة 0 و في الاستدعاء التالي تزيد بمقدار ١ فتصبح قيمتها ١ ثم تنتقل إلى الاستدعاء التالي لتصبح قيمتها ٢ ثم ٣ ثم ٤... الخ

حتى تنتهي عند آخر رقم و الذي يساوي حسب ما فهمنا في الأعلى عدد عناصر الstudents array ناقص واحد ( لأن العد سيبدأ من 0 )...

لعلك بدأت تفهم الفكرة..

يمكننا أن نعتمد على هذا المتغير لأخذ البيانات من الarray بالترتيب و إسنادها إلى الخلايا... لذلك بداخل الcellForRowAtIndex function قم بتعديل الكود ليكون كالتالي..


let cell = UITableViewCell()

        cell.textLabel?.text = students[indexPath.row]

        return cell

 

و شكل الكود كاملا سيبدو كالتالي...

16.png

 

الآن قم بتشغيل البرنامج و انظر إلى النتيجة النهائية :)

 

17.png

 

إلى هنا نصل إلى نهاية الدرس و سنتناول الموضوع بطريقة متقدمة مستقبلا إن شاء الله.

 

8.png

3(2).png

3.png

كلمات دليلية:
1
إعجاب
3189
مشاهدات
0
مشاركة
0
متابع
متميز
محتوى رهيب

التعليقات (2)

IbrahimMobarki:

مقال أكثر من راااااائع ،،، استمررر اخي الكريم

NAJIALFARIDI:

بارك  الله في ماكتبت أخي

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !