Layout Weight Udacity Arabic Russian

Layout WeightYouTube↗ IA↗(long shot)
Education 133.7K views 128 likes 5 dislikes 28 May 2015

Udacity 651K subscribers United States YouTube↗

في الاختبار الأخير، كنا نحاول معرفة كيف نعطي للواجهات (توم) و(تيم) و(تود)..

В прошлом занятии мы пытались выделить TextView-элементам

مساحة شخصية أكبر

Tom, Tim и Todd больше пространства,

من خلال توزيعهم بالتساوي رأسيًا على طول الجهاز

расставив их на равном расстоянии друг от друга по всей высоте устройства.

جربنا تحديد قيمة (دي بي) محددة لكن هذا لن يجدي إن انتقلنا لجهاز أطول كهاتف لوحي

Мы попробовали установить фиксированное значение в dp, но такой подход не сработает для более длинного устройства, например планшета.

ثم جربنا قيمة (مماثلة الأصل) لكنها جعلت واجهة النص (توم) كبيرة للغاية

Мы попробовали значение match_parent, но элемент Tom становился слишком большим,

ودفعت بالواجهتين الأخرتين لخارج الشاشة

и остальные два TextView больше не помещались на экране.

لذا بدأنا نبحث في موضوع وزن المخطط الخطي

Тогда мы начали изучать атрибут weight для LinearLayout.

في التوثيق، مذكور أنه عند استخدام المخطط الخطي الرأسي..

В документации говорится, что в вертикальном LinearLayout

إذا أردنا توزيع الواجهات التابعة بالتساوي..

равномерно удалить дочерние элементы друг от друга можно, если

علينا ضبط قيمة الطول لتكون صفر وقيمة الوزن لتكون واحد لكل واجهة

задать для height значение 0 dp, а для weight каждого из них - единицу.

تعيين وزن لواجهة تابعة يماثل تعيين قيمة أهمية لها

Задание веса дочернему элементу похоже на описание его значимости.

كلما زاد الوزن كلما زاد الحيز الذي تملأه إذا توفرت مساحة في المخطط الأصل

Чем больше вес, тем больше элемент получит пространства, если таковое осталось в родителе.

فمثلًا، في هذا المخطط الخطي الرأسي، ستملأ الواجهات المخطط رأسيًا هكذا

Например, в вертикальном LinearLayout элементы располагаются столбиком сверху вниз.

ويتضح أن بالمخطط مساحة إضافية كبيرة وستتوزع على التوابع الذين يملكون قيم وزن

Оказывается, что в этом LinearLayout много свободного места, которое будет распределено между дочерними элементами с ненулевым весом.

إذا كان لواجهة وزن كبير، ستُعطى قيمة أكبر من الطول المُتاح

Чем больше значение weight у дочернего элемента, тем больше высоты будет ему выделено.

إذا كان لواجهة وزن صغير، ستُعطى قيمة أقل من الطول المُتاح

Дочернему элементу с маленьким весом достанется меньше свободного пространства.

يمكنني أن أريكم كيف سيبدو هذا

Я покажу, как это работает.

سأضبط قيمة طول هذه الواجهة إلى صفر (دي بي) وأعطيها وزنًا بقيمة 1

Я задам для height этого элемента значение 0 dp, а для weight - единицу.

أولًا، سينسق المخطط وضع الواجهتين (تيم) و(تود)

LinearLayout сначала выравнивает TextView-элементы Tim и Todd,

لأن لكليهما قيمة طول محددة حسب المحتوى الموجود داخلهما

потому что их высота фиксирована и задана их содержимым.

ثم هناك واجهة النص (توم)، وقيمة طولها المبدئية صفر (دي بي) لكن لها وزن 1

А у TextView-элемента Tom исходная высота составляет 0 dp, но

كلا الواجهتين الأخرتين ليس له قيمة وزن

значение weight - 1. У остальных дочерних элементов значение weight отсутствует,

لأن القيمة الافتراضية للوزن هي صفر ما لم يتم تحديدها

поскольку по умолчанию оно равно нулю, если не указано иное.

لذا هذه هي الواجهة الوحيدة التي لها قيمة وزن

Так что это единственный дочерний элемент с весом.

لذا سيعطي المخطط الأصل الطول المتبقي في الشاشة لواجهة النص (توم)

И всю нераспределенную высоту экрана родительский элемент отдает

ولهذا تملأ واجهة النص (توم) حيزًا عملاقًا

TextView-элементу Tom. Поэтому он такой огромный.

الآن سأجرب تحديد قيم وزن للواجهتين الأخرتين

Теперь я задам значения weight и для других дочерних элементов.

الآن، لكل واجهة طول صفر (دي بي) ووزن 1

Высота каждого из них равна 0 dp, а вес - единице.

هذه هي العملية التي سيقوم بها المخطط الخطي

Разметка LinearLayout будет проходить следующим образом.

سيحاول اكتشاف طول كل واجهة منهم

Сначала она попробует определить высоту каждого элемента.

طول هذه الواجهات يبدأ بصفر (دي بي)

Высота каждого элемента равно 0 dp.

وهذا يعني أن الطول المتبقي في المخطط الأصل هو فعليًا طول الشاشة بالكامل

Это значит, что оставшаяся высота родительского элемента по сути равна высоте всего экрана.

فيقوم بقسمة طول الشاشة بالكامل على مجموع الأوزان وهو 3

Дальше вся высота экрана делится на сумму весов,

ثم يعطي ثلث هذا الطول لواجهة النص (توم)

которая равна трем. TextView-элемент Tom получает треть имеющейся в распоряжении высоты,

وثلثه لواجهة النص (تيم)

TextView-элемент Tim еще одну треть,

وثلثه لواجهة النص (تود)

и последняя треть достается TextView-элементу Todd.

وسيظلوا موزعين بالتساوي على طول شاشة الجهاز

Они будут равномерно распределены по высоте устройства

حتى على الشاشات الأكبر أيضًا بسبب قيم الوزن

даже на больших экранах из-за заданного веса.

إذا غيرت قيمة الوزن لتكون رقمًا أكبر..

Если я поменяю значение weight в большую сторону,

سيعطي المخطط الأصل طولًا أكبر لواجهة النص (تيم)

родительский элемент предоставит TextView-элементу Tim больше высоты.

يمكنني تغييرها لقيمة أكبر حتى ويمكنك أن ترى كيف سيستمر في إعطاءه طول أكبر

Я могу сделать значение веса еще выше, и вы увидите, как элемент занимает все больше места.

في هذه الحالة، واجهة النص (تيم) وزنها 8

В данном случае вес TextView-элемента Tim составляет 8.

الواجهة (توم) وزنها 1، والواجهة (تود) وزنها 1

У элементов Tom и Todd вес равен единице.

لذا مجموع الأوزان هو 8.. 9.. 10

Таким образом, сумма весов составляет десять.

لذا يقوم المخطط الأصل بقسمة الطول المُتاح على 10

Родительский элемент делит всю высоту на десять

ويعطي العشر لـ(توم)، ثمان أعشار لـ(تيم) والعشر لـ(تود)

и отдает одну десятую - элементу Tom, восемь десятых - элементу Tim, и одну десятую - элементу Todd.

لذا في حالة المخطط الخطي الرأسي، فلنفرض أن لدينا ثلاثة واجهات نص تابعة

Допустим, что в вертикальном LinearLayout есть 3 дочерних TextView-элемента.

نضبط الطول المبدئي ليكون صفر (دي بي)

Задаем изначальную высоту равной 0 dp.

لكي يتراصوا جميعًا بأعلى الشاشة بطول صفر

Все элементы с нулевой высотой собраны в верхнейчасти экрана.

هذا يعني أن المخطط الأصل يملك كل هذا الطول الإضافي متاحًا

Это значит, что родительский элемент располагает всей высотой.

إذا ضبطت قيم أوزان كل الواجهات التابعة إلى 1

Если я задам вес равным единице для каждого дочернего TextView,

سيتوزع الطول المُتاح عليهم بالتساوي

тогда вся высота родительского элемента равномерно распределится между дочерними.

وبالمثل في حالة المخطط الخطي الأفقي

То же самое будет происходить и в горизонтальной LinearLayout.

لنفرض أن لدينا ثلاثة واجهات نص تابعة

Допустим, у нас 3 дочерних TextView.

نضع للعرض قيمة مبدئية بصفر (دي بي)

Начнем с ширины равной 0 dp.

هذا يعني أن المخطط الأصل يملك كل هذا العرض الإضافي متاحًا

Это значит, что вся доступная ширина принадлежит родительскому элементу.

إذا ضبطت قيم أوزان كل الواجهات التابعة إلى 1

Если я задам для каждого TextView вес равный единице,

سيتوزع العرض المُتاح عليهم بالتساوي

тогда вся имеющая в родительском элементе ширина будет равномерно распределена между дочерними.

وكما قلت، ليس لزامًا أن يكون الوزن واحدًا، يمكن أن يكون 2 أو 3 أو أي قيمة

Вес не обязательно должен быть равен единице. Мы можем установить 3 или любое другое значение.

أو يمكن حتى أن يكون صفراً

Вес может быть даже нулевым.

إذا كان وزن واجهة صفرًا.. فهذا يعني أنها لن تتغير بناءً على المساحة المتبقية في المخطط الأصل

Если вес элемента равен нулю, это значит, что его размер не зависит от доступного места в родительском элементе.

ستبقى في حيز الطول والعرض اللذان ضبطتهما لها

Его высота и ширина останутся такими, какими вы их назначите.

أريد توضيح شيء وهو أنك عندما تضبط الطول بصفر أو العرض بصفر

Особенно хочу отметить случаи, когда следует задать нулевую высоту или нулевую ширину.

إن كان لديك مخطط خطي رأسي، فأنت تملأه رأسيًا هكذا

Если LinearLayout - вертикальный, вы заполняете экран вертикально по направлению вниз.

وكنت لا تعرف كم سيكون الطول، لذا تضع له قيمة مبدئية صفر (دي بي)، وتعطيه قيمة وزن

Вы не знаете, какой должна быть высота, поэтому задаете для height значение 0 dp, и назначаете элементу вес.

وبالمثل في حالة المخطط الخطي الأفقي، أنت تملأه أفقيًا

Аналогично при горизонтальной LinearLayout пространство заполняется горизонтально.

لذا فأنت لا تعرف بعد عرض الواجهات التابعة

И вы пока не знаете ширину дочерних элементов.

لذا تضع للعرض قيمة مبدئية بصفر (دي بي)، وتعطيه قيمة وزن

Вы можете назначить ширину равной 0 dp, и присвоить элементам вес.

يمكنك أن تعتبر وضع قيمة وزن لواجهة..

По сути присвоение элементу веса -

بمثابة تمكين لك بمطها بناءً على حجم الواجهة الحاوية لها

это возможность растягивать его в соответствии с размером родителя.

هذا جيد لملء المساحة المتاحة في جهاز صغير أو كبير

Так удобно заполнять доступное пространство, будь устройство маленьким или большим.

هذه بعض الأمثلة الحياتية حيث تكون خاصية أوزان المخطط مفيدة

Я покажу пару реальных примеров, где атрибут веса приходится очень кстати.

هذا تطبيق (جوجل هانج آوتس)

Это приложение Google Hangouts, где

يمكنك استخدامه للدردشة مع أصدقائك أو لكي ترسل لهم بطاريق ناعسة

вы можете общаться со своими друзьями или посылать им сонных пингвинов.

في الجزء السفلي من الشاشة هنا حيث ترسل رسالتك

Нижняя часть экрана - это место, где вы набираете свое сообщение.

فلننظر للمخطط بالأسفل هنا عن قرب

Давайте рассмотрим поближе эту нижнюю часть разметки.

إنه مخطط خطي أفقي لأنه عبارة عن صف أفقي

Это горизонтальный LinearLayout, поскольку перед нами горизонтальный ряд.

وهو مكون من واجهة صورة، وحقل تحرير نص حيث يمكنك كتابة رسالتك، وواجهة صورة أخرى

В него входит ImageView-элемент, поле EditText, куда можно вводить текст, и еще один ImageView-элемент.

الآن، قيمة الطول لكل واجهة من هؤلاء في الحقيقة هي (التفاف المحتوى)

Высота каждого из элементов задана как wrap_content,

لأنها تتسع لاحتواء المحتوى الذي بداخلها

поскольку его контур проходит по границе содержимого.

عرض هاتين الصورتين هو (التفاف المحتوى) لأنهما بنفس عرض المحتوى الذي بداخلهما

Ширина этих двух ImageView-элементов задана как wrap_content, поскольку они не шире содержимого.

نعطيها وزنًا بصفر لأننا لا نريدها أن تكون أكبر من هذا

Мы назначаем их вес равным 0 потому что нам не нужно,

حتى لو أُتيحت مساحة كبيرة في المخطط الأصل

чтобы они были больше, даже если в родителе есть свободное место.

ضبط قيمة الوزن بصفر تأكيد على أن طولها وعرضها سيظلا بقيمة (التفاف المحتوى)

Нулевой вес позволяет добиться чтобы ширина и высота

ولن يتغيرا

были равны wrap_content и не менялись.

نحن نريدها أن تمتد لكي تكون أكبر قليلًا على الشاشات الكبيرة

Нам нужно, чтобы поле немного растягивалось на устройствах

ونريدها أن تتقلص إذا كانت على شاشة صغيرة

с большим экраном и уменьшалось на устройствах с маленьким экраном,

لذا نضبط قيمة العرض لتكون صفر (دي بي) والوزن ليكون واحدًا

поэтому мы задаем его ширину равной 0 dp, а вес равным единице.

هذا يعني أن المخطط الخطي الأصل سيحاول تنسيق هذه الصورة أولًا ثم هذه الصورة

Это значит, что в родителе сначала будет выделено место для этого изображения,

ثم سيعطي أي مساحة متبقية من عرض الشاشة لهذه الواجهة

потом для этого, а оставшаяся ширина устройства достанется этому элементу.

هذا مثال في تطبيق الخرائط

А вот пример в приложении Maps.

هذه صفحة تفاصيل موقع ما

Это страница с подробностями о местоположении.

هناك ثلاثة أزرار هنا: (اتصال)، و(حفظ) و(الموقع الإلكتروني)

Здесь есть три кнопки: Call, Save и Website.

فلننظر إليهم عن قرب

Давайте рассмотрим их поближе.

يمكنك في الحقيقة إنشاءهم كواجهات نص مع أيقونات مرفقة بهم

Их можно создать как TextView и затем прикрепить к ним иконки

ويمكنك النظر لخانة ملاحظات المدرب لتفاصيل أكثر

(одробности вы можете посмотреть в методичке),

لكن هذه في الحقيقة نقطة تماس

но сейчас это не так важно.

من أجل هذا التمرين، فلنفرض أنهم واجهات نص

Для этого упражнения допустим, что это TextView-элементы.

طول كل واجهة سيكون (التفاف المحتوى) لأنها تتسع لملء المحتوى الذي بداخلها

Высота каждого TextView задана как wrap_content, поскольку границы проходят четко вокруг содержимого.

الآن، إيجاد قيمة العرض أصعب قليلًا

С шириной все немножко сложнее.

نحن نريد أن تُوزع هذه الواجهات بتساوٍ على عرض الشاشة

Нам нужно, чтобы все элементы TextView равномерно отстояли друг от друга по всей

حسب كونها شاشة جهاز صغير أو كبير

ширине экрана, будь это маленькое устройство или большое.

نحن لا نريد أن تصطف الثلاثة واجهات في يسار الشاشة

Нам не нужно, чтобы все три элемента скучковались в левом углу устройства.

لذا من أجل توزيع المساحة بالتساوي بينهم، نعطيهم قيم وزن متساوية

И чтобы распределить дочерние элементы равномерно, мы задаем им одинаковый вес.

نضبط العرض إلى صفر والوزن إلى واحد لكل واجهة منهم

Устанавливаем для каждого ширину равной 0, а вес - равным 1.

هكذا يتوزع العرض المُتاح في المخطط الأصل بالتساوي على الواجهات الثلاث التابعة

Так все свободное пространство родителя будет равномерно разделено между тремя элементами.

وآخر مثال هو تطبيق بريد إلكتروني

И последний пример - это почтовый клиент.

هذه شاشة (إنشاء) في (جي ميل) حيث يمكنك كتابة رسالة جديدة

Это экран в Gmail для составления нового письма.

هي عبارة عن مخطط خطي رأسي لأن العناصر متراصة في عمود

Здесь мы видим вертикальный LinearLayout: элементы расположены столбиком.

وهو مكون من أربعة حقول تحرير نصوص

Разметка состоит из из четырех полей EditText.

عرض كل واجهة (مماثلة الأصل)، لأننا نريد للواجهة أن تمتد لملء عرض الجهاز بالكامل

Ширина каждого дочернего элемента задана как match_parent, поскольку нам нужно, чтобы они растягивались на всю ширину устройства.

بالنسبة للطول، نضبط طول هذه الواجهات الثلاثة ليكون (التفاف المحتوى)

Высота этих трех полей установлена на wrap_content, чтобы

لكي تتسع حسب المحتوى الموجود داخلها

они ограничивались текстовым содержимым.

نضبط قيم الأوزان إلى صفر لأننا لا نريد زيادة حجمهم..

Вес элементов оставляем нулевым, потому что нам не нужно,

حتى لو توفر طول إضافي في المخطط الأصل

чтобы их размер увеличивался даже, когда в родителе есть лишнее место.

لكن حقل تحرير النص الأخير حيث تكتب رسالتك..

Но в последнем поле EditText вводится текст сообщения, и мы хотим,

ونريد أن نمنح المستخدم مساحة كبيرة ليكتب رسالة كبيرة للغاية لجدته

чтобы пользователь мог написать очень длинное письмо своей бабушке.

لذا نضبط قيمة الطول إلى صفر (دي بي) ونعطيه وزنًا بقيمة واحد

Поэтому задаем его высоту равной 0 dp и назначаем вес равным 1.

لذا إذا توفر بالمخطط الأصل أي طول إضافي، سيعطيه لهذه الواجهة

Так что если в родителе есть свободная высота, она будет отдана этому дочернему полю EditText.

على شاشة جهاز كبير، سيكون حقل إنشاء البريد الإلكتروني أطول قليلًا

На устройстве с большим экраном поле для текста письма будет чуть больше,

وعلى جهاز صغير سيكون أصغر قليلًا

а на маленьком устройство - чуть меньше.

الآن دورك لتتمرن

Теперь ваша очередь.

نريدك أن تقوم بإنشاء هذا المخطط في محاكي (إكس إم إل)

Вам нужно создать эту разметку в XML-визуализаторе.

يمكنك أن تبدأ بالكود الذي تركناه بالأسفل

Вы можете начать с XML-файла, который мы для вас подготовили.

إليك بضعة تلميحات

Парочка советов.

عندما تحاول القيام بشيء كهذا، حاول أن تحدد أولًا عرض كل واجهة

Пытаясь разобраться с такой задачей, сначала определите ширину

ثم حاول تحديد طول كل واجهة

каждого элемента, а потом попробуйте определить высоту каждого элемента.

واحرص أيضًا أن تأخذ الصورة أي طول متبقي في المخطط الخطي الأصل

Убедитесь, что изображению отводится вся оставшаяся

لكي تأخذ طول أقل على الشاشات الصغيرة

высота родительского элемента. так чтобы на маленьких устройствах высота изображения была меньше,

وتأخذ طول أكبر على الشاشات الكبيرة

а на больших экранах - больше.

حسنًا، اذهب وافعلها

Можете приступать.

ضع علامة على هذا المربع عندما تنتهي

В конце поставьте здесь галочку.