المحتوى

• العمل مع طرق العرض: سمات XML الشائعة
• تحديد وجهات نظركم
• معلمات التخطيط: العرض والارتفاع
• أعط المحتوى الخاص بك بعض مساحة التنفس!
• أزرار و ImageButtons
• أعط خيارات المستخدمين الخاصة بك ، مع CheckBoxes
• الغزال
• ListViews: عرض بياناتك كقوائم قابلة للتمرير
• تصميم تجارب فريدة من نوعها: إنشاء طرق عرض مخصصة
• تغليف

أسهل طريقة لإضافة طريقة عرض إلى مشروع Java أو Kotlin ، هي تحديد طريقة العرض هذه في ملف مورد تخطيط XML. يوفر Android بناء جملة XML بسيطًا يتوافق مع فئات العرض الفرعية المختلفة ، على سبيل المثال في المقتطف التالي الذي نستخدمه XML لإنشاء مثيل لـ TextView:

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

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

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

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

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

// إنشاء TextView برمجياً // TextView tv = جديد TextView (getApplicationContext ())؛ // تعريف معلمات تخطيط العرض // LayoutParams lp = جديد LinearLayout.LayoutParams (// عيّن عرض العرض // LayoutParams.WRAP_CONTENT ، // عيّن ارتفاع العرض // LayoutParams.WRAP_CONTENT) ؛ // تطبيق معلمات التخطيط على TextView // tv.setLayoutParams (lp)؛ // اضبط النص // tv.setText ("Hello World!")؛ / / أضف TextView إلى الوصل ViewGroup // rl.addView (tv) ؛ }}

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

العمل مع طرق العرض: سمات XML الشائعة

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

تحديد وجهات نظركم

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

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

يشير رمز + إلى أن هذا اسم جديد يجب إنشاؤه وإضافته إلى ملف R.java في مشروعك.

عندما تحتاج إلى العمل باستخدام طريقة عرض ، يمكنك الرجوع إليها باستخدام معرف العرض الخاص بها. عادةً ، ستشير إلى طريقة عرض عن طريق إنشاء مثيل لكائن العرض في طريقة onCreate () للنشاط ، على سبيل المثال:

TextView myTextView = (TextView) findViewById (R.id.hello_world)؛

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

معلمات التخطيط: العرض والارتفاع

تحدد سمات XML التي تبدأ بـ "layout_" معلمات تخطيط طريقة العرض. يدعم Android مجموعة متنوعة من معلمات التخطيط ، ولكن كحد أدنى يجب تحديد العرض والارتفاع باستخدام سمات layout_width و layout_height.

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

بدلاً من ذلك ، يمكنك تحديد عرض وطول العرض ، باستخدام أي من القياسات النسبية التالية:

• wrap_content. يجب أن تكون طريقة العرض هذه كبيرة بما يكفي لعرض محتواها ، بالإضافة إلى أي حشوة.
• اهل مشتركين. يجب أن تكون طريقة العرض هذه كبيرة الحجم كما سيسمح ViewGroup الأصل.
• موانئ دبي. إذا كنت بحاجة إلى مزيد من التحكم في تغيير حجم العرض ، فيمكنك توفير قياس بكسل مستقل عن الكثافة ، على سبيل المثال android: layout_width = "50dp." .
• س. إذا كنت ترغب في تغيير حجم النص باستخدام قياس بكسل مستقل عن الكثافة ، فعليك استخدام وحدات بكسل قابلة للتحجيم (sp) ، على سبيل المثال: android: textSize = "20sp." تضمن وحدات البكسل القابلة للتحجيم احترام نص التطبيق لحجم النص المحدد للجهاز ، لذلك سيظهر النص أكبر على الأجهزة التي تم تعيينها لعرض نص كبير ، وأصغر على الأجهزة التي تم تعيينها لعرض نص صغير.

أعط المحتوى الخاص بك بعض مساحة التنفس!

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

تظهر لقطة الشاشة التالية ImageView مع 10dp من الحشو:

بدلاً من ذلك ، في Android 5.0 (API مستوى 21) أو أعلى يمكنك استخدام أدراج مكافحة ناقلات ، والتي تحدد صورة كمجموعة من النقاط والخطوط والمنحنيات. يمكن تحجيم أدراج المتجهات دون فقدان جودة العرض ، بحيث يمكنك استخدام ملف واحد لجميع كثافات الشاشة المختلفة لنظام Android.

يعد إنشاء ناقل متجه مخصص خارج نطاق هذا البرنامج التعليمي ، ولكن يمكنك أن تتذوق العمل مع المتجهات ، من خلال إلقاء نظرة على Vector Asset Studio ، والذي تم تضمينه كجزء من Android Studio.

يمكنك استخدام Vector Asset Studio لإضافة أي من رموز تصميم المواد في المخزون بسرعة وسهولة إلى مشروعك ، بتنسيق متجه إلى ناقل:

• في Android Studio ، انقر مع الضغط على Control على مجلد المشروع الخاص بك.
• اختر جديد> متجه الأصل.
• في نوع الأصول ، حدد Clip Art.
• حدد زر Clip Art ، الذي يعرض شعار Android افتراضيًا.
• اختر أيًا من أيقونات تصميم المواد ؛ أنا أستخدم "تم".

• امنح هذا الأصل اسمًا وصفيًا ، ثم انقر فوق التالي.
• اقرأ المعلومات التي تظهر على الشاشة ، وإذا كنت سعيدًا بالمتابعة ، فانقر فوق "إنهاء".
• افتح المجلد القابل للدور في مشروعك وستظهر لك ملف XML جديد يحدد أيقونة المادة التي اخترتها كدولة متجهة. فيما يلي محتويات المورد القابل للتصحيح الخاص بي:

ستحتاج بعد ذلك إلى الإشارة إلى هذا المتجه القابل للفحص في ImageView ، بالطريقة نفسها التي تشير بها إلى مورد قابل للفرد قياسي ، على سبيل المثال android: src = "@ drawable / done_vector."

أزرار و ImageButtons

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

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

في المقتطف التالي ، نقوم بإنشاء زر يحتوي على تسمية نصية:

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

إذا كنت ترغب في إنشاء زر يحتوي على صورة و تسمية نصية ، ثم ستحتاج إلى إضافة تسمية نصية كالمعتاد ، ثم الرجوع إلى درجك باستخدام إحدى السمات التالية:

• الروبوت: drawableLeft. ضع drawable على يسار النص.
• الروبوت: drawableRight. ضع drawable على يمين النص.
• الروبوت: drawableStart. ضع drawable إلى بداية النص.
• الروبوت: drawableEnd. ضع drawable إلى نهاية النص.
• الروبوت: drawableTop. ضع الدرج أعلى النص.
• الروبوت: drawableBottom. ضع الدرج أسفل النص.

هنا ، نقوم بإنشاء button_icon قابل للسحب ووضعه في بداية النص button_label الخاص بـ Button:

بالإضافة إلى إضافة علامات وصور ، يمكنك تخصيص أزرار و ImageButtons الخاصة بك عن طريق إضافة صورة خلفية أو مورد ملون ، باستخدام سمة android: background. على سبيل المثال ، يمكنك تحويل زر أزرق ، عن طريق إضافة ما يلي إلى إعلان الزر أو ImageButton:

الروبوت: الخلفية = "# 0000FF"

عندما يتفاعل المستخدم مع زر ، سوف يتلقى ذلك الزر أو ImageButton حدث onClick. ستحتاج إلى تحديد معالج لهذا الحدث ، باستخدام android: سمة onClick.

قيمة السمة onClick يجب تتوافق مع طريقة عامة ، والتي سيتم استدعاؤها استجابة لحدث onClick ، ​​على سبيل المثال:

بعد ذلك ، ستحتاج إلى تنفيذ هذه الطريقة في النشاط الذي يستضيف الزر أو ImageButton. يجب أن تكون هذه الطريقة عامة ، وأن تُرجع باطلة ، وتعرف طريقة العرض على أنها المعلمة الوحيدة ، على سبيل المثال:

void displayToast (عرض العرض) {Toast.makeText (MainActivity.this ، "Your"، Toast.LENGTH_LONG) .show ()؛ }}

بدلاً من ذلك ، يمكنك إعلان معالج الأحداث برمجيًا. في Java ، يعني هذا إنشاء كائن View.OnClickListener ثم تعيينه إلى الزر أو ImageButton ، باستخدام setOnClickListener (View.OnClickListener).

أعط خيارات المستخدمين الخاصة بك ، مع CheckBoxes

تتيح CheckBoxes للمستخدم اختيار خيار واحد أو أكثر من قائمة رأسية.

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

يمكنك تحديد معالج النقر عن طريق إضافة android: onClick سمة إلى كل RadioButton في RadioGroup الخاص بك ، ثم تنفيذ الطريقة المقابلة في نشاط الاستضافة الخاص بك.على غرار مثال CheckBox ، تحتاج هذه الطريقة إلى التحقق من تحديد RadioButton المحدد حاليًا ، ثم اتخاذ الإجراء المناسب بناءً على اختيار المستخدم.

public void onRadioButtonClicked (طريقة العرض) {booleanheck = ((RadioButton) view) .isChecked ()؛ // تحقق من تحديد RadioButton // switch (view.getId ()) {// إذا كان زر الاختيار "confirm" محددًا ، ف ... // case R.id.radio_confirm: if (محددة) / / Do شيء // استراحة. // إذا تم تحديد زر "الرفض" ، فعندئذٍ ... // case R.id.radio_deny: if (محددة) / / قم بعمل شيء //

الغزال

عندما يتم استغلالها ، يعرض Spinner مجموعة من القيم كقائمة منسدلة.

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

يتكون الدوار الدوار من عدة مكونات:

• ا العنصر الذي تضيفه إلى ملف موارد التخطيط الخاص بك.
• مصدر بيانات يزودك بـ Spinner ببعض المعلومات ؛ سأستخدم String Array.
• ArrayAdapter الذي يحول بياناتك إلى عناصر عرض ، جاهزة للعرض في Spinner.

لنبدأ بإضافة إلى تنسيق XML الخاص بنا:

إذا كانت البيانات مُحددة مسبقًا ، فيمكنك تقديمها كصفيفة سلسلة محددة في ملف Strings.xml الخاص بك:

SimpleSpinner الأرجنتين أرمينيا أستراليا بلجيكا البرازيل كندا الصين الدنمارك

يمكنك بعد ذلك تسليم هذه المصفوفة إلى Spinner باستخدام مثيل ArrayAdapter ، والذي تقوم بتطبيقه في نشاط أو جزء.

لتحديد ArrayAdapter ، نحتاج إلى إكمال الخطوات التالية:

• قم بإنشاء ArrayAdapter من String Array ، باستخدام الأسلوب createFromResource ().
• حدد مورد تخطيط يحدد كيفية ظهور عنصر المستخدم المختار في Spinner. يوفر Android تخطيطًا بسيطًا يجب عليك استخدامه ما لم تطلب تحديدًا مخصصًا.
• استخدم setDropDownViewResource (int) لتحديد الشكل الذي يجب أن يستخدمه المحول لقائمة المنسدلة Spinner. مرة أخرى ، يوفر Android تصميمًا جاهزًا (simple_spinner_dropdown_item) يجب أن يكون مناسبًا لمعظم المشاريع.
• قم بتطبيق المهايئ على Spinner ، عن طريق استدعاء setAdapter ().

إليك الرمز الذي تم إكماله:

Spinner spinner = (Spinner) findViewById (R.id.location_spinner)؛ / / قم بإنشاء ArrayAdapter // ArrayAdapter adapter = ArrayAdapter.createFromResource (this، // نشر المغزل باستخدام String Array وتخطيط simple_spinner_item // R.array.location_array، android.R.layout.simple_spinner_item)؛ // حدد التنسيق الذي يجب استخدامه لقائمة منسدلة // adapter.setDropDownViewResource (android.R.layout.simple_spinner_dropdown_item) ؛ // تطبيق المهايئ على Spinner // spinner.setAdapter (محول) ؛

سوف يتلقى Spinner حدث onItemSelected في كل مرة يحدد المستخدم فيها عنصرًا من القائمة المنسدلة. لمعالجة هذا الحدث ، ستحتاج إلى استخدام واجهة AdapterView.OnItemSelectedListener لتحديد طريقة رد اتصال onItemSelected ().

في التعليمة البرمجية التالية ، أقوم بعرض توست في كل مرة يتم فيها استدعاء onItemSelected () ، ودمج اسم العنصر المحدد حديثًا في توست بلدي. أنا أعرِّف أيضًا طريقة رد اتصال onNothingSelected () ، نظرًا لأن هذا مطلوب أيضًا من خلال واجهة AdapterView.OnItemSelectedListener.

إليك النشاط المكتمل:

استيراد androidx.appcompat.app.AppCompatActivity ؛ استيراد android.os.Bundle ؛ استيراد android.view.View ؛ استيراد android.widget.AdapterView ؛ استيراد android.widget.ArrayAdapter؛ استيراد android.widget.Spinner ؛ استيراد android.widget.Toast ؛ تقوم MainActivity من الفئة العامة بتوسيع AppCompatActivity بتطبيق AdapterView.OnItemSelectedListener {Override void onCreate (Bundle saveInstanceState) {super.onCreate (saveInstanceState)؛ setContentView (R.layout.activity_main)؛ Spinner spinner = (Spinner) findViewById (R.id.location_spinner)؛ spinner.setOnItemSelectedListener (هذا)؛ ArrayAdapter adapter = ArrayAdapter.createFromResource (هذا ، R.array.location_array ، android.R.layout.simple_spinner_item) ؛ adapter.setDropDownViewResource (android.R.layout.simple_spinner_dropdown_item)؛ spinner.setAdapter (محول)؛ } public void onItemSelected (AdapterView <؟> parent، View view، int pos، id long) {Toast.makeText (parent.getContext ()، "Youve select n" + parent.getItemAtPosition (pos). ToString ()، Toast .LENGTH_LONG). تظهر ()؛ } @ Oververide public void onNothingSelected (AdapterView <؟> adapterView) {// To Do //}}

يمكنك تنزيل هذا المشروع الكامل من جيثب.

ListViews: عرض بياناتك كقوائم قابلة للتمرير

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

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

لنبدأ بإضافة لتخطيطنا:

يطلب ListView طرق العرض عند الطلب من المحول المعين. في نشاطنا الرئيسي ، نحتاج إلى إنشاء محول ثم ربطه بـ ListView ، باستخدام setAdapter (android.widget.ListAdapter).

استيراد android.app.Activity ؛ استيراد android.widget.AdapterView ؛ استيراد android.widget.ArrayAdapter؛ استيراد android.os.Bundle ؛ استيراد android.widget.ListView؛ استيراد android.view.View ؛ استيراد android.widget.Toast ؛ تم توسيع النشاط العام للفئة العامة النشاط {String countryArray = {"Argentina"، "Armenia"، "Australia"، "Belgium"، "Brazil"، "Canada"، "China"، "Denmark"، "Estonia"، "Finland"، "فرنسا" ، "اليونان" ، "المجر" ، "أيسلندا" ، "الهند" ، "إندونيسيا" ، "إيطاليا" ، "اليابان" ، "كينيا" ، "لاتفيا"} ؛ Override محمية void onCreate (Bundle saveInstanceState) {super.onCreate (saveInstanceState)؛ setContentView (R.layout.activity_main)؛ قائمة ListView النهائية = (ListView) findViewById (R.id.myListView) ؛ ArrayAdapter محول = جديد ArrayAdapter(هذا ، android.R.layout.simple_list_item_1 ، countryArray) ؛ listView.setAdapter (محول)؛ listView.setOnItemClickListener (جديد AdapterView.OnItemClickListener () {Override public void onItemClick (AdapterView <؟> parent، View view، int position، id long) {{Toast.makeText (parent.getContext ()، "Youve select n" + parent.getItemAtPosition (position) .toString ()، Toast.LENGTH_LONG) .show ()؛}})؛ }}

يمكنك تنزيل مشروع ListView المكتمل من GitHub.

تصميم تجارب فريدة من نوعها: إنشاء طرق عرض مخصصة

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

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

يُعد إنشاء طريقة عرض مخصصة موضوعًا متقدمًا يتطلب منك إكمال خطوات متعددة ، بما في ذلك توفير تجاوزات للطرق التي يتصل بها Android تلقائيًا ، مثل onDraw () و onTouchEvent () ، ولكن طرق العرض المخصصة يمكن أن تكون وسيلة فعالة لتقديم تجارب فريدة للمستخدمين الخاص بك.

تغليف

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

هل هناك أي آراء تريد منا أن نستكشفها بمزيد من التفاصيل؟ اسمحوا لنا أن نعرف في التعليقات أدناه!