Return to Video

07-23 The Stages - Solution

  • 0:01 - 0:05
    حنساً، سأجيب على هذه الأسئلة
    قبل الانتقال إلى الـ XML
  • 0:05 - 0:07
    أولاً
    اختيار الـ views
  • 0:07 - 0:09
    سأرسم صناديق حول
    صناديق الحوار التي أراها
  • 0:10 - 0:11
    حسناً، إذن هنالك خمس views مختلفة
  • 0:11 - 0:14
    غير متضمنة الـ view group
    والتي تعتبر تقنياً view بحد ذاتها
  • 0:14 - 0:18
    على أية حال، هذه الـ views الخمس
    عبارة عن اثنين من textViews هنا في الأعلى
  • 0:18 - 0:19
    تليها ثلاثة أزرار
  • 0:19 - 0:24
    وفعلا لا يوجد أي ImageViews في أي مكان
    هنا، لذا سأقول لا يوجد ImageViews
  • 0:24 - 0:28
    لربما أنتم تتساءلون الآن لماذا قررت
    أن هاتين TextViews مختلفتين
  • 0:28 - 0:32
    حسناً في المنتج النهائي
    شكل الـ Team A
  • 0:32 - 0:34
    والنتيجة يبدوان مختلفين جداً
  • 0:34 - 0:38
    لذا قررت أن أبقي هاتين
    الإثنين كـ TextViews منفصلتين
  • 0:38 - 0:40
    الانتقال إلى الخطوة الثانية
    وهي تحديد مواقع الـ views
  • 0:40 - 0:43
    سأختار أي
    ViewGroup أريد هنا
  • 0:43 - 0:47
    و الإثنتان اللتان في رأسي
    هما التنسيقات الخطية والتنسيقات النسبية
  • 0:47 - 0:49
    الآن هذا عمود رأسي من الـ views
  • 0:49 - 0:53
    لذلك فمن الواضح لي ماذا أريد
    و هذا تنسيق خطي
  • 0:54 - 0:57
    حسنا، أخيراً لدي الخطوة الثالثة
    و هي شكل الـ views
  • 0:57 - 1:00
    وسأعالجها عن طريق
    عملي في الـ XML
  • 1:00 - 1:03
    حسناً، لذلك دعونا ننتقل إلى الـ XML
  • 1:03 - 1:05
    حسناً، أريد أن أبحث
    في علامة التبويب Text
  • 1:05 - 1:08
    حسناً، لذلك أول شيء
    سأقوم به هنا هو
  • 1:08 - 1:10
    حذف بعض الأشياء التي لا أحتاج إليها
  • 1:10 - 1:12
    لذلك سأمضي قدماً
    و أبدأ بحذف هذه الـ TextView
  • 1:13 - 1:17
    و كل هذه الـ paddingLeft
    و الـ paddingRight و الـ paddingTop
  • 1:17 - 1:20
    والـ paddingBottom، سأقوم بحذفها أيضاً
  • 1:20 - 1:23
    و الحرص جيداً على عدم حذف
    شيء عن طريق الخطأ
  • 1:23 - 1:25
    حسناً
  • 1:25 - 1:28
    الآن لقد قلنا بأن الـ ViewGroup التي
    سنستخدمها ليست بتنسيق نسبي
  • 1:28 - 1:30
    ولكنها بتنسيق خطي، لذا
    سأمضي قدماً وأغير ذلك الآن
  • 1:31 - 1:35
    وداخل هذا التتنسيق الخطي
    سيكون لدي اثنتين من الـ TextView
  • 1:35 - 1:36
    تليهما ثلاثة أزرار
  • 1:36 - 1:38
    لذا سأبدأ بإنشائهم
  • 1:38 - 1:40
    لا أريد أن أكون محدداً جداً
    الآن حول مقدار العرض و
  • 1:40 - 1:43
    ارتفاع هذا الـTextView
  • 1:43 - 1:45
    حتى الآن سأتركه
    كـ wrap_content
  • 1:45 - 1:48
    و التي ستضع مربع
    الـ TextView حول النص تماماً
  • 1:49 - 1:52
    سأمضي قدماً وأحدد النص
    لهذه الـ TextView أيضاً
  • 1:52 - 1:55
    و هذا الـ TextView الأول
    سيقول فقط Team A
  • 1:56 - 1:59
    حسناً، لنرى كيف
    سيبدو ذلك في المعاينة
  • 1:59 - 2:02
    حسناً، أستطيع أن أرى TextView صغيرة
    هناك والتي تقول Team A
  • 2:02 - 2:04
    الآن دعونا نبني زوجاً إضافياً
  • 2:04 - 2:07
    إذن التالي في الأسفل هو النتيجة
    و التي هي أيضاً TextView
  • 2:07 - 2:10
    لذلك سنبدأ بكتابة النص
  • 2:10 - 2:12
    حسناً، أرى الكلمة TextView
    لذا أضغط Enter
  • 2:12 - 2:16
    و سأجعلها أيضاً wrap_content
  • 2:16 - 2:18
    وسأضيف النص
  • 2:18 - 2:22
    حسناً عادة ما تبدأ النتيجة بالصفر
    لذلك سنحصل عليها تبدأ بالصفر
  • 2:22 - 2:23
    حسناً
  • 2:23 - 2:23
    الآن أزراري
  • 2:23 - 2:26
    لذلك سأبدأ
    بكتابة الكلمة Button
  • 2:26 - 2:28
    أستمر وأضع wrab_conten
    لهم أيضاً
  • 2:28 - 2:32
    حسناً، الآن الزر الأول
    سيقول "+3 Points"
  • 2:32 - 2:35
    سأمضي قدماً وأنسخ هذا
  • 2:35 - 2:40
    وألصقه مرة
    ألصقه مرتين لأحصل على زرين إضافيين
  • 2:40 - 2:43
    وسيكون لدينا زر
    يقول "+2 Points"
  • 2:43 - 2:45
    زر يقول "Free Throw"
  • 2:45 - 2:47
    حسناً، دعونا نرى كيف
    يبدو ذلك في المعاينة
  • 2:48 - 2:51
    حسناً، يبدو لي أن لدي ثلاثة أزرار.
  • 2:51 - 2:54
    وأستطيع أن أرى Team A والصفر.
  • 2:54 - 2:56
    إذن لدي جيمع الـ views الخاصة بي
  • 2:56 - 2:59
    ولكن هذا لا يبدو حقاً كما
    يفترض أن يبدو الهدف النهائي
  • 2:59 - 3:01
    تذكر أنهم في عمود رأسي
  • 3:01 - 3:03
    لذلك أعتقد أنه عليّ
    أن أغير اتجاه التنسيق لدي، لذا
  • 3:03 - 3:05
    سأمضي قدماً وأفعل ذلك
  • 3:05 - 3:10
    لذلك سأبدأ باتجاه الكتابة و
    أريده أن يكون رأسياً
  • 3:10 - 3:12
    حسناً، هذا يبدو
    أفضل قليلاً
  • 3:12 - 3:17
    و الآن تم توسيع هذه الأزرار إلى ملئ
    عرض الشاشة نوعاً ما
  • 3:17 - 3:20
    لذلك على الأغلب لا أريد
    أن أضع wrap-content من أجل
  • 3:20 - 3:23
    الأزرار
    بدلا من ذلك سأضع match_parent
  • 3:23 - 3:24
    لذا، اسمحوا لي أن أغير ذلك الآن
  • 3:26 - 3:29
    حسنا، إذن العرض لجميع الأزرار
    لدي هو الآن match_parent
  • 3:29 - 3:30
    دعونا نذهب إلى المعاينة
  • 3:31 - 3:33
    حسناً، هذا يبدو أفضل
    لقد توسعوا
  • 3:33 - 3:34
    حسناً
  • 3:34 - 3:39
    حسناً، مازالت نصوصي
    محشورةً في الزاوية نوعاً ما
  • 3:39 - 3:44
    و لإصلاح ذلك سأستخدم
    شيئاً ما يدعى gravity
  • 3:44 - 3:46
    حسناً
  • 3:46 - 3:49
    والآن لننشئ صندوق نصي
    في Google Drawing
  • 3:50 - 3:52
    حسناً، إذن
    هذا يشبه كثيراً حدود الـ view
  • 3:52 - 3:54
    ويمكنني أن أكتب الكلمة Team A
  • 3:54 - 3:58
    وستكون في الزاوية
    العليا اليسارية افتراضياً
  • 3:58 - 4:01
    و هذا تماماً كما هو الحال مع TextView
    عندما تضع نصاً في TextView
  • 4:01 - 4:03
    افتراضياً، ستكون
    في الزاوية العليا اليسارية
  • 4:03 - 4:09
    والآن، مع Google Drawings، يمكنني
    ان أختار هذا النص وأستخدم بشكل أساسي
  • 4:09 - 4:14
    قيمة صفة تدعى line
    لوضع النص في المنتصف
  • 4:14 - 4:19
    أفقيا داخل مربع النص
    ووضعه في المنتصف عمودياً داخل مربع النص
  • 4:19 - 4:20
    جميل جداً
  • 4:20 - 4:24
    بأخذ مضمون الـ view و
    تحريكه داخل حدود الـ view
  • 4:24 - 4:27
    هو بالضبط ما
    تقوم به جاذبية التنسيق
  • 4:27 - 4:30
    وإن كنت تفكر أن هذا يمكن أن يكون
    شبيهاً ببعض طرق التنسيق
  • 4:30 - 4:34
    التي يمكنك استخدامها مع التنسيقات النسبية
    فهو كذلك، ولكن يمكنك استخدام صفة
  • 4:34 - 4:37
    gravity مع التنسيق الخطي
    و التي تجعل من هذا فعالاً
  • 4:37 - 4:39
    سوف نلقي نظرة على ذلك في الكود
  • 4:40 - 4:44
    لذا، سوف آخذ أول TextView لدي
    و سأبدأ بكتابة gravity
  • 4:45 - 4:47
    حسناً
    مع gravity لدي خيارين
  • 4:47 - 4:49
    تنسيق gravity وgravity
  • 4:49 - 4:51
    لقد أخبرتكم منذ قليل
    عن صفات gravity
  • 4:51 - 4:53
    إذن هذا هو الذي سنقوم باستخدامه
  • 4:53 - 4:56
    حسناً
    ومن ثم لدي مجموعة من الخيارات هنا
  • 4:56 - 4:58
    وأعتقد أنني
    أريدها أن تتوضع في المركز أفقياً
  • 4:58 - 5:00
    إذن، هذا ما سأستخدمه
  • 5:00 - 5:03
    و سأمضي قدماً و
    أرى ماذا يفعل ذلك في المعاينة
  • 5:04 - 5:08
    لا تبدو وكأنها فعلت الكثير
    ولكن هنالك سبب لذلك
  • 5:09 - 5:13
    لذا إذا نقرت هنا، ودعونا نقرب
    بما أنه من الصعب عليكم أن تروا
  • 5:15 - 5:16
    حسناً، إذاً
  • 5:16 - 5:21
    هنا لدينا Team A، و تستطيعون أن تروا
    نوعاً ما حدود الـ view حولها
  • 5:21 - 5:25
    حسناً، إذا كان لي أن أقول لكم أن
    هذا تم وضعه في المنتصف داخل الـ view
  • 5:25 - 5:27
    لما كان بإمكانكم الجدال معي
  • 5:27 - 5:32
    لا يبدو بأنها تقع في منتصف
    الـ view، حيث أن الـ view صغيرة جداً
  • 5:32 - 5:33
    بالعودة إلى Google Drawing لدينا
  • 5:33 - 5:39
    إنها نوعاً ما تبدو كما لو أنني زدت الحجم
    ليصبح بحجم النص
  • 5:39 - 5:40
    لقد تمركز، ولكنها
  • 5:40 - 5:45
    لا تبدو فعلاً مختلفة كثيراً
    عنها كما لو كانت تتوضع يساراً
  • 5:45 - 5:47
    حسناً، لذا
    إذا أردت أن أضعها في الهاتف
  • 5:47 - 5:50
    أحتاج أن أجعل الـ view تتمدد
    على طول الهاتف
  • 5:50 - 5:52
    وهو ما سيتطلب منا
    تغيير العرض
  • 5:54 - 5:56
    حسناً، لذا
    هنا في الخلف ساغلق معاينتي
  • 5:57 - 5:59
    و سأذهب إلى العرض هنا
  • 6:00 - 6:05
    بدلا من القيام بـ wrap_content
    سأقوم بـ match_parent
  • 6:05 - 6:06
    حسنا، دعونا ننظر إلى
    المعاينة الخاصة بنا مرة أخرى
  • 6:07 - 6:08
    تصغير
  • 6:09 - 6:11
    حسناً
    وهذا يبدو أفضل بكثير
  • 6:11 - 6:12
    يبدو أنها أصبحت متمركزة
  • 6:12 - 6:14
    لذلك دعونا نفعل نفس الشيء
    مع النتيجة هنا
  • 6:16 - 6:19
    حسناً، لذلك سأضيف
    gravity لهذه أيضاً،
  • 6:19 - 6:20
    gravity في جميع تنسيق gravity
  • 6:20 - 6:26
    center_horizontal وسأغير
    العرض إلى match_parent
  • 6:27 - 6:29
    حسناً، دعونا نتحقق من ذلك مرة أخرى
  • 6:29 - 6:31
    رائع!
    إذن، كل شيء تم وضعه في مراكزه
  • 6:31 - 6:32
    إنها تبدو جيدة جداً
  • 6:32 - 6:34
    إلا أنها كلها في الواقع
    محشورة معاً نوعا ما
  • 6:34 - 6:37
    لا يوجد أماكن فارغة
    بين هذه العناصر
  • 6:37 - 6:41
    سأعطي كل
    TextViews قيمة حشو 4
  • 6:41 - 6:46
    سأبدأ بكتابة الحشو
    سأضع 4 dp
  • 6:47 - 6:48
    هل تذكر الـ dp ؟
  • 6:48 - 6:52
    و أنا أستخدم الحشو فقط، وليس
    الحشو في الأسفل أو أي شيء مثل ذلك
  • 6:52 - 6:54
    وهي ستوفر 4dp
    حول الـ TextView كاملة
  • 6:54 - 6:57
    دعونا نرى كيف يبدو
    ذلك في المعاينة
  • 6:58 - 7:01
    حسناً
    هذا يعطيني القليل من المساحة
  • 7:01 - 7:04
    سأفعل ذلك
    للـ TextView الخاصة بالنتيجة
  • 7:08 - 7:11
    الآن، سأحاول فعل الشيء
    نفسه للزر
  • 7:16 - 7:19
    هم، هذا لا يبدو أنه
    يفعل الشيء الكثير
  • 7:19 - 7:24
    ماذا لو جعلتها أكبر قليلاً
    8 مثلاً
  • 7:24 - 7:26
    20؟
  • 7:26 - 7:30
    هم، مثير للاهتمام، إذن يبدو وكأنها
    تجعل الزر نفسه أكبر
  • 7:30 - 7:32
    أنا لا أريد أن يكبر الزر نفسه
  • 7:32 - 7:34
    أريد أن تكون المساحة
    حول الزر أكبر
  • 7:34 - 7:38
    وهذا العمل أفضل مع
    layout_margin
  • 7:38 - 7:41
    تذكر، الحشو هو في الحقيقة
    إضافة حشو داهل الـ view
  • 7:41 - 7:43
    في حين يضع الهامش
    مساحة حول الـ view
  • 7:44 - 7:45
    إذن نحن نغير هذا إلى layout_margin
  • 7:45 - 7:47
    سأقوم بـ 8dp
  • 7:47 - 7:49
    حسناً هذا يبدو أفضل
  • 7:49 - 7:53
    الآن هناك مساحة حول الـ view
    بين هاتين الـ views الإثنتين
  • 7:53 - 7:55
    لذا دعونا نمضي قدماً و
    نقوم بذلك مع بقية الأزرار
  • 7:56 - 8:00
    الهامش وليس الحشو layout_margin
  • 8:00 - 8:01
    حسنا، هذا يبدو جيداً جداً
  • 8:01 - 8:04
    الآن إذا اخترتَ صفات
    مختلفة عما فعلت أنا
  • 8:04 - 8:08
    كأن يكون لديك الحشو
    خمسة بدلاً من أربعة، هذا عادي
  • 8:08 - 8:12
    تذكر، في هذه النقطة سأحاول
    فقط جعل الأشياء قابلة للقراءة
  • 8:12 - 8:15
    سنهتم باختيار حجم الخط و
    جمالية اللون في مرحلة لاحقة
  • 8:17 - 8:18
    حسناً
  • 8:18 - 8:19
    وعمل رائع
  • 8:19 - 8:20
    لقد انتهيتَ من هذه الخطوة
タイトル:
07-23 The Stages - Solution
概説:

more » « less
Video Language:
English
Team:
Udacity
プロジェクト:
UD837 - Android for Beginners
Duration:
08:22

Arabic subtitles

改訂 Compare revisions