مقدمة في استخدام مكتبة Design Support – الجزء الاول

في مؤتمر المطورين لهذا العام قامت قوقل باستعراض بعض الاضافات القادمة لبرمجة الاندرويد وقامت باعطائنا لمحه على مكتبة Design Support وماتحتوي عليه من اضافات . الآن وبعد ان تم اصدارها بشكل رسمي سنستعرض محتويات هذه المكتبة بشكل بيط وسنقوم باذن الله بالتفصيل فيها في دروس قادمة .

سنقوم اولا باضافة dependencies في ملف build.grade

    compile 'com.android.support:design:22.2.1'

بعد الاضافة والتحميل سنبدا الان في شرح المحتويات سريعا

Floating Action Button

يستخدم لاعطاء وامر محددة كاضافة ملاحظة جديدة او ارسال رسالة . نستطيع الان اضافته مباشرة الى التطبيق دون الحاجة لاستخدام مكتبات خارجية كالسابق .
ياتي FAB بحجمين مختلفين بما يناسب تطبيقك

Normal : يكون بابعاد 56dp وهو المستخدم في اكثر الحالات
Mini : ويكون بابعاد 40dp ويستخدم فقط ليتماشى مع العناصر الاخرى في نفس الشاشة

سيكون لون FAB هو لون accent الموجود في تطبيقك ويمكنك تغيير لون خلفية FAB بون تعقيد .
كما ان FAB يحتوي على بعض attributes التي سنلقي عليها نظرة سريعه

Size : ويستخدم لتحديد حجم FAB سواء امان normal او mini
BackgrountTint : وهنا نقوم بتحديد خلفية FAB
borderWidth : لاضافة اطار
rippleColor : لتغيير لون تاثير الضغط على FAb
src : وتستخدم لاضافة ايقونة للـFab

طريقة اضافته في Layout تكون بهذا الشكل

 <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_done" />

EditText Floating Labels

الاضافة الجديدة TextInputLayout تعطي للمطورين استخدام العنوان العائم “floating labels” وهو عبارة عن انتقال نص hint “التلميح” في Editext للاعلى في اليمين او اليسار مما يسمح للمستخدم بمعرفة المطلوب منه للكتابة في هذا الحقل كما سنلاحظ في الصورة المتحركة بالاسفل .

ايضا دعم ِError Messages بطريقة جميلة

فقط قم باضافة هذه الاسطر الى Activity

 textname.setErrorEnabled(true);
                    textname.setError(getString(R.string.username_required));

يجب اولا تفعيل Error قبل كتابة الرسالة حتى يعطي مساحه في Input لاظهار الرسالة

Navigation View

من اكثر الاضافات استخداما وشيوعا في التطبيقات الجديدة لانها تعطي شعور للمستخدم ببساطة التطبيق والوصول السريع للعناصر ايضا سهولة استخدامها مع DrawerLayout كما سنلاحظ في الكود التالي وايضا ستكون العناصر مرتبطة بملفات menu مما يعطي سهولة اكثر للاستخدام والبرمجة

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include layout="@layout/toolbar" />

        <FrameLayout
            android:id="@+id/main_content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />


    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_header"
        app:menu="@menu/drawer" />

</android.support.v4.widget.DrawerLayout>

عند النظر الى NavigateionView نجد اثنين attributes وهي الاهم لدينا

Header Layout
لاضافة عناصر في اعلى NavigateionView لاضافة بيانات او تصميم . مع العلم ان هذا attribute اختياري .
Menu
هنا نقوم بربط ملف القائمة لاظهار العناصر التي نحتاجها في التطبيق اذ ذكرنا بداية هذا القسم ان NavigateionView يعتمد على القائمة لاظهار العناصر .

نلاحظ من هذا الكود اننا استخدمنا menu لانشاء عناصر NavigateionView

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_dashboard"
            android:title="الرئيسية" />
        <item
            android:id="@+id/nav_messages"
            android:icon="@drawable/ic_event"
            android:title="الرسائل" />
        <item
            android:id="@+id/nav_friends"
            android:icon="@drawable/ic_headset"
            android:title="الاصدقاء" />
        <item
            android:id="@+id/nav_discussion"
            android:icon="@drawable/ic_forum"
            android:title="محادثات" />
    </group>

    <item android:title="عناصر اضافية">
        <menu>
            <item
                android:icon="@drawable/ic_dashboard"
                android:title="عنصر اضافي ١" />
            <item
                android:icon="@drawable/ic_forum"
                android:title="عنصر اضافي ٢" />
        </menu>
    </item>

</menu>

سنتطرق في الدروس القادمة بالتفصيل لعملية استخدام NavigateionView

.

TabLayout

طبعا ومن الاسم نعرف ان هذا المكون خاص بالتاب الموجودة في اندرويد سابقا التي كانت تضاف للتطبيقات عن طريق ViewPager ولكن كان هنا حاجة لاستخدام مكتبات خارجية لاضافة تصميم الماتيريال او لاضافة بعض الخصائص الجمالية .

<android.support.design.widget.TabLayout
    android:id="@+id/sliding_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="fixed"
    app:tabGravity="fill" />

بعد اضافة الكود سنتعرف على اهم attributes في TabLayout .

tabMode : ويحتوي على قيمتين فقط وهي fixed وتقوم بالغاء Scroll من TabLayout والقيمة الاخرى هي Scrollabel وتسمح بعملية الـScroll