Return to Video

13-02 Adding a CheckBox - Solution

  • 0:01 - 0:03
    ابناء هذه الـ Layout لنبدأ
    بالتفكير حول الـ Views التي نحتاجها
  • 0:03 - 0:07
    سأعتبر أن كل هذا
    مبني مسبقاً، ونحن
  • 0:07 - 0:11
    سنتكلم حول الأشياء الجديدة
    التي سنضيفها لـ Layout خاصتنا
  • 0:11 - 0:15
    الـ Views الاثنتان الجديدتان اللتان
    نحتاجهما هما TextViewsمن اجل Toopings
  • 0:15 - 0:18
    و CheckBox View من أجل
    العنصر "Whipped Cream"
  • 0:18 - 0:21
    ربما أنت لم تعرف حتى
    أن هذه الـ View موجودة حتى في Android لكن
  • 0:21 - 0:24
    أتأمل أن يساعدكم بحث جوجل
    بإيجاد هذا الجواب
  • 0:25 - 0:28
    الانتقال إلى الخطوة 2
    لحتاج لتحديد موقع الـ Views
  • 0:28 - 0:31
    باعتبار أن هذه الـ Views
    ممركزة مسبقاً بشكل صحيح
  • 0:31 - 0:35
    نحن نحتاج فقط لإضافة Toppings
    و "Whipped cream"، ترويسةياً، في نفس الصف
  • 0:35 - 0:37
    بما أن الـ View الجذر هي
  • 0:37 - 0:40
    VerticalLinearLayout، نستطيع
    أن نضيف هاتين الـ Views في أعلاها
  • 0:41 - 0:44
    للخطوة الثالثة
    نحتاج لتسمية الـ Views
  • 0:44 - 0:46
    الأسلوب في الترويسة Toppings
    هو نفسه كما في َquantity
  • 0:46 - 0:49
    الترويسات orderSummary، لذا سنكون
    قادرين على نسخ
  • 0:49 - 0:51
    و لصق التوريسات الموجودة مسبقاً
  • 0:51 - 0:55
    إن الـ View المسماة CheckBox
    جديدة لذا نحن بحاجة لتسميتها وفقاً لذلك
  • 0:55 - 0:59
    يجب أن يكون لدينا مسافة من "24dp"
    بين المربع والنص
  • 0:59 - 1:04
    و يجب علينا تغيير حجم النص في
    الكريمة المخفوقة لحجم النص "16sp"
  • 1:04 - 1:06
    لنقم بهذه التغييرات على تطبيقنا الآن
  • 1:07 - 1:11
    لإضافة ترويسة Toppings يشبه الترويسة quantity
    أستطيع أن أنسخ
  • 1:11 - 1:13
    و ألصق هذا الكود فقط
  • 1:13 - 1:17
    أنسخه ثم اضيفه إلى قمة
    هذه الـ LinearLayout
  • 1:18 - 1:20
    حسناً، إذن الآن
    إنها تقول quantity مرتين هنا
  • 1:20 - 1:23
    سأغير النص
    بحيث تقول Toppings
  • 1:23 - 1:25
    لقد نسخت أيضاً أسفل الهامش
  • 1:25 - 1:29
    لذا لدي هناك بعض المساحة
    بين الترويسة والمضمون في الأسفل
  • 1:30 - 1:33
    الآن، لم نقم بإضافة CheckBox
    لتطبيقنا من قبل
  • 1:33 - 1:34
    لذا سأقوم بالبحث
    عن كيفية القيام بذلك على جوجل
  • 1:34 - 1:38
    سأبحث عن
    checkbox android
  • 1:38 - 1:41
    تذكر أن تضيف كلمة Android
    لأنه قد يكون هناك مربعات اختيار
  • 1:41 - 1:45
    لمنصات أخرى، كالويب
    أو منصات هواتف أخرى
  • 1:45 - 1:48
    هذه سوف تساعدك
    بالوصول لنتيجة محددة من أجل أندرويد
  • 1:48 - 1:50
    لنجرب الرابط الأول
  • 1:50 - 1:53
    هذا هو التوثيق
    المرجعي للصف CheckBox
  • 1:53 - 1:56
    أنا أمرر للأسفل
    و أشاهد هذا العرض الجميل للصف
  • 1:56 - 1:59
    ثم يذهب مباشرة إلى
    خصائص XML
  • 1:59 - 2:03
    ما أريده رغم ذلك
    هو مثال من XML عن CheckBox
  • 2:03 - 2:05
    لذا دعونا نعود إلى نتائج البحث
  • 2:05 - 2:07
    لننقر على الرابط الثاني
  • 2:07 - 2:10
    جيد، إنها تعرض بعض
    الصور لـ CheckBoxes
  • 2:10 - 2:12
    وهنا القليل من XML
  • 2:12 - 2:13
    هذا يبدو جيداً جداً
  • 2:13 - 2:16
    فيها CheckBoxes اثنين
    في LinearLayout
  • 2:16 - 2:19
    سأقوم فقط بنسخ
    الـ CheckBox الأول
  • 2:19 - 2:20
    و ثم سأقوم بلصقه في تطبيقنا
  • 2:22 - 2:26
    بالعودة لتطبيقنا، سألصقه
    بعد النص Toppings
  • 2:26 - 2:29
    وقبل النص Quantity إذن هنا تماماً
  • 2:29 - 2:33
    سأقوم بتعديل XML لأنها لا تناسب
    تماما حالة الاستخدام لدينا
  • 2:33 - 2:37
    سأقوم بإزالة المعرف
    والنص هنا أيضاً
  • 2:37 - 2:40
    بدلاً من اللحوم
    لأن مخزن القهوة لدينا لا يبيع اللحوم
  • 2:40 - 2:42
    سأكتب الكريمة المخوقة
  • 2:43 - 2:46
    بالمناسبة، ما رأيته قبلاً
    string/meat@
  • 2:46 - 2:50
    كان يشير إلى
    سلسلة الموارد في الملف "strings.xml"
  • 2:50 - 2:53
    سنتحدث عن ذلك قليلاً
    فيما بعد، ولكن الآن
  • 2:53 - 2:56
    يمكنك كتابة السلسلة
    مباشرة هنا
  • 2:56 - 2:59
    وانظر، تم تحديث المعاينة
    الآن لدينا CheckBox يقول "Whipped cream"
  • 2:59 - 3:03
    الجيد من ناحية CheckBox View
    أنها تمنحك مربعاً
  • 3:03 - 3:08
    مع بعض النصوص
    لذا لا داعٍ لإضافة View نصية هنا
  • 3:08 - 3:11
    كذلك لا نحتاج لهذا السطر هنا
    الذي يتكلم عن onClick
  • 3:12 - 3:16
    كل ما نهتم لأمره هنا في مهمة
    الكود هذه هو جعل الـ CheckBox يظهر هنا
  • 3:16 - 3:20
    الطريقة الأخر التي تمكنك من الوصول
    إلى هنا هي عن طريق التحقق من
  • 3:20 - 3:21
    صفحة غش "Android Views" المشهورة
  • 3:23 - 3:25
    هذه الصفحة تعرض
    قائمة من "Android Views" الشائعة
  • 3:25 - 3:27
    و لديها أمثلة عن XML أيضاً
  • 3:28 - 3:33
    وإليك CheckBox View
    و مثال عن كيفية ظهورها
  • 3:33 - 3:34
    و الـ XML المقابل لها
  • 3:34 - 3:37
    يمكنك نسخ الـ XML من هنا
    ولصقه في التطبيق
  • 3:38 - 3:41
    بالعودة إلى "Android Studio"
    دعونا نشغل التطبيق لنرى كيف يبدو
  • 3:42 - 3:43
    وها هي
  • 3:43 - 3:44
    إنه يبدو جيداً جداً
  • 3:44 - 3:47
    لدينا الترويسة Toppings و الـ CheckBox
    "Whipped cream"
  • 3:48 - 3:50
    نحصل أيضاً على هذه الحركة
    الجميلة عندما نختار الصندوق
  • 3:51 - 3:55
    والمشكلة الوحيدة التي أراها على الرغم
    من ذلك أن المساحات غير موجودة
  • 3:55 - 3:58
    على سبيل المثال
    هناك ضيق شديد بين الترويسة qunatity
  • 3:58 - 4:01
    و CheckBox لـ "Whipped cream"
    ولا يوجد فراغ كافٍ أيضاً هنا
  • 4:02 - 4:04
    بالعودة للأسطر الحمراء
    المقدمة مسبقاً
  • 4:04 - 4:09
    يجب أن نضيف مساحة من "24dp" هنا
    ونغير حجم الخط إلى "16sp"
  • 4:11 - 4:13
    أولاً سأغير حجم الخط
  • 4:13 - 4:18
    سأكتب في android:textSize
    ثم سأضع "16sp"
  • 4:18 - 4:22
    سأفتح المعاينة هنا
    لأتأكد من أنه كبر بالفعل حجم
  • 4:22 - 4:24
    الخط، وفعلاً تم ذلك
  • 4:24 - 4:27
    إذا لم تكن متأكداً أنه
    تم التحديث أو لا، يمكنك أن تضغط هذا الزر
  • 4:27 - 4:27
    حسناً
  • 4:27 - 4:30
    الآن لمعرفة التباعد
    علي أن أقوم بذلك حقيقةً
  • 4:30 - 4:32
    عن طريق مجموعة من المحاولات والأخطاء
  • 4:32 - 4:34
    حاولت تعيين قيم الهامش
  • 4:34 - 4:38
    ثم حاولت تعيين قيم الحشو
    و اتضح أن paddingLeft
  • 4:38 - 4:43
    لا تتحكم بالتباعد
    بين المربع و النص هنا
  • 4:43 - 4:43
    دعونا نضيف الحشو الآن
  • 4:45 - 4:47
    جيد، لقد تحرك النص
  • 4:47 - 4:49
    لا زلت أرى مشكلة أخرى على الرغم من ذلك
  • 4:49 - 4:53
    هنالك مساحة ترويسةية كافية هنا
    ولكن لا يوجد مساحة ترويسةية كافية هنا
  • 4:53 - 4:58
    يجب علي إما أن أضيف حشو زر
    أو هامش زر لهذه الـ View لـ CheckBox
  • 4:58 - 5:02
    علي إضافة حشو علوي
    أو هامش علوي للترويسة quantity
  • 5:02 - 5:03
    اي من الطرق ستفي بالغرض
  • 5:03 - 5:07
    ساضيف هامشاً علوياً
    للترويسة quantity
  • 5:07 - 5:09
    هناكن هذا يبدو أفضل
  • 5:09 - 5:11
    تبدو الأشياء متساوية بالبعد بشكل أفضل الآن
  • 5:11 - 5:13
    سأقوم بتشغيل هذا التطبيق على جهازي
  • 5:14 - 5:15
    وها هو التطبيق
  • 5:15 - 5:16
    إنه يبدو جيداً حقاً
  • 5:16 - 5:17
    عمل رائع
  • 5:17 - 5:21
    عندما تريد إضافة تغييرات جديدة على واجهة
    المستخدم في تطبيقك يمكنك اتباع هذه المنصة
  • 5:21 - 5:25
    من بحث جوجل من اجل المعلومات على الانترنت
    و من ثم تطبيقها على تطبيقك
Title:
13-02 Adding a CheckBox - Solution
Description:

more » « less
Video Language:
English
Team:
Udacity
Project:
UD837 - Android for Beginners
Duration:
05:27

Arabic subtitles

Revisions Compare revisions