برمجة واجهة مستخدم بسيطة

الإعلانات

برمجة واجهة مستخدم بسيطة

 

 

برمجة واجهة مستخدم بسيطة

في هذا الدرس، سوف تستخدم ” محرر مخطط ” Android Studio لإنشاء مخطط يحتوي على مربع نص و زر. في الدرس التالي، سوف تجعل التطبيق يستجيب للنقر على الزر، وذلك بإرسال محتويات مربع النص إلى نشاطٍ آخر.

        الشكل1: لقطة شاشة للمخطط النهائي.

 

برمجة واجهة مستخدم بسيطة

يتم تصميم واجهة مستخدم تطبيق الاندرويد، بإستخدام التسلسل الهرمي للمخططات (كائنات ViewGroup)، و الودجت (كائنات المعاينه View).

المخططات عبارة عن حاويات، تتحكم في كيفية ظهور المعاينات الفرعية ” child views” الخاصة بها، على الشاشة.

اما الودجت “عناصر واجهة المستخدم” فهي عبارة عن مكونات واجهة المستخدم مثل الأزرار و مربعات النص.

 

الشكل 2: رسم توضيحي لكيفية تفرع كائنات ViewGroup في المخطط وكائنات المعاينه View التي تتضمنها.

 

 

يوفر الاندرويد مفردات XML لفئات ViewGroup و View، لذا فإن معظم مكونات واجهة مستخدمك يتم تعريفها في ملفات XML.

مع ذلك، بدلاً من تعليمك كيفية كتابة بعضٍ من مفردات XML، فإن هذا الدرس يوضح لك كيفية إنشاء مخطط بإستخدام محرر مخططات Android Studio، والذي يسهل عليك عملية إنشاء مخطط عن طريق السحب و الإفلات.

يفترض هذا الدرس إستخدامك للنسخة 3.0 من Android Studio أو أعلى، وبأنك أطلعت على الدرس السابق والذي يوضح كيفية بدء مشروع اندرويد.

 

 

 

 

 

 

 

برمجة واجهة مستخدم بسيطة

فتح محرر المخطط


لكي تبدأ، قم بإعداد بيئة العمل الخاصة بك كما يلي:

1- في نافذة المشروع لـ Android Studio، أفتح app “التطبيق” > res “المصدر” > layout “المخطط” > activity_main.xml “ملف xml للنشاط الرئيسي”.

2- لتوفير مساحة أكبر لمحرر المخطط، قم بإخفاء نافذة المشروع Project من خلال تحديد View > نافذة Tool > ثم Project (أو بالضغط على أيقونة Project على الجانب الأيسر من Android Studio).

3- إذا كان المحرر الخاص بك يعرض مصدر XML، فأنقر على علامة التبويب Design “تصميم” الموجودة في أسفل النافذة.

4- أنقر على Select Design Surface “إختيار مسطح التصميم”، ثم حدد Blueprint “النسخة الزرقاء”.

5- أضغط على Show “عرض”، في شريط أدوات محرر المخطط، وتأكد من إختيار Show Constraints “عرض القيود”.

6- تأكد من إيقاف تشغيل الإتصال التلقائي، التلميحات في شريط الأدوات يجب أن تقرأ Turn On Autoconnect (لأنه الآن في وضع إيقاف التشغيل).

7- أنقر فوق Default Margins “الهوامش الإفتراضية”، في شريط الأدوات ثم اختار 16 (لا يزال بإمكانك ضبط الهامش لكل معاينة لاحقاً).

8- أنقر فوق Device for Preview “معاينة الجهاز”، في شريط الأدوات، ثم اختار  5.5, 1440 × 2560, 560dpi (Pixel XL).

 

يجب أن يبدو المحرر الخاص بك الآن كما هو ظاهر في الشكل 3.

                                                           شكل 3. محرر المخطط يعرض ملف activity_main.xml.

لمزيد من المعلومات راجع مقدمة إلى محرر المخطط.

 

 

نافذة شجرة المحتويات Component Tree الموجودة على الجانب الأيسر السفلي، تقوم بعرض تسلسل المخطط الخاص بالمعاينات.

وفي هذه الحالة، فإن المعاينة الأساسية هي ConstraintLayout تحتوي على كائن TextView واحد فقط.

ConstraintLayout عبارة عن مخطط يحدد موضع كل معاينة، بناءً على القيود المفروضة على المعاينات الأشقاء “ذات المستوى نفسه” والمخطط الأصلي.

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

(مخطط بداخل مخطط، كما هو موضح في الشكل 2). مما قد يزيد من الوقت المطلوب لرسم واجهة المستخدم.

 

على سبيل المثال، يمكنك الإعلان عن المخطط التالي (في الشكل 4):

  • معاينة A تبعد dp 16 عن الجزء العلوي من المخطط الأصلي.
  • معاينة A تبعد dp 16 عن الجزء الأيسر من المخطط الأصلي.
  • معاينة B تبعد dp 16 عن الجانب الأيمن للمعاينة A.

                                                                    شكل 4. رسم توضيحي لمعاينتين تم وضعهما بداخل ConstraintLayout.

  • معاينة B تمت محاذاتها بالجانب العلوي للمعاينة A.  

في الأقسام التاليه، سوف تقوم بإنشاء مخطط مماثل لهذا.

 

 

 

 

 

 

برمجة واجهة مستخدم بسيطة

 

إضافة مربع نص


1- أولاً، عليك إزالة ما هو موجود في المخطط بالفعل. لذا أضغط على TextView في نافذة شجرة المكونات Component Tree، ثم أضغط حذف.

2- في Palette “لوحة الألوان” أضغط على Text “نص”، لإظهار عناصر “التحكم في النص” المتوفرة.

 

                                                                                                                  شكل 5. مربع النص مقيد بأعلى و يسار المخطط الأصلي.

 

3- أسحب Plain Text “نص عادي” إلى محرر التصميم و قم بإفلاته بالقرب من الجزء العلوي للمخطط. هذا عبارة عن ودجت EditText “محرر نص” والذي يقبل إدخلات النص العادية.

4- أضغط على view “معاينه” في محرر التصميم. يمكنك الآن رؤية عروة تغيير الحجم في كل زاوية (مربعات)، ومرساة القيود على كل جانب (دوائر).

للتحكم بشكلٍ أفضل، قد تحتاج إلى تكبير المحرر، بإستخدام الأزرار الموجودة في شريط أدوات محرر المخطط.

5- أضغط بشكلٍ مستمر على المرساة الموجودة في الجانب العلوي، ثم أسحب لأعلى حتى يستقر في أعلى المخطط ثم أفلته.

هذا قيد – يحدد أن المعاينة يجب أن تكون 16 dp من أعلى المخطط (لأنك قمت بتعيين الهوامش الإفتراضية على 16 dp).

6- وبالمثل، قم بإنشاء قيد من الجانب الأيسر للمعاينة إلى الجانب الأيسر للمخطط.

يجب أن تظهر النتيجة مشابهة للقطة الشاشة في الشكل 5.

 

 

 

 

 

برمجة واجهة مستخدم بسيطة

 

إضافة زر


 

1- في اللوحة Palette، اضغط على أزرار Buttons

2- اسحب زر Button إلى محرر التصميم، وقم بإفلاته بالقرب من الجانب الأيمن.

3- أنشئ قيد constraint من الجانب الأيسر للزر إلى الجانب الأيمن لمربع النص.

                                                                                                     الشكل 6. تم تقييد الزر على الجانب الأيمن من مربع النص وخطه الأساسي.

 

4- لتقييد المعاينات بمحاذاة أفقية، أنت بحاجة لإنشاء قيد بين خطوط الأساس الخاصة بالنص. لذا أضغط على الزر Button..

ثم اضغط على تحرير خط الأساس Edit Baseline، والذي يظهر في محرر التصميم، مباشرة تحت المعاينة المُحددة.

مرتكز “مرساة” خط الأساس تظهر بداخل الزر. أضغط بشكلٍ مستمر على هذا المرتكز ثم اسحبه إلى مرتكز خط الأساس الذي يظهر في مربع النص.

 

يجب أن تظهر النتيجة كما هو موضح في الشكل 6. برمجة واجهة مستخدم بسيطة برمجة واجهة مستخدم بسيطة

 

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

 

 

 

 

 

برمجة واجهة مستخدم بسيطة

 

تغيير سلاسل واجهة المستخدم


 

لإلقاء نظرة عامة على واجهة المستخدم، أضغط على Select Design Surface “إختيار مسطح التصميم”، في شريط الأدوات، ثم إختار تصميم Design.

لاحظ أن إدخال النص مملوء مسبقاً بـ “Name”، وأن الزر يحمل التسمية “Button.”، لذا الآن سوف تقوم بتغيير هذه السلاسل.

 

1- افتح نافذة المشروع Project، ثم افتح strings.xml > values > res > app.

هذا هو ملف مصدر السلاسل حيث يجب عليك تحديد كافة سلاسل واجهة مستخدمك. القيام بذلك يتيح لك إدارة كافة سلاسل واجهة المستخدم، في مكانٍ واحد..

مما يسهل عملية العثور، التحديث، الترجمة ( مقارنة بالسلاسل التي تمت برمجتها في مخططك layout أو في كود التطبيق).

 

2- اضغط على فتح المحرر Open editor في الجزء العلوي من نافذة المحرر. سيؤدي هذا إلى فتح محرر الترجمة Translations Editor..

والذي يوفر واجهة بسيطة لإضافة و تحرير سلاسلك الإفتراضية، ويساعد في الحفاظ على تنظيم كافة سلاسلك المترجمة.

 

3- اضغط على زر الإضافة Add Key لإنشاء سلسلة جديدة كـ  نص تلميح “hint text” لمربع النص.

a. في مربع حوار إضافة مفتاح Add Key، قم بإدخال تحرير رسالة “edit_message” لأسم المفتاح.

b. ادخل إدخال رسالة “Enter a message” للقيمة.

c. اضغط موافق OK.

 

 

                                                                                                                         الشكل 7. مربع الحوار الخاص بإضافة سلسلة جديدة.

4- إضافة مفتاح آخر بأسم “button_send” بقيمة “Send”.

الآن يمكنك تعيين هذه السلاسل لكل معاينة. لذا أرجع إلى ملف المخطط layout، بالضغط على activity_main.xml في شريط علامات التبويب بالإعلى، ثم قم بإضافة السلاسل كما يلي:

1- اضغط على مربع النص في المخطط، وإذا لم تكن نافذة السمات Attributes مرئية بالفعل على اليمين، فأضغط على السمات Attributes الموجودة على الشريط الجانبي الأيمن.

 

2- حدد موقع خاصية النص text (المعينة حالياً على “Name”) ثم احذف القيمة.

3- حدد موقع خاصية التلميح hint ثم اضغط على إختيار مصدر Pick a Resource الموجودة على يمين مربع النص. في مربع الحوار الذي يظهر، انقر نقراً مزدوجاً على edit_message من القائمة.

4- الآن أضغط على الزر في المخطط، وحدد موقع خاصية النص text (المعينة حالياً على “Button”)، ثم اضغط على إختيار مصدر Pick a Resource، ثم اختار button_send.

 

 

 

 

 

 

 

جعل حجم مربع النص مرن


لإنشاء مخطط متجاوب مع مختلف أحجام الشاشة، سوف تقوم الآن بجعل مربع النص يتمدد لكي يملأ، كل المساحة الأفقية المتبقية (بعد إحتساب الزر و الهوامش).

قبل المتابعة، أضغط على إظهار Show في شريط الأدوات ثم اختار النسخة الزرقاء Blueprint.

 

1- حدد كلا المعاينتين (اضغط فوق أحدهما، ثم اضغط على مفتاح Shift بإستمرار، ثم اضغط فوق الآخرى)، ثم انقر بزر الفأرة الأيمن على أي من المعاينتين..

ثم اختار Chain > Create Horizontal Chain.

يجب أن يظهر المخطط كما هو موضح في الشكل 8.

                                                                                                                                                                                                                                                                                                                                                 الشكل 8. نتيجة إختيار Create Horizontal Chain.

السلسلة chain عبارة عن قيد ثنائي الإتجاة بين معاينتين أو أكثر، والذي يسمح لك بوضع المعاينات المتسلسلة chained في تناغم وإنسجام.

 

2- اختار الزر ثم افتح نافذة السمات Attributes. أستخدم ضابط المعاينة الموجود في الجزء العلوي من نافذة السمات Attributes، قم بتعيين الهامش الأيمن على 16.

 

3- الآن اضغط على مربع النص، لعرض سماته. اضغط على مؤشر العرض width مرتين..

لكي يتم ضبطه على قيود المطابقة       

Match Constraints، كما هو موضح في في

الشكل 9.

قيود المطابقة “Match constraints” تعني بأن العرض width يتمدد ليتوافق مع تعريف القيود و الهوامش الأفقية.

لذا يتمدد مربع النص لكي يملأ الفراغ الأفقي (بعد إحتساب الزر وكافة الهوامش).                                                             الشكل 9. أضغط لتغيير العرض إلى Match Constraints.

 

الآن تم إنجاز المخطط و يجب أن يظهر كما هو موضح في الشكل 10.

إذا بدا أن مخططك لم يظهر كما هو متوقع، اضغط أدناه لكي ترى كيف يجب أن يبدو ملف XML الخاص بك..

 

                                                                                                                       الشكل 10. يتمدد مربع النص الآن لكي يملأ المساحة المتبقية.

 

وتقارنه بما تراه في علامة التبويب نص Text. (إذا ظهرت سماتك بترتيب مختلف، فلا بأس بذلك).

 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.myfirstapp.MainActivity">

    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:ems="10"
        android:hint="@string/edit_message"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toStartOf="@+id/button"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:text="@string/button_send"
        app:layout_constraintBaseline_toBaselineOf="@+id/editText"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/editText" />
</android.support.constraint.ConstraintLayout>

 

لمزيد من المعلومات عن السلاسل chains وجميع الأشياء الأخرى التي يمكنك القيام بها بإستخدام ConstraintLayout، اقرأ إنشاء واجهة مستخدم مستجيبة بإستخدام ConstraintLayout.

 

 

 

 

 

تشغيل التطبيق


إذا كان تطبيقك مثبتاً بالفعل على الجهاز من الدرس السابق، فما عليك سوى الضغط على تطبيق التغييرات    Apply Changes في شريط الأدوات، لتحديث التطبيق بالمخطط الجديد.

أو اضغط على تشغيل Run لتثبيت وتشغيل التطبيق. 

 

لا زال الزر لا يفعل شيئاً، لبدء نشاط آخر عند الضغط على الزر، تابع الدرس التالي.

 


للإطلاع على المقال باللغة الإنجليزية أضغط هنا.

 

الإعلانات

اترك رد