دليلك لأفضل مكتبات الأندرويد - الجزء الثاني - ButterKnife

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

 

إستكمالاً لسلسلة مكتبات الأندرويد سنستعرض اليوم مكتبة من أهم المكتبات التي يستخدمها المطورون بشكل أساسي في تطوير التطبيقات على منصة الأندرويد. هذه المكتبة هي مكتبة Butter Knife.

 

ولكن السؤال الأهم هو ما فائدة هذه المكتبة ؟

من المعروف لدى المطورين بأن طريقة ربط الـ View component مع الأوبجكت داخل كود الجافا هو باستخدام الأمر find view by id. ومن ثم ربط الأوبجكت عن طريق R.id.component. هذه الطريقة يوماً بعد يوم تثبت عدم فعاليتها وخصوصاً عند وجود الكثير من الـ components داخل الـ layout التي ستضطر لربطها بشكل يدوي. كما أن الربط العادي ستضطر في البداية إلى إنشاء المتغير في بداية الكلاس أما تعريفه فيجب أن يتم داخل onCreate method. هذه الطريقة باتت تثبت عدم فعاليتها يوماً بعد يوم. ButterKnife هي مكتبة تستطيع من خلالها ربط الأوبجكت مع الـ view component بشكل سريع وسلس وبشكل مباشر. كما تمكنك المكتبة من ربط الـ drawables والـ strings وغيرها وليست مقتصرة فقط على الـ views. 

 

كيف تعمل هذه المكتبة ؟ لنبدأ ...

أولاً : وكما جرت العادة يجب إضافة هذه المكتبة داخل المشروع كـ dependency إضافية داخل ملف الـ gradle.build. من المهم أيضاً إضافة الـ annotationProcessor كي تعمل المكتبة بشكل صحيح. ومن ثم عمل sync لكي تتم الإضافة.

compile 'com.jakewharton:butterknife:8.8.1'
annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'

 

ثانياً: بعد عمل sync يمكننا الآن البدء في تصميم الـ layout .. طبعاً سأقوم بتصميم layout بسيطة فقط لتوضيح عمل هذه المكتبة. من الممكن ملاحظة بأن ملف الـ xml لم يتغير بتاتاً ولم نقم بإضافة أي كود إضافي وهذه ميزة إضافية أيضاً لأن هناك الكثير من المكتبات الأخرى التي توفر ميزة الربط ستضطر حين إستخدامها إلى إضافة تعديل بسيط داخل ملف الـ xml.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="15dp">

    <TextView
        android:id="@+id/key"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:gravity="center"
        android:text="WEBSITE" />

    <TextView
        android:id="@+id/value"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:gravity="center"
        android:text="3alamPro"
        android:layout_alignParentEnd="true"/>

</RelativeLayout>

صورة توضح الشكل النهائي للـ layout

 

ثالثاً: سنبدأ الآن العمل على ملف الـ Java حيث سنتعلم بشكل أكبر طريقة عمل المكتبة. في البداية سنقوم كما جرت العادة بتعريف المتغيرات ولكن هذه المرة وقبل تعريفها سنقوم بكتابة 

@BindView(R.id.key)

 

ليصبح الشكل النهائي للمتغيرات كالتالي

public class MainActivity extends AppCompatActivity {

@BindView(R.id.key)
TextView key;

@BindView(R.id.value)
TextView value;
  
@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  ButterKnife.bind(this);
}

 

بهذه الأسطر البسيطة سنكون قد أنتهينا تماماً من الربط .. طبعاً للمقارنة هذا ما سنقوم بكتابته بدون butterknife .. قد يبدو الفرق بسيط .. ولكن مع وجود الكثير من الـ components التي تحتاج للربط سيكون الفرق واضح.

public class MainActivity extends AppCompatActivity {
TextView key;
TextView value;

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  key = (TextView) findviewbyid(R.id.key);
  value = (TextView) findviewbyid(R.id.value);
}

 

رابعاً: لا يجب أن ننسى إضافة بعد تعريف onCreate method.

ButterKnife.bind(this);

 

لتصبح onCreate method في شكلها النهائي

@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
}

 

هذا كان توضيح بسيط للميزة الأساسية التي تقدمها المكتبة .. ولكنها أيضاً تقدم المزيد من الإختصارات منها مثلاً BindString@ التي توفر لكن عناء ربط الـ strings الموجودة داخل ملف الـ values بدلاً من getResources().getStrings(R.strings.whatever) أيضاً توفر BindDrawable@ وسنستعرض كيفية عملها.

 

سنقوم الآن بإنشاء ملف Drawable عبارة عن إطار سنقوم بوضعه على key textview. 

نقوم بإنشاء ملف Drawable جديد ونسميه background على سبيل المثال

 

بعد ذلك نقوم بإضافة الكود المرفق ( خلفية صفراء وحواف سوداء )

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#eee1"></solid>
    <stroke android:color="#000" android:width="10dp"></stroke>

</shape>

 

بالعودة لملف الجافا سنقوم بإنشاء أوبجكت جديد لملف الـ Drawable بطريقة الـ Bind.

@BindDrawable(R.drawable.background)
Drawable drawable;

 

ومن ثم وضعه كخلفية للـ
textview داخل onCreate method بعد ButterKnife.bind طبعاً

key.setBackground(drawable);

 

سنقوم أيضاً بتغيير الـ Text الموجودة داخل الـ textviews للتأكد بأن الربط يعمل بشكل صحيح

key.setText("Website Bind");
value.setText("Pro3alam");

 

نقوم بتشغيل البرنامج والتأكد من النتيجة .. كل شي على ما يرام ?

 

هل إنتهينا ؟ ليس بعد .. مازال هناك ميزة قوية تقدمها هذه المكتبة .. وهي الإستغناء التام عن الـ inner-classes الناتجة عن الـ Listener عند عمل setOnClickListener . عن طريق ButterKnife يمكنك بكل بساطة كتابة OnClick@ ومن ثم الـ id الخاص بالـ view . 

على سبيل المثال .. سنقوم بإظهار Toast بسيط عند الضغط على أحد الـ textviews من خلال OnClick@

@OnClick(R.id.key)
    void clicked1() {
        Toast.makeText(getApplicationContext(), "key", Toast.LENGTH_LONG).show();
    }

@OnClick(R.id.value)
    void clicked2() {
        Toast.makeText(getApplicationContext(), "value", Toast.LENGTH_LONG).show();
    }

 

عند تشغيل البرنامج وعند الضغط على الـ textviews سنرى بأن كل شي يعمل بشكل صحيح

 

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

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