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

معرفة الواجهات الرسومية Views في تطبيقات الأندرويد هي الخطوة الأولى لبرمجة التطبيقات. فالواجهات الرسومية هي التي ترتبط المستخدم بالكود الذي تضعه. في الأندرويد هناك العديد من الواجهات الرسومية التي تمكنك من وضع واجهة جميلة وبشكل مرن أيضاً، وتجعل المستخدم يتحكم بالتطبيق بسهولة ويسر. سوف أقوم بشرح الواجهات الرئيسية في الأندرويد في هذه الحلقة. يمكن تقسيم الواجهات الرسومية إلى قسمين، الأول: هو واجهات الأطر العامة Layout Views والآخر هو الواجهات المتضَمنة (بفتح الضاء) داخل الأطر العامة، وسوف يتم تسميتها بالواجهات الجزئية لأنها تدخل ضمن واجهات أخرى ولا تشكل واجهة قائمة بذاتها في معظم الأحيان.

واجهات الأطر العامة Layout Views:

هناك أربع واجهات (تسمى أيضاً أطر) مهمة تستخدم بكثرة في التطبيقات لسهولة استعمالها وأداءها الغرض المطلوب بشكل فعّال، هذه الواجهات هي: الواجهة السطرية  LinearLayout والواجهة العلائقية  RelativeLayout والواجهة اللسانية  TabHost والواجهة الجدولية  TableLayout.

الواجهة السطرية – LinearLayout:

هي أسهل الواجهات الأربع ومهمتها عرض الواجهات داخلها بشكل متسلسل عمودي أو أفقي. تقوم هذه الواجهة الرسومية بعرض كل الواجهات الفرعية داخلها متراصفة بشكل عمودي أو أفقي بغض النظر عن حجم الواجهات تلك. يمكنك ترتيب الواجهات الفرعية بطريقتين، الأولى: وضع عرض ثابت لكل واجهة، أو وضع وزن لكل واجهة. وزن الواجهة android:weight يعني أهمية هذه الواجهة بالنسبة لبقيات الواجهة داخل الإطار الخيطي. فمثلاً إذا كان الإطار يحتوي على واجهتين لكل منها وزن رقم 1، فهذا يعني أن كلاً منهما سوف يتحل نصف المساحة الكاملة. فإذا وضعنا واجهة ثالثة بجانبهما تحمل الوزن 2، ستحتل الواجهة الجديدة نصف المساحة والواجهتين الأخريين نصف المساحة الباقية.

مثال على الواجهة السطرية:

<?xml version="1.0" encoding="utf-8"?>
<!-- عرض الواجهة بالشكل العمودي -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="#CD5C5C"
            android:gravity="center_horizontal"
            android:text="أحمر"
            android:textColor="#000000" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="#008000"
            android:gravity="center_horizontal"
            android:text="أخضر"
            android:textColor="#000000" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="#ADD8E6"
            android:gravity="center_horizontal"
            android:text="أزرق"
            android:textColor="#000000" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="#FFFF00"
            android:gravity="center_horizontal"
            android:text="أصفر"
            android:textColor="#000000" />
    </LinearLayout>
<!-- عرض الواجهة بالشكل الأفقي-->
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:orientation="vertical" >

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="السطر الأول"
            android:textColor="#ffffff"
            android:textSize="15pt" />

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="السطر الثاني"
            android:textColor="#ffffff"
            android:textSize="15pt" />

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="السطر الثالث"
            android:textColor="#ffffff"
            android:textSize="15pt" />

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="السطر الرابع"
            android:textColor="#ffffff"
            android:textSize="15pt" />
    </LinearLayout>
</LinearLayout>

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

يمكنك تغيير القيم في الكود إلى ما تريد لترى كيف يؤثر ذلك على عرض الواجهات الرسومية داخل الواجهة السطرية.

الواجهة العلائقية – RelativeLayout:

هي أحدى اكثر الواجهات استعمالاً أيضاً وذلك لسهولة تحريك الواجهات الفرعية داخلها. كما يبدو من اسمها تعتمد هذه الواجهة على التناسب بين الواجهات الفرعية داخلها لعرض الكائنات، ويمكنك وضع واجهة معينة لتكون فوق أو تحت أو يسار أو يمين واجهة أخرى. هذا النوع من الواجهات يستعمل للنماذج أو للتحكم بالواجهات الفرعية بشكل أفضل من الواجهة السطرية.

مثال على الواجهة العلائقية:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TextView
        android:id="@+id/label"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:text="أدخل النص هنا: " />

    <EditText
        android:id="@+id/entry"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/label"
        android:background="@android:drawable/editbox_background"
        android:lines="2" />

    <Button
        android:id="@+id/ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/entry"
        android:layout_marginLeft="10dip"
        android:text="أرسل" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/ok"
        android:layout_toRightOf="@id/ok"
        android:text="إلغاء" />

</RelativeLayout>

وهذه النتيجة النهائية للكود:

الإطار الجدولي – Table Layout:

هو أيضاً من الأطر السهلة والمستعملة بكثرة أيضاً. هذا النوع من الواجهات هو سهل على مصممي تطبيقات الويب ومستعملي لغة الهتمل حيث أنها تستعمل نفس الطريقة لبناء جدول ووضع محتويات فيه. يمكن وضع أي محتوى في الجدول بل حتى أنه يمكن وضع أطر وواجهات أخرى ومن ضمنها الأطار الجدولي نفسه. ما ينقص هذا الإطار هو الحدود حيث أن لا يتضمن أي وسم لوضع حدود للجدول. يمكن إظهار الحدود من خلال حلول أخرى كاستعمال الـ Margins (سوف أشرح ذلك في درس مقبل إن شاء الله).

مثال على الواجهة:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="1" >

    <TableRow >

        <TextView
            android:gravity="right"
            android:padding="3dip"
            android:text="Ctrl-O" />

        <TextView
            android:layout_column="1"
            android:padding="3dip"
            android:text="فتح ..." />
    </TableRow>

    <TableRow >

        <TextView
            android:gravity="right"
            android:padding="3dip"
            android:text="Ctrl-S" />

        <TextView
            android:layout_column="1"
            android:padding="3dip"
            android:text="حفظ ...." />
    </TableRow>

    <TableRow >

        <TextView
            android:gravity="right"
            android:padding="3dip"
            android:text="Ctrl-Shift-S" />

        <TextView
            android:layout_column="1"
            android:padding="3dip"
            android:text="حفظ باسم..." />
    </TableRow>

    <View
        android:layout_height="2dip"
        android:background="#FF909090" />

    <TableRow >

        <TextView
            android:gravity="right"
            android:padding="3dip"
            android:text="" />

        <TextView
            android:padding="3dip"
            android:text="استيراد ..." />

        <TextView
            android:padding="3dip"
            android:text="X" />
    </TableRow>

    <TableRow >

        <TextView
            android:gravity="right"
            android:padding="3dip"
            android:text="Ctrl-E" />

        <TextView
            android:padding="3dip"
            android:text="تصدير ..." />

        <TextView
            android:padding="3dip"
            android:text="X" />
    </TableRow>

    <View
        android:layout_height="2dip"
        android:background="#FF909090" />

    <TableRow >

        <TextView
            android:layout_column="1"
            android:padding="3dip"
            android:text="خروج" />
    </TableRow>

</TableLayout>

وهذه نتيجة الكود:

الواجهة اللسانية  – TabHost:

هذه الواجهة الرسومية تستعمل في العادة كحاضنة للنشاطات المختلفة في التطبيق. وسهولة استعمالها بالنسبة للمستخدم العادي هو سبب شهرتها. حيث تحتوي على أزرار رسومية مع نص معين وفوق (أو تحت) تلك الأزرار تكون النشاطات المختلفة، وعند الضغط على كل زر يظهر النشاط المتعلق به.

أتمنى أن تكون هذه الحلقة مفيدة، وإن شاء الله في الدرس القادم سوف أشرح الواجهات الرسومية الأخرى.

اترك تعليقاً

الحقول المطلوبة موسومة بالعلامة *.