Return to Video

02-20 Padding vs. Margin

  • 0:00 - 0:02
    عمل جيد حتى الآن
  • 0:02 - 0:05
    أنت على الطريق الصحيح
    لبناء Layouts جيدة حقاً
  • 0:05 - 0:09
    مع ذلك أنا أرى مشكلة في جميع
    الـ Layouts التي بنيناها تقريباً حتى الآن
  • 0:09 - 0:13
    الـ Views على
    حافة الـ ViewGroup
  • 0:13 - 0:14
    على حافة الجهاز
  • 0:14 - 0:16
    مع جميع الـ Layouts التي
    بنيناها حتى الآن في هذا الدرس
  • 0:16 - 0:20
    يمكننا أن نضيف لها
    بعض التحسينات المرئية
  • 0:20 - 0:24
    حسثث أنهم يصبحون أكثر جمالاً
    بإضافة القليل من المساحة البيضاء
  • 0:24 - 0:26
    سنفعل ذلك باستخدام
    مفاهيم الحشو والهوامش
  • 0:26 - 0:29
    التي سوف نغطيها في هذا الفيديو
  • 0:29 - 0:31
    على سبيل المثال، يمكننا أن نضيف
    القليل من المساحة البيضاء هنا وهنا
  • 0:31 - 0:34
    أوحتى في الأعلى
    حيث تصبح الـ Views غير مزدحمة
  • 0:34 - 0:38
    على حافة الأب
    وعلى حافة الجهاز
  • 0:38 - 0:39
    على الرغم من ذلك هذا يعتبر قرار تصميم
  • 0:39 - 0:42
    لأنك في بعض الأحيان
    تريد لها أن تتحاذى حافةً لحافة
  • 0:42 - 0:45
    كما في صورة التأثير كامل النزيف
    التي تحدثت عنها سابقاً
  • 0:45 - 0:49
    ولكن في أي حال، يمكنك إضافة المساحات
    البيض لإضافة القليل من المتنفس
  • 0:49 - 0:53
    بحيث يصبح المحتوى
    أسهل للقراءة والمسح
  • 0:53 - 0:57
    سأريكم أثر إضافة
    الحشو أو الهامش للـ View
  • 0:57 - 0:59
    دعونا نبدأ مع TextView
    تقول "Hello"
  • 0:59 - 1:02
    إذا أضفنا ""8dp""
    للحشو في الـ View
  • 1:02 - 1:05
    هذا يجعلها أكبر بـ ""8dp"" في كل
    اتجاه هنا
  • 1:05 - 1:08
    إذا أضفنا هامشاً بـ "8dp"
    للـ TextView
  • 1:08 - 1:11
    هذا ما ستبدو عليه
  • 1:11 - 1:13
    من أجل إضافة هامش
    عليك أن تضعه داخل ViewGroup
  • 1:13 - 1:16
    لهذا أنا أضعه هنا
    في هذه الـ LinearLayout
  • 1:16 - 1:19
    LinearLayout هي التي تأخذ
    الـ TextView الأصلية
  • 1:19 - 1:21
    و تدفعاها "8dp"
  • 1:21 - 1:23
    من اليسار و الأعلى
  • 1:23 - 1:26
    و من الجانبين أيضاً
  • 1:26 - 1:28
    إذن على الرغم من إعلانك عن حشو
  • 1:28 - 1:33
    أو هامش على TextView ابن
    يتم الحشو من قبل الـ TextView نفسها
  • 1:33 - 1:36
    في حين يتم التعامل
    مع الهامش من قبل الـ ViewGroup الأب
  • 1:36 - 1:40
    إذا كان لديك كلاهما على جهاز حقيقي
    وليس لديك خلفية من أجل
  • 1:40 - 1:43
    TextView ثم ستبدوان كلتاهما
    متشابهتان تقنياً
  • 1:43 - 1:46
    سيبدأ النص على بعد "8dp"
    من اليسار
  • 1:46 - 1:48
    و "8dp" تحت قمة الجهاز
  • 1:48 - 1:52
    على كل حال، إذا كان لديك
    خلفية ملونة من أجل TextView
  • 1:52 - 1:55
    بالتالي سيكو المتسخدم قادراً على
    رؤية الـ TextView بهذا الحجم
  • 1:55 - 1:59
    في حين، على الأجهزة الأخرى
    ستكون الـ TextView بهذا الحجم فقط
  • 1:59 - 2:01
    إليكم كوداً
    لعرض الحشو على الـ View
  • 2:02 - 2:07
    على عنصر XML الخاص بـ TextView
    ستقوم بالإعلان عن صفة جديدة تقول
  • 2:07 - 2:11
    Android فاصلة padding
    تساوي "8dp" كلها داخل علامتي تنصيص
  • 2:11 - 2:12
    تستطيع اختيار
    الحجم الذي تريده
  • 2:12 - 2:15
    للحشو، طالما
    أنها قيمة للـ dp
  • 2:15 - 2:19
    عندما نحدد "8dp" للحشو
    ستضيف "8dp" ليسار
  • 2:19 - 2:21
    وأعلى وأسفل
    ويمين الـ TextView
  • 2:22 - 2:25
    بدلاً من استخدام صفة
    الحشو العامة في Android
  • 2:25 - 2:29
    يمكنك أيضاً تقسمه إلى اليسار
    أو اليمين أو الأعلى أو الأسفل
  • 2:29 - 2:33
    بشكل أساسي، تقوم هذه الأسطر الأربعة
    من الكود بما يقوم به هذا السطر
  • 2:33 - 2:36
    مع ذلك، هذه المتحكمات
    الدقيقة النتيجة تسمح لك بالحصول على قيم
  • 2:36 - 2:39
    حشو من أجل اليسار
    أو اليمين أو الأعلى أو الأسفل
  • 2:39 - 2:43
    لست مضطراً للحصول على
    قيم حشو متساوية من أجل جميع الاتجاهات
  • 2:43 - 2:47
    القيمة الافتراضية للحشو هي صفر
    لذا إذا قمت بتحديد قيم الحشو لكل من
  • 2:47 - 2:52
    اليسار واليمين و الأعلى و لم تقم بتحديد
    الحشو السفلي ستكون قيمته صفر
  • 2:52 - 2:56
    لتحديد الهامش، تضيف صفة
    مرة أخرى للـ TextView
  • 2:56 - 3:00
    اسم الصفة هو Android نقطتين
    Layout خط سفلي margin
  • 3:00 - 3:03
    يمكننا اسنادها لقيمة ما
    مثلاً "8dp"
  • 3:03 - 3:07
    هذا يحرك الـ TextView الابن
    "8dp" بعيداً عن الأب من كل الحواف
  • 3:07 - 3:12
    إذا كان لدينا TextView ابن
    آخر هنا في الأعلى، فإن وجود الهامش
  • 3:12 - 3:15
    يدفع هذه الـ TextView
    "8dp" تحت هذه الـ TextView الأولى
  • 3:16 - 3:19
    يمكنك التفكير بوجود الهامش
    كوجود حقل قوة في محيط
  • 3:19 - 3:20
    هذه الـ View
  • 3:20 - 3:24
    لا يوجد أي View أخرى
    يمكن أن تدخل منطقة الـ "8dp" حولها
  • 3:24 - 3:28
    أو يمكنك تقسيم هامش الـ Layout
    إلى واحد في كل اتجاه
  • 3:28 - 3:32
    ,Layout marginLeft
    Layout marginRight, top, و bottom.
  • 3:32 - 3:36
    إذا لم تقم بتحديد أي من هذه القيم
    ستعين افتراضياً بالصفر
  • 3:36 - 3:39
    للتذكير بأن الـ ViewGroup هي التي
    تحدد موقع هؤلاء
  • 3:39 - 3:42
    الأبناء على أساس الهامش
    تستطيع أن تنظر إلى الصفات
  • 3:42 - 3:45
    كلها تبدأ بـ Layout
    خط سفلي من أجل الهامش
  • 3:45 - 3:48
    بهذه الطريقة، تعرف أن الـ ViewGroup
    هي التي تتحكم بمواقع
  • 3:48 - 3:49
    هذه الـ Views
  • 3:50 - 3:53
    يمكن تطبيق الحشو
    والهوامش على كل الـ Views
  • 3:53 - 3:56
    لنضع الصفات التي
    تعلمناها للتو في تمرين
  • 3:56 - 3:58
    لدي هنا ثلاث TextViews
    في LinearLayout
  • 3:58 - 4:01
    كلهم محشورون عند
    الحافة اليسرى للشاشة
  • 4:01 - 4:02
    لذا أريد أن أضيف القليل من المساحة
  • 4:03 - 4:05
    لنبدأ بمحاولة إضافة
    بعض الهوامش
  • 4:06 - 4:08
    جيد، الآن لدي المزيد
    من الفضاء حول هذه الـ TextView
  • 4:09 - 4:11
    سأقوم بنفس الشيء
    من أجل الـ TextViews الباقيتين
  • 4:12 - 4:17
    مثير للاهتمام، إذن إنها "16dp" هنا
    في الأعلى ولكنها حقيقةً "32dp" لأنها
  • 4:17 - 4:20
    تحصل على ثمانية dp من الهامش
    السفلي من الـ TextView الأولى
  • 4:20 - 4:23
    وثمانية dp من الهامش العلوي
    من الـ TextView الثانية
  • 4:23 - 4:25
    إذا كنا نريد للتباعد أن يكون متناسقاً
  • 4:25 - 4:30
    إذن هي "16dp" دائما بين كل View
    ثم علينا أن نغير الهامش هنا
  • 4:30 - 4:33
    أستطيع تقسمها إلى
    قيم هوامش فردية
  • 4:33 - 4:38
    في هذا الكود، لدي هامش يساري
    من "16dp" وهامش علوي من "16dp"
  • 4:38 - 4:41
    لا يوجد هامش سفلي من هذه
    الـ TextView الأولى
  • 4:41 - 4:43
    لذا هذا الفضاء
    صحيح بـ "16dp"
  • 4:43 - 4:47
    الشيء نفسه سيتم من أجل آخر TextView
  • 4:47 - 4:49
    جيد، الآن كل الهوامش الرأسية
    متساوية
  • 4:50 - 4:53
    سابقاً عندما كنت أقول أننا نضيف
    مساحات بيضاء لحواف هذه الـ Views
  • 4:53 - 4:56
    تقنياً هذا الفضاء شفاف
  • 4:56 - 4:59
    يمكنك أن ترى من خلاله
    ما هو خلفه
  • 4:59 - 5:02
    في هذه الحالة لدينا خلفية
    رمادية على الـ ViewGroup
  • 5:02 - 5:05
    ستبد الـ Layout بنفس المنظر على الجهاز
    سواء استخدمنا الهامش أم
  • 5:05 - 5:09
    الحشو، لأننا في هذه الحالة
    لا نملك لوناً للخلفية على الـ TextView
  • 5:10 - 5:12
    دعونا نضيفها ونرى
    أين تكون حدود كل View
  • 5:13 - 5:16
    حسناً، الآن هنالك لون خلفية
    على الـ TextView الأولى
  • 5:16 - 5:20
    عندما أضفنا الهوامش العلوي واليساري
    نرى بأن الـ ViewGroup تدفع
  • 5:20 - 5:23
    الـ TextView للأمام "8dp"
    و للأسفل "8dp"
  • 5:23 - 5:27
    يمكننا ان نغير هذا إلى الحشو
    و الآن نرى بأن الـ TextView أكبر
  • 5:27 - 5:30
    و يأخذ حتى "8dp"
    من المساحة على اليسار والأعلى
  • 5:31 - 5:33
    إذن مرئياً
    ستبدو الأئياء مختلفة على الجهاز
  • 5:33 - 5:35
    سواء كان لديك حشو أو هامش
  • 5:35 - 5:38
    إذا كان لديك لون
    للخلفية على هذه الـ TextView
  • 5:38 - 5:41
    يمكننا أن نفعل نفس الشيء من أجل الـ Views
    الأخرى وبالتالي يمكنك رؤيتها بشكل جيد
  • 5:42 - 5:45
    إضافة قيم الهوامش والحشو
    ليس محظوراً للـ Views الأبناء
  • 5:45 - 5:48
    تستطيع أيضاً أن تضيفها على الـ ViewGroup
  • 5:48 - 5:51
    إذا أضفت قيمة حشو
    للـ LinearLayout
  • 5:51 - 5:56
    سترون حينها أنها ستزيح الـ View
    بمقدار "16dp" في كل الاتجاهات
  • 5:56 - 5:59
    لقد ذكرت بأنك يمكنك وضع أي قيمة
    للحشو أو الهامش
  • 5:59 - 6:01
    ولكن كيف لك ان تعرف أي قيمة ستضع؟
  • 6:01 - 6:05
    حسناً، توصي مبادئ تصميم
    المادة باستخدام مضاعفات
  • 6:05 - 6:06
    "8dp"
  • 6:06 - 6:09
    هذه معرفة متقدمة بعض الشيء
    لكننا بشكل أساسي نريد
  • 6:09 - 6:13
    لمكوناتنا أن تصطف علة الشاشة
    على طول هذه الشبكة المربعة من "8dp"
  • 6:13 - 6:16
    المربعات لا تظهر
    فعلياً على الشاشة الآن
  • 6:16 - 6:18
    ولكن إذا أردت أن تضع النص هنا
  • 6:18 - 6:21
    قد ترغب في تحريكه
    مربعين إلى اليسار
  • 6:21 - 6:25
    مربعين على هذه الشبكة
    يساويان "16dp"
  • 6:25 - 6:29
    على شاشة البريد الإلكتروني هذه
    كل الأيقونات مصطفة على هذا الخط
  • 6:29 - 6:33
    إنها مصطفة على بعد "16dp"
    من الحافة اليسارية للشاشة
  • 6:33 - 6:38
    كل هذه النصوص مصطفة على
    بعد "72dp" من الحافة اليسارية للشاشة
  • 6:38 - 6:41
    لذلك يمكنك التخيل نوعاً ما
    ان المحتوة بدأ يتبع
  • 6:41 - 6:42
    خطوطاً محددةً هنا
  • 6:42 - 6:44
    وإليك طريقة أخرى لتصور ذلك
  • 6:44 - 6:47
    في هذه الصورة من
    "Google I/O app"
  • 6:47 - 6:54
    لدينا المحتوى مصف على الخط ذو الـ "16dp"
    كما على الخط "72dp"
  • 6:54 - 6:57
    إنها بشكل أساسي "72dp" من
    الحاقة اليسارية للشاشة
  • 6:57 - 6:59
    وعلى هذه الحافة
  • 6:59 - 7:03
    يتوقف المحتى على بعد
    "16dp" من الحافة اليمينة للشاشة
  • 7:03 - 7:05
    على الحاسب اللوحي
    لديك مساحة شاشة أكبر لذا
  • 7:05 - 7:07
    يمكن أن يكون لديك بعض الحشو المضاف
  • 7:07 - 7:11
    يمكن أن يكون البعد "24dp"
    من الحافة اليسارية للشاشة، وكذلك من أجل
  • 7:11 - 7:12
    القيم الأخرى
  • 7:12 - 7:17
    السبب وراء توصيتنا بهذه القيم
    هي جعل المحتوة أكثر سهولة للقراءة
  • 7:17 - 7:20
    على سبيل المثال، إذا أزيح
    هذا العنوان بمقدار بكسلين
  • 7:20 - 7:24
    و تمت زياحة النص الفرعي
    لليمين ببكسلين
  • 7:24 - 7:26
    سيكون هنالك حافة مسننة هنا
  • 7:26 - 7:30
    و سيشتت المستخدم عن قراءة
    محتواك حقيقةً
  • 7:30 - 7:35
    إذن بترتيب كل شيء
    سيجعل ذلك تطبيقك أسهل للقراءة والاستخدام
  • 7:35 - 7:38
    إليكم بعض الأبثلة من الحياة
    لاستخدام الحشو والهوامش
  • 7:38 - 7:40
    في هذه الصورة من تطبيق "Google Calendar"
  • 7:40 - 7:44
    نرى بعض النص الذي تمت
    إزاحته قليلاً هنا
  • 7:44 - 7:47
    هنالك أيضاً القليل من المساحة
    بين أحداث الروزنامة هذه
  • 7:47 - 7:48
    إذا نفذنا ذلك باستخدام الحشو
  • 7:48 - 7:52
    عندها ستتمدد هذه صوره الخلفية هذه
    غالباً إلى المكان الفارغ
  • 7:52 - 7:56
    بدلاً من ذلك إذا استخدمنا الهوامش عندها
    سيتم إضافة منطقة عازلة صغيرة حول الـ View
  • 7:56 - 7:58
    إنها على الأغلب هوامش
  • 7:58 - 8:02
    هاكم صورة أخرى من صفحة التفاصيل
    من حدث الروزنامة
  • 8:02 - 8:06
    هناك الكثير من النصوص هنا
    ويبدو أنه سيكون هناك فجوات أكبر من غيرها
  • 8:06 - 8:09
    يمكننا ان نخلق تلك الفجوات
    بإضافة الحشو
  • 8:09 - 8:13
    لإضافهة هذه الفجوة هنا يمكنك
    إما أن تضيف الحشو السفلي لهذه الـ TextView
  • 8:13 - 8:15
    أو يمكنك إضافة حشو علوي لهذه الـ View
  • 8:16 - 8:18
    كلتا الطرق ستعمل
  • 8:18 - 8:21
    أو يمكنك تنفيذها
    باستخدام هوامش الـ Layout حتى
  • 8:21 - 8:24
    لا يمكنك حقاً تمييز الفرق
    بين هوامش وحشو الـ Layout
  • 8:24 - 8:28
    في هذه الحالة، لأن الخلفية
    المستخدمة للنص شفافة
  • 8:28 - 8:31
    الآن إنه دورك
    في التمرن على تعيين القيم المختلفة
  • 8:31 - 8:32
    للحشو والهوامش
  • 8:32 - 8:35
    لقد قدمنا لك كوداً مبدئياً يمكنك من
    البدء وذلك عن طريق الرابط في الأسفل
  • 8:35 - 8:39
    عندما تصبح مرتاحاً مع قيم
    الحشو والهوامش، امض قدماً
  • 8:39 - 8:40
    وحاول بناء هذه الـ Layout
  • 8:41 - 8:46
    بالمناسبة، هذا النص حدد بـ "16dp"
    عن الحواف هنا
  • 8:46 - 8:49
    لكنه "8dp" بين
    الاثنين من TextViews
  • 8:49 - 8:51
    عندما تنتهي، اختر هذا المربع
Title:
02-20 Padding vs. Margin
Description:

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

Arabic subtitles

Revisions Compare revisions