YouTube

Got a YouTube account?

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

Arabic subtitles

13-02 Adding a CheckBox - Solution

Get Embed Code
13 Languages

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

  1. ابناء هذه الـ Layout لنبدأ
    بالتفكير حول الـ Views التي نحتاجها
  2. سأعتبر أن كل هذا
    مبني مسبقاً، ونحن
  3. سنتكلم حول الأشياء الجديدة
    التي سنضيفها لـ Layout خاصتنا
  4. الـ Views الاثنتان الجديدتان اللتان
    نحتاجهما هما TextViewsمن اجل Toopings
  5. و CheckBox View من أجل
    العنصر "Whipped Cream"
  6. ربما أنت لم تعرف حتى
    أن هذه الـ View موجودة حتى في Android لكن
  7. أتأمل أن يساعدكم بحث جوجل
    بإيجاد هذا الجواب
  8. الانتقال إلى الخطوة 2
    لحتاج لتحديد موقع الـ Views
  9. باعتبار أن هذه الـ Views
    ممركزة مسبقاً بشكل صحيح
  10. نحن نحتاج فقط لإضافة Toppings
    و "Whipped cream"، ترويسةياً، في نفس الصف
  11. بما أن الـ View الجذر هي
  12. VerticalLinearLayout، نستطيع
    أن نضيف هاتين الـ Views في أعلاها
  13. للخطوة الثالثة
    نحتاج لتسمية الـ Views
  14. الأسلوب في الترويسة Toppings
    هو نفسه كما في َquantity
  15. الترويسات orderSummary، لذا سنكون
    قادرين على نسخ
  16. و لصق التوريسات الموجودة مسبقاً
  17. إن الـ View المسماة CheckBox
    جديدة لذا نحن بحاجة لتسميتها وفقاً لذلك
  18. يجب أن يكون لدينا مسافة من "24dp"
    بين المربع والنص
  19. و يجب علينا تغيير حجم النص في
    الكريمة المخفوقة لحجم النص "16sp"
  20. لنقم بهذه التغييرات على تطبيقنا الآن
  21. لإضافة ترويسة Toppings يشبه الترويسة quantity
    أستطيع أن أنسخ
  22. و ألصق هذا الكود فقط
  23. أنسخه ثم اضيفه إلى قمة
    هذه الـ LinearLayout
  24. حسناً، إذن الآن
    إنها تقول quantity مرتين هنا
  25. سأغير النص
    بحيث تقول Toppings
  26. لقد نسخت أيضاً أسفل الهامش
  27. لذا لدي هناك بعض المساحة
    بين الترويسة والمضمون في الأسفل
  28. الآن، لم نقم بإضافة CheckBox
    لتطبيقنا من قبل
  29. لذا سأقوم بالبحث
    عن كيفية القيام بذلك على جوجل
  30. سأبحث عن
    checkbox android
  31. تذكر أن تضيف كلمة Android
    لأنه قد يكون هناك مربعات اختيار
  32. لمنصات أخرى، كالويب
    أو منصات هواتف أخرى
  33. هذه سوف تساعدك
    بالوصول لنتيجة محددة من أجل أندرويد
  34. لنجرب الرابط الأول
  35. هذا هو التوثيق
    المرجعي للصف CheckBox
  36. أنا أمرر للأسفل
    و أشاهد هذا العرض الجميل للصف
  37. ثم يذهب مباشرة إلى
    خصائص XML
  38. ما أريده رغم ذلك
    هو مثال من XML عن CheckBox
  39. لذا دعونا نعود إلى نتائج البحث
  40. لننقر على الرابط الثاني
  41. جيد، إنها تعرض بعض
    الصور لـ CheckBoxes
  42. وهنا القليل من XML
  43. هذا يبدو جيداً جداً
  44. فيها CheckBoxes اثنين
    في LinearLayout
  45. سأقوم فقط بنسخ
    الـ CheckBox الأول
  46. و ثم سأقوم بلصقه في تطبيقنا
  47. بالعودة لتطبيقنا، سألصقه
    بعد النص Toppings
  48. وقبل النص Quantity إذن هنا تماماً
  49. سأقوم بتعديل XML لأنها لا تناسب
    تماما حالة الاستخدام لدينا
  50. سأقوم بإزالة المعرف
    والنص هنا أيضاً
  51. بدلاً من اللحوم
    لأن مخزن القهوة لدينا لا يبيع اللحوم
  52. سأكتب الكريمة المخوقة
  53. بالمناسبة، ما رأيته قبلاً
    string/meat@
  54. كان يشير إلى
    سلسلة الموارد في الملف "strings.xml"
  55. سنتحدث عن ذلك قليلاً
    فيما بعد، ولكن الآن
  56. يمكنك كتابة السلسلة
    مباشرة هنا
  57. وانظر، تم تحديث المعاينة
    الآن لدينا CheckBox يقول "Whipped cream"
  58. الجيد من ناحية CheckBox View
    أنها تمنحك مربعاً
  59. مع بعض النصوص
    لذا لا داعٍ لإضافة View نصية هنا
  60. كذلك لا نحتاج لهذا السطر هنا
    الذي يتكلم عن onClick
  61. كل ما نهتم لأمره هنا في مهمة
    الكود هذه هو جعل الـ CheckBox يظهر هنا
  62. الطريقة الأخر التي تمكنك من الوصول
    إلى هنا هي عن طريق التحقق من
  63. صفحة غش "Android Views" المشهورة
  64. هذه الصفحة تعرض
    قائمة من "Android Views" الشائعة
  65. و لديها أمثلة عن XML أيضاً
  66. وإليك CheckBox View
    و مثال عن كيفية ظهورها
  67. و الـ XML المقابل لها
  68. يمكنك نسخ الـ XML من هنا
    ولصقه في التطبيق
  69. بالعودة إلى "Android Studio"
    دعونا نشغل التطبيق لنرى كيف يبدو
  70. وها هي
  71. إنه يبدو جيداً جداً
  72. لدينا الترويسة Toppings و الـ CheckBox
    "Whipped cream"
  73. نحصل أيضاً على هذه الحركة
    الجميلة عندما نختار الصندوق
  74. والمشكلة الوحيدة التي أراها على الرغم
    من ذلك أن المساحات غير موجودة
  75. على سبيل المثال
    هناك ضيق شديد بين الترويسة qunatity
  76. و CheckBox لـ "Whipped cream"
    ولا يوجد فراغ كافٍ أيضاً هنا
  77. بالعودة للأسطر الحمراء
    المقدمة مسبقاً
  78. يجب أن نضيف مساحة من "24dp" هنا
    ونغير حجم الخط إلى "16sp"
  79. أولاً سأغير حجم الخط
  80. سأكتب في android:textSize
    ثم سأضع "16sp"
  81. سأفتح المعاينة هنا
    لأتأكد من أنه كبر بالفعل حجم
  82. الخط، وفعلاً تم ذلك
  83. إذا لم تكن متأكداً أنه
    تم التحديث أو لا، يمكنك أن تضغط هذا الزر
  84. حسناً
  85. الآن لمعرفة التباعد
    علي أن أقوم بذلك حقيقةً
  86. عن طريق مجموعة من المحاولات والأخطاء
  87. حاولت تعيين قيم الهامش
  88. ثم حاولت تعيين قيم الحشو
    و اتضح أن paddingLeft
  89. لا تتحكم بالتباعد
    بين المربع و النص هنا
  90. دعونا نضيف الحشو الآن
  91. جيد، لقد تحرك النص
  92. لا زلت أرى مشكلة أخرى على الرغم من ذلك
  93. هنالك مساحة ترويسةية كافية هنا
    ولكن لا يوجد مساحة ترويسةية كافية هنا
  94. يجب علي إما أن أضيف حشو زر
    أو هامش زر لهذه الـ View لـ CheckBox
  95. علي إضافة حشو علوي
    أو هامش علوي للترويسة quantity
  96. اي من الطرق ستفي بالغرض
  97. ساضيف هامشاً علوياً
    للترويسة quantity
  98. هناكن هذا يبدو أفضل
  99. تبدو الأشياء متساوية بالبعد بشكل أفضل الآن
  100. سأقوم بتشغيل هذا التطبيق على جهازي
  101. وها هو التطبيق
  102. إنه يبدو جيداً حقاً
  103. عمل رائع
  104. عندما تريد إضافة تغييرات جديدة على واجهة
    المستخدم في تطبيقك يمكنك اتباع هذه المنصة
  105. من بحث جوجل من اجل المعلومات على الانترنت
    و من ثم تطبيقها على تطبيقك