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

قمنا في الجزء الاول من هذا الدرس بشرح بعض محتويات مكتبة Desing Support وكيفية اضافتها والتعامل معها سنكمل هذا الجزء الثاني والاخير من الدرس وسنقوم بشرح بعض الاضافات الجديدة ستحتاج للرجوع الى الدرس السابق من هنا لمعرفة متطلبات الشرح .

Coordinator Layout :

يقوم بالتنسيق بين Views داخل التصميم فمثلا يستطيح اخفاء Toolbar وايضا يقوم بعمل تاثير على FloatActionButton عند ظهور SnackBar .

شاهد التالي :

نلاحظ ارتفاع FAB عند ظهور رسالة SnackBar دون تخصيص اي Animation لكلا منهما

استخداماته :

مع Float Action Button :

يكون الكود بهذ الشكل :

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content">
<!-- Your other views -->
    <android.support.design.widget.FloatingActionButton
        android:id=”@+id/fab_normal”
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
        android:src=”@drawable/ic_plus”
        android:layout_gravity="bottom|right"
        app:fabSize=”normal” />
</android.support.design.widget.CoordinatorLayout>

من خلال النظر الى الكود نلاحظ ان Coordinator كـViewGroup قمنا باضافة Views في الداخل وتخصيصها .

عرض SnackBar :

 Snackbar.make(view, " مرحبا ", Snackbar.LENGTH_LONG)
                        .setAction("اخفاء", null).show();

مع App Bar :

يسمح لنا Coordinator بتغيير الواجهة عند عمليات التمرير “Scroll” مما يعطي الواجهه حيوية اكثر وتفاعل مع المستخدم .

يحتوي App Bar على مجموعة من الخصائص :

enterAlways : تستخدم لاخفاء ToolBar عن التمرير للاعلى وعند التمرير للاسفل يظهر ToolBar مباشرة :

enterAlwaysCollapsed : عند استخدام هذه الخاصية سنقوم باخفاء ToolBar كاملا من الشاشة وعند التمرير للاسفل سيظهر بشكل كبير كما ستلاحظ في الصورة:

exitUntilCollapsed : عند التمرير للاعلى سيتم تصغير ToolBar الى حجمه الاساسي وعند التمرير للاسفل سيظهر بكامل الحجم كما ستشاهد الان :

ToolBars :

تم اصدار مكون جديد للتعامل مع Toolbars اثناء عمليات التمرير للاعلى وللاسفل CollapsingToolbarLayout ويكون الشكل العام لاستخدامه كما في الكود بالاسفل

  <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">


            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="none" />

        </android.support.design.widget.CollapsingToolbarLayout>

      
    </android.support.design.widget.AppBarLayout>

عند النظر في ToolBar كود ستلاحظ وجود خاصية جديدة layout_collapseMode وتاتي من قيمتين هما :