YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Arabic subtitles

02-07 العرض والارتفاع

02-07 العرض والارتفاع

Get Embed Code
14 Languages

Showing Revision 8 created 02/11/2016 by Christina Hayek.

  1. قمنا حتى الآن بإنشاء
    قائمة المدعوين إلى الحفلة.
  2. لحظة، هذه هي قائمة المدعوين
    لحفلة عيد الميلاد، صحيح يا كاثرين؟
  3. أجل
  4. أتمنى أن أكون ضمنها.
  5. حسناً، سنرى بهذا الشأن.
  6. أحسّ بالصغر الآن.
  7. بالحديث عن الصغر،
  8. لنتحدث عن حجم المعاينات على الشاشة.
  9. لقد استخدمنا العرض والارتفاع المحددين،
    أي قيم الـ dp أليس كذلك؟
  10. نعم، العرض والارتفاع.
  11. ويمكننا استخدام
    التفاف المحتوى مع المعاينة.
  12. صحيح، و هي طريقة غريبة لقول أن المعاينة
    سوف تقوم بلّف نفسها حول المحتوى.
  13. لذا، عندما يزداد حجم المحتوى،
  14. فستكبر المعاينة،
    وإذا صغُر المحتوى تصغر المعاينة.
  15. وهناك سمة ثالثة
    تدعى match parent مطابقة العنصر الأب.
  16. هذا يبدو غريباً.
  17. يبدو كموقع مواعدة للآباء العزّاب.
  18. ليس تماماً.
  19. مطابقة العنصر الأب تعني أن المعاينة
    ستكون بنفس ارتفاع وعرض العنصر الأب.
  20. هذا يبدو منطقياً.
  21. أنا معاينة، ولديّ عنصر أب
    وسيكون عرضي وارتفاعي
  22. مثل الأب تماماً.
  23. - حسناً
    - تماماً، لنلخص ذلك،
  24. القيم المختلفة التي يمكنك
    ضبطها للمعاينة هي العرض.
  25. قيم dp محددة للعرض والارتفاع.
  26. صحيح، يمكنك استخدام
    التفاف المحتوى أيضاً.
  27. وسنقوم بعد ذلك بتجربة
  28. مطابقة العنصر الأب.
  29. إليك بعض الأمثلة لتوضيح
    كيف أن ضبط عروض مختلفة في المعاينة الابن
  30. في الواجهة الخطية يمكن أن يؤثر
    على واجهة المستخدم النهائية.
  31. في هذا المثال قمنا بإعطاء كل من المعاينات
    الأبناء ليحصل على قيمة ثابتة للعرض 200 dp.
  32. إذا كان المحتوى داخل
    كل معاينة أكبر من 200dp
  33. فستخاطر عندها بحذف بعض المحتوى هكذا.
  34. في هذا المثال قمنا بضبط كل معاينة ابن
    لتملك قيمة عرض التفاف المحتوى.
  35. الآن يظهر جميع المحتوى،
  36. لكن عرض كل معاينة يختلف تبعاً لمحتواها.
  37. في هذا المثال،
    ضبطنا عرض كل معاينة ابن ليطابق الأب.
  38. تلاحظ الآن أن عرض كل
    ابن بنفس عرض مجموعة الأب.
  39. بغض النظر عن المحتوى داخلها.
  40. والآن يمكن تطبيق القيم ذاتها
    على ارتفاع جميع المعاينات.
  41. في هذا المثال ضبطنا ارتفاع
    معاينة النص الابن ليكون 200dp .
  42. إذا كان المحتوى أطول من ذلك،
  43. فسستخاطر عندها بحذف بعض المحتوى.
  44. في هذا المثال، ضبطنا قيمة ارتفاع معاينة
    النص الابن على القيمة التفاف المحتوى.
  45. بهذه الطريقة سيظهر
    كامل المحتوى على الشاشة.
  46. ولن يحذف شيء لأن حجم
    معاينة النص يعتمد على المحتوى داخلها.
  47. في هذا المثال، ضبطنا ارتفاع
    معاينة نص الابن ليطابق الأب.
  48. بهذه الطريقة ستكون المعاينة
    الابن بنفس ارتفاع الأب.
  49. بغض النظر عن المحتوى داخلها.
  50. لنقم الآن بفتح محاكي الـ XML،
  51. ولنحاول مشابهة الآباء بالنص البرمجي.
  52. سنزوّدك برابط لمحاكي الـ XML
    مع بعض النصوص البرمجية الابتدائية
  53. في ملاحظات المعلم في الأسفل.
  54. في هذه الحالة،
    تكون الواجهة الخطية هي المعاينة الجذر
  55. لهذه الواجهة لأنها
    المعاينة الأولى والأشمل.
  56. إذا استخدمنا match_parent
    للعرض والارتفاع لمعاينة الجذر،
  57. وسنجعل هذه الواجهة الأساسية لتطبيقنا.
  58. عندها ستكون هذه الواجهة الخطية
    بنفس طول وارتفاع شاشة الجهاز.
  59. سأريك عن طريق ضبط
    خلفية هذه الواجهة الخطية
  60. بلون غير شفاف.
  61. إذا جعلت الخلفية بلون
    رماديّ لهذه الواجهة الخطية،
  62. عندها يمكنك ملاحظة أن اللون
    يمتد لكامل عرض وارتفاع الجهاز.
  63. ماذا يحصل
    لو قمت بتغيير عرض أو ارتفاع
  64. أحد هذه المعاينات
    النصية لتشابه العنصر الأب؟
  65. لتوضيح حدود كلّ معاينة،
  66. سأغيّر لون الخلفية في جميع المعاينات.
  67. وسأغيّر ارتفاع هذه
    المعاينة النصية ليطابق الأب.
  68. وبالمناسبة، تُكتب هكذا match_parent.
  69. يمكنك ملاحظة أن هذه المعاينة النصية
    تأخذ كامل ارتفاع الأب.
  70. للأسف، تقوم بدفع كل
    مابقي لخارج الشاشة،
  71. ونحن لا نريد ذلك.
  72. لذا سنغيرها للقيمة wrap content.
  73. حسناً.
  74. لنغير الآن العرض
    ليشابه الأب ونرى ما سيحصل.
  75. الأن عرض معاينة النص
    هذه يطابق عرض الأب،
  76. والذي هو بنفس عرض الشاشة.
  77. إذا عدّلت باقي المعاينات
    النصية لتصبح match_parent.
  78. يمكنك ملاحظة أنها
    أخذت عرض الأب كاملاً.
  79. أريد الإشارة إلى أمرٍ آخر.
  80. في كل مرة ترى فيها سمة تبدأ بـ _layout،
  81. مثلlayout height ارتقاع الواجهة
    أو layout width عرض الواجهة
  82. هذه معاملات لمجموعة معاينة الواجهة.
  83. وتستخدمها مجموعات المعاينة الآباء،
  84. لتحديد حجم وموضع هذه المعاينات.
  85. في حين أن السمات الأخرى
    كلون الخلفية وحجم الخط،
  86. يتم تنسيقها في معاينة النص ذاتها.
  87. لكن متغيرات واجهة
    مجموعة المعاينة هذه تُعالج من قبل الأب.
  88. الآن حان دورك لتجرّب
    عدة قيم للعرض والارتفاع.
  89. للحصول على رابط محاكي الـ XML
    و النص البرمجيّ الابتدائي،
  90. انظر إلى ملاحظات المعلم.
  91. حاول تغيير قيم العرض
    والارتفاع لكّل معاينة نصية.
  92. يمكنك استخدام قيم dp محددة،
    أو wrap-content أو match_parent.
  93. تذكّر أنه ليس من الضروري
    تطابق العرض والارتفاع لكل معاينة.
  94. عندما تنتهي،
    ضع إشارة في هذا المربع للمتابعة.