كيفية إعداد UITextField الإكمال التلقائي المفيد باستخدام CoreData في Swift

كل ما تحتاج إلى معرفته لإنشاء شريط بحث الإكمال التلقائي الخاص بك باستخدام UITableView و CoreData.

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

سنرى:

  • كيفية إعداد تطبيق بسيط باستخدام بحث UITextField
  • كيفية تكوين TableView لإظهار نتائج البحث
  • كيفية عمل استعلامات في الوقت الفعلي لمجموعات CoreData

1. إقامة المشروع

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

UILabel: سوف نسميها topLabel. لن نحتاجها.

UITextField: إنه الحقل الذي سنخصصه للحصول على حقل بحث الإكمال التلقائي ، لذلك دعنا نسميه searchTextField.

UIButton: إنه الزر الذي سيتم الضغط عليه عندما يجد المستخدم المكان الذي يريده. دعنا نسميها searchButton .

ستتم إضافة tableView برمجيًا حتى ترى كيفية إعداده في أي نوع من المواقف.

للحصول على عرض جميل ، أضفت UIImageView على الخلفية مع صورة شاطئ رائعة.

لتوصيل كل هذه المكونات بوحدة التحكم في العرض الخاصة بنا ، حدد كل منها واسحب مرجعها باستخدام ( Control (أو Ctrl) ⌃ + Click ) إلى ملف swift الرئيسي الخاص بوحدة التحكم في العرض.

2. تكوين فئة CustomSearchTextField

لإنشاء صفنا الجديد ، نقوم بإنشاء ملف جديد يسمى CustomSearchTextField.swift. في هذه الفئة ، التي ترث من UITextField ، سنقوم بتضمين جميع الميزات التي نحتاجها لتنفيذ حقل بحث الإكمال التلقائي.

إنشاء TableView بالنتائج:

لتتمكن من إظهار نتائج الإكمال ، نحتاج إلى إنشاء مثيل UITableView الذي سيعرض النتائج الأكثر صلة على النحو التالي:

للقيام بذلك ، نحتاج إلى إنشاء كائن tableView ثم إضافته إلى العرض الحالي. للتعامل مع هذا الكائن الجديد ، نحتاج إلى تجاوز طرق محددة كما هو موضح أدناه. ستتم معالجة جميع التعليمات البرمجية اللازمة لإنشاء searchTableView بهذه الطريقة: buildSearchTableView () .

إن إنشاء tableView أمر بسيط مثل إنشاء كائن UITableView جديد ، ولكن من أجل الوصول إلى جميع وظائف كائن tableView الجديد هذا ، نحتاج إلى التوريث من TableViewDelegates و TableViewDataSource. من المهم الانتباه إلى متغيرين مهمين:

  • مفوض tableView: سيسمح لنا هذا المتغير بتحديد أي كائن من العرض يحتاج إلى إبلاغه عند حدوث بعض التغييرات في tableView (في حالتنا ، هذا الكائن هو SearchTextField وهو في هذا السياق الكائن الذاتي )
  • مصدر بيانات tableView: سيسمح لنا هذا المتغير بتحديد كيفية إنشاء جميع مكونات tableView ومن أي بيانات. هنا مرة أخرى ، نحتاج إلى ضبطه على الذات .

يتيح لنا تعيين هذين المتغيرين التعامل مع بعض الإجراءات المتعلقة بـ UITableView ضمن فئة CustomSearchTextField.

الآن بعد أن تم إنشاء عرض الجدول ، نحتاج إلى إضافة البيانات فيه ، وبشكل أكثر تحديدًا ، سيتم تخزين هذه البيانات في الخلايا. نستخدم طرقًا موروثة من فئة TableViewDataSource لتكوين خلايانا وإضافتها إلى tableView. بالإضافة إلى ذلك ، ستسمح لنا طريقة TableViewDelegates بالتشغيل حيث ينقر المستخدم وستقوم بطباعة محتوى الخلية المقابلة في وحدة التحكم.

ولكن إذا حاولت تشغيل الكود أعلاه ، فلن يحدث شيء لأن إطار tableView لم يتم تعيينه ولم نحضر العرض إلى المقدمة. لإصلاح هذا ، نحتاج الآن إلى إضافة طريقة updateTableView () :

تم تعيين TableView الخاص بنا ومن المفترض الآن أن يعمل بشكل مثالي! ولكن في هذا الوقت ، يتعين علينا إضافة بيانات في قائمة البيانات الخاصة بنا إذا أردنا عرض شيء ما. للقيام بذلك ببساطة في الوقت الحالي ، سنضيف فقط بيانات وهمية إلى قائمتنا: النص الذي يدخله المستخدم في شريط البحث الخاص بنا.

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

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

تحسين تجربة المستخدم:

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

حان الوقت لإنشاء طريقة التصفية الخاصة بنا. ستعمل هذه الطريقة على تصفية العناصر ذات الصلة من قائمة البيانات (العناصر المقابلة لما يبدأ المستخدم في كتابته). سوف نستخدم الدرجة NSMutableAttributedString لتكون قادرة على تسليط الضوء على جزء من النص الذي كتبته المستخدم في حقل النص .

أولاً ، نقوم بإنشاء فئة SearchItem التي ستمثل كل نتيجة من النتائج التي تمت تصفيتها. نظرًا لأننا نبني تطبيق توصيات السفر الرائع الخاص بنا ، فسنعتبر أن هذه العناصر هي أسماء مدن. هنا فئة SearchItem :

نحتاج الآن إلى تغيير المتغير العام لدينا وإضافة متغير جديد لتخزين العناصر التي تمت تصفيتها:

ثم دعونا ننشئ طريقة التصفية الخاصة بنا:

من خلال تحويل السلسلة إلى NSString ، يمكننا استخدام نطاق الطريقة () الذي يُرجع نطاق التواجد الأول لسلسلة معينة داخل السلسلة. باستخدام هذه الطريقة ، نعلم ما إذا كانت السلسلة تتوافق مع ما يكتبه المستخدم وموضع السلسلة المقابلة! هذا كل ما نحتاجه لتسليط الضوء على هذا الجزء من العنصر لدينا. نقوم بذلك باستخدام طرق setAttributes ثم نضيف عنصرنا إلى قائمة النتائج. أخيرًا ، نقوم بإعادة تحميل البيانات في tableView الخاص بنا.

لنقم بإنشاء بيانات اختبار جديدة لمحاولة التنفيذ:

يجب أن يعمل كل شيء بشكل مثالي ، لقد انتهينا تقريبًا! ؟

3. تقديم استعلامات إلى CoreData

من الجيد أن يكون لديك شريط بحث جميل مع عرض جدول مخصص لعرض نتائج الإكمال التلقائي التي تمت تصفيتها ، ولكن بدون بيانات ، فهذا ليس مفيدًا جدًا؟

دعنا نربط حقل نص البحث الخاص بنا بتخزين CoreData.

إنشاء قاعدة بيانات CoreData:

من أجل تخزين بياناتنا المستمرة ، سننشئ كيانًا جديدًا (جدول) في قاعدة بياناتنا بسمتين (صفوف). للقيام بذلك ، نضغط على ملف .xcdatamodeld في مستكشف الملفات وأنشئ كيانًا جديدًا باسم المدن ، أضف السمتين اللتين نحتاجهما: اسم المدينة و اسم البلد

ثم سنقوم بتعديل نوع قائمة البيانات الخاصة بنا في CustomSearchField.swift لتكون قائمة بالمدن بدلاً من قائمة عناصر البحث:

var dataList : [Cities] = [Cities]()

تقديم استعلامات إلى قاعدة البيانات التي تم إنشاؤها:

نحتاج الآن إلى إنشاء بعض الطرق للتعامل مع حفظ البيانات الجديدة وجلبها في قاعدة البيانات. للقيام بذلك نحن بحاجة لخلق سياق. السياق هو منطقة محددة حيث سنقوم بتخزين كل التغييرات التي قمنا بها قبل إلزامها بقاعدة البيانات. إذا كنت تستخدم git ، فهذه مثل منطقة التدريج. تقوم أولاً بإضافة ملفك إلى منطقة التدريج ، وعندما تكون جاهزًا لإجراء تغييراتك ، فإنك تلتزم بها في git.

نقوم بتغيير بداية طريقة filter () الخاصة بنا من أجل الاستعلام عن البيانات التي تتوافق مع إدخال المستخدم بدلاً من جلب جميع البيانات من قاعدة البيانات:

آخر شيء نضيفه هو طريقة addData () الجديدة لملء قاعدة البيانات الخاصة بنا. كن حذرًا ، يجب استدعاء هذه الوظيفة مرة واحدة فقط حيث ستصبح البيانات المخزنة ثابتة ، لذا قم بالتعليق على السطر المقابل في التعليمات البرمجية (قبل إنشاء tableView في buildSearchTableView () ) بعد المكالمة الأولى! حتى في حالة إعادة تشغيل التطبيق ، ستظل البيانات متاحة في الذاكرة الداخلية للجهاز.

هذا هو ! لقد انتهينا ! ؟

لقد بدأت في الغوص في برمجة Swift منذ بضعة أسابيع مع MOOC مثير للاهتمام وجدته على Udemy. بعد أن حصلت على أساسيات تطوير Swift و Xcode ، بدأت العمل على مشاريعي الخاصة مع جميع الوثائق المفيدة التي وجدتها على الويب. هذا البرنامج التعليمي الأول هو فرصة لي لمشاركة كل المعرفة التي اكتسبتها ، لذلك آمل أن يكون قد ساعدك!

إذا كان لديك سؤال فلا تتردد في إخباري في التعليقات! ولا تنسى أن تصفق لي إذا استمتعت بالمقال ؟؟؟

كل كود المشروع النهائي متاح هنا:

sinitame / customSearchField-medium

رمز المصدر لمقالة Medium: كيفية إنشاء UITextField للإكمال التلقائي باستخدام CoreData في Swift… github.com