أول تطبيق لك مع الأندرويد

السلام عليكم ورحمة الله و بركاته.

في هذه الفقرة ، سنتطرق إلى التطبيق الأول و سنلقي نظرة على بعض المكونات التي تكون ال Activity ، كما سنقوم بتشغيل تطبيقنا على المحاكي.

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

لنتأمل قليلا ملف التصميم (Layout) الذي يعطينا شكل الActivity و الذي يحدد مكوناتها. لنفتح الملف و تجدونه هنا res/layout :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />
 
</RelativeLayout>

هناك نقط مهمة لابد من الوقوف عندها :

- كل ملف تصميم لابد من أن يضم نوعا من المكونات وهي التي ترث من الفئة ViewGroup وهي مكونات تحدد كيفية ترصيص (ترتيب) المكونات الأخرى.فهناك عدة طرق لذلك، فإذا استعملنا الRelativeLayout كما هو الحال عندنا، وهو يقوم بترصيص المكونات وفق إحداثياتها ونقصد بها المسافة الفاصلة بين المكون والحد الأعلى و المسافة الفاصلة بينه و بين الحد الأيسر

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

يمكن كذلك أن نستعمل ال LinearLayout و الذي يقوم بترصيص المكونات إما أفقيا أو عموديا ، أو ال GridLayout الذي يرصص المكونات في شبكة و هناك عناصر أخرى سنراها في دروس قادمة.

- كل المكونات الأخرى يتم إضافتها داخل الوسم (Tag أو balise) التالي <RelativeLayout> </RealativeLayout> .

- المكون الذي تلاحظونه داخل الوسم السابق هو ال TextView وهو الذي يمكننا من أظهار نصوص و سلاسل نصية . بالنسبة للخصائص الخاصة بكل وسم مثل android:layout_width فهي تحدد عرض المكون وهذه الخاصية يمكن أن تأخذ القيم "wrap-content" أي أن يكون عرض المكون عرض محتواه،أو "match-parent" أي أن يكون عرض المكون هو عرض العنصر الذي يحتويه أو عرض أبيه  (لأن هناك علاقة تربط بين العناصر في الأندرويد و هي علاقة الأب و الإبن) وهناك قيمة أخرى و هي تحديد القيمة التي نريدها مثلا "100dp" و dp هي وحدة من الوحدات المستعملة كـ sp و mm و px وغيرها .ولكم أن تعاينوا كل وحدة على حدى في الصفحة الخاصة بنظام الأندرويد هنا.

كذلك نلاحظ الخاصية android:text وهي التي تحدد لنا النص الذي ستم إظهاره من طرف هذا المكون،وهذا النص محدد كما يلي : string/hello_world@ أي النص الذي تم تحديده في ملف XML تحت اسم (id أو معرف) hello_world ورابطه هو res/values/strings.xml .في هذا الملف يتم تحديد السلاسل النصية التي نريد استخدامها في تطبيقنا،وعندما نريد استخدامها نستدعيها بالطريقة السابقة.ربما يقول البعض لماذا لا نكتب النص مباشرة ؟ نعم يمكن ذلك ، لكن تصور معي لو أنك أردت أن يكون تطبيقك متعدد اللغات، أي بلغات مختلفة.ما العمل ؟ هل ستنشأ تطبيقا لكل لغة ؟.ليس عمليا أليس كذلك؟وهنا تأتي هذه التقنية التي يمكننا فقط إنشاء ملف XML آخر بنفس المعرفات وبلغة أخرى...

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

سيكون ملف التصميم على هذه الشاكلة :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="change"
        />

</LinearLayout>

هناك بعض التغييرات البسيطة و هي كالتالي :

تم استبدال RelativeLayout بالعنصر LinearLayout :بالنسبة للخصائص layout_width و layout_height هي فقط لتحديد عرض و ارتفاع المكون.أما بالنسبة للخاصية orientation فهي لتحديد اتجاه ترصيص المكونات التي سيضمها LinearLayout ، وهذه الخاصية تأخذ القيمتين vertical (ترصيص المكونات عموديا أي مكون فوق مكون) أو horizontal (ترصيص المكونات أفقيا أي مكون بجانب مكون).

تم إضافة خاصية جديدة للمكون TextView و هي android:id والقيمة التي أعطيناها للخاصية هي textview ، يمكنكم وضع ما شئتم،وهذه الخاصية تحدد اسما خاصا بالمكون ومن خلاله يمكن استدعاءه برمجيا.سنرى ذلك في ما سيأتي.

تم إضافة مكون آخر هو المكون Button أي الزر وتم تحديد اسمه(id) والعرض والإرتفاع و النص الذي سيكتب على الزر.

بالنسبة للتصميم سيكون كما يلي :

الآن،بعدما قمنا بإعداد التصميم ، سنمر إلى الجانب البرمجي.لنفتح الملف الذي يحتوي على الفئة الرئيسية (Class) ، و سنعرف متغيرين الأول للزر الذي أضفناه(Button) و الثاني ل (TextView) :

package com.barmeej.android.firstapp;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends Activity {

 //التصريح بالمتغيرات
 private Button myButton;
 private TextView myTextView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //تهيئة المتغيرات
        myButton = (Button)findViewById(R.id.button);
        myTextView = (TextView)findViewById(R.id.textview);
        //عند الضغط على الزر يتم تنفيذ ما يلي
        myButton.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    //TextView نغير النص في ال
    myTextView.setText("النص الجديد");
   }
  });
        
    }
    
}

الكود بسيط للغاية،قمنا بتعريف المتغيرين myButton و myTextView و قمنا بربطهما بالزر و TextView (الذين قمنا بإضافتهما لتصميم التطبيق) ، وهنا يأتي دور المعرف (id) حيث بواسطته نربط بين المتغير myButton و الزر في التصميم.

عند لمس الزر يتم تنفيذ السطر البرمجي

myButton.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    //TextView نغير النص في ال
    myTextView.setText("النص الجديد");
   }
  });

يمكنكم تشغيل التطبيق في المحاكي و عند الضغط على الزر سيتغير النص hello world إلى نص جديد كما في الصورة :

إذن الخلاصة التي يمكن أن نخرج بها من تطبيقنا الأول هي أن أول شيئ يمكن البدء به هو إنشاء تصميم تكون المكونات فيه معرفة بمعرٌفات (id) يتم بواسطتها ربط هذه المكونات بالمتغيرات البرمجية التي يمكننا من خلالها التحكم في هذه المكونات ...