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

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

الواجهة النصية TextView:

الواجهة النصية هي من أكثر الواجهات استعمالاً لسهولتها وإمكانية تطويعها لعرض مختلف النصوص. لا يمكن من خلال هذه الواجهة تحرير النص وإنما عرضه فقط. يمكن استعمال الواجهة بطريقتين الأولى هي عن طرقة كتابة ملف XML والثانية هي: داخل الكود نفسه. الطريقة الأولى هي المفضلّة والتي يجب أن تستعمل في معظم الأحيان لأنها تقوم بالحفاظ على الكود البرمجي مفصولاً عن الواجهات وتبقيه قابلاً للقراءة والتعديل بسهولة. أما الطريقة الثانية فيجب أن لا تستعمل إلا في حالة لم تفِ الطريقة الأولى بالغرض. وسوف أقوم بكيفية استعمال الطريقتين هنا.

ملاحظة: الواجهة النصية TextView كما هي معظم الوجهات في الأندرويد تتفرع من كلاس View وبالتالي يمكن استعمال الخصائص Attributes في الكلاس الرئيسي على الواجهة النصية.

كتابة الواجهة بطريقة الـ XML:

<TextView
android:layout_width="fill_parent"      // عرض الواجهة
android:layout_height="wrap_content"    // طول الواجهة
android:text="@string/hello"            // النص داخل الواجهة
android:autoLink="true"                 // تحويل الروابط داخل الواجهة إلى روابط يمكن الضغط عليها
android:capitalize ="words"             // تحويل الحروف جميعها إلى وضعية Uppercase خصوصاً بالنسبة للحروف الرومانية
android:lines = "5"                     // عدد الأسطر داخل الواجهة النصية
android:gravity= "right"                // محاذاة النص
android:scrollHorizontally = "true"     // السماح للنص بالتحريك أفقياً
android:textAppearance="@style/testView" // ربط الواجهة النصية بالنمط Style
android:textColor = "#000000"           // لون النص
android:textSize = "15dp"               // حجم النص
android:textStyle ="bold|italic"        // شكل النص (عريض، مائل)
android:typeface = "serif"              // خط النص
/>

هناك الكثير من الخصائص المتعلق بالواجهة النصية يمكن قراءتها من هنا: http://developer.android.com/reference/android/widget/TextView.html

كتابة الواجهة النصية بالطريقة البرمجية:

package com.example.helloandroid;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class HelloAndroid extends Activity {
   /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       TextView tv = new TextView(this);    // يتم إنشاء الكائن هنا
       tv.setText("Hello, Android");        // وهنا يمكن استعمال خصائص الواجهة النصية
       setContentView(tv);
   }
}

يمكن استعمال معظم الخصائص للواجهة النصية TextView داخل الكود البرمجي السابق، ولكن علينا معرفة أي دالة ترتبط بالخصائص. لمعرفة ذلك يمكن متابعة الجدول في هذا الرابط: http://developer.android.com/reference/android/widget/TextView.html. نجد أن بجانب الخصائص دوال معينة ترتبط بتلك الخصائص ويمكن استعمالها محل الخصائص عند استعمال الواجهة النصية داخل الكود البرمجي.

صندوق التحقق Checkbox:

يحتوي صندوق التحقق على حالتين الأولى “متحقق” والأخرى “غير متحقق”.

<CheckBox
android:id="@+id/checkbox"           // المعرّف الخاصة بالصندوق
android:layout_width="wrap_content"    // عرض الواجهة
android:layout_height="wrap_content"   // ارتفاع الواجهة
android:text="Check this box"          // النص الذي يكون بجانب الصندوق
 android:onClick="onCheckboxClicked"    // الدالة التي سوف تستدعى عند الضغط على الصندوق
/>

ويمكننا وضع الدالة داخل كلاس النشاط:

public void onCheckboxClicked(View v) {
    // Perform action on clicks, depending on whether it's now checked
    if (((CheckBox) v).isChecked()) {
        Toast.makeText(this, "Selected", Toast.LENGTH_SHORT).show();
    } else {
        Toast.makeText(this, "Not selected", Toast.LENGTH_SHORT).show();
    }
}

هذه الدالة تقوم بعرض مربع طافٍ يعرض حالة صندوق التحقق.

واجهة اللولب Spinner

واجهة اللولب (هل تفضل ترجمة أخرى لها، ضعها في التعليقات) تعمل عمل القائمة المنسدلة في مواقع الانترنت. حيث يتم الضغط عليها ومن ثم تظهر قائمة بالخيارات ليختار منها المستخدم. هذه الواجهة هي عبارة عن جزء منها يعمل بالـ XML وآخر يعمل بالـ JAVA.

ملاحظة: يمكن صنع معظم الواجهات من خلال طريقتين إما XML أو لغة برمجية كاملة. ولكن من الأفضل دائماً استعمال XML ما دام متاحاً لأنه يجعل الكود أفضل من حيث القراءة والتعديل.

لإنشاء واجهة اللولب أنشئ مشروعاً في برنامج الـ Eclipse.
في ملف main.xml ضع هذا الكود:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:padding="10dip"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:text="@string/days_prompt"
    />
    <Spinner
        android:id="@+id/spinner"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:prompt="@string/days_prompt"  // لاحظ أنها نفس الموجودة في الأعلى، في هذه الواجهة تقوم مقام العنوان للقائمة
    />
</LinearLayout>

ومن ثم ضع هذا الكود في ملف في مجلد Values:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="days_prompt">اختر يوماً</string>
    <string-array name="days_array">
        <item>السبت</item>
        <item>الأحد</item>
        <item>الإثنين</item>
        <item>الثلاثاء</item>
        <item>الأربعاء</item>
        <item>الخميس</item>
        <item>الجمعة</item>
    </string-array>
</resources>

والآن في كلاس النشاط ضع هذا الكود:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

/* هنا نقوم بإنشاء الكائن الخاص بالواجهة اللولبية
ومن وضعه داخل محوّل ArrayAdapter كما شرحت
في الدرس السابق*/
    Spinner spinner = (Spinner) findViewById(R.id.spinner);
    ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(
            this, R.array.days_array, android.R.layout.simple_spinner_item);
    adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
    spinner.setAdapter(adapter);
}

اترك تعليقاً

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