التعامل مع صفوف الجداول Table View Rows

ساره عليمنذ 3 أشهر

بسم الله الرحمن الرحيم

في هذا الموضوع سنقوم بمناقشة المواضيع التالية في التعامل مع صفوف الجداول :

  • طريقة إخفاء الصفوف الفارغة في الجدول .
  • طريقة إظهار الصفوف المطلوبة و إخفاء بعض الصفوف ( عن طريق تغيير ارتفاع الصف) .

 

١- طريقة إخفاء الصفوف الفارغة في الجدول :

سنقوم بعمل جدول وإضافة بعض القيم فيه ( بافتراض بأن لديك معرفه مسبقة لطريقة عمل الجداول) وهذا الجدول الذي قمت بعمله :

5a63c308c5bf1_ColorTablecopy.thumb.png.41e033aa30369c929b83787f6d10d4a9.png

 

نلاحظ بالجدول السابق وجود صفوف فارغة وقد تكون مزعجة نوعاً ما وقد نرغب في إخفائها :

 

وحتى تقوم بإخفائها كل ماعليك هو اتباع إحدى الطرق التالية : 

(لنفترض بأن TableView لدينا اسمه ColorTable)

 

الطريقة الأولى : إخفاء الـ separator :

باستخدام السطر التالي بداخل دالة viewDidLoad :


ColorTable.separatorStyle = .none

 

أو من خلال Interface Builder للجدول ColorTable :

5a63c311f10f8_interfacecopy.png.9e4bd459169d6a8b71e9b78316b98c43.png

 

وستكون النتيجة كالتالي :

 

5a63c30c262c7_hideseparetorcopy.thumb.png.a746da60b25d8d7dfbc6ee4ec4e71abb.png

 

بالنسبة لهذه الطريقة فكما نلاحظ فقد تم إخفاء ال Separetor للجدول كامل .

 

الطريقة الثانية : بإضافة Footer وجعل الارتفاع له يساوي 0 :

وذلك بإضافة السطر التالي بداخل داله  viewDidLoad :


ColorTable.tableFooterView = UIView(frame: .zero)

 

وستكون النتيجة كالتالي :

 

5a63c3058e2e5_AddingFootercopy.thumb.png.c47f608c3ed5044878389f8fe9400705.png

الطريقة الثالثة : بإضافة UIView كـ Footer وذلك كالتالي :

 

١- قم بإضافة UIView أسفل الجدول كما في الصوره ( قمت بتغيير لون UIview للون الأزرق حتى تتضح لكم الفكرة) :

5a63c314331a2_UIView2copy.png.fffc5f28eefd44b3f3b4cf9432f6dcf9.png

5a63c313136b3_UIView1copy.png.aec607da44180364460b1013777d6ff0.png

 

٢- بعد إضافة ال UIview قم بتغيير الارتفاع له بحيث يكون مساوياً لـ 0 وذلك من خلال Interface Builder:

 

5a63c31108c2d_inspectorSizecopy.png.5af26284572fbb5321da6c90cba2bbd2.png

 

والنتيجة كالتالي :

 

5a63c30fa370a_inspectorResultcopy.thumb.png.24b13297a766db58e31930278b510625.png

 

٢- طريقة إظهار الصفوف المطلوبة و إخفاء بعض الصفوف :

هذه الطريقة نستطيع الاستفاده منها في حاله أردنا إخفاء بعض الصفوف بشكل مؤقت ( وليست حذف للصفوف) وذلك عند تنفيذ أو حدوث أمر معين ، مثال على ذلك لو أردت إنشاء تقويم Calendar

وتحت هذا التقويم ترغب بعرض الأحداث Events لذلك الشهر وإخفاءها في الشهور الأخرى :

ImageUploadedByTapatalk1354105087.745283.jpg.e0607cd35bab0f224c918088377e6007.jpg

 

الفكرة هنا تكون من خلال تغيير الارتفاع للصف المطلوب وجعله مساوياً لل 0 ، ويتم عمل ذلك من خلال استخدام ال function التالية :


public func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {  }

سنقوم بتطبيق الفكره على جدولنا ColorTable  ونقوم بـ (إخفاء) اللون الأصفر من الجدول :

النقاط المهمة لذلك هي :

١- انشاء الدالة التالية للتعامل مع ارتفاع صفوف الجدول :


public func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 
    }

٢- تعريف متغير من نوع CGFloat و تكون قيمته = 0.0 و هو يدل على قيمة الارتفاع للصف :


var rowHeight:CGFloat = 0.0

 

٣- نستخدم ال if - else وذلك للتحقق من الشرط الذي سيتم إخفاء الصفوف المطلوبة عند حدوثه وتحقق الشرط ففي حاله تحقق الشرط ستكون قيمة المتغير الذي تم تعريفه = 0.0

وإذا لم يتحقق سنجعل ارتفاع الصفوف مثلاً = 60.0 :

 


        let RC = "Yellow"
        let cell1 = ColorTable.dequeueReusableCell(withIdentifier: "cell")
        cell1?.textLabel?.text = list[indexPath.row]
  
        if (RC == cell1?.textLabel?.text)
        {

           rowHeight = 0.0
          
        
    }else  {
            rowHeight = 60.0
        }
        return rowHeight
 

 

الكود النهائي بداخل الدالة السابقة سيكون كالتالي :

 


public func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
       
  		var rowHeight:CGFloat = 0.0
        let RC = "Yellow"
        let cell1 = ColorTable.dequeueReusableCell(withIdentifier: "cell")
        cell1?.textLabel?.text = list[indexPath.row]
     if (RC == cell1?.textLabel?.text)
        {
           rowHeight = 0.0

    }else  {
            rowHeight = 60.0
        }
        return rowHeight
    }

 

وبذلك سيتم (إخفاء) اللون Yellow من القائمة :

5a63d8392c296_NoYellowcopy.thumb.png.3fc78c0d810d587c720149e764a26947.png

 

هذا مثال بسيط جداً لإخفاء الصفوف بشكل مؤقت دون حذفها فقط حتى تصل الفكرة لكم ..

 

* خلاصة ماتعلمناه اليوم :

  • طريقة إخفاء الصفوف الفارغة في الجدول :

من خلال ٣ طرق :

١- إخفاء ال Separator :


ColorTable.separatorStyle = .none

٢-  إضافة Footer وجعل الارتفاع له = 0 :


ColorTable.tableFooterView = UIView(frame: .zero)

٣- إضافة UIView كـ Footer وجعل ارتفاعه =0 .

 

  • طريقة إظهار الصفوف المطلوبة و إخفاء بعض الصفوف ( عن طريق تغيير ارتفاع الصف) .

وذلك باستخدام الدالة التالية التي من خلالها نستطيع التحكم بقيمة ارتفاع الصفوف :


public func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {  }

 

وبذلك نكون قد انتهينا اتمنى أن أكون قد وفقت في الشرح وتبسيط المعلومة لكم

وأرحب بأي مناقشه وأي سؤال يخص الموضوع ?

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

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

Dev_Hashem:

الله يعطيك العافيه على الشرح بحثت عنه كثير 

ساره علي:
في 2/5/2018 at 22:50, Dev_Hashem said:

الله يعطيك العافيه على الشرح بحثت عنه كثير 

الله يعافيك 

 

و بالتوفيق ..

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

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