شرح طريقة الانتقال والعودة بين الصفحات ونقل البيانات فيما بينهم – ( Segue, Unwind Segue )

رغم انه المفترض في هذا الموضوع اتحدث عن طرق الاستخدام الخاطئ للـ Segue

وتركيزه ينصب في شرح الـ Unwind Segue

الا اني سوف أقوم بشرح الامرين لجعل الموضوع اشمل

 

 

ما هو الـ Segue ؟

الـ Segue هو عملية الانتقال بين صفحة (View Controller) الى اخر

ويتم عن طريق ربط زر او Action موجود في الصفحة الاولى الى الصفحة الأخرى

 

اهم قاعده هنا الانتقال يكون من صفحة 1 الى صفحة 2

ولا يحصل انتقال بشكل عكسي أيضا !

 

هذا من اكثر الاخطاء شيوعاً لذا المطورين الجدد !

 

 

لفهم الـ Segue بشكل صحيح سوف اشرحه على مراحل او طرق بالتدرج

 

الطريقة الاولى :

في هذه الطريقة فقط نقوم بالربط بين صفحة وأخرى

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

 

والطريقة تكمن في التالي :

 

 

أولا : نقوم اول بإضافة 2 من View Controller

 

ثانيا : نقوم بإضافة Button في صفحة 1

 

ثالثا : نقوم بالضغط الـ Button + زر control ونسحب الـ Button الى الـ View Controller الاخر

 

رابعا : نختار Show

 

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

في هذه الصفحات فقط تعرض معلومات ولا تحتاج الا نقل معلومة من صفحة الى أخرى او تحتاج أن تقوم ببعض الامور قبل عملية الانتقال

لذا استخدام الطريقة هذه طريقة نادره

 

الطريقة الثانية :

 

الطريقة هذه تعتمد على موضوع الانتقال للصفحة الثانية بعد تنفيذ امر معين وبدون الحاجة الى نقل معلومات من الصفحه 1  الى الصفحة 2

 

لكي تفهم الفكرة بشكل صحيح ،

لنفترض بأنك تعمل على صفحة “التسجيل حساب جديد”

 

راح تحتاج تكتب التالي في Function الـ Button

  • تتأكد بأن المستخدم كتب جميع الحقول من اسم المستخدم والايميل والباسورد وإعادة كتابة الباسورد
  • تتأكد بأن هناك تطابق في حقل باسورد مع حقل إعادة كتابة الباسورد
  • تتأكد من تلبية شروط كتابة الباسورد على سبيل المثال بأن تم كتابة ٨ احرف
  • تتصل بالسيرفر
  • في حال تم الاتصال وحفظ بيانات المستخدم بنجاح هنا يتم الانتقال الي الصفحة الثانية !

 

هل لاحظت الفرق ؟

 

في الطريقة الاولى الانتقال مباشرة الى الصفحة الثانية

ولكن في هذه الطريقة هناك أمور كثيره تحدث بمجرد ضغط المستخدم على الـ Button

وتتم الانتقال اثناء حدوث امراُ معيناً وليس بشكل مباشر !

 

 

والطريقة تكمن في التالي :

 

نفس خطوات الطريقة الاولى بالضبط

 

ولكن هنا يتم إضافة مُعرف

(Identifier)

 

لاحظ الصورة التالية :

 

 

وفي داخل Function الـ Button

نكتب التالي :

 

 

 

لاحظ في السطر السابق كتبنا نفس المُعرف بالضبط

الذي كتبناه في حقل الـ Identifier في الـ Storyboard

 

وأقصد هنا بالضبط  ، المسافة تفرق ، الحرف الكبتل والسمول أيضا يفرق !

بما يعني الأفضل أن تقوم بنسخه ومن ثم لصقه بدلاً من كتابته .

 

قد تتسأل ما الفائده من المُعرف ؟

 

المُعرف هو المسؤول عن توجهيه الـ View Controller
الى  الـ View Controller  الصحيح

 

في تطوير التطبيقات سوف تحتاج الي عملية انتقال مختلفة من نفس الـ View Controller

قد يحتوي تطبيقك مثلا على زرين كل زر يوجه الى صفحه مختلفة

فهنا المُعرف يجعل الـ Xcode يوجهك الى الصفحة الصحيحة

 

الطريقة الثالثة :

 

في هذه الطريقة اذا اردت بأن تقوم بنقل معلومات من الصفحة 1 الى صفحة 2

 

الطريقة هذه أيضا نفس الطريقة السابقة

من حيث انك تعطي مُعرف (Identifier)

 

الفرق بأنه سوف تحتاج الى استخدام Function معين

يقوم بوظيفة نقل المعلومات اثناء عملية الـ Segue

 

هذا هو الـ Functionn الذي سوف تحتاج الى استخدامه

 

 

اين تضعه ؟

 

تضعه في الصفحة الحالية

فانت تريد نقل معلومة من صفحة 1 الى صفحة 2

فتضعه في صفحة 1

 

هنا تحتاج تعرف معلومة :

 

لنقل بيانات من صفحة الى اخرى
سوف تحتاج الي متغير في الصفحة الأخرى

لكن تحفظها به

 

لكي تتضح الصورة الان في صفحة 1
تريد نقل معلومة معينه الى صفحة 2

 

المعلومة هذه عباره عن String

 

اذا سوف تقوم بإنشاء متغير من نوع String

في صفحة 2

 

ومن ثم في داخل الـ Function السابق تستدعي المتغير

وتحفظ القيمة الموجودة في صفحة1  الي المتغير في صفحة 2

 

نعود للشرح

 

الان في الـ View Controller
الاول

 

نضيف Textfield

فوق الـ Button

ونربطه بملف الأكواد

 

شاهد الصورة التالية :

 

 

 

ومن ثم في الـ View Controller
الثاني نضيف Lable

لكن قبل ذلك نضيف Class من نوع View Controller

 

ومن ثم نحدد الـ View controller  الثاني

في الـ Stroryboard

ونختار الـ Class الذي أنشأناه

 

بعدها نربط الـ Label

بملف الاكواد

 

 

اصبح لدينا في الـ View Controller
الاول

 

فقط Button و Textfield

 

وفي الـ View Controller
الثاني

 

لدينا Label

 

قبل العودة الى Function

الذي اضفناه في ملف اكواد

الـ View Controller الاول

 

يتوجب علينا إضافة متغير من نوع String

 

لذا نقوم باضافته

 

يصبح شكل الـ StroyBoard

بالشكل التالي :

 

 

ملف اكواد الـ View Controller الاول بالشكل التالي :

 

 

 

ملف اكواد الـ View Controller الثاني بالشكل التالي :

 

 

 

 

كما تلاحظ في الـ viewDidLoad

اضفت السطر التالي

لجعل النص الذي سوف نجلبه من View Controller
الاول

يتم طباعته في View Controller الثاني

 

نعودة الان الى Function

 

الان نعود لملف اكواد الـ View Controller الاول

 

ونقوم بكتابة التالي

 

لاحظ التالي اول سطر

نكتب فيه مُعرف الـ segue

كما قمنا بكتابته في الـ Stroyboard

 

السطر الثاني نقوم بكتابة اسمك الكلاس الـ View Controller الثاني

في حالتي اسمه ViewController2

 

السطر الثالث نستدعي المتغير الذي أنشأناه في الـ View Controller الثاني

ونربطه بمحتوى الـ Textfield

لذا اثناء عملية الـ Segue

سوف ينتقل النص الذي سوف نكتبه في حقل الـ Textfield
الى الـ String الموجود في الصفحة الثانية

 

ومن ثم في الـ View Controller الثاني

 

سوف يتم طباعة الـ String في الـ Label

نقوم بتشغيل التطبيق ونرى النتيجة :

 

 

هذه الطريقة الصحيحة لنقل البيانات من View Controller الى اخر

وهيا الطريقة الأكثر استخداماً

 

الطريقة الرابعة :

 

الطريقة هذه هيا عباره عن دمج طريقة الثانية مع الثالثة

 

هناك أوقات تحتاج الى الانتقال الي View Controller اخر
بعد حدث معين

 

وفي نفس الوقت تريد فيها نقل البيانات

الى الـ View Controller اخر

 

في هذه اللحظة سوف تحتاج الى الطرقتين

 

بحيث تستخدم

 

 

وفي نفس الوقت تستخدم

 

 

الـ Xcode ذكي بما فيه الكفايه

 

اثناء تنفيذ سطر

 

سوف يلاحظ وجود Function

 

وبالتالي سوف ينتقل اليه أولا قبل تنفيذ الـ Segue

 

وفقط للمعلومية prepare

تعني تجهيز وبالتالي الـ Function يستعد لعملية الـ segue

فيتم تنفيذ ما بداخله أولا !

 

الان انتهينا من جزء الـ Segue

 


 

حان الوقت الانتقال الي موضوع الـ Unwind Segue

 

وهو الموضوع الذي اردت التحدث عنه !

 

كل شخص جديد يتعلم برمجة تطبيقات الـ iOS

وتحديدا عند تعلمه الـ Segue

 

وطريقة نقل البيانات من صفحة الى أخرى

 

يخطئه هذا الخطأ !!

 

اغلبية المبرمجين الجدد يخطئوا نفس الخطأ !

 

ماهو الخطأ الذي يقع به الكثيرون ؟

 

استخدام الـ Segue عند الرغبة في الرجوع الى الصفحة السابقة !

 

في هذه النقطة سوف أوضح لك الخطأ

ولماذا يعتبر مصيبه عند عمله !!

افتراضاً نملك 4 صفحات

و ٣ Button

 

كل Button متصل بـ Segue

ينقلك الى الصفحه الأخرى

 

كما في الصورة التالية :

 

 

 

قد تتسأل ماهي المشكلة في الصورة السابقة ؟

 

الحقيقة هيا لحد الان لا توجد مشكلة !

 

لكن في الصورة التالية تكمن المشكلة !

 

المشكلة تكمن هنا

 

عندما ينشأ المبرمج زر للرجوع الى الصفحة الرئيسية

 

كما في الصورة التالية :

 

 

 

 

ماذا فعل هنا ؟

 

قام بربط زر الرجوع الى صفحة رقم 0

عن طريق الـ Segue !!

 

هذا هو الخطأ الذي اردت التحدث عنه !

 

هناك 3 مشاكل تسببه هذه المشكلة!

 

أولا : كثرة الـ Segue ذهابا وعوده تسبب مشكله لذا المطور في انه لا يعلم هذا الـ Segue مرتبط بأي View Controller ؟

 

ثانيا : مشاكل في الأداء واستهلاك موارد الجهاز بما يسبب بطئه عند استخدام التطبيق !!

 

ثالثا : مشاكل في Auto Layout ! ، من ضمن المشاكل التي تسببها ، مشاكل في الـ Auto Layout
من الامور التي سوف تلاحظها رغم وضعك القيود بشكل صحيح الا انه لايزال يظهر خطأ في القيود !

 

 

لستُ مقتنعاً ؟

 

سوف أقوم الان بتشغيل التطبيق واستخدامه ذهاباً وعودة

 

شاهد الصورة التالية :

 

 

الان قم بالتالي ،

لا تقوم بإيقاف تشغيل المشروع

 

واذهب لهذه الخانة :

 

وحرك باستخدام الماوس لملاحظة هيكل المشروع

 

لاحظ الصورة التالية :

 

 

نقوم الان بعمل Debug لهيكل المشروع من ناحية واجهة المستخدم

 

هل لاحظت كثرت الطبقات ؟

 

المفترض أن تظهر فقط 5 صفحات

 

4 صفحات خاصة بالـ View Controller
والصفحه 5 للزر الموجود في اخر صفحة بحكم اني قمت بالتوقف عندها !
ولكن الذي يظهر هو 13 طبقة !

 

ما السبب ؟؟

 

السبب هنا بسبب طريقة ربط الـ Segue

 

ذكرت في بداية الموضوع

 

الـ Segue يذهب من الصفحة 1 الى الصفحة 2

وليس العكس !

 

عند عمل العكس هذا ما سوف يحدث !

 

السبب عند عمل هذا الخطأ

 

يقوم النظام على انشاء الصفحة مره أخرى وأخرى وأخرى

كل مره يتم الضغط على زر الرجوع يتم انشاء الصفحة مره أخرى

 

والنتيجة هي استهلاك موارد الجهاز !!

 

الان قبل أن اشرح الطريقة

سوف انفذ الطريقة الصحيحة ومن ثم سوف اشرحها

 

بعد تغير الطريقة الى الطريقة الصحيحة

 

لاحظ الصورة التالية في الـ Stroyboard:

 

 

هل لاحظت ؟

لايوجد Segue ، للعودة لصفحة الرئيسية !

 

الان لاحظ الصورة التالية :

 

 

ومن ثم لاحظ هيكل المشروع :

 

 

 

اذا عملت مقارنه بين الصورتين هذه والصورتين السابقة

 

سوف تلاحظ امرين

 

أولاً : عند الضغط على زر العودة الصفحة الحالية تنزل الى الأسفل وتظهر الصفحة الرئيسية ! ، في حين عند عمل الطريقة الخاطئة تظهر الصفحة الرئيسية من الأسفل الى الأعلى !!

 

ثانياً : هيكل المشروع اصبح 5 فقط ! لم يتغير ولم يزداد عدده !

 

لماذا ؟

 

عند عمل الطريقة الخاطئة ، تقوم على انشاء الصفحة من جديد في كل مره

فكل ما زاد وقت استخدامك التطبيق زادت عدد الصفحات وزاد استهلاك موارد الجهاز

في حين عند عمل الطريقة الصحيحة ، تقوم على اغلاق الصفحة الحالية والعودة للصفحة التي تريدها ، وبالتالي لا يوجد أي زياده !

 

بعد فهم الفكرة واتضاح الفرق

 

نعود الى شرح الطريقة الصحيحة :

 

لكن قبلها اريد توضيح نقطه معينه

 

اذا اردا الرجوع الصفحة السابقة السابقة هناك 3 طرق

 

الطريقة الاولى : استخدم هذا السطر بداخل اقواس الـ Button

الزر ذا سوف يرجعك الى الصفحة السابقة فقط

 

بما يعني اذا كنت في صفحة 3 سوف يرجعك الى صفحة 2

لا يمكنك العودة الى صفحة 0 او أي صفحة أخرى

 

الطريقة الثانية : عند استخدام الـ Navigation Bar

سوف يظهر زر العودة للصفحة السابقة بشكل تلقائي

 

وأيضا مثل الطريقة الاولى سوف تعود فقط الى صفحة السابقة

 

يمكن ملاحظتها في جميع تطبيقات النظام مثال تطبيق الاعدادات عندما تذهب لقسم عام او General سوف تلاحظ وجود زر في الأعلى يرجعك الى صفحة الرئيسية للإعدادات ، هذه تتم بشكل تلقائي بدون تدخل منك

 

معلومة :

 

لاحظ الصورة التالي :

 

سوف تلاحظ عند استخدام الـ Navigation Bar

واختيار نوع Show

سوف تكون عملية الانتقال الـ Segue
من اليمين الى اليسار والعوده سوف تكون العكس

في حين اذا اخترت Present Modally
سوف يظهر من الأسفل الى الأعلى والعكس عندها يعود للصفحة السابقة !

كما الحال في تطبيقنا

 

لكن بدون استخدام الـ Navigation Bar

الـ Show يظهر كالـ Present Modally

 

 

الطريقة الثالثة :

 

الطريقة هذه تدعى Unwind Segue

 

ما الذي يميزها ؟

الذي يميزها هو التالي :

 

أولا : يمكنك العودة الى أي صفحة تريدها

 

وليس ملزماً بالعودة الى الصفحة السابقة فقط !

 

بما يعني كما هو حال مثالنا سوف يمكنك العودة من صفحة 3

الى صفحة 0

بشكل مباشر

 

ثانيا:

يمكنك ارجاع بيانات من الصفحة الحالي الى الصفحة السابقة !

بما يعني سوف تستطيع ارجاع بيانات موجوده في صفحة 3 الى صفحة 0

او أي صفحة تريدها !!

 

معلومة :


الـ Unwind Segue

تعني فك الـ Segue وبالتالي يجب أن يكون هناك Segue لتستخدم هذه الطريقة !

اذا استخدمتها بدون عمل Segue مسبقاً بين 2 من الـ View Controller
او اكثر ، سوف يسبب Crash للتطبيق

 

الان نبدأ في شرح الطريقة

 

كما شرحت الـ Segue

سوف اقسم الـ Unwind Segue الى عدة طرق

 

 

طريقة الأولى :

 

ترغب فقط بالعوده الى صفحة معينه بدون ارجاع أي بيانات

 

وبالتالي تحتاج تفهم هذه النقطة :

اذا رغبت بالرجوع الى صفحة معينه

سوف تحتاج الى كتابة كود في صفحة التي تريد الرجوع لها

 

هنا نحن نريد العوده من أي صفحة الى الصفحة الرئيسية View Controller 0

 

فسوف نقوم بكتابة الكود التالي :

 

في ملف اكواد  View Controller 0

 

ملاحظة :

-لا تحتاج الى كتابة أي اكواد في الداخل الاقواس ! على الأقل في الوقت الحالي !

– تستطيع تسمية الـFunction بأي اسم تريده ، انا قمت بتسميته unwindToHome

 

ومن ثم ننتقل الى الـ Storyboard

 

ونفعل التالي مع صفحات 1 و  2و 3

 

شاهد الصورة :

 

 

فقط هذا كل ما نحتاج الى فعله !

 

قم بتشغيل التطبيق وسوف تجده يعمل بمجرد الضغط على زر Return to Home

سوف تجده يعود الى الصفحة الرئيسية وهيا View Controller 0

 

 

الطريقة الثانية :

 

ماذا اذا اردت تنفيذ امراً معيناً قبل ان يحدث الـ Unwind Segue ؟

 

تحتاج الطريقة دي في بعض الحالات ، مثلا صفحة Login
المستخدم بعد ما يكتب اسم المستخدم وكلمة السر ويضغط زر Login

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

وبعد التأكد ، تغلق الصفحة باستخدام  Unwind Segue وتحوله الى الصفحة الرئيسية

 

 

معلومة :
ما سبق ذكره مجرد مثال ، لأنه تستطيع أيضا استخدام سطر

لأغلاق الصفحة

فالمثال السابق يعتبر كطريقة أخرى لتنفيذ نفس الأمر

 

 

على أي حال الطريقة مشابه لطريقة الـ Segue

من حيث تحتاج الى إعطاء مُعرف

 

نعود للشرح :

 

اهم نقطه هنا هو فصل الربط الذي عملته في الطريقة الاولى

بين الـ Button و Exit

 

ولكن لا تحذف الـ  Function

الذي كتبناه في View Controller 0

 

 

في هذه الطريقة سوف نربط الـ Viewcontroller
نفسه مع الـ Exit

 

شاهد الصورة التالية :

 

 

 

 

ومن ثم سوف نعطي للـ Unwind Segue
مُعرف

شاهد الصورة التالية :

 

 

قمت باعطاء مُعرف home

 

الان قم بربط الـ button مع ملف الاكواد

 

 

ومن ثم استخدم نفس السطر الذي استخدمناه في الـ Segue

 

بالطريقة هذه تستطيع عمل أي امر تريده قبل حدوث الـ Unwind Segue

 

الطريقة الثالثة :

 

في هذه الطريقة الامر عائد اليك ، يمكنك عمل الطريقة الاولى وتنفذ الطريقة هذه معها

او استخدام الطريقة الثانية مع هذه الطريقة

 

فالطريقة الثالثة تشرح طريقة نقل البيانات من الصفحة 3 الى صفحة 1

 

بنفس درجة حاجتك الى استخدام الى الـ Segue لنقل البيانات أيضا سوف تحتاج استخدام Unwind Segue لنقل البيانات

 

من امثله استخدام الـ Unwind Segue لنقل البيانات

تطبيقات المحادثه مثل الـ Whatsapp

عند استخدامك للتطبيق لأول مره يطلب منك اختيار رمز دولتك

فعند الضغط عليه يوجهك لصفحة تختار فيها دولتك

ومن ثم عند اختيار دولتك يعود الى صفحة كتابة رقم جوالك

هنا حدث Unwind Segue بحيث تم نقل رمز الدولة من صفحة أخرى الى صفحة السابقة

 

نعود للشرح :

 

هل تذكر ماذا فعلنا عند نقل معلومات او بيانات من صفحة 1 الى الصفحة 2 باستخدام الـ Segue ؟

الطريقة مشابهه لحد ما !

 

نحن نريد نقل بيانات من صفحة 3 الى صفحة 0

 

لذا قبل أنا نبدأ سوف نفعل التالي

 

سوف نضيف Textfield في الصفحة 3

ونضيف Label في صفحة 0 الي هيا الصفحة الرئيسية الذي نريد الرجوع اليها

ونقوم بربطهم بملف الاكواد

 

 

شاهد الصورة التالية :

 

الان حان الوقت للكتابة في Function

 

 

الان كما قلنا سابقا نريد نقل النص من الـ Textfield الموجود في View Controller 3

 

الى الـ Label الموجود في View Controller 0

لذا نقوم بكتابة التالي :

 

 

اول شيء نقوم بالتأكد من اسم المُعرف

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

لذا يمكنك حذف هذا السطر

 

وحتى أيضا اذا اتبعت الطريقة الثانية

لن تحتاج هذا السطر!

الا اذا كنت تريد ارجاع بيانات من صفحتين فأكثر

فهنا يتوجب عليك التمييز بينهم عن طريق التأكد من اسم المُعرف

 

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

 

في الـ Segue نقوم بكتابته بداخل Function يسمى

prepare

 

وهنا بداخل Function الـ Unwind

وأيضا في الـ Segue نكتب

as اسم الكلاس الذي نريد الانتقال اليه

 

وفي الـ Unwind Segue نكتب

as اسم الكلاس الذي سوف نعود منه

 

 

لذا تقريبا نفس الفكرة الاختلاف في كلمة destination و source

 

 

اخيراً قم بتشغيل التطبيق

 

وشاهد النتيجة في الصورة التالية :

 

 

وبكذا انتهينا من هذا الموضوع

 

في هذا الموضوع فهمت الطريقة الصحيحة لنقل البيانات بين الـ View Controllers

 

وماهي الاستخدامات الخاطئة والفريق بين Segue و Unwind Segue

 

قد تتسأل هل هذه هيا الطرق الوحيدة لنقل البيانات ؟

الاجابه هيا لا ، ما تم شرحه في الموضوع هو طرقتين لنقل البيانات Segue و Unwind Segue

وهما اشهر واكثر طرقتين لنقل البيانات بين الـ View Controllers استخداماً

لكن هناك طرق أخرى أيضا !

 

Add a Comment

لن يتم نشر عنوان بريدك الإلكتروني.