الدرس الخامس: تعديل الواجه Activity و كتابة الاكواد

الدرس الخامس: تعديل الواجه Activity و كتابة الاكواد

كما ذكرنا سابقا يتم تصميم الواجه عن طريق التعديل في ملف xml  الخاص بالـ Activity

اضغط مرتين علي ملف الـ activity

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

-- باستخدام  Graphical layout

-- باستخدام كود xml

و يمكن التنقل بين الواجه الرسومية و نافذة الكود من خلال الضغط علي الزر الخاص بها في نافذة eclips كما بالصورة

 اولا : باستخدام  Graphical layout:

لاضافة زر Button  مثلا قم بسحبه من Form widgets الي داخل الـ Activity

بعد إضافة الـ Button في المكان المطلوب  نحتاج إلي ضبط خصائصه

لعمل ذلك فم بالنفر علي الـ Button  بغرض تحديده

ثم توجه إلي نافذة الخصائص Properties  و عدل ما يلزم

نافذة الخصائص مقسمة إلي عمودين ،  الأيسر يحتوي علي اسم الخاصية أما الأيمن فيحتوي علي قيمة الخاصية

في حالتنا هذا نريد أن نغير النص الموجود علي Button  إلي Close

-- توجه إلي نافذة الخصائص و ابحث فيه علي خاصية Text  وقم بتغييرها إلي Close

أهم الخصائص التي يجب تحديدها لاي اداه

Width   : لتحديد عرض الاداه و تأخذ قيمتين ( fill_parent ) أي يسمح للاداه

      بملء كل المساحة المتوفرة لها في الشاشة  ،

      أو (wrap_content ) أي ان عرض الاداة يتناسب مع محتواها

Hight      : لتحديد ارتفاع  الاداه و تأخذ قيمتين ( fill_parent ) او

               (wrap_content )

id            : اسم الاداة و الذي سنستخدمه في الاشارة اليه في الكود

Text        : النص الذي سيظهر علي الاداة

OnClick : اسم الإجراء الذي يحتوي علي الأوامر التي سيتم تنفيذها عند النقر

                 علي الزر

عدل خاصية Text  الي Close    و OnClick  الي doFinish

ثانيا : -- باستخدام كود xml

كل عنصر في نافذة الكود يتم الاعلان عنه بـ Tag  باستخدام الرمز < يليه نوع العنصر ( زر ، صورة ، ... الخ ) ثم وصف لخصائصه و يجب إغلاق الـ Tag  في النهاية باستخدام الرمز />

توجه الي نافذة الكود ستجدها تبدأ بـ

<RelativeLayout …..

و هي تعني ان نوع التخطيط نسبي ان ان العناصر يتم رسمها طبقا لإحداثيات معينة  و يتم اغلاق الـ Tag الخاص بها في نهاية صفحة الكود بكلمة

</RelativeLayout>

 يليها الـ Tag  الخاص بصندوق النص و يتم الإعلان عنه بـ

<TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_centerVertical="true"

        android:text="@string/hello_world"

        tools:context=".MainActivity" />

في حالتنا هذه نرغب بإضافة زر أسفل صندوق النص

ضع مؤشر الكتابة بعد علامة />  الخاصة بالـ TextView و اضغط مفتاح الإدخال

و اكتب الكود التالي

<Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/textView1"

        android:layout_centerHorizontal="true"

        android:layout_marginTop="20dp"

        android:text="Close" />

نلاحظ انه تم الإعلان عن الزر باستخدام الأمر <Button    />

يتم كتابة الخاصية  بالشكل التالي

        android:اسم الخاصية  = "قيمة الخاصية"

قم بكتابة الأكواد لتصبح

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent" >

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_centerVertical="true"

        android:text="@string/hello_world"

        tools:context=".MainActivity" />

    <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/textView1"

        android:layout_centerHorizontal="true"

        android:layout_marginTop="20dp"

        android:text="Close"

        android:onClick="doFinish" />

</RelativeLayout>

قم بتجربة المشروع علي المحاكي ( بالنقر بزر الفارة علي اسم المشروع واختر Run as >> android application

*** كتابة الكود الخاص بالزر *****

تذكر اننا اعطينا للزر في الخاصية OnClick  القيمة doFinish لذلك مطلوب منا ان نقوم بانشاء اجراء باسم doFinish  في نافذة الكود

توجة الي نافذة الكود و قم بالنقر عليها مرتين

سنجد بها الكود التالي

و الذي يحتوي علي إعلان عن اسم الـ Activity  ثم يليه الإجراءات procedure و أهمها OnCreate و الحدث الذي يتم تنفيذه عند تشغيل الـ Activity  و ظهورها علي شاشة الجوال

نلاحظ ان الاكواد الخاصة بكل اجراء توضع ما بين {  و }

قم باضافة الكود التالي و المسئول عن اغلاق التطبيق عند الضغط علي زر Close

في المكان المحدد بالسهم في الصورة السابقة

public void doFinish(View view){

        finish();

       

    }

ليصبح الكود الكلي بالشكل التالي

package arabic.android.myfirstapp;

import android.os.Bundle;

public class MainActivity extends Activity {

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

    }

    public void doFinish(View view){

      finish();

     

    }

     

   

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.activity_main, menu);

        return true;

    }

}

سنلاحظ ان البرنامج اظهر لنا ان هناك خطأ ما في كلمة View

قم بالوقوف عليها ، ستظهر لك قائمة الاقتراحات  ، اختر منها

Import View (android.view)

فيديو الشرح

قم بتجربة المشروع علي المحاكي

انتهي