برمجة الأندرويد

مكتبة Butter Knife والوصول للمكونات بشكل أسرع

فى الوضع العادى اذا اردت الوصول لاى مكون من المكونات فى الشاشة  فأنت تقوم باستخدام findViewById  ثم تقوم بعمل cast ويجب عليك فعل ذلك مع كل مكون موجود لديك تريد التعامل معه حينما يكون لديك عدد قليل من المكونات تكون الامور سهله لكن عندما يكون لديك عدد كبير من المكونات مثلا 8 TextView و 6 EditText  و زر و صورة أو اكثر تجد انك تقوم بكتابة findViewById كثيرا تعطيها الـ ID  تم تقوم بعمل Cast  تنتقل للعنصر الثانى تقوم بتعريفه findViewById وتعطيه الـ ID ثم تقوم بعمل Cast  تنتقل للمكون الثالث وهكذا  ولا بد أنك تشعر بالملل من كثرة كتابة findViewById وعمل الـ Cast  ولحسن الحظ لست وحدك من يشعر بالملل من فعل ذلك فلقد سبقك المبرمجون بالشعور بالملل لكن لم يكتفوا بذلك فقط بل أوجدوا حلولا حيث قام جاك وراتون بعمل مكتبة للتسهيل على المبرمجين اطلق عليها اسم سكين الزبد (Butter Knife) والتى سنقوم بشرحها الان فى هذه التدوينة .

 

إضافة المكتبة للمشروع

مثل أى مكتبة اخرى قم بإضافة الكود التالى الى ملف الـ Gradle الخاص بتطبيقك

compile 'com.jakewharton:butterknife:7.0.1'

قم بعمل بعمل مزامنة للمشروع عن طريق الضغط على ايقونة  سيتم مزامنة المشروع مع الـ Gradle واضافة المكتبة للتطبيق وتصبح جاهز للإنطلاق .

 

استخدام المكتبة مع الـ Activity

لدى الان TextView عادى جدا  كأحد المكونات

فى الوضع العادى اذا اردت تعريف هذا الـ TextView فى الجافا للتعامل معه سأقوم بعمل التالى

الان استطيع التعامل مع الـ TextView بالجافا وتنفيذ اى عملية وليكن setText  كالتالى

وسيفتح التطبيق ويكتب مكان النص Hello World we are Hendiware !  بشكل عادى تماما

 

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

حيث حذفنا سطر التعريف العادى findViewById  وقمنا باستخدام الـ Annotation Bind (اذ لم تكن لديك معلومات عن الـ Annotation يرجى قراءة القاء نظرة على هذه التدوينة ) واعطيناه الـ ID   وتحته مباشرة تعريف الـ TextView   وبداخل onCreate وضعنا ButterKnife.bind(this) وهى توضع مرة واحدة فقط وهى تشير للمكان الذى سيتم فيه عملية الـ FindViewByID  فى الوضع العادى .

نقوم الان بتشغيل التطبيق وستجد ان النتيجة نفسها تماما

 

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

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

 

حيث تقوم ميثود الـ setColorFilter بعمل فلتر لون على الصورة و0x اساسى فى بداية اللون لسبب لن اشرحه الان و ff الشفافية يليلها 30c7ff  وهو كود اللون الذى يظهر الان  فى الصورة السابقة (ملحوظة: الميثود خاصة بالـ ImageView وليس لها علاقة بالمكتبة ابدا استخدمتها لتوضيح الوصول والتعديل على الصورة فقط ) .

بنفس الطريقة يمكنك تعريف أى View بسهولة فقط @Bind يليها الـ R.id.viewid  ونوع الـ view واسمه ويصبح جاهزا للاستخدام .

وليس هذا هو الاستخدام الوحيد للمكتبة فبالاضافة الى استخدامها فى الوصول للمكونات يمكن أن تستخدم فى عمل onClick ايضا للـ Views  وكذلك onCheckChanged و onLongClick والعديد من الاشياء الاخرى وسنقوم الان بالتجربة على onClick كمثال سأقوم بإنشاء ثلاث ازرار  لتغيير لون لوجو هنديوير كالتالى  :

قمت بإنشاء ثلاث ازرار فى xml واعطيت كل زر id

 

اقوم فى الجافا باستخدام الـ Annotation OnClick  مع الـ ID وتحته مباشرة بدلا من تعريف الزر ثم استدعاء setOnClickListener سوف تقوم بعمل ميثود عادية جدا كأنك تقوم بعمل ميثود فى اى مكان وسيتم تنفيذها مباشرة عند الضغط

 

نقوم الان بتشغيل التطبيق وستجد انه عند الضغط على اى زر يتم تنفيذ الكود الموجود فى الميثود التى وضعت اسفل سطر OnClick وتلوين اللوجو

 

بنفس الطريقة يمكنك استخدام الانوتيشن OnCheckedChanged  وكتابة الميثود تحته تحتوى على باراميتر boolean checked وبداخلها تقوم بمعالجة الكود وايضا انوتيشن OnItemClick  والكثير من الأنوتيشن الاخرى يمكنك استكشافها بنفسك لكن كلهم يعملون بنفس المبدأ تكتب الأنوتيشن مع الـ ID الخاص بالـ View وتحته الميثود او تعريف الفيو  لانى لو تطرقت لكل الـ Annotation الخاصة بـ ButterKnife هنا فلن تكفى تدوينة او اثنين لتغطيتهم لذلك قم بتجربة الباقيين واى مشكلة تواجهك  او لديك استفسار اترك لنا تعليق وسنقوم بالرد عليك .

استخدام الـ ButterKnife مع الـ Fragment  

بنفس الطريقة بالنسبة لتعريف الـ Annotation لا يوجد فرق ابدا لكن بدلا من ButterKnife.bind(this) التى تضعها فى الـ Activity بعد setContentView سوف تضعها بداخل onCreateView وتعطيها باراميتر الـ this يشير الى الفريجمنت بالاضافة لباراميتر الـ view  نفسه كالتالى :

 

استخدام ButterKnife مع الـ ViewHolder

أحد الامكان الاخرى التى قد تقوم فيها بعمل findViewByID بكثرة هو الـ ViewHolder  داخل الـ Adapter وبنفس الطريقة ايضا بالنسبة للتعامل مع الـ Annotation فى تعريف view تقوم بعمل  @Bind  ثم الـ ID  وتحتها نوع واسم الـ view   لكن بداخل الكونستراكتور الخاص بالـڤيو هولدر سوف تقوم بتمرير الـ itemView للـ ButterKnife كالتالى :

 

 

هل الافضل ان استخدم ButterKnife ام findViewByID العادية ؟

فى الحقيقة لا فرق بينهم فى الاستخدام فكما ذكرت سابقا أن ButterKnife تقوم بعمل findViewByID بدلا منك لكن فى اثناء الـ Compile وبالتالى فاالنتيجة واحده لذلك لن تجد اى فرق فى السرعة والاداء فقط توفير الوقت والمجهود .

 

[stextbox id=”warning” caption=”ملحوظة” direction=”rtl”]سابقا المكتبة كانت تستخدم الأنوتيشن @InjectView بدلا من @Bind وكذلك inject بدلا من bind داخل الاكتيتفى حتى لا تعتقد ان هذه مكتبة اخرى اذا واجهك احد المواضيع او الاكواد القديمة التى استخدمت المكتبة . [/stextbox]

 

 

السابق
الـ MultiThreading بالعربية – الدرس الثانى
التالي
GCM بالـعربية – الدرس الأول

4 تعليقات

أضف تعليقا

  1. slimen قال:

    thank you 😉

  2. maysara قال:

    شرح رااااااااااااائع جدا
    ليش ما تعملو ابليكيشن للموقع ؟

  3. Abdalalh J.Murad قال:

    شكرا على الشرح الرائع

اترك تعليقاً

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.