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

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

 

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

مكتبة Crouton هي مكتبة تتيح لك تنبيه المستخدم وإظهار بعض الإشعارات. تشبه في عملها مكتبة Toast الشهيرة ولكنها تختلف عنها بأنها تحل بعض المشكلات المتعلقة بـ Toast. واحدة من أهم مشاكل الـ Toast هي مشكلة out of context وهي بأن Toast تعمل وتظهر بغض النظر عن الـ context أو المضمون. قد تظهر في سياق مختلف تماماً عن المتوقع أي أنه عند الإنتقال لـ Activity أخرى سيستمر إشعار الـ Toast بالظهور كما أنها غير قابلة للتعديل وموحدة الشكل. كل هذه المشاكل من الممكن حلها بمكاتب مختلفة ولكن من أسهل هذه المكاتب هي Crouton. ولكن السؤال .. كيف تعمل ؟

 

مكتبة Crouton تتيح لك التحكم الكامل بشكل الإشعارات ولونها وخصائصها بما تتناسب مع تطبيقك. تعطيك كبداية 3 أشكال ثابتة إذا أردت الإبقاء على أشكال Crouton دون أي تغيير. هذه الأشكال هي :

1-      Alert Notification : باللون الأحمر والخط الأبيض ولمدة 3 ثواني تقريباً

2-      Info Notification : باللون الأزرق والخط الأبيض ولمدة 3 ثواني تقريباً

3-      Confirm Notification : باللون الأخضر والخط الأبيض ولمدة 3 ثواني تقريباً

لنبدأ التطبيق ونرى كيفية إظهار هذه الأشكال.

 

قبل بداية التطبيق وكما جرت العادة سنحتاج إلى إضافة Dependency لملف build.gradle ولكن هذه المرة سنحتاج لتعديل ملفي الـ gradle.

بالنسبة لملف build.gradle "project" سنضيف 

mavenCentral()

داخل Block الـ repositories الموجود في buildscript

 

بالنسبة لملف build.gradle "module" سنضيف

compile 'de.keyboardsurfer.android.widget:crouton:1.8.5@aar'

نقوم بعمل Sync من الأعلى حتى تضاف المكتبة ونستطيع بعدها البدء في العمل.

 

نقوم بإنشاء Layout بسيطة توضح عمل هذه المكتبة. تحتوي هذه الـ Layout على 3 أزرار خاصة بكل style وأيضاً على زر Toast وزر آخر لتوضيح الـ Custom Notification.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:paddingTop="50dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/info"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="INFO" />

        <Button
            android:id="@+id/alert"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Alert" />

        <Button
            android:id="@+id/succ"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Success" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/toast"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Toast" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/custom"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Custom" />

    </LinearLayout>


</LinearLayout>

 

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

 

نذهب الآن للجزء الأهم وهو ملف الـ Java.

ملاحظة : سنقوم بتطبيق مفاهيم الـ ButterKnife. لمزيد من المعلومات نرجو زيارة الموضوع التالي:

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

 

أولاً : سنقوم في البداية بتعريف المتغيرات والـ Buttons

@BindView(R.id.alert)
    Button alert;

    @BindView(R.id.info)
    Button info;

    @BindView(R.id.succ)
    Button succ;

    @BindView(R.id.toast)
    Button toast;

    @BindView(R.id.custom)
    Button custom;

 

ثانياً : سنقوم بعمل Bind للمتغيرات داخل onCreate method

ButterKnife.bind(this);

 

ثالثاً : سنقوم بإختيار كل زر للقيام بوظيفة معينة. نلاحظ عندما نريد إظهار Crouton أو إشعار لا نحتاج لتعريف أي متغيرات فهي تعمل بنفس طريقة عمل Toast. لإظهار الإشعارات بالأشكال السابقة التي سبق وتحدثنا عنها سنحتاج لتمرير 3 params فقط وهي الـ Context والنص والشكل سواء كان alert – info – confirm  والطريقة تبدو مشابهة تماماً لطريقة الـ Toast.

@OnClick(R.id.info)
    void clicked1() {
        Crouton.showText(this, "INFO 3alamPro", Style.INFO);
    }

    @OnClick(R.id.alert)
    void clicked2() {
        Crouton.showText(this, "ALERT 3alamPro", Style.ALERT);
    }

    @OnClick(R.id.succ)
    void clicked3() {
        Crouton.showText(this, "SUCCESS 3alamPro", Style.CONFIRM);
    }

    @OnClick(R.id.toast)
    void clicked4() {
        Toast.makeText(getApplicationContext(), "3alamPro", Toast.LENGTH_LONG).show();
    }

 

رابعاً : نقوم بإختبار التطبيق ونرى الفرق بين Crouton وبين Toast. وكيف أن Toast تستمر بالظهور حتى عند الخروج من التطبيق ولكن Crouton تختفي وهو المطلوب.

 

ماذا لو أردنا البقاء على هذه الأشكال ولكن نريد تغيير الوقت المحدد مسبقاً. بكل بساطة سنحتاج لعمل Object من كلاس Configuration الموجود مسبقاً داخل مكتبة Crouton.

Configuration croutonConfiguration;

 

ومن ثم نعرف الـ Object داخل onCreate method ونعطيه الوقت المطلوب ( الوقت المدخل يقاس بالـ milliseconds والثانية الواحدة تساوي 1000 ميلي ثانية ).

croutonConfiguration = new Configuration.Builder().setDuration(1000).build(); // 1 sec

 

الآن سنقوم بتغيير الوقت لواحدة من الإشعارات المعرفة مسبقاً ولكننا سنحتاج لتمرير باراميتر إضافي وهو getTaskId() سنتكلم عليه فيما بعد ولكن في الوقت الراهن قد لا يهمنا كثيراً. بهذا التعديل سيتغير الوقت ليصبح ثانية واحدة فقط بدلاً من 3 ثواني.

@OnClick(R.id.info)
    void clicked1() {
        Crouton.showText(this, "INFO 3alamPro", Style.INFO,getTaskId(),croutonConfiguration);
    }

 

نقوم بالتجربة والمقارنة بين INFO وبين ALERT ونستطيع رؤية الفرق في التوقيت.

 

بعد الإنتهاء من أول قسم سنبدأ في تصميم الـ Notification الخاصة بنا. وطبعاً هذا الأمر متاح بكل سهولة مع Crouton. سنقوم في البداية بتغيير لون الخط ولون خلفية الإشعار فقط. نلاحظ بأننا كنا نمرر باراميتر من نوع Style داخل crouton. الباراميتر Style.INFO عبارة عن ستايل جاهز ولتغييره سنحتاج لعمل Style خاص بنا. لذلك سنحتاج إلى عمل Object من كلاس style وإضافة جميع الخصائص بشكل يدوي.

Style style;

 

ونقوم بتعريف الـ Object داخل onCreate method.

style = new Style.Builder()
                .setBackgroundColorValue(Color.parseColor("#000000")) // black 
                .setGravity(Gravity.CENTER_HORIZONTAL)
                .setConfiguration(croutonConfiguration)
                .setHeight(100)
                .setTextColorValue(Color.parseColor("#ffffff")).build(); // white

 

للشرح بشكل أعمق للخصائص : 

 setBackgroundColorValue(Color.parseColor()) نستخدمها لإختيار لون خلفية الإشعار.

setGravity نستخدمها لإختيار مكان النص سواء كان في المنتصف أو على اليمين أو على اليسار.

setConfiguration نستخدمها لإختيار المدة الزمنية لإظهار الإشعار. (يجب إنشاء Object منفصل كالذي تم إنشاؤه في الخطوات السابقة )

setHeight نحدد من خلالها إرتفاع الإشعار.

setTextColorValue نحدد من خلالها لون خط النص داخل الإشعار.

ومن ثم ننهي التعريف بـ .build

 

نقوم الآن بتعديل واحدة من الإشعارات المعرفة سابقاً وإختيار الـ style الخاص بنا بدلاً من المعرف مسبقاً.

@OnClick(R.id.alert)
    void clicked2() {
        Crouton.showText(this, "ALERT 3alamPro", style);
    }

 

ونرى النتيجة. تعمل بشكل مثالي.

 

 

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

 

نقوم بتصميم Layout بسيطة تتضمن شعار الموقع فقط. نلاحظ بأن إرتفاع الـ Layout يمثل إرتفاع الإشعار نفسه لذلك إختيار الإرتفاع مهم جداً.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#000000">

        <ImageView
            android:layout_width="100dp"
            android:layout_height="30dp"
            android:layout_centerInParent="true"
            android:src="@drawable/pro"/>

    </RelativeLayout>

</RelativeLayout>

 

الشكل النهائي للـ Layout.

 

للاستمرار بذلك يجب علينا تعريف Object جديد من نوع View وعمل Inflate للـ Layout الخاصة بالإشعار. ومن ثم عمل Crouton جديد.

@OnClick(R.id.custom)
    void clicked5() {
        View customView = getLayoutInflater().inflate(R.layout.crouton_custom, null);
        Crouton.show(this,customView);
    }

 

والنتيجة ..

 

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

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