العودة   منتديات طلاب الجامعة العربية المفتوحة > منتدى كليات الجامعة العربية المفتوحة > منتدى تقنية المعلومات والحاسوب > M299

إضافة رد
 
أدوات الموضوع انواع عرض الموضوع

قديم 03-10-2016, 04:17 PM   #1
khalidaou khalidaou غير متصل
طــالب
 
الصورة الرمزية khalidaou

 











شرح الدرس الرابع: إنشاء واجهة مستخدم بسيطة


إنشاء واجهة مستخدم بسيطة

في هذا الدرس سننشئ تصميم عن طريق لغة ال XML - Extensible Markup Language

إلي راح يكون فيها حقل نصوص و زر

واجهة المستخدم الرسومية لتطبيق أندرويد مبنية من هيكل فيه objects وهي View و ViewGroup

View Objects تكون في العادة UI widgets مثل:
Button
TextField


ViewGroup objects عبارة عن حاويات مخفية تحدد كيفية وضع View Objects مثل إظهارها متتابعة في قائمة عمودية أو أفقية.

أندرويد يوفر لنا مفرادات XML تتوافق مع View و ViewGroup لكي نستخدمها في واجهة المستخدم لهيكلة العناصر في واجهة المستخدم.

Layouts عبارة عن عنصر من عناصر ViewGroup، في درسنا هذا سنستخدم LinearLayout.

الصورة التالية صورة توضيحية من برنامج أندرويد ستوديو عن طريق ال XML





الصورة التالية صورة بيانية للأكواد السابقة لتوضيح هيكلة واجهة المستخدم


إنشاء Linearlayout:

1. نفتح المشروع السابق
2. من نافذة Android Studio's Project نختار app ثم res ثم layout ثم activity_main.xml.


هذا الملف يقوم بتفعيل واجهة المستخدم لبرنامج، ويوجد بها بشكل افتراضي text field يحتوي على "Hello World".

3. عند فتح ملف ال layout سيفتح الملف على محرر التصميم. في هذا الدرس سنقوم بإستخدام لغة ال XML بشكل مباشر لذلك قوموا بتغير المحرر من التصميم إلى المحرر النصي.

Design to Tex
t


4. قوموا بإلغاء المحتوى وقوموا باستبداله بال XML التالي:

كود PHP:
<?xml version="1.0" encoding="utf-8"?>
<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="horizontal">
    
</LinearLayout>
LinearLayout هي View Group ولها طريقتان للعرض إما أن تكون عمودية أو أفقية كما هو موضح في متغير androidrientation. ترتيب العناصر الموجودة داخل الأب إلي هو Linear Layout راح يأثر على طريقة عرض الأبناء.

هناك متغيرين أخرين يتواجدون في جميع أنواع ال Layout لتحديد حجم العرض وهم android:layout_width و android:layout_height

بما أن ال LinearLayout هو الأب المسيطر على واجهة العرض فمن الطبيعي أن يملأ حجم الشاشة و ذلك بجعل المتغيرات android:layout_width و android:layout_height تساوي match_parent هذا المعطى يجعل ال Layout الأب يغطي الشاشة.


إضافة حقل نصوص:

في ملف activity_main.xml أدخل التالي في <EditText> داخل <LinearLayout>

كود PHP:
<EditText android:id="@+id/edit_message"
        
android:layout_width="wrap_content"
        
android:layout_height="wrap_content"
        
android:hint="@string/edit_message"/> 
بحيث أن الكود يظهر بهالشكل:

كود PHP:
<?xml version="1.0" encoding="utf-8"?>
<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="horizontal">

    <EditText android:id="@+id/edit_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message"/>

</LinearLayout>
لا داعي للقلق حول الخطأ الذي يظهر على @string/edit_message ستقوم بإصلاحة بعد قليل.

هذا شرح للمتغيرات التي اضفتها في <EditText>:

- android:id:
يقوم بإنشاء معرف لل view والتي يمكنك إستخدامها للدلالة إلى العنصر في الجزء البرمجي المختص بال logic للتعديل أو القراءة منها.

العلامة @ مهمة عند الإشارة إلى أي عنصر في ال XML يليها نوع المورد أو ال resource وفي هذي الحالة هي id وبعدها / ويليها الأسم.

علامة (+) قبل نوعية المورد مهمة إذا كنت قد عرفت المورد للمرة الأولى فقط. عندما تقوم بترجمة البرمجة Compile تقوم أدوات ال SDK بإستخدام المعرف لإنشاء أسم المؤشر كعنوان في ملف R.java الموجود في المشروع وسينعكس ذلك على عنصر ال EditText . عند تعريف المعرف بهذا الشكل لا داعي لإستخدام معرف أخر للعناصر المستخدمة فيه.

- android:layout_width و android:layout_height:
بدل أن نقوم بتحديد حجم العرض الذي يمكن أن يؤثر بشكل سلبي للمطلوب عرضة في شاشات مختلفة يمكننا أن نستخدم:

"wrap_content": لكي يعطي view الحجم الذي يناسبه.
"match_parent": لكي يأخذ كل المساحة مثلأ أذا أستخدمنها في العرض راح يغطي عرض الشاشة و إذا استخدمناه في الطول راح يغطي طول الشاشة.

- android:hint:

يعرض تلميح افتراضي يوضح المراد إدخاله في حقل النص و يظهر بشكل مظلل بدلا من استخدام "@string/edit_message". لأننا ما عرفنا النص الي نريد نعرضة يعطينا المشكلة باللون الأحمر.

إضافة نص في Resources:

بشكل افتراضي يتضمن مشروع اندرويد على ملف strings.xml متواجد في res داخل values

1. أفتح نافذة المشروع وقم بفتح ملف res ثم ملف values ثم ملف strings.xml




2. قم بإضافة النصين لكي يصبح النص البرمجي كم هو موضح في الصورة التالية:



دائما قم بتحديد نصوص واجهة المستخدم ك resource.
String resources تساعدك في في إدارة النصوص في واجهة المستخدم و يسهل عليك إيجادها و استخدامها وعدم تكرارها. من ضمن إستخداماتها تكمن في ترجمة البرنامج لعدة لغات مثل اللغة العربية المعروف ب localization.


إضافة زر:

أعد فتح ملف activity_main.xml وقم بإضافة button بعد <EditText>. لكي يشابة نص البرمجي النص البرمجي التالي:

كود PHP:
<?xml version="1.0" encoding="utf-8"?>
<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="horizontal">

    <EditText android:id="@+id/edit_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send"/>


</LinearLayout>
ملاحظة: ال button إلي عرفناه ما في android:id لأننا ما راح نستخدمة في البرمجة النصية في ملف MainActivity.jave.

في ال layout إلي عندنا غطينا كل الشاشة بي بالنسبة لل EditText و Button خلينا المساحة تكون على حسب الحاجة بإستخدام wrap_content مثل ما تشوفون في الصورة التالية:




بالنسبة للزر المساحة في الطول والعرض مناسبة بس للمحرر النصي يفضل لو أننا نستغل المساحة الغير المستخدم لتأخذ باقي المساحة في العرض الغير مستخدمة. يمكننا القيام بذلك بالإستعانة بال LinearLayout وذلك بإستخدام android:layout_weight.


القيمة المستخدمة في weight تحدد نسبة إستخدام ال view من المساحات الغير مستخدمة لشغلها. مثال توضيحي إذا كان عندنا view بقيمة 2 و view أخر بقيمة 1 فإن المجموع 3 فال view الأول يحصل على ثلثي المساحة و الثاني يحصل على الثلث المتبقي من المساحة الكلية.

جعل ال EditText يملأ عرض الشاشة:

كود PHP:
<EditText android:id="@+id/edit_message"
        
android:layout_weight="1"
        
android:layout_width="0dp"
        
android:layout_height="wrap_content"
        
android:hint="@string/edit_message"/> 

تغير قيمة layout_width إلى صفر يساعد في الأداء بدلاً من وضع القيمة "wrap_content" لأن البرنامج راح يحسب عرض ال layout ولي ماله علاقة بال EditText وبذلك يقوم بتوفير أداء البرنامج.






نصك البرمجي راح يكون بهالشكل:


كود PHP:
<?xml version="1.0" encoding="utf-8"?>
<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="horizontal">

    <EditText android:id="@+id/edit_message"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send"/>


</LinearLayout>
تشغيل تطبيقك:

لكي تشاهد برنامجك على هاتفك الذكي الأندرويد أو جهاز اندرويد الافتراضي أضغط على زر Run لتشغيله.



البرنامج على الجهاز الإفتراضي:



أتمنى أنكم أستفدتم من الشرح

هذا وتفضلوا فائق الإحترام و التقدير


..



التوقيع

Add my First published vedio game on your Android devices

khalidaou غير متصل   رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)

أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع


الساعة الآن 11:43 AM.


Powered by vBulletin® Version 3.8.1, Copyright ©2000 - 2017, Jelsoft Enterprises Ltd. TranZ By Almuhajir
جميع المواضيع والمشاركات تعبر عن وجهة نظر أصحابها
ولا تعبر باي شكل من الاشكال عن وجهة نظر منتديات AOUA
تصميم وتطوير : التكنولوجيا الماسية