1
00:00:00,486 --> 00:00:03,001
حسنًا، لقد عدنا مجددًا إلى برنامج
Android Studio،

2
00:00:03,001 --> 00:00:05,606
لمراجعة مصدر DroidCardsView.

3
00:00:05,606 --> 00:00:07,962
مجددًا، هذا هو العرض المخصص.

4
00:00:07,962 --> 00:00:11,870
فقط لنتذكر، أنه في هذا العرض المخصص
قمنا بإنشاء أوراق اللعب المتراكبة.

5
00:00:11,870 --> 00:00:14,480
على سبيل المثال،
كل بطاقة لها صورتها النقطية الخاصة بها،

6
00:00:14,480 --> 00:00:17,910
ونحن نرسمهم على الشاشة
عن طريق التحكم في أسلوب onDraw.

7
00:00:19,280 --> 00:00:22,320
وتذكر، أنه بالتحكم في أسلوب onDraw،

8
00:00:22,320 --> 00:00:25,580
فلن يتمكن الأندرويد من تحسين
معالجة المشهد،

9
00:00:25,580 --> 00:00:28,720
إنها مهمتنا نحن المطورون لاقتصاص
كل بطاقة بطريقة صحيحة

10
00:00:28,720 --> 00:00:31,200
كما ستظهر على الشاشة
وذلك لتجنب تراكب الرسوم غير الضروري.

11
00:00:32,470 --> 00:00:36,010
ولحسن الحظ، فأداة Canvas API
تعطينا الطرق الصحيحة التي نحتاجها

12
00:00:36,010 --> 00:00:38,010
لرسم بطاقاتنا بطريقة أكثر فعالية.

13
00:00:38,010 --> 00:00:39,430
فلنلقِ نظرة على التوثيق.

14
00:00:40,520 --> 00:00:44,010
ولنستخدم طريقةcanvas.clipRect
لتحسين الكود خاصتنا.

15
00:00:45,010 --> 00:00:49,272
سوف نستخدم هذا المتغير هنا والذي يحتوي
على أربعة متغيرات مثل البارامترات.

16
00:00:49,272 --> 00:00:51,325
حسنًا، لقد عدنا الآن إلى
Android Studio

17
00:00:51,325 --> 00:00:55,074
فلنقم بتعديل كيفية رسم كل بطاقة مدرجة

18
00:00:55,874 --> 00:00:59,083
وسوف أستخدم تلك الخاصية الرائعة الموجودة
في Android Studio لإحضار مشهد مختلف

19
00:00:59,083 --> 00:01:01,812
إلى المقدمة، حتى تتمكن من رؤية
حالة الكود قبل وبعد التعديل.

20
00:01:02,212 --> 00:01:04,510
حسنًا، نحن هنا في مشهد المقارنة،

21
00:01:05,510 --> 00:01:08,180
ولنلق نظرة خاصة على أسلوب onDraw
وهو الأسلوب الذي نتجاوزه.

22
00:01:08,880 --> 00:01:11,009
لدينا الحالة القديمة لحلقة for التكرارية
على اليسار،

23
00:01:11,009 --> 00:01:15,110
لكن فلنركز على التحسينات
التي سنقوم بها هنا على اليمين.

24
00:01:15,110 --> 00:01:18,100
الآن، وبينما نكرر البطاقات،
فلنراجع كل خطوة من التحسينات.

25
00:01:19,100 --> 00:01:22,789
رقم واحد أولًا سنقوم بحساب موضع البطاقة.

26
00:01:23,850 --> 00:01:26,736
ثم سنقوم بتشغيل تلك الخاصية
canvas.save

27
00:01:26,736 --> 00:01:28,591
التي ستحفظ حالة لوحة الرسم الحالية.

28
00:01:29,491 --> 00:01:30,549
وبمعنى آخر،

29
00:01:30,549 --> 00:01:34,691
فهي تحافظ على الوضع الحالي
للشاشة قبل تطبيق أداة clipRect API.

30
00:01:35,691 --> 00:01:37,485
الآن، عندما نقوم بتشغيل طريقة clipRect،

31
00:01:37,485 --> 00:01:39,564
فإننا بذلك نقوم بعمل بعض الحدود الهندسية.

32
00:01:40,664 --> 00:01:43,580
وعندما نمرر هذه المتغيرات،
فنحن بذلك نخبر النظام

33
00:01:43,580 --> 00:01:46,000
بأن يرسم فقط جزء البطاقة
الذي نريد أن يكون مرئيًا.

34
00:01:47,000 --> 00:01:48,420
وبالطبع، بقية الأجزاء ستكون مخفية.

35
00:01:49,470 --> 00:01:52,950
الآن، أجزاء البطاقة الموجودة
ضمن الحدود التي وضعناها فقط

36
00:01:52,950 --> 00:01:54,660
هي الأجزاء التي سيتم رسمها فقط.

37
00:01:54,660 --> 00:01:57,012
وأخيرًا، سنقوم بتشغيل canvas.restore،

38
00:01:57,012 --> 00:01:59,890
والتي ستحول لوحة الرسم
إلى وضعية عدم الاقتصاص.

39
00:01:59,890 --> 00:02:00,999
وبمعنى آخر،

40
00:02:00,999 --> 00:02:04,244
سوف تقوم بإلغاء الحدود
التي وضعناها عندما قمنا بتشغيل clipRect.

41
00:02:04,244 --> 00:02:08,098
ثم نقوم بإعادة تلك الحلقة التكرارية
لجميع البطاقات ما عدا الموجودة بالأعلى.

42
00:02:08,788 --> 00:02:11,000
الآن وبشكل خاص سنقوم بمعالجة

43
00:02:11,000 --> 00:02:13,448
البطاقة الأخيرة بشكل مختلف
عن نظيراتها الموجودة بالأسفل.

44
00:02:13,448 --> 00:02:16,008
وبالنسبة لهذه البطاقة،
فلن نحتاج إلى الاقتصاص،

45
00:02:16,008 --> 00:02:18,650
لذا سنقوم برسمها كاملة.

46
00:02:18,650 --> 00:02:20,780
ويمكنك أن ترى ذلك من خلال
هذه الجملة الموجودة هنا.

47
00:02:21,980 --> 00:02:23,800
حسنًا، فلنقم بإنشاء الكود المحسن،

48
00:02:23,800 --> 00:02:26,315
لنرَ إن كنا قد قمنا بتقليل
كمية من تراكب الرسوم.

49
00:02:27,660 --> 00:02:28,820
حسنًا، رائع!

50
00:02:28,820 --> 00:02:30,970
كما ترى هنا، يوجد القليل من تراكب الرسوم.

51
00:02:32,130 --> 00:02:35,250
آمل أن يكون مفهومًا أنه باستخدام
Canvas API يكون لدينا طريقة مباشرة

52
00:02:35,250 --> 00:02:38,350
للرسم بطريقة فعالة عند العمل
على عروض مخصصة.

53
00:02:38,350 --> 00:02:41,056
وفي حالة ما إذا رغبت باستكشاف
Canvas API أكثر،

54
00:02:41,056 --> 00:02:44,170
فتأكد من مراجعة كامل التوثيق
الموجود في ملاحظات المدرب.

55
00:02:45,170 --> 00:02:48,460
الآن، مشاهد مثل هذه تعتبر رائعة
لمساعدتنا على خلق

56
00:02:48,460 --> 00:02:52,480
تجربة مستخدم فريدة وجذابة
لكن تذكر أننا يجب أن نعتمد على النظام

57
00:02:52,480 --> 00:02:55,110
لمساعدة الأندرويد في معالجة
مثل هذه المشاهد بطريقة ذات فعالية.

58
00:02:56,110 --> 00:02:59,800
إذن عندما تقوم بإنشاء عرض مخصص،
تأكد من فحص تراكب الرسوم،

59
00:02:59,800 --> 00:03:01,972
وأن تكن مستعدًا لإحياء صديقك
وهو طريقةclipRect.

60
00:03:01,972 --> 00:03:04,290
حسنًا، عمل رائع!

61
00:03:04,290 --> 00:03:06,280
فلنعد إلى كولت ليخبرنا المزيد عن الأداء.