Return to Video

07-42 Add the Reset Button

  • 0:00 - 0:04
    حسناً، إذن هذه صورتنا لتطبيقنا
    عداد الساحة
  • 0:04 - 0:06
    أو على الأقل ما نريد له أن يبدو عليه
  • 0:06 - 0:10
    الآنن، ساتبع نصيحتي الخاصة
    و أبدأ بالـ XML أولاًً
  • 0:10 - 0:13
    دعونا نفكر في
    كيفية العرض الآن
  • 0:13 - 0:18
    إذن، مازال لدينا كل هذه الـ Views
    وهي VerticalLlayouts
  • 0:18 - 0:19
    LinearLayouts
  • 0:19 - 0:23
    لدينا LinearLayout من أجل الفريق B
    و LinearLlayout من اجل الفريق A
  • 0:23 - 0:27
    ولا يمكن أن يكون لديك
    اثنين من root Views لذا علاوة على ذلك
  • 0:27 - 0:31
    يتم تغليفهما في LinearLayout
    و التي سوف تكون أفقية أيضاً
  • 0:31 - 0:35
    وهاتين الـ LinearLayouts الأبناء
    يمكن أن تكونا بعد بعضهما البعض
  • 0:35 - 0:38
    حسناً، الآن نريد أن نضيف
    زر "Reset" هنا في الأسفل
  • 0:38 - 0:41
    حتى لا ينفجر عقلك
    في التفكير في كل هذه
  • 0:41 - 0:45
    الـ layouts المختلفة، أريدك أن
    تفكر في كل شيء داخل
  • 0:45 - 0:48
    هذه الـ HorizentalLinearLlayout
    وكأنها View وحيدة
  • 0:48 - 0:53
    و الآن انت تحاول أن تنسق
    هذه الـ HorizentalLlinearLlayout هنا
  • 0:53 - 0:54
    وهذا زر "Reset"
  • 0:54 - 0:57
    أنت تحاول أن تنسق اثنين من الـ Views
  • 0:57 - 1:02
    أحدهما في الأعلى والأخرى
    في أسفل الشاشة
  • 1:02 - 1:06
    لذا فلسؤال الآن هو
    أي View group ستسمح لك بوضع
  • 1:06 - 1:09
    View هنا في الأعلى و
    الأخرى تحتها في أسفل الشاشة؟
  • 1:09 - 1:13
    و يتضح هنا بأن RelativeLlayout
    مرشح جيد من أجل هذا
  • 1:13 - 1:17
    أستطيع أن أحظى بـ HorizentalLinearLayout
    خاصتي هنا، match_paret
  • 1:17 - 1:20
    للعرض، ومن ثم
    wrap_content من أجل الارتفاع
  • 1:21 - 1:24
    وأستطيع أن أضع زر "Reset" خاصتي
    هنا، بمحاذاة المركز
  • 1:24 - 1:26
    وفي أسفل pairing
  • 1:26 - 1:29
    حسناً، إذن لديك RelativeLayout
  • 1:29 - 1:33
    هو يملك ابنين هما
    زر و LinearLayout
  • 1:33 - 1:36
    الزر الابن هو هذا
    الـ "Reset"
  • 1:36 - 1:40
    و الـ LinearLayout هو
    الـ هنا، VerticalLinearLayout
  • 1:40 - 1:44
    علاوة على ذلك، هذا
    الـ HorizentalLinearLayout يملك ابنين
  • 1:44 - 1:47
    وهؤلاء الأطفال هم أيضاً LinearLayout
  • 1:47 - 1:50
    إنهما الـ LinearLayout للفريق A
    والـ LinearLayout للفريق B
  • 1:50 - 1:52
    الذي تراه هنا
  • 1:52 - 1:57
    الـ LinearLayout للفريق A يملك
    TextViews اثنتين وثلاثة أزرار
  • 1:57 - 2:00
    و ينطبق هذا على
    الـ LinearLayout للفريق B
  • 2:00 - 2:03
    خمسة أبناء، TextViews اثنتين
    وثلاثة أزرار
  • 2:03 - 2:05
    هذا الجزء من الـ layout
    الذي قمتم بتنفيذه بالفعل
  • 2:05 - 2:09
    تحتاج فقط لتضيف هذا
    جيد، لنفعل ذلك
  • 2:09 - 2:13
    حسناً، أنا هنا في كود XML الخاص بي
    لذا سيكون أول شيء أقوم به
  • 2:13 - 2:18
    هو إنشاء الـ RootRelativeLayout
    التي شاهدتموها في المخطط
  • 2:18 - 2:24
    إذن هنا سأقوم بكتابة RelativeLayout
    وحقيقة أريد
  • 2:24 - 2:28
    أن أقص و ألصق هذه الخطوط
    لأنها يجب أن تكون داخل الـ RootLayout
  • 2:28 - 2:34
    لذا أنا أقصها وألصقها
    هنا داخل الـ RootLayout الخاصة بي
  • 2:34 - 2:37
    حسناً، الآن سأغلق
    RelativeLayout الخاصة بي هنا
  • 2:37 - 2:44
    وسأنقل وسم الإغلاق
    إلى الأسفل
  • 2:46 - 2:49
    حسناً، إذن لدي الآن
    هذا الجزء من المخطط بشكل أساسي
  • 2:49 - 2:53
    حسناً
    يبدو أنه لدي بعض الأخطاء أيضاً
  • 2:53 - 2:57
    لنرى، نعم، لم أقم بتعريف
    الارتفاع والعرض، لذا لنقم بذلك
  • 2:59 - 3:02
    الآن تحتوي الـ RelativeLayout خاصتي
    الزر في أسفل و منتصف الشاشة
  • 3:02 - 3:05
    لذان لفعل هذا، قد يتطلب
    ملئ الشاشة كلها
  • 3:05 - 3:07
    لذلك سأقوم بـ match_parent
    لكليهما
  • 3:09 - 3:12
    حسناً، أنا الآن بحاجة لإضافة الزر
  • 3:12 - 3:18
    سأمرر للأسفل، هنا
    حيث تغلق الـ LinearLayout
  • 3:18 - 3:23
    ولكنني مازلت داخل الـ RelativeLayout
    وسأضيف الزر
  • 3:23 - 3:27
    و سامضي قدماً و أقوم
    بـ wrap_conent للزر
  • 3:27 - 3:30
    لأنه ليس زراً يمكن أن يتوسع
    ليملأ كامل أسفل
  • 3:30 - 3:33
    الشاشة بل
    سيتسع ليملأ كامل الشاشة
  • 3:34 - 3:37
    والآن الأب لهذا الزر هي
    الـ RelativeLayout
  • 3:37 - 3:40
    وسنعين النص لهذا الزر
    بـ "Reset"
  • 3:40 - 3:43
    دعونا نرى كيف يبدو هذا
  • 3:43 - 3:47
    حسناً إذا زر "Reset" في الأعلى و هذا ليس
    بالتحديد المكان الذي أريده أن يكون فيه
  • 3:47 - 3:52
    ولكن الأب له نسبياً في الخارج
    و هذا يملأ الشاشة كاملةً
  • 3:52 - 3:54
    حتى أتمكن من محاذاته إلى الأب
  • 3:54 - 3:57
    أريد محذاته إلى
    أسفل الأب و
  • 3:57 - 4:01
    وأريده أن يكون في وسط
    الأب، أفقياً في أي حال
  • 4:01 - 4:04
    جيد، يبدو أن
    زري في مكانه الصحيح
  • 4:04 - 4:06
    سأقوم بتحديد كل شيء هنا
  • 4:06 - 4:10
    وسأقوم بتنفيذ
    خيار الأمر L على Mac
  • 4:10 - 4:14
    والذي هو نفسه كـ Ctrl+Alt+L
    في Windows لإعادة صياغة الكود
  • 4:14 - 4:16
    والحصول عليه ليبدو لطيفاً
  • 4:16 - 4:19
    دعونا نعود إلى كود جافا الخاص بنا
  • 4:19 - 4:23
    الآن لدي الزر
    لكنه لا يفعل شيئاً
  • 4:23 - 4:26
    لنبدأ بإنشاء
    طريقة له
  • 4:26 - 4:32
    سأقوم بذلك في أعلى
    طرق العرض، هنا، public void
  • 4:32 - 4:35
    سأسمي هذه الطريقة
    resetScore
  • 4:35 - 4:38
    لأن هذا هو ما أنوي لها
    أن تفعله
  • 4:38 - 4:43
    سأمرر للأعلى، وسأجعلها
    تطابق هذه الطرق
  • 4:43 - 4:47
    مع الـ View
    الخامس ومن ثم أقواس مجموعة
  • 4:47 - 4:50
    لن أقلق حيال ما سيحدث
    هنا الآن
  • 4:50 - 4:53
    سأعود لكود XML خاصتي
  • 4:53 - 4:57
    وسأقوم بالجزء الثاني من ربط الزر
    بكود جافا
  • 4:57 - 5:02
    بإضافة الخاصية onClick
    إلى resetScore
  • 5:02 - 5:06
    حسناً، إذن عندما أنقر هذا الزر الآن
    سينفذ الكود هنا ولكن
  • 5:06 - 5:08
    لا يوجد كود هنا
  • 5:08 - 5:09
    دعونا نكتشف ما أحتاج لإضافته هنا
  • 5:11 - 5:14
    حسناً، دعونا نعود
    لمناقشة الكود المبسط
  • 5:14 - 5:17
    عندما أضغط على الزر "Reset"
    ماذا أريد أن يحدث؟
  • 5:17 - 5:21
    حسناً، أريد للدرجتين
    هاتين أن يظهرا 0
  • 5:21 - 5:24
    علاوة على ذلك، أريد متحولات
    نتيجة الفريق A وس
  • 5:24 - 5:27
    نتيجة الفريق B أن تعود للصفر
  • 5:27 - 5:30
    تذكرن عندما انقر على أي من
    هذه الأزرار، أنا أضيف نقطتين
  • 5:30 - 5:32
    ثم أعرض المتحول
  • 5:32 - 5:34
    لذا، إذا لم أرجع
    المتحول للصفر
  • 5:34 - 5:36
    سوف يثظهر عدداً خاطئاً
  • 5:36 - 5:39
    إذن هذا ما وصلت إليه
    من طريقة الكود المبسط
  • 5:39 - 5:43
    أول شيء اريد فعله أن
    أعين قيمة نتيجة الفريق A بالصفر
  • 5:43 - 5:46
    ثم أريد أن أفعل الشيء ذاته
    مع الفريق B
  • 5:46 - 5:50
    كلا النتيجتين مساويتين للصفر الآن
    لكن لم يتم عرض شيء بعد، هذا يمثل
  • 5:50 - 5:55
    السبب في عرضي لنتيجة الفريق A
    في الخطوة 3، والتي تم تعيينها بالصفر
  • 5:56 - 6:00
    ولأكون محدداً أكثر بعد
    سأعرض نتيجة
  • 6:00 - 6:04
    الفريق A هنا ومن ثم
    سأعرض نتيجة الفريق B هنا
  • 6:04 - 6:08
    وبما انني تأكدت من مسواتهما للصفر
    في الخطوتين 1 و 2
  • 6:08 - 6:10
    سيعرضان صفر هنا وهنا
  • 6:10 - 6:14
    لذا عندما سأنقر أي من
    هذه الأزرار لتحديث scoreForTeamA
  • 6:14 - 6:18
    أو scoreForTeamB، ستقوم بالتحديث
    ولكنها ستبدأ من النتيجة صفر
  • 6:20 - 6:24
    حسناً، إذن في إعادة تعيين النتيجة سأكتب
    كودي المبسط ككود برمجي
  • 6:24 - 6:29
    إذن أول شيء سأقوم به هو
    أخذ نتيجة A وتعيين قيمتها
  • 6:29 - 6:34
    بالصفر باستخدام عامل الإسناد هنا
    و قيمة الصفر
  • 6:34 - 6:36
    أوه ولا تنسى
    الفاصة المنقوطة طبعاً
  • 6:37 - 6:39
    سأفعل الشيء نفسه بالنسبة لنتيجة B
  • 6:42 - 6:49
    بعد ذلك، سأقوم بعرض نتيجة الفريق A
    في البقعة المخصصة لذلك
  • 6:49 - 6:53
    ثم سأعرض نتيجة الفريق B
    في بقعة نتيجة الفريقB
  • 6:55 - 6:57
    سأكمل وأضع تعليقاً أيضاً
  • 6:59 - 7:00
    حسناً، هذا كله يبدو معقولاً
  • 7:00 - 7:04
    و قد مرت فترة منذ
    نفذت شيئاً ما على جوالي
  • 7:04 - 7:07
    لذا سأضغط على زر "Run"
    حسناً، جميل
  • 7:07 - 7:08
    لدي زر "Reset"
  • 7:08 - 7:09
    لنرى إن كان يعمل
  • 7:13 - 7:15
    جيد، إنه يضع صفراً
  • 7:15 - 7:16
    دعونا ننقر قليلاً بعد
  • 7:16 - 7:19
    للتأكد فقط من أن
    كل شيء يسير على ما يرام
  • 7:24 - 7:28
    جميل، ويبدو وكأنه، رائع
  • 7:28 - 7:30
    الآن لقد كان هذا
    صعباً قليلاً
  • 7:30 - 7:34
    لذا دعوني أريكم ماذا يحدث
    إذا خالفتم الترتيب
  • 7:34 - 7:35
    القيام بشيء مختلف قليلا
  • 7:36 - 7:39
    ماذا لو بدلت بين هذين الثنين؟
  • 7:39 - 7:41
    حسناً، دعونا نرى ما سيحدث
  • 7:42 - 7:46
    حسناً، إذن هذا هو
    لنرى ماذا فعل
  • 7:46 - 7:48
    حسناً، سأضيف بعض النقاط
  • 7:49 - 7:53
    والآن لحظة الحقيقة
    زر "Reset"
  • 7:53 - 7:56
    هاه، لا يبدو أنه يفعل أي شيء.
  • 7:56 - 7:59
    دعونا نحاول النقر، هاه، مثير للاهتمام
  • 7:59 - 8:01
    حسناً من الصعب أن نرى
  • 8:01 - 8:05
    النتيجة تشير مسبفاً لـ 19
    أنا أضغط على زر "Reset" ولا شيء تغير
  • 8:05 - 8:08
    و لكن عندما أضغط
    رمية حرة تظهر واحد
  • 8:10 - 8:12
    دعونا نحاول في الجانب الآخر
    إذا ضغطت زائد نقطتين
  • 8:12 - 8:14
    أوه، إنه يظهر اثنين
  • 8:14 - 8:18
    لننظر للكود مرة ثانية
    لنعرف ماذا يمكن أن تكون القضية
  • 8:18 - 8:21
    إذن لقد بدلت بين العرض
    وتعيين النتيجة
  • 8:21 - 8:25
    فقط لمعرفة أي نوع من الأخطاء
    يمكن أن يحدث نتيجة لذلك
  • 8:25 - 8:30
    دعونا نقول أن TeamA نتيجته 30
    و TeamB نتيجته 40
  • 8:30 - 8:33
    عندما أنفذ displayForTeamA
    ستعرض 30
  • 8:33 - 8:37
    وعندما أنفذ displayForTeamB
    ستعرض 40
  • 8:37 - 8:41
    بعد ذلك هل بالبفعل
    ستعين القيمة بالصفر
  • 8:41 - 8:46
    لكن بما انها عرضت أولاً
    لن تعرض القيمة صفر
  • 8:46 - 8:48
    ولكن المتحول سوف يكون صفراً
  • 8:48 - 8:53
    إذن عندما أضغط شيء ما مثل
    addThreeForTeamB ستأخذ
  • 8:53 - 9:00
    قيمة الصفر التي وضعنها هنا
    تضيف ثلاثة ومن ثم تعرض ثلاثة
  • 9:00 - 9:06
    بالنسبة لنا، سيبدو وكان TeamB
    انتقل من كونه يملك 30 نقطة
  • 9:06 - 9:12
    بعد النقر على الزر "Reset" إلى النتيجة 3
    والتي تعتبر قفزة غريبة
  • 9:12 - 9:15
    لا يوجد أي طريقة أخرى لإصلاح
    هذا إلا التبديل بينهما ليعودا كما كانا
  • 9:15 - 9:19
    هل يمكن أن أضع عرض صفر هنا
  • 9:19 - 9:22
    ويمكنك ختبار هذا على مسؤوليتك الخاصة
    ولكنه سيعمل في الواقع
  • 9:22 - 9:24
    انها متوقعة قليلاً
  • 9:25 - 9:29
    أحب عرض الأمثلة كهذه
    لانها تعرض نوعا ما جمالية
  • 9:29 - 9:31
    وموضوعية الكود
  • 9:31 - 9:34
    الآن، في هذه الحالة، يحدث لي أن
    أفكر بعدل وبقوة أن الحالة الأولى التي
  • 9:34 - 9:36
    اتبعتها في الكود كانت أفضل
  • 9:36 - 9:39
    لكنك قد تبدأ برؤية سناريوهات
    حيث من الممكن أن توجد طريقتين
  • 9:39 - 9:43
    مختلفتين لكتابة الكود
    و كلتاهما صحيحتين تقنياً
  • 9:43 - 9:45
    حيث لا يوجد دائماً
    إجابة صحيحة واحدة
  • 9:45 - 9:49
    يجب ألا تشعر بضيق
    حول فعلها بالطريقة الصحيحة تماماً
  • 9:49 - 9:53
    حاول كتابة كود شيء يعمل بطريقتك
    الخاصة ثم شاهد كيف يفعلها الآخرون
  • 9:53 - 9:58
    وقارن بينهما ثم قرر أيهما أكثر
    فاعلية وكود من هو الأوضح
  • 9:58 - 10:01
    خذا النوع من النقاشات قد يكون
    تجربة تعليمية مفيدة فعلاً
  • 10:01 - 10:04
    حسناً، ساعكس الكود
    إلى الحالة التي كان بها من قبل
  • 10:04 - 10:05
    حيث كان يعمل
  • 10:05 - 10:10
    والآن لدي في تطبيقي كل الوظائف المطلوبة
    ولكنه ليس حسناً، لنصلح ذلك
Cím:
07-42 Add the Reset Button
Leírás:

more » « less
Video Language:
English
Team:
Udacity
Projekt:
UD837 - Android for Beginners
Duration:
10:11

Arabic subtitles

Felülvizsgálatok Compare revisions