YouTube

Got a YouTube account?

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

Arabic subtitles

Add the Other Team in XML

Get Embed Code
13 Languages

Showing Revision 2 created 12/28/2015 by Fran Ontanaya.

  1. قبل أن أبدأ بكتابة الكود
    سأقوم بالإجابة على هذا السؤال

  2. أنا أعرف فقط اثنتين من
    طرق العرض: LinearLayouts
  3. RelativeLayouts
  4. الكلمة المهمة الآن أن كلاً من طريقتي
    العرض يجب أن تشغل نفس المساحة
  5. إن استخدام layout_weight هو
    وسيلة سهلة حقاً للقيام بذلك
  6. حسناً فلنمضي قدماً
    ولنلقي نظرة على الكود
  7. حسناً، أنا لن أعمل بلغة جافا
    بعد الآن، لذا سأمضي قدماً
  8. وسأنتقل إلى "activity_main.xml"
  9. وها هو ملفي الـ XML.
  10. لذلك سأبدأ بوضع كل
    هذا الكود في LinearLayout آخر
  11. وهذا LinearLayout الأصل
    لكلا LinearLayouts الأصغر
  12. و سأقوم بتحريك هذين السطرين هنا
  13. لأنها يجب أن تكون مرتبطة RootView
    نضيف قوس إغلاق
  14. حسناً، سيقوم "Android Studio" تلقائياً
    بإنشاء وسوم إغلاق هنا
  15. لذا، سأمضي قدماً
  16. سأقوم بقص وسوم الإغلاق وأنزل إلى الأسفل
    ومن ثم أقوم بلصقه
  17. حسناً، الآن لدي خط أحمر متعرج
    وإذا نظرت إلى الخطأ
  18. أرى أنه ينبهني إلى أنني أحتاج إلى تحديد
    layout_height وlayout_width
  19. عجباً!
    حسناً، فلنقم بذلك
  20. لأن هذه هي جذر طريقة العرض
    سأمضي قدماً وأنشئ match_parent
  21. حسناً، إذاً
  22. الآن لدي LinearLayout واحدة
    تحيط LinearLayout أصغر
  23. وإذا قمت بالمعاينة
    ستبدو نفسها إلى حد كبير
  24. حسناً، لذا ما سأقوم به هو
    أنني سأنسخ كل شيء في
  25. TeamALinearLayout
    وسأقوم بلصقها أسفل TeamA
  26. وسيكون هذا TeamBLinearLayout
  27. حسناً، بدأت الأمور الآن
    تبدو فوضوية قليلاً
  28. لذا سأقوم Cmd+A أو تحديد الكل
    ومن ثم سأقوم
  29. سأستخدم اختصارات لوحة المفاتيح
    Cmd+Option+L لأقوم بتهيئة الكود
  30. على ويندوز،إنها Ctrl + Alt + L
    هذا يبدو أفضل قليلا
  31. الآن، أريد فقط أن اتأكد من
    أنك تفهم ما يحدث هنا
  32. سأمرر إلى الأعلى
    لدي LinearLayout جذر هنا
  33. إنها تبدأ هنا، وإذا قمت بالتمرير إلى
    الأسفل فإنها تنتهي هنا
  34. داخل جذر LinearLayout
    سأقوم بالتمرير أعلى مجدداً
  35. لدي تخطيط فرعي هنا
    والذي يبدأ من هنا
  36. سأمرر إلى لأسفل ببطء
  37. وهو ينتهي هنا
  38. هذا من أجل TeamA
  39. ولدي LinearLayout فرعي آخر
    و الذي يبدأ هنا
  40. سأمرر للأسفل ببطء
    والتي تنتهي هنا TeamB
  41. حسناً لقد لاحظت خط أحمر
    في الأعلى، لذا
  42. سأمرر إلى الأعلى مرة أخرى
    لأرى ما تقوله رسالة الخطأ
  43. توجيه خاطئ، لم يتم تحديد التوجيه
    الافتراضي هو أفقي
  44. حسناً هذا التصميم لديه عدة أفرع
  45. حيث واحد على الأقل لديه
    width match_parent
  46. أريد أن يكون أفقي
    فلنمضي قدماً
  47. ونحدد الاتجاه
  48. مرة أخرى، ليس هناك حاجة إليها من
    الناحية الفنية لأن الافتراضي هو أفقي، ولكن
  49. من الجيد أن تكون واضحة
  50. حسناً، كان يقول شيئاً عن الأولاد
    التي تغطي بعضها البعض
  51. سأنقر على معاينة
  52. لا يبدو أنها تغيرت بشكل فعلي كثيراً
    على الرغم من أنني قمت
  53. بكل عناء نسخ
    ولصق LinearLayout الأخرى
  54. ربما هذا له علاقة
    بالخطأ الذي عاينته للتو
  55. كان يقول أنه HorizontalLayout
  56. لذا سأحاول وضع كلتا LinearLayouts بجانب
    بعضهما البعض، ولكن
  57. LinearLayout لديه layout_width
  58. match_parent التي تملأ الشاشة
  59. وذلك أساسا أول LinearLayout
    يملىء الشاشة
  60. ثم يحاول LinearLayout الآخر أن يتوضع بجانبه
    في مكان ما خارج الشاشة
  61. لذا فلنفكر بما نريده فعلاً أن
    يحدث في هذه المرحلة
  62. نريد أن يكون لدينا تصميمين يشغلان
    مساحة متساوية ويكونان بجانب بعضهما البعض
  63. لذلك سنحتاج هنا إلى جلب layout_weights
  64. سأقوم باتخاذ LinearLayout الأول
  65. وسأعطيه layout_weight من 1
  66. سأقوم أيضا بضبط عرضه إلى 0
  67. حسناً، يمكننا أن نرى أن ما لدينا
    في الواقع اثنين من LinearLayouts
  68. إنهم فقط لا يتم عرضهم بشكل صحيح
  69. ولكن هذا هو أفضل قليلا
  70. لذلك يجب أن أضع layout_weight
    أيضا في LinearLayout الثاني
  71. هذا الجانب هنا
  72. سأقوم بالتمرير إلى الأسفل
  73. وهذا LinearLayout الثاني
  74. سأقوم بفعل نفس الشيء بالضبط
  75. سأقول أن التصميم لديه layout_weight
    من 1 كذلك، لذا
  76. الآن لديهم layout_weights متساوية
  77. سأقوم بتعيين العرض إلى 0
  78. حسناً، والسبب أنني قمت
    بضبط عرض كل منهما إلى 0
  79. في الأساس، أنه إذا كان كلا هذه
    الأطراف لا تشغل أي عرض
  80. إذاً فإنها ستشغل
    كامل المساحة الإضافية
  81. والتي هي الشاشة بأكملها، وتقسمها
    لتعطي نصف إلى إحداهما
  82. والنصف الثاني إلى الأخرى
    لأن كلا منهما له نفس layout_weight
  83. لقد قمت بوضع روابط لبعض مقاطع
    الفيديو في حال كان ذلك مربك جداً
  84. ملاحظات المدرس
    التي تشرح layout_weight
  85. حسناً، هذا هو يبدو جيداً جداً
    باستثناء أنه يقول TeamA
  86. سأقوم بالتمرير إلى الأسفل لتغيير
    ذلك هنا، سأغيرها إلى TeamB
  87. لا بد أنك قد لاحظت وجود خطأ هنا
  88. إن هذا الخطأ يحدث لأنه
    حسناً، لدينا معرف مكرر
  89. تذكر، لقد نسخت ولصقت الكود للتو
  90. لذلك، لدينا في الأساس اثنين من الأشياء
    التي تحاول أن يكون لها نفس المعرف
  91. من team_a_score
  92. لذلك، سأقوم فعلياً بتغيير
    هذا إلى team_b_score
  93. حسناً، هذا هو يبدو ممتازاً
  94. الرؤية صعبة قليلاً
  95. سأقوم بالتكبير
  96. ولكن، مكتوب هنا TeamB
  97. و لدي كل الأزرار
    ومربعات النص الصحيحة
  98. سأقوم بمحاولة تشغيل
    هذا على هاتفي
  99. حسناً، وهذا يبدو ممتازاً
  100. الآن إذا ضغطت على أزرار TeamA
    إنها تستجيب لذا فإن هذا أمر رائع
  101. إذا ضغطت على أزرار TeamB
    إنها تستجيب أيضاً
  102. هذا مميز
  103. ولكن تذكر، نريد فقط الحصول
    على XML بشكل صحيح
  104. لسنا مهتمين بلغة جافا
  105. لكن الآن بعد أن حصلنا على XML يعمل بشكل
    صحيح لماذا لا نقوم بتصحيح جافا؟