Return to Video

4 - The Stages SOL

  • 0:01 - 0:05
    حنساً، سأجيب على هذه الأسئلة
    قبل الانتقال إلى الـ XML
  • 0:05 - 0:07
    بادئ ذي بدء، اختيار طرق العرض.
  • 0:07 - 0:09
    سأرسم صناديق حول طرق العرض التي أراها.
  • 0:10 - 0:11
    حسناً، إذن هنالك خمس طرق عرض مختلفة
  • 0:11 - 0:14
    غير متضمنة مجموعة طريقة العرض
    والتي تعتبر تقنياً طريقة عرض بحد ذاتها.
  • 0:14 - 0:18
    على أية حال، طرق العرض هذه الخمس
    عبارة عن طريقتي عرض نصية هنا في الأعلى
  • 0:18 - 0:19
    تليها ثلاثة طريقة عرض زر.
  • 0:19 - 0:24
    وفعلا لا يوجد طرق عرض صورة في أي مكان هنا،
    لذا سأقول لا يوجد طرق عرض صورة.
  • 0:24 - 0:28
    لربما أنتم تتساءلون الآن
    لماذا قررت أن طريقتي العرض النصية مختلفتين
  • 0:28 - 0:32
    حسناً في المنتج النهائي
    شكل المربع النصي الفريق أ،
  • 0:32 - 0:34
    والمربع النصي للنتيجة يبدوان مختلفين جداً.
  • 0:34 - 0:38
    لذا قررت،
    أن أبقي هاتين الإثنين كطرق عرض نصية منفصلة.
  • 0:38 - 0:40
    الانتقال إلى الخطوة الثانية
    وهي تحديد مواقع طرق العرض.
  • 0:40 - 0:43
    سأختار أي مجموعة طرق العرض أريد هنا.
  • 0:43 - 0:47
    و الإثنتان اللتان في ذهني هما
    التصميم الخطي والتصميم النسبي
  • 0:47 - 0:49
    الآن هذا عمود رأسي من طرق العرض.
  • 0:49 - 0:53
    لذلك فمن الواضح لي ماذا أريد
    وهذا تصميم خطي.
  • 0:54 - 0:57
    حسنا، أخيراً لدي الخطوة الثالثة
    وهي شكل طرق العرض.
  • 0:57 - 1:00
    وسأعالجها عن طريق عملي في الـ XML
  • 1:00 - 1:03
    حسناً، لذلك دعونا ننتقل إلى الـ XML
  • 1:03 - 1:05
    حسناً، أريد أن أبحث في علامة التبويب نص.
  • 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
    الآن لقد قلنا بأن مجموعة طريقة العرض
    التي سنستخدمها ليست RelativeLayout،
  • 1:28 - 1:30
    ولكنها LinearLayout،
    لذا سأمضي قدماً وأغير ذلك الآن
  • 1:31 - 1:35
    وداخل هذا التصميم الخطي
    سيكون لدي اثنتين من TextViews
  • 1:35 - 1:36
    تليهما ثلاثة أزرار
  • 1:36 - 1:38
    لذا سأبدأ بإنشائهم
  • 1:38 - 1:41
    لا أريد أن أكون محددة جدا الآن
    حول مقدار العرض و ارتفاع طريقة العرض.
  • 1:43 - 1:45
    حتى الآن سأتركه كـ wrap_content
  • 1:45 - 1:48
    و التي ستضع مربع TextView حول النص تماماً.
  • 1:49 - 1:52
    سأمضي قدماً، وأحدد text لـTextView هذه أيضا
  • 1:52 - 1:55
    و هذا الـ TextView الأول
    سيقول فقط الفريق أ (Team A)
  • 1:56 - 1:59
    حسناً، لنرى كيف سيبدو ذلك في المعاينة.
  • 1:59 - 2:02
    حسناً، أستطيع أن أرى طريقة عرض نصية صغيرة
    والتي تقول Team A
  • 2:02 - 2:04
    الآن دعونا نبني زوجاً إضافياً
  • 2:04 - 2:07
    إذن التالي في الأسفل هو النتيجة (score)
    والتي هي أيضاً 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:24
    الآن الأزرار.
  • 2:24 - 2:26
    لذلك سأبدأ بكتابة الكلمة Button
  • 2:26 - 2:28
    أستمر وأضع wrap_content لهم أيضاً.
  • 2:28 - 2:32
    حسناً، الآن الزر الأول سيقول
    + 3 نقاط ( 3points+)
  • 2:32 - 2:35
    سأمضي قدماً وأنسخ هذا
  • 2:35 - 2:40
    وألصقه مرة، ألصقه للمرة الثانية،
    لأحصل على زرين إضافيين
  • 2:40 - 2:43
    وسيكون لدينا زر يقول
    + 2 نقاط ( 2points+)
  • 2:43 - 2:45
    زر يقول رمية حرة (Free Throw)
  • 2:45 - 2:47
    حسناً، دعونا نرى كيف يبدو ذلك في المعاينة
  • 2:48 - 2:51
    حسناً، يبدو لي أن لدي ثلاثة أزرار.
  • 2:51 - 2:54
    وأستطيع أن أرى Team A والصفر.
  • 2:54 - 2:56
    إذن لدي جيمع طرق العرض الخاصة بي.
  • 2:56 - 2:59
    ولكن هذا لا يبدو حقاً كما يفترض
    أن يبدو الهدف النهائي
  • 2:59 - 3:01
    تذكر أنهم في عمود رأسي.
  • 3:01 - 3:03
    لذلك أعتقد،
    أنه علي أن أغير اتجاه التصميم لدي،
  • 3:03 - 3:05
    سأمضي قدماً وأفعل ذلك.
  • 3:05 - 3:10
    لذلك سأبدأ بكتابة orientation
    وأريده أن يكون vertical.
  • 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
    والآن لننشئ صندوق نصي في رسومات جوجل.
  • 3:50 - 3:52
    حسنا، إذن هذا يشبه كثيراً حدود طريقة العرض.
  • 3:52 - 3:54
    ويمكنني أن أكتب الكلمة Team A.
  • 3:54 - 3:58
    وستكون في الزاوية العليا اليسارية،
    بشكل افتراضي.
  • 3:58 - 4:01
    و هذا تماماً كما هو الحال مع TextView
    عندما تضع نصاً في TextView،
  • 4:01 - 4:03
    سيكون بشكل افتراضي
    في الزاوية اليسارية العليا
  • 4:03 - 4:09
    والآن، مع رسومات جوجل،
    يمكنني ان أختار هذا النص
  • 4:09 - 4:14
    وأستخدم قيمة واصفة مكافئة تدعى line
    لتوسيط النص أفقياً داخل مربع النص.
  • 4:14 - 4:19
    وتوسيطه عمودياً داخل مربع النص.
  • 4:19 - 4:20
    جميل جداً.
  • 4:20 - 4:24
    أخذ مضمون طريقة العرض
    وتحريكه داخل حدود طريقة العرض
  • 4:24 - 4:27
    هو بالضبط ما تقوم به gravity.
  • 4:27 - 4:30
    واذا كنت تفكر أن هذا
    يمكن أن يكون شبيهاً ببعض طرق المحاذاة
  • 4:30 - 4:34
    التي يمكنك استخدامها مع التصميم النسبي،
    فهو كذلك، لكن يمكنك استخدام الواصفة gravity
  • 4:34 - 4:37
    مع التصميم الخطي
    والتي تجعل من هذا التصميم فعالاً.
  • 4:37 - 4:39
    سوف نلقي نظرة على ذلك في الكود.
  • 4:40 - 4:44
    لذا، سوف آخذ أول TextView لدي
    وسأبدأ بكتابة gravity.
  • 4:45 - 4:47
    حسناً مع gravity لدي خيارين.
  • 4:47 - 4:49
    layout_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
    حسناً، إذاً هنا لدينا Team A،
  • 5:16 - 5:21
    و تستطيعون أن تروا نوعاً ما
    حدود طريقة العرض حولها
  • 5:21 - 5:25
    حسناً، إذا كان لي أن أقول لكم
    أن هذا تم توسيطه في داخل طريقة العرض،
  • 5:25 - 5:27
    لما كان بإمكانكم الجدال معي.
  • 5:27 - 5:32
    لا يبدو بأنها تقع في منتصف طريقة العرض.
    حيث أن طريقة العرض صغيرة جداً
  • 5:32 - 5:33
    بالعودة إلى رسومات جوجل،
  • 5:33 - 5:39
    إنها تبدو نوعاً ما كما لو أنني زدت الحجم
    ليصبح بحجم النص.
  • 5:39 - 5:40
    لقد تم توسيطها،
  • 5:40 - 5:45
    ولكنها لا تبدو فعلاً مختلفة كثيراً عنها
    كما لو كانت تتوضع يساراً
  • 5:45 - 5:47
    حسناً، لذا إذا أردت توسيطها في الهاتف
  • 5:47 - 5:50
    أحتاج أن أجعل طريقة العرض
    تتمدد على طول الهاتف
  • 5:50 - 5:52
    وهو ما سيتطلب منا تغيير العرض.
  • 5:54 - 5:56
    حسناً، لذا هنا في الخلف ساغلق معاينتي.
  • 5:57 - 5:59
    و سأذهب إلى width هنا
  • 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
    لذلك دعونا نفعل نفس الشيء مع score هنا.
  • 6:16 - 6:19
    حسناً، لذلك سأضيف gravity لهذه أيضاً،
  • 6:19 - 6:20
    gravity في جميع layout_gravity.
  • 6:20 - 6:26
    center_horizontal
    وسأغير width إلى 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
    سأعطي كل TextView قيمة حشو 4
  • 6:41 - 6:46
    سأبدأ بكتابة padding سأضع 4dp.
  • 6:47 - 6:48
    هل تذكر الـ dp؟
  • 6:48 - 6:52
    أنا أستخدم padding فقط،
    وليس padding_bottom أو أي شيء مثل ذلك
  • 6:52 - 6:54
    وهي ستوفر 4dp حول الـ TextView كاملة
  • 6:54 - 6:57
    دعونا نرى كيف يبدو ذلك في المعاينة.
  • 6:58 - 7:01
    حسناً، هذا يعطيني القليل من المساحة.
  • 7:01 - 7:04
    سأفعل ذلك، لـ TextView الخاص بـ score.
  • 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
    تذكر، الحشو هو في الحقيقة
    إضافة حشو داخل طريقة العرض.
  • 7:41 - 7:43
    في حين يضع الهامش مساحة حول طريقة العرض.
  • 7:44 - 7:45
    إذن نحن نغير هذا إلى layout_margin.
  • 7:45 - 7:47
    سأقوم بوضع 8dp.
  • 7:47 - 7:49
    حسناً هذا يبدو أفضل.
  • 7:49 - 7:53
    الآن هناك مساحة حول طريقة العرض
    بين طريقتي العرض هاتين.
  • 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
    لقد انتهيتَ من هذه الخطوة.
タイトル:
4 - The Stages SOL
概説:

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

Arabic subtitles

改訂 Compare revisions