اجراءات وتنقلات الساعه

الإعلانات

اجراءات وتنقلات الساعه

 

اجراءات وتنقلات الساعه

كجزء من التصميم لنظام تشغيل الساعات بواسطة قوقل، يتوفر درجان تفاعليان:

 

  • درج التنقل. يمكنك تمكين المستخدمين من التبديل بين طرق العرض في تطبيقك.

 

درج التنقل متعدد الصفحات. يمكنك من تقديم محتويات درج التنقل في صفحة واحدة أو كصفحات متعددة.

لعرض محتويات درج التنقل في صفحات متعددة ، إستخدم سمة app:navigationStyle مع تعيين قيمة إلى الصفحات المتعددة multiPage.

  • درج الإجراء. يتيح لك سهولة الوصول إلى الإجراءات الشائعة في تطبيقك. يظهر درج الإجراءات أسفل الشاشة..

ويحتوي على إجراءات مستخدم محددة السياق، مشابهة لشريط الإجراءات على الهاتف.

درج الإجراءات يظهر جزئياً عندما يصل المستخدم إلى أعلى أو أسفل محتوى التمرير.

تعيين العنوان: يمكنك تعيين عنوان درج الإجراءات إما بإستخدام دالة ()setTitle (من WearableActionDrawerView) أو بإستخدام سمة app:drawerTitle.

 

 

 

الشكل 1. أدراج التنقل و الإجراء

 

 

للحصول على معلومات مفصلة حول الفئات الموضحة في هذه الصفحة، اقرأ مرجع واجهة برمجة التطبيقات لحزمة android.support.wear.widget.drawer.

توجد الفئات في مكتبة واجهة مستخدم الساعه. للحصول على معلومات حول هذه المكتبة، والفئات التي تم إيقافها (بما في ذلك الفئات التي كانت تُستخدم سابقاً، لأدراج الإجراء والتنقل) و التي تحل محلها مكتبة واجهة مستخدم الساعه، راجع إستخدام مكتبة واجهة مستخدم الساعه.

 

راجع المصادر التالية:

تصميم درج التنقل
نماذج لأدراج الساعه
كود تجريبي للتنقل والإجراءات

 

 

 

 

 

اجراءات وتنقلات الساعه

 

إنشاء مخطط درج


لإضافة درج إجراء أو تنقل إلى تطبيقك، قم بالإعلان عن واجهة المستخدم بواسطة كائن WearableDrawerLayout كطريقة عرض أساسية للمخطط.

بداخل WearableDrawerLayout، إذا كان المحتوى قابل للتمرير، فيجب أن يدعم التمرير المتداخل (التمرير من جميع الإتجاهات).

مثال، يستخدم المخطط التالي WearableDrawerLayout مع ثلاث طرق عرض تابعة: مخطط خطي لإحتواء المحتوى الرئيسي، درج التنقل، ودرج الإجراءات.

<android.support.wear.widget.drawer.WearableDrawerLayout
    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">
    <ScrollView
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:nestedScrollingEnabled="true">
        <LinearLayout
            android:id="@+id/linear_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" />
    </ScrollView>
    <android.support.wear.widget.drawer.WearableNavigationDrawerView
        android:id="@+id/top_navigation_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <android.support.wear.widget.drawer.WearableActionDrawerView
        android:id="@+id/bottom_action_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:actionMenu="@menu/action_drawer_menu"/>
</android.support.wear.widget.drawer.WearableDrawerLayout>

 

ملاحظة: الفئة WearableDrawerLayout تحل محل فئة مشابهة تم إيقافها في مكتبة دعم الساعات.

 

 

 

 

 

اجراءات وتنقلات الساعه

 

قم بإنشاء درج تنقل متعدد الصفحات


بشكلٍ إفتراضي، درج التنقل هو عبارة عن درج من صفحة واحدة. ومع ذلك، قد لا يكون درج الصفحة الواحدة ملائماً لتطبيقك..

خاصة إذا كان تطبيقك يحتوي على أكثر من سبعة معاينات، أو يحتوي على معاينات لا يتم تمثيلها بسهولة بإستخدام الأيقونات.

لإنشاء درج تنقل متعدد الصفحات، قم بتطبيق السمة "navigationStyle="multiPage على الدرج. مثال:

<android.support.wear.widget.drawer.WearableNavigationDrawerView
    android:id="@+id/top_drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_red_light"
    app:navigationStyle="multiPage"

 

 

 

 

 

 

اجراءات وتنقلات الساعه

 

تهيئة محتويات الدرج


كإحدى الخطوات الأساسية لنشاط ما، أن تقوم بتهيئة قوائم عناصر الأدراج. يجب عليك توسيع WearableNavigationDrawerAdapter لملء محتويات درج التنقل.

يمكنك ملء محتويات درج الإجراءات في ملف XML للمخطط الخاص بك بإستخدام سمة app:actionMenu

app:actionMenu="@menu/action_drawer_menu"

 

الكود التالي يوضح كيفية تهيئة محتويات الأدراج:

KOTLIN

class MainActivity : Activity(), MenuItem.OnMenuItemClickListener {

    private lateinit var wearableDrawerLayout: WearableDrawerLayout
    private lateinit var wearableNavigationDrawer: WearableNavigationDrawerView
    private lateinit var wearableActionDrawer: WearableActionDrawerView
    ...
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        ...
        // Top navigation drawer
        wearableNavigationDrawer = findViewById(R.id.top_navigation_drawer)
        wearableNavigationDrawer.setAdapter(YourImplementationNavigationAdapter(this))
        // Peeks navigation drawer on the top.
        wearableNavigationDrawer.controller.peekDrawer()
        // Bottom action drawer
        wearableActionDrawer =
                findViewById<WearableActionDrawerView>(R.id.bottom_action_drawer).apply {
                    // Peeks action drawer on the bottom.
                    controller.peekDrawer()
                    setOnMenuItemClickListener(this@MainActivity)
                }
    }
}

JAVA

public class MainActivity extends Activity implements
        OnMenuItemClickListener {
    private WearableDrawerLayout wearableDrawerLayout;
    private WearableNavigationDrawerView wearableNavigationDrawer;
    private WearableActionDrawerView wearableActionDrawer;
    ...
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ...
        // Top navigation drawer
        wearableNavigationDrawer = (WearableNavigationDrawerView) findViewById(R.id.top_navigation_drawer);
        wearableNavigationDrawer.setAdapter(new YourImplementationNavigationAdapter(this));
        // Peeks navigation drawer on the top.
        wearableNavigationDrawer.getController().peekDrawer();
        // Bottom action drawer
        wearableActionDrawer = (WearableActionDrawerView) findViewById(R.id.bottom_action_drawer);
        // Peeks action drawer on the bottom.
        wearableActionDrawer.getController().peekDrawer();
        wearableActionDrawer.setOnMenuItemClickListener(this);
    }
}

 

 

 

 

 

 

اجراءات وتنقلات الساعه

 

إنشاء معاينة درج مخصصة


لإستخدام المعاينات المخصصة في الأدراج، قم بإضافة WearableDrawerView إلى WearableDrawerLayout.

لتعيين المعاينه السريعه و محتويات الدرج، قم بإضافتها كتوابع لـ WearableDrawerView وحدد المعرفات الخاصة بهم في سمات peekView و drawerContent، على التوالي.

حدد أيضاً موضع الدرج إما بإستخدام القيمة “أعلى” أو “أسفل” لسمة android:layout_gravity (فقط تدعم القيمتين أعلى وأسفل).

المعاينات السريعه المخصصة يجب أن تحدد هوامشها العليا والسفلى.

يحدد المثال التالي درج علوي مع معاينة سريعه ومحتويات الأدراج:

<android.support.wear.widget.drawer.WearableDrawerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="top"
    android:background="@color/red"
    app:drawerContent="@+id/drawer_content"
    app:peekView="@+id/peek_view">
    <FrameLayout
        android:id="@id/drawer_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- Drawer content goes here.  -->
    </FrameLayout>
    <LinearLayout
        android:id="@id/peek_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:paddingTop="8dp"
        android:paddingBottom="8dp"
        android:orientation="horizontal">
        <!-- Peek view content goes here.  -->
    </LinearLayout>
</android.support.wear.widget.drawer.WearableDrawerView>

 

 

 

 

 

 

اجراءات وتنقلات الساعه

 

الإستماع لأحداث الدرج


للإستماع لأحداث الأدراج، قم بإستدعاء ()setDrawerStateCallback على WearableDrawerLayout ثم قم بتمريرها لتنفيذ WearableDrawerLayout.DrawerStateCallback.

هذه الفئة المختصرة توفر عمليات إستدعاء لأحداث الأدراج مثل ()onDrawerOpened و ()onDrawerClosed و ()onDrawerStatechanged.

 

الأدراج السريعه

لجعل الدرج في وضعية الأدراج السريعه، قم بإستدعاء ()getController للوصول إلى ()peekDrawer و ()closeDrawer و ()openDrawer .

مثال:

KOTLIN

wearableActionDrawer.controller.peekDrawer()

JAVA

wearableActionDrawer.getController().peekDrawer();

 

بشكلٍ إفتراضي، يعرض درج الإجراءات، الإجراء الأول مع “شارة” عند وجود عدة إجراءات. إذا كنت تفضل فقط، عرض أيقونة المزيد…

(الثلاثة نقاط الرأسية) بدون الإجراء الأول، قم بتجاوز السلوك الإفتراضي عن طريق تعيين علامة showOverflowInPeek إلى القيمة “صحيح”. مثال:

<android.support.wear.widget.drawer.WearableActionDrawerView
    android:id="@+id/bottom_drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_dark"
    app:showOverflowInPeek="true"/>

 

بشكلٍ إفتراضي، درج الإجراء يقوم بعرض الدرج السريع، عندما يصل المستخدم إلى أعلى أو أسفل محتوى التمرير الرئيسي..

(أي، المعاينة التي تقوم بتنفيذ NestedScrollingChild)، سواء بالتمرير العادي أو بالرمي. إذا كنت تفضل، فبإمكانك جعل الدرج يعرض..

درج النظرة السريعة كلما قام المستخدم بالتمرير لأسفل، من خلال تعيين الدالة ()actionDrawer.setPeekOnScrollDownEnabled على القيمة “صحيح”.

درج التنقل، يظهر بشكلٍ إفتراضي عندما يصل المستخدم إلى الجزء العلوي من المحتوى، إما عن طريق التمرير العادي أو بالرمي.

 


للإطلاع على المقال باللغة الإنجليزية أضغط هنا.

الإعلانات