انشاء تطبيق لساعات اندرويد Android Wear

نلاحظ في الاونه الاخيرة انتشار وكثرة الساعات الذكية والفضل يعود لاطلاق نظام تشغيل Android Waer من Google وهذا النظام خاص بالساعات الذكية .ويمكن القيام ببرمجة التطبيقات لها مثل برمجة تطبيقات الجوال او التابلت ولكن نحتاج الى معرفة بعض الاساسيات من حيث طريقة العمل وايضا اذا كانت الساعة دائرية ام مربعة .

• انشاء محاكي :

سنقوم بداية بانشاء محاكي لساعة الاندرويد حتى نقوم بتجربة التطبيق دون الحاجة لوجود ساعة حقيقة معك

افتح اندرويد استديو ثم اتبع الفيديو بالاسفل :

 

 

• انشاء تطبيق جديد :

افتح اندرويد استديو وقم بانشاء مشروع جديد بحيث تكون الخصائص كما في الصور بالاسفل :

تلاحظ في الصورة اننا قمنا بتحديد فقط Android Wear وهذا يعني ان التطبيق فقط موجة لساعات اندرويد .

قمنا باختيار Blank Activity وهذا يعني انشاء اكتيفيتي فارغ للبدء في برمجتة.

بعد الانتهاء من الخطوات السابقة وانتظار المزامنة ستجد في مجلد Layout ثلاث ملفات xml :

فمثلا اذا كان اسم Activity الخاص بك هو MainActivity فستجد هذه الملفات .

• layout/activity_main.xml : وهذه هو ملف واجهة المستخدم للساعة وتكون الرئيسية .
• layout/rect_activity_main.xml :وسيكون بداخلها عناصر واجهة المستخدم للساعة المربعة .
• layout/round_activity_main.xml : وسيكون بداخلها عناصر واجهة المستخدم للساعة الدائرية .

• شرح WatchViewStub :

عند فتح الملف layout/activity_main.xml  فستجد هذا الكود في داخله :

<?xml version="1.0" encoding="utf-8"?>
<android.support.wearable.view.WatchViewStub 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:id="@+id/watch_view_stub"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:rectLayout="@layout/rect_activity_main"
    app:roundLayout="@layout/round_activity_main"
    tools:context=".MainActivity"
    tools:deviceIds="wear" />

من خلال النظر سنجد:

• app:rectLayout : هنا نقوم بوضع ملف واجهة المستخدم للساعات المربعة والذي قمنا بشرحه سابقا .
• app:roundLayout : هنا نقوم بوضع ملف واجهة المستخدم للساعات الدائريةوالذي قمنا بشرحه سابقا .
• WatchViewStub : وظيفته تمييز نوع الساعة وقت التشغيل واظهارها للمستخدم.

 

• شرح MainActivity.class :

عند فتح ملف MainActivity.class سنجد انه لا يوجد فرق بينها وبين برمجة التطبيقات الاخرى ولكن الاختلاف كان في عملية انشائ ملفات Layout لتتمييز بين الساعات المربعة والدائرية .ولكن لن يتم تمميز Views بداخل الساعة حتى يتم تحديد نوع الساعة دائري او مربع لذلك سنحتاج الى اضافة setOnLayoutInflatedListener :

final WatchViewStub stub = (WatchViewStub) findViewById(R.id.watch_view_stub);
        stub.setOnLayoutInflatedListener(new WatchViewStub.OnLayoutInflatedListener() {
            @Override
            public void onLayoutInflated(WatchViewStub stub) {
                // Add Views here
                mTextView = (TextView) stub.findViewById(R.id.text);
            }
        });

• تشغيل التطبيق :

دائري	مربع

 

• استخدام Shape-Aware :

ستواجه مشكلة في عرض Views بداخل الساعات الدائرية بالذات لانها ستكون مخفية بحكم Padding الافتراضي ولكن يوجد بداخل مكتبة wearable مكون BoxInsetLayout والذي يعطينا شكل تقريبا لما في الصورة بالاسفل :

نلاحظ المربع الفضي هذا يكون جميع Views بداخلة اي سيعطي للمستخدم نظرة كاملة لما يحتوى التطبيق دون اخفاء اي جزء من Views .ويحتوي BoxInsetLayout على مجموعة من الخصائص :

• يحتوي علي جميع خصائص الازاحة المتوفرة “left,right,top,bottom”.
• يوجد خيار خامس وهو all وهذا يعني ان Views ستكون بداخل المربع الفضي في الصورة السابقة .

<android.support.wearable.view.BoxInsetLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@drawable/robot_background"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:padding="15dp">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dp"
        app:layout_box="all">

        <TextView
            android:gravity="center"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:text="@string/sometext"
            android:textColor="@color/black" />

        <ImageButton
            android:background="@null"
            android:layout_gravity="bottom|left"
            android:layout_height="50dp"
            android:layout_width="50dp"
            android:src="@drawable/ok" />

        <ImageButton
            android:background="@null"
            android:layout_gravity="bottom|right"
            android:layout_height="50dp"
            android:layout_width="50dp"
            android:src="@drawable/cancel" />
    </FrameLayout>
</android.support.wearable.view.BoxInsetLayout>

• android:padding=”15dp” : هذا لان Padding في الساعات الدائرية اكبر بـ15 من Padding في الساعات المربعة .
• app:layout_box=”all” : هذا يعني ان FrameLayout وال-Views بداخل شكل دائري وليس له تأثير على الاشكال المربعة.

ستكون النتيجة بهذا الشكل :

 

طبعا هذا الدرس الاول من سلسة من الدروس ان شاء الله ،، اتمنى اني وفقت في ايصال المعلومة 

?