الtable view مع Swift ( الجزء الثاني )

البرنامج المستخدم : xcode 8

اللغة المستخدمة : swift 3 

هذا الدرس هو الجزء الثاني من درس الtableview مع الـ Swift 
إذا كنت لم تشاهد الجزء الأول فقم بمشاهدته الآن من خلال الرابط التالي :

https://3alam.pro/articles/swift/tableview/

في الدرس السابق وصلنا في النهاية إلى هذه النتيجة..

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

إذا لنبدأ..

الآن إضافةً لعرض أسماء الطلاب نريد عرض بيانات خاصة بهم كالعمر و رقم الجوال و سنقوم بعرض هذه البيانات في الجدول.

و بالتالي فأن كل طالب سيكون له ٣ بيانات مختلفة متصلة به و خاصة به و هي الاسم و العمر و رقم الجوال بدلا من الاسم وحده.

و بالتالي كيف يمكن أن نربط مجموعة من البيانات لشيء واحد فقط ؟

لو عدنا إلى الarray التي تمثل مصدر البيانات أو الdata source للtableview و التي تحمل اسم students فسنجد أنها تحتوي على أسماء الطلاب فقط و بالتالي هي array من نوع string الآن نحن بحاجة إلى أن نربط كل اسم من هذه الأسماء مع العمر و رقم الهاتف لكل عنصر من العناصر و كأن هذه العناصر ستستبدل بمجموعة تحوي هذه البيانات معا؟

لو فكرنا قليلا.. ما هي الوسيلة المتاحة في swift أو في معظم لغات البرمجة التي تمكنك من ربط عدة بيانات في مجموعة واحدة ؟

الحل ببساطة هو الclass سنقوم بإنشاء كلاس خاص باسم student و سنقوم بوضع الخصائص الخاصة به معا في كلاس واحد :

١- قم بالذهاب إلى file ثم new ثم file   

٢- اختر swift file و اضغط على next 

٣- قم بتسميته Student و اختر create 

ملاحظة : من المعتاد دائما البدء بحرف capital لجميع أسماء الكلاسات في المشروع

الآن قم بأضافة الكود التالي إلى الملف : 

//1:
class Student
{
    //2:
    var name:String!
    var age:Int!
    var phoneNum:Int!
    
    //3:
    init(name:String,age:Int,phoneNum:Int)
    {
        self.name = name
        self.age = age
        self.phoneNum = phoneNum
    }
    
    
}

في الخطوة الأولى قمنا بإنشاء الكلاس Student 

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

و أخيرا في الخطوة الثالثة قمنا بعمل الinitializer و هي الدالة التي ستستخدم لعمل كائنات أو objects من هذا الكلاس حيث ستستقبل الاسم و العمر و رقم الهاتف لتقوم بعمل أوبجكت جديد يحوي هذه المتغيرات.

 

و الآن قم بالعودة إلى ViewController و قم بتغيير نوع الarray من String إلى Student و قم ببناء العناصر الجديدة لتكون من Students و لتبدو الarray بهذه الطريقة :

  //1
	//var students : [String] = ["محمد","خالد","عمر","أحمد","سامي"]
    
    //2
    var students : [Student] = [Student(name:"محمد",age:14,phoneNum:054050433),
                                Student(name:"خالد",age:15,phoneNum:054384953),
                                Student(name:"عمر",age:14,phoneNum:054837495),
                                Student(name:"أحمد",age:17,phoneNum:054333874),
                                Student(name:"سامي",age:16,phoneNum:0542030245)
                               ]

في الخطوة الأولى قمنا بتحويل الشكل القديم للarray ليكون على شكل comment ( بإمكانك مسحها نهائيا كذلك ) 

و في الخطوة الثانية قمنا بعمل الarray الجديدة و التي تحوي objects من الStudent class و كل أوبجكت فيها له خصائص الاسم و العمر و رقم الجوال.

 

و الآن نحن بحاجة لقراءة هذه البيانات و وضعها في الtableview.

في الشكل السابق للarray كنا فقط بحاجة المتغير الذي يحمل اسم textLabel و الموجود بداخل الcell الخاصة بالtable view حيث نقوم بإسناد قيمة اسم الطالب لهذا المتغير.. لكن المشكلة أن هذا مجرد متغير واحد و نحن بحاجة إلى ٣ متغيرات في كل cell لتحوي الاسم و العمر و رقم الهاتف إذا مالحل ؟

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

و حتى تقوم بإنشائها :

١- اذهب إلى file ثم new ثم file

٢- هذه المرة سنقوم بعمل cell خاصة بنا لكنها في النهاية ليست إلا cell ترث الخصائص الأساسية من TableViewCell و هو يمثل الكلاس الخاص بالcell الأساسية في الxcode و التي قمنا باستخدامها سابقا ( و بما أننا سنحتاج إلى الوراثة هنا فلن نقوم باختيار swift file و إنشاء كلاس عادي و إنما سنختار cocoa touch class ) ثم اضغط next 

٣- في مربع subclass of : قم بتحديد UITableviewCell و قم بتسميتها StudentCell و اختر next ثم create

٤- الآن هذا هو الكلاس الذي سيمثل الcell الجديدة و الذي سيمثل الأكواد التي ستكتب فيها.. لكن أين هي هذه الcell الجديدة في الواجهة ؟

توجه إلى Main storyboard و قم بتحديد الخلية الموجودة في الtableview

ملاحطة : إذا لم تكن تظهر لك أي خلية في الtableview فقم بتحديد الtableview و إضافة واحدة من شريط الخصائص كما هو موضح في الصورة التالية :

و اجعل هذه الخلية ترث من ال class ( انظر إلى الصورة ) الذي قمنا بعمله للتو و هو StudentCell و ذلك من خلال اختيار شكل المربع ( show the identity inspector ) و من ثم كتابة الاسم في خانة class و بذلك ستمثل هذه الخلية نموذج لشكل كل الخلايا التي سيتم إنشاؤها في الtableview و ما سيجري على شكلها و تصميمها سيجري على كل الخلايا الأخرى في الtableview

و لكن حتى تستطيع الوصول إلى هذه الخلية دون غيرها في الكود الخاص بك فأنت بحاجة لإضافة ID خاص بهذه الخلية ليميزها عن غيرها و هذا يتم من خلال تحديد الخلية ثم توجه إلى شريط الخصائص في الجانب الأيمن ستجد خاصية باسم : identifier قم بكتابة الid الذي تجده مناسبا لك مثل : studentCellId على سبيل المثال و لكن تذكره جيدا لأنك ستحتاجه وقت كتابة الكود الخاص بهذه الخلية

 

و الآن قم بتصميم العناصر التي ستحمل بيانات الطلاب و هي تتم بكل بساطة عن طريق إضافة 3 labels للخلية و كل منها سيمثل أحد البيانات

ملاحظة : قم بإضافة الأشكال ( labels ) و توزيعها بالطريقة التي تناسبك و لا تنس إضافة الconstraints و إذا أردت إضافتها بسرعة دون الدخول في تفاصيل الconstraints فقم بتحديد العناصر ثم قم بإضافتها كما هو موضح في الصورة :

 

 

 

الآن نحن بحاجة لربط الlabels الموجودة في الخلية مع الكلاس الخاص بها حتى تكون لنا قدرة التحكم بها و بقيمها لذلك قم بفتح الكود في نصف الشاشة عن طريق الضغط على أيقونة الدائرتين الموجودة في الزاوية اليمنى من الشريط العلوي

تأكد أن الملف المفتوح في النصف الخاص بالكود هو كلاس الStudentCell و إذا لم يكن فتوجه إلى الكلاس من العمود الأيسر الخاص بالملفات و اضغط على alt ثم اسم الكلاس و هو StudentCell  

توجه الآن إلى أول label و هو الخاص بالاسم و قم بالضغط على ctrl و السحب من الlabel إلى داخل الclass و ستظهر لك نافذة تسأل عن الاسم كما في الصورة 

قم بتسميته nameLabel و اضغط على connect 

قم بتكرار نفس العملية للlabel الخاص بالعمر و رقم الهاتف و قم بتسميتهم ageLabel و phoneNumLabel على التوالي.

و سيكون الشكل و الكود بهذا الشكل : 

 

أخيرا تبقت خطوة أخيرة و هي إضافة القيم المناسبة لكل label في كل خلية و هذا سيتم من خلال الfunction التي تحمل اسم cellForRowAtIndexPath و الموجودة في الكلاس ViewController

لذلك توجه إليها و قم بمسح الكود السابق الموجود بداخلها و استبدله بالكود التالي :

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        //1
        let cell = tableView.dequeueReusableCell(withIdentifier: "studentCellId") as! StudentCell
        
        //2
        cell.nameLabel.text = students[indexPath.row].name
        cell.ageLabel.text = String(students[indexPath.row].age)
        cell.phoneNumLabel.text = String(students[indexPath.row].phoneNum)
        
        return cell
    }

في الخطوة الأولى : قمنا باستخدام الtableview و هو المتغير الذي يمثل الtableview الموجود في الstoryboard و الذي يحوي الخلية و الذي قمنا بإضافته في الدرس السابق و قمنا من خلاله باستدعاء function اسمها dequeueReusableCell  و التي تستخدم لجلب الcell من خلال الid الخاص بها و لذلك قمنا بإضافة الid الذي قمنا بإنشائه سابقا إلى الخانة الخاصة به كparameter للfunction ثم أضفنا : as! StudentCell حتى نقوم بعمل casting لهذه الcell لتصبح من نوع StudentCell 

ملاحظة : إذا كنت لا تعلم ما هو الcasting فيمكنك تجاهله الآن و إضافة الكود كما هو و تعلمه لاحقا 

و الأن أصبح لدينا cell من نوع StudentCell بمعنى آخر : يمكننا الآن الوصول إلى الlabels الموجودة في الStudentCell و تغيير قيمها اعتمادا على قيم العنصر في الarray و هذا ما قمنا بفعله في الخطوة الثانية و هذا الكود شبيه جدا للكود السابق الذي كان خاصا بإضافة الاسم فقط في كل indexPath من الarray باستثناء إضافة الخصائص الخاصة بكل عنصر للarray و ذلك لأن الarray الآن تحتوي على objects و أنت تريد الوصول إلى متغيرات هذا الobjects فتضيف .name للوصول للاسم مثلا و كذلك الأمر للعمر و رقم الهاتف

لاحظ كذلك أننا قمنا بتحويل العمر و رقم الهاتف إلى قيم من نوع String و ذلك لأن القيم الأساسية لها هي في الحقيقة من نوع Int و لابد من تحويلها إلى String لتناسب نوعية المتغير text بداخل الLabel

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

 

إلى هنا نصل معكم إلى نهاية الدرس و أتمنى أن يكون ذا فائدة و نفع للقارئ الكريم

و إلى اللقاء في دروس أخرى   

 

كلمات دليلية: