المكونات الأساسية في Android.

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

كما ذكرنا، سوف نركز على المكونات الرسومية المستخدمة من ملفات XML، دعونا نلقي نظرة على بعض الخصائص المذكورة أعلاه.

الخصائص الأساسية.

دعونا نلقي نظرة على بعض الخصائص الأساسية المستخدمة في المكونات الرسومية، والتي يمكن تطبيقها على أي مكون بغض النظر عن نوعه، وكما ذكرنا جميع المكونات هي طرق عرض لذا فهي تشترك في نفس الخصائص، ومن أكثر الخصائص استخدامًا:

الروبوت: معرف.

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

الطريقة الصحيحة لإنشاء معرف هي كما يلي:

الروبوت: معرف = "@+id/miCampoDeTexto"

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

في المثال، المعرف ""حقل النص الخاص بي" للمكون.

أندرويد:layout_width.

يحدد العرض المرتبط بالعرض، وهي خاصية إلزامية ويمكن تحديد قيمتها بالقيم المطلقة أو من خلال الإشارة إلى إحدى القيمتين التاليتين:

• Wrap_content (تحتل مساحة حسب محتواها)

• اهل مشتركين (يشغل كل المساحة المتاحة)

  مثال: الروبوت:layout_width = "match_parent" أي الروبوت:layout_width = "290dp"

أندرويد:layout_height.
يحدد الارتفاع المرتبط بالعرض، وهي خاصية إلزامية ويمكن تحديد قيمتها بالقيم المطلقة أو من خلال الإشارة إلى إحدى القيمتين التاليتين:

• Wrap_content (تحتل مساحة حسب محتواها)

• اهل مشتركين (يشغل كل المساحة المتاحة)

  مثال: الروبوت:layout_height = "wrap_content" أي الروبوت:layout_height = "58dp"

android:layout_margin.

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

مثال: الروبوت:layout_margin = "20dp" | الروبوت:layout_marginTop = "20dp" | الروبوت:layout_marginLeft = "20dp" | الروبوت:layout_marginRight = "20dp" | الروبوت:layout_marginBottom = "20dp"

الروبوت: نصيحة.

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

مثال: android:hint="أدخل الاسم"

الروبوت:نوع الإدخال.

فهو يحدد نوع الإدخال الذي سيتم السماح به لمربع النص، وهذا يسمح بنوع ما من التحقق من صحة البيانات ويخبر نظام التشغيل أيضًا بنوع لوحة المفاتيح (الافتراضية) التي يجب استخدامها.

من بين الخيارات التي يمكننا ربطها بهذه الخاصية هي بعض مثل:

• نص
• رقم
• نَسِيج
• كلمة المرور النصية
• هاتف
• مقابلة
• عنوان البريد الإلكتروني النصي

هناك العديد من الخيارات الأخرى التي يمكن استخدامها حسب الحاجة.

مثال: الروبوت: نوع الإدخال = "رقم" | أندرويد:نوع الإدخال = "textEmailAddress"

الروبوت:حجم النص.

يحدد حجم للنص الذي سيتم عرضه على الشاشة، ويجب مراعاة وحدات القياس حيث يتم استخدام sp للنصوص

مثال: الروبوت: حجم النص = "25sp"

android:styletext.

يحدد نمطًا للنص، مع القدرة على تعريف النص على أنه عادي أو غامق أو مائل (أو كليهما).

مثال: الروبوت:textStyle = "غامق" | الروبوت:textStyle = "مائل" | الروبوت:textStyle = "غامق | مائل"

الروبوت: لون النص.

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

مثال: الروبوت:textColor = "@color/teal_700" | الروبوت: لون النص = "#9C27B0"

android:backgroundTint.

يحدد لون خلفية للمكون، كما يمكنك الحصول على اللون من خصائص "الألوان" أو القيمة السداسية العشرية

مثال: الروبوت:backgroundTint = "@color/teal_200" | الروبوت:backgroundTint = "#FF5722"

الروبوت: النص.

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

مثال: android:text="Bienvenidos" | الروبوت: النص = "@ سلسلة / العنوان"

هذه الخاصية شائعة في طرق العرض التي تعرض النص في واجهة الجهاز. تعرض الشاشة التالية ملف المورد strings.xml حيث تتم إضافة قيم مختلفة للنصوص

وبعد ذلك يتم الوصول إلى هذه القيم من طرق العرض

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

زر.

تتوافق هذه مع الأزرار الأساسية التي نعرفها، فهي تقدم فقط زرًا بنصه الداخلي وهامش محدد.

سيؤدي الزر الوظيفة الأساسية المتمثلة في انتظار حدث ما عند الضغط عليه.

زر التبديل

يتوافق نوع ToggleButton مع نوع الزر الذي يمكن الاحتفاظ به في حالتين محتملتين، مضغوطًا أو غير مضغوط، ولهذا لا يتم تحديد خاصية نص واحدة فقط، ولكن 2 اعتمادًا على الحالة الموجودة حاليًا، باستخدام خصائص android : textOn و android:textOff.

تمامًا مثل الأزرار التقليدية، يمكن برمجة ToggleButton للاستجابة لحدث النقر، ولكن ربما تحتاج فقط إلى معرفة الحالة التي هو عليها. يمكن القيام بذلك عن طريق الرجوع إلى الأسلوب isChecked()، الذي يُرجع القيمة true في حالة الضغط عليها وخطأ في غير ذلك.

يسافر يوميا الى العمل

يمكن لعنصر التحكم هذا محاكاة مفتاح مشابه جدًا لكيفية عمل ToggleButton، ولكن بمظهر مرئي مختلف.

ضع في اعتبارك أنه اعتمادًا على إصدار Android الذي نستخدمه، قد يتغير المظهر المرئي لمكوناتنا، وفي هذه الحالة سيبدو التحكم في Switch لإصدارات Android 5.0 والإصدارات الأحدث كما يلي:

زر الصورة

يتيح لك هذا النوع من الأزرار ربط صورة بها لتظهر للمستخدم بدلاً من النص كما هو شائع، ولهذا يمكننا أخذ الصورة من المجلدات /res/drawable وتحميلها باستخدام الخاصية android:src، في في هذه الحالة سوف نستخدم صورة مباشرة من موارد Android.

عرض النص

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

تحرير النص

طريقة عرض Android EditText تعادل ASP وC# Textbox أو JAVA JTextField، وهي عبارة عن عنصر تحكم يسمح بالتقاط النص الذي أدخله المستخدم في وقت التشغيل.

مربع الاختيار

يتم استخدام عنصر التحكم في خانة الاختيار لتحديد الخيارات أو إلغاء تحديدها في التطبيق. إن طريقة تعريفه في الواجهة والخصائص المتاحة لمعالجته بواسطة التعليمات البرمجية مماثلة لتلك التي تم التعليق عليها في عنصر تحكم ToogleButton.

يرث عنصر التحكم هذا من عنصر التحكم TextView، لذا فإن كافة خيارات التنسيق المذكورة بالفعل لعنصر التحكم هذا صالحة أيضًا لمربع الاختيار.

في كود التطبيق، يمكنك التحقق مما إذا كان عنصر التحكم هذا محددًا أم لا من خلال طريقة isChecked () التي تُرجع قيمة حقيقي إذا تم اختيارك أو خطأ شنيع بخلاف ذلك، يمكنك أيضًا استخدام طريقة setChecked(value) لتعيين حالة معينة لعنصر التحكم، حيث القيمة حقيقي سيكون للاختيار و خطأ شنيع من خلال عدم التحديد.

الحدث الذي تتم برمجته عادةً لعنصر التحكم هذا والذي يتم تنفيذه في كل مرة تتغير فيها حالته (محدد/غير محدد) هو onCheckedChanged.

زر الراديو

تمامًا مثل عنصر التحكم CheckBox، يتم استخدام RadioButton لتحديد خيار معين أو إلغاء تحديده، ويكمن الاختلاف في نوع التحديد الذي تريد إجراؤه. تُستخدم أزرار الراديو عادةً في مجموعات لتحديد مجموعة من الخيارات التي يمكنك تحديد خيار واحد منها فقط، أي أن كل خيار يستبعد الآخر، لذلك عند تحديد خيار، سيتم إلغاء تحديد الخيار الذي تم تحديده مسبقًا تلقائيًا. يتم تعريف هذه المجموعات بواسطة عنصر RadioGroup، والذي بدوره سيحتوي على جميع عناصر RadioButton التي تمثل الخيارات.

يمكن لـ RadioGroups ضبط خاصية android:orientation على "عمودي" أو "أفقي" لتحديد كيفية ترتيب أزرار الراديو التي تحتوي عليها.

يجب على زر RadioButton بدوره، بالإضافة إلى العرض والارتفاع، تحديد خاصية android:text لربط نص الخيار الذي يتم تمثيله وandroid:id لربط رمز مع عنصر التحكم بحيث يمكن معالجته من التطبيق منطق.

للتحكم في التحكم من منطق التطبيق، يمكن استخدام طرق مختلفة، من بينها نجد الاختيار (وأود أن أذهب) الذي يُستخدم لتحديد زر الاختيار المحدد بالمعرف الذي تم تمريره كمعلمة كما هو محدد، ويتم استخدام طريقة ClearCheck() لإلغاء تحديد جميع أزرار الاختيار في المجموعة ويتم استخدام طريقة getCheckedRadioButtonId() للحصول على معرف زر الاختيار الموجودة ضمن المجموعة المحددة أو قيمة -1 إذا لم يتم تحديد أي عنصر.

أهم حدث في عنصر التحكم هذا هو أيضًا onCheckedChanged، والذي يتم تشغيله عند تحديد عنصر في المجموعة (تذكر أن تحديد عنصر واحد في المجموعة يشير إلى إلغاء تحديد عنصر آخر).

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

قد يثير اهتمامك أيضًا.

هل هناك أي شيء تريد إضافته أو التعليق على هذا الإدخال؟ لا تتردد في القيام ....واذا اعجبكم ... ادعوكم للمشاركة ص اشترك من خلال النقر على زر "الانضمام إلى هذا الموقع" للاستماع إلى المزيد من المنشورات مثل هذه 😉