عناصر واجهة المستخدم

جميع العناصر التي نجدها في واجهات برامج أندرويد, هي بالأساس تستمد خصائها الأساسية و المهمة من كلاس واحد يحمل اسم View, و هذه العناصر نستطيع إضافتها لواجهة البرامج بطريقتين مختلفتين, إما عن طريق تعريفها بواسطة ملف XML حيث تقوم بوضع كل ما تحتاجه من عناصر, أو الطريقة الثانية التي تتمثل في إنشاء هذه العناصر برمجيا (TextView, EditText, Button, …) فيتم تحديد أبعادها و كل ما لزم من الخصائص الضرورية حسب كل عنصر, اليوم سنكتفي بعرض طريقة XML, أي بمجرد الإنتهاء من تعريف الواجهة فإننا نستعمل الميثود ()setContentView الذي يتولى مسؤولية رسم الواجهة المعدة مسبقا على الشاشة, و عليه يكون لنا الحق في الوصول لهذه العناصر و استغلالها عن طريق معرفاتها بواسطة الميثود ()findViewById كما سبق ذكره فكل العناصر لها من خصائص الView, و هذا ما يسهل علينا كيفية التعامل معها, فمثلا إلتقاط تفاعل المستخدم مع التطبيق, كالضغط على الأزرار و التركيز على مربعات النصوص (Focus) يتم باستخدام ميثودات  لواجهات برمجية تسمى Listener, كمثال الضغط على الأزرار ()setOnClickListener, أو الضغط لمدة طويلة ()setOnLongClickListener, أو التمرير باللمس ()setOnTouchListener.

لأجل تعريف الأزرار Button:


<Button
 android:id="@+id/btnButton"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/textButton" />

برمجة حدث الضغط على الزر ستكون على الشكل التالي:


final Button btnClick = (Button) findViewById(R.id.btnButton);
btnClick.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View v) {
        Date date = new Date();
        SimpleDateFormat sdf = new SimpleDateFormat("dd/MM/yyyy HH:mm");
        String strDate = sdf.format(date);
        Toast.makeText(getApplicationContext(), strDate, Toast.LENGTH_SHORT).show();
    }
});

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

EditText مربع إدخال النصوص:


<EditText
 android:id="@+id/edtName"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:inputType="text" />

<Button
 android:id="@+id/btnName"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/showName" />

inputType: هذه الخاصية تحدد طريقة الإدخال بالنسبة للنصوص, هل كل ما يكتب أم الارقام فقط أو الحروف فقط, إلخ …

الشفرة المصدرية اللازمة لأجل إظهار ما يكتب في مربع النصوص:


final EditText edtText = (EditText) findViewById(R.id.edtName);
final Button btnName = (Button) findViewById(R.id.btnName);
btnName.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View v) {
        Toast.makeText(getApplicationContext(), edtText.getText().toString(), Toast.LENGTH_SHORT).show();
    }
});

كما ترون نفس طريقة تعريف العناصر و استعمالها.

CheckBox: الزر المعروف الذي يأخذ قيمتين, إما مفعل أو غير مفعل


<CheckBox
 android:id="@+id/chkMale"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/male" />

<CheckBox
 android:id="@+id/chkFemale"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/female" />

بما أنه هناك حالتان فقط فإنه يتم التفاعل مع حالات هذ الأزرار كما يلي:


final CheckBox chkMale = (CheckBox) findViewById(R.id.chkMale);
 chkMale.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

@Override
 public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
 // TODO Auto-generated method stub
 if (isChecked) {
 Toast.makeText(getApplicationContext(), "Male is selected", Toast.LENGTH_SHORT).show();
 } else {
 Toast.makeText(getApplicationContext(), "Male is not selected", Toast.LENGTH_SHORT).show();
 }
 }
 });

final CheckBox chkFemale = (CheckBox) findViewById(R.id.chkFemale);
 chkFemale.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

@Override
 public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
 // TODO Auto-generated method stub
 if (isChecked) {
 Toast.makeText(getApplicationContext(), "Femal is selected", Toast.LENGTH_SHORT).show();
 } else {
 Toast.makeText(getApplicationContext(), "Femal is not selected", Toast.LENGTH_SHORT).show();
 }
 }
 });

RadioButton زر الخيار الوحيد من بين عدة اختيارات:


<RadioGroup
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:gravity="center"
 android:orientation="horizontal" >

<RadioButton
 android:id="@+id/rdbSky"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:onClick="onRadioButtonClicked"
 android:text="@string/sky" />

<RadioButton
 android:id="@+id/rdbLand"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:onClick="onRadioButtonClicked"
 android:text="@string/land" />
 </RadioGroup>

كي يكون هناك دائما اختيار وحيد علينا أن نجعل كل هذه الأزرار في مجموعة واحدة RadioGroup, هنا أضفنا خاصية جديدة ألا و هي خاصية تعريف حدث الضغط على الزر و أعطيناها اسم onRadioButtonClicked ليكون هذا الإسم هو نفس اسم الميثود التي ستعرف عملية الضغط على هذه الأزرار


public void onRadioButtonClicked(View view) {
 RadioButton rdbButton = (RadioButton) view;
 boolean isChecked = rdbButton.isChecked();

switch (view.getId()) {
 case R.id.rdbSky:
 if (isChecked) {
 Toast.makeText(this, "Sky", Toast.LENGTH_SHORT).show();
 }
 break;
 case R.id.rdbLand:
 if (isChecked) {
 Toast.makeText(this, "Land", Toast.LENGTH_SHORT).show();
 }
 break;
 }
 }

و بهذا نكون قد رأينا أهم العناصر التي تستعمل في برمجة أندرويد, طبعا مازال هناك الكثير من العناصر, لكنها تخضع لنفس المنطق من حيث التعريف و البرمجة.

إذا كان لديك أي استفسار فلا تتردد في طرحه أو مراسلتنا, مستعدون لتوضيحه.

تعليقان على “عناصر واجهة المستخدم

  1. اسماعيل مرغنى

    يجب على كل العرب تعلم البرمجه لان العصور القادمه عصور الكترونيه جزاكم الله خيرا

    رد
  2. foouad

    شكرا لكم هذا اول موقع القاه يشرح برمجة الاندرويد هكذا
    جزاكم الله كل خير و ارجوا منكم متابعة المشوار و شرح
    vaules
    و شرح ايضا classes.dex
    و ايضا اذا امكن شرح كيفية البرمجة بالاستخدام هاتف الاندرويد لان في ناس ما عندها لاب توب
    لكن يمكن بناء التطبيقات من الهاتف
    ارجوا الاجابة

    رد

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Time limit is exhausted. Please reload CAPTCHA.