مقدمة في استخدام مكتبة 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 بطريقة جميلة

error

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

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

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

 


Navigation View

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

 

device-2015-08-15-145634

 

<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
Screen Shot 2015-08-16 at 1.14.48 PM
عند تفعيل scrollable
Screen Shot 2015-08-16 at 1.15.52 PM
عند تفعيل fixed
  •  tabGravity : ويستقبل قيمة fill ومعناه ملئ جميع المساحات بين Tab واما center فتكون توسيط للتاب بدون ملئ للمساحات
Screen Shot 2015-08-16 at 1.19.55 PM
عند تفعيل center
Screen Shot 2015-08-16 at 1.20.18 PM
عند تفعيل fill

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

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

  1. درس رائع اخي الكريم
    نتمنى شرح TabLayout و navigation بالتفصيل مع مثال في الدرس القادم لاني لم اعرف كيف استخدمها بشكل صحيح
    وفقك الله