Visual Polish Udacity Arabic English (auto-generated)

Visual PolishYouTube↗ IA↗(long shot)
Education 948 views 11 likes 0 dislikes 22 Apr 2016

Udacity 651K subscribers United States YouTube↗

Click to Play Video

سأقوم الآن بجولة في كيفية إنشاء تغييرات مخطط إكس إم إل مناسبة

now I'm gonna walk you through how to make the appropriate xml layout changes

حتى يتطابق التطبيق مع السطور الحمراء من المصمم.

so that our app matches the red lines from our designer so let's start with an

هيا بنا نبدأ أولاً مع تغيير بسيط.

easy change first I noticed right away

لقد لاحظت حالاً أن هناك حشو في

that there's too much padding in the

الإصدار الحالي من التطبيق.

current version of our app so when I

لذلك، عند التمرير في التطبيق

scroll in the app notice that the

لاحظ أن هذا الحشو يكون موجودًا حول القائمة بأكملها.

padding goes all the way around the

حتى عند تمرير القائمة، يستمر وجود هذا الحشو.

whole list even if I scroll the list the padding is still there so that tells me

وهذا يخبرني أن الحشو ربما في واجهة القائمة فقط.

that the padding is probably in the ListView remember that we declared the

تذكر أننا أعلنا عن عنصر إكس إم إل لواجهة القائمة في ملف إكس إم إل لقائمة الكلمات.

ListView XML element in the word list XML file and sure enough inside I see

ومن المؤكد، في الداخل أرى أنه تم ضبط قيم الحشو فيها.

that the padding values are set on it so

سنقوم بإزالة جميع قيم الحشو هذه.

let's remove all these padding values

إذا ذهبنا إلى ملف dimensions.XML،

also if we go to our dimensions XML file

فإن الكود لا يرجع إلى قيم الأبعاد تلك.

my code doesn't revert to these dimension values anymore the ones for

تلك الأبعاد للنشاط الأفقي الرئيسي والنشاط العمودي الرئيسي.

activity horizontal main and activity vertical main so I can delete these two

ولذلك يمكنني حذف هذين السطرين من ملف values/dimensions.xml

lines from the values dimensions XML

حيث تم ضبط هامش النشاط الأفقي

file where the activity horizontal

وهامش النشاط العمودي أوليًا إلى 16 بكسل كثافة.

margin and activity vertical margin were initially set to 16 DPS

لذلك سوف أذهب إلى الأمام وترك هذا البعد الآخر الذي لا يزال في هذا الملف

so I'm gonna go ahead and leave this other dimension that's still in this

هذا هنا لارتفاع عنصر القائمة لأننا ما زلنا في حاجة إلى واحد.

file this one here for a list item height because we'll still need that one

لقد لاحظتم أيضًا أن لدينا أكثر من ملف أبعاد متبقي

you also notice that we have one more dimensions files left so this one for W

وبالتالي هذا الملف لـ w820dp. يستخدم هذا الملف للأجهزة التي بها شاشة كبيرة.

820 DP this file is used for larger

وهنا في الداخل لدينا قيمة أكبر تم ضبطها

screen devices and here inside we have an even larger value set for the

لهامش النشاط الأفقي.

activity horizontal main margin but we

لكننا لسنا في حاجة إلى هذا البُعد بعد الآن، لذلك يمكننا المضي قدمًا

don't need this dimension anymore so we

وحذف هذا الملف بالكامل.

can actually go ahead and delete this

وبالتالي سوف أمضي في المشروع، وانتقل إلى هذا الملف واقوم بحذفه.

entire file so I have a project navigate to that file and delete it now let's see

دعونا الآن نرى كيف يظهر التطبيق على أجهزتنا.

what the app looks like on our device so

سنضغط على نشاط الأرقام، رائع.

tapping to the numbers activity nice so

وبالتالي فإن التغيير الذي حدث في الكود تخلص من 16 بكسل كثافة حول القائمة بأكملها.

those code changes got rid of the 16 DP border around the whole list nice job

عمل رائع.

now let's move on to the list item

سننتقل الآن إلى مخطط عنصر القائمة. وإذا كنت تتذكر، يجب أن يكون الحد الأدنى لارتفاع عنصر القائمة 88 بكسل كثافة.

layout if remember each list item should have a minimum height of 88 dips now if

يبدو هذا العدد مألوفًا الآن لأننا قمنا بحفظه مسبقًا

that number sounds familiar it's because

في ملف dimensions.xml.

we saved it off earlier in our dimensions XML file so we saved it under

لذلك قمنا بحفظه تحت قيمة ارتفاع عنصر القائمة.

the list item height value so I'm gonna

وبالتالي أريد نسخ ذلك للاستخدام لاحقًا.

copy that for use later so that means if

وهذا يعني أنه إذا عدنا إلى مخطط عنصر القائمة، سنقوم بالإشارة إليه على هذا النحو.

we head back to the list item layout we can refer to it as such so here I'm

سأقوم هنا بإعداد الحد الأقصى للارتفاع للإشارة إلى @بُعد/ارتفاع عنصر القائمة.

setting the minimum height to refer to at dimensions slash list item height now

لاحظ هنا أنني أفضل هنا ضبط قيمة الحد الأدنى للارتفاع لتكون 88 بكسل كثافة

notice here prefer to set the minimum height value

بدلاً من إصلاح الارتفاع ليكون مطابقًا لـ 88.

to be eighty-eight dips instead of fixing the height to be 88 exactly so

وبالتالي فإن مجموعة القيم تعني أن المخطط الخطي يجب أن يكون 88 بكسل كثافة

this combination of values means that the linear layout must be 88 dips and

في الارتفاع على الأقل ولكن

height at least but can be taller if

يمكن أن يكون أطول عند الحاجة اعتمادًا على المحتوى داخل عنصر القائمة.

needed depending on the content inside the list item now in the design mock of

الآن في محاكاة التصميم لنشاط الأرقام لدينا، لاحظ أن

our numbers activity notice the

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

background of each list item is this tan color given by this hex value so we

لذلك نحن سنقوم باستخدام هذا اللون في شاشة النشاط الرئيسي بالفعل.

actually already used that color in the main activity screen so we store that

وسنقوم بتحزين هذا اللون في ملف colors.xml.

color in the colors XML file and we have

ولدينا القيمة السداسية لهذا اللون الذي نحن بحاجة إليه هنا.

the hex value for the color that we need

وبالعودة إلى مخطط عنصر القائمة، من الذي أشار إلى مورد اللون هذا؟

here so back in the list item layout we can refer to that color resource so here

حتى هنا في المخطط الخطي للجذر، قمت بضبط خلفية

in the root linear layout I've set the background of the whole linear layout to

المخطط الخطي بالكامل ليكون مورد اللون هذا @لون/خلفية سوداء

be this at color slash tan underscore

ويمكننا الإشارة إلى مورد اللون باستخدام @لون التركيب/الاسم لمورد اللون الذي نريده.

background color resource and we can refer to the color resource using this at color syntax slash name of the color resource that we want now let's look

الآن دعونا نرجع إلى خطوطنا الحمراء.

back at our red lines the image should

يجب أن تكون الصورة عبارة عن مربع مع 88 رقم للارتفاع والعرض.

be a square with both 88 dips for height and width so essentially it should be as

وبالتالي يجب أن يكون بطول ارتفاع عنصر قائمة في الأساس.

tall as a list item so here in the

لذلك هنا في ملف أبعاد إكس إم إل، قمنا بتخزين 88 بكسل كثافة

dimensions XML file we store that 88

في مورد الأبعاد بالفعل حتى يمكننا المضي قدمًا والإشارة إلى ذلك.

dips in the dimensions resource already so we can go ahead and refer to that and

وهذا يعني أنه إذا ما قررنا أن طول عنصر القائمة يجب أن يتم تغييره.

this means if we ever decide that the list item should change in height it may

لذلك ربما يرتفع إلى 96 بكسل كثافة.

be increased to 1960 PS well we could

حسنًا، يمكننا فقط تغييره في مكان واحد

just change it in one place and all the

وسيتم تحديث الأماكن التي يشير إليها هذا البعد تلقائيًا.

places that reference this dimension will automatically be updated so back to

وبالرجوع إلى مخطط عنصر القائمة داخل واجهة الصورة

my list item layout inside the image

سأقوم بتغيير العرض والارتفاع للإشارة مورد الأبعاد

view I'm gonna change the width and height to refer to that dimension

المسمى ارتفاع عنصر القائمة.

resource called list item height and

و اخيرا،

lastly we can remove this source

يمكننا إزالة الخاصية المصدر هذه التي تستخدم أيقونة سلة العنصر النائب.

attribute that uses the basket

الآن يمكننا ضبط الصورة ديناميكيًا بشكل صحيح عندما يكون التطبيق قيد التشغيل

placeholder icon now that we can correctly set the image dynamically when

وليس هناك داعي لهذه الخاصية بعد الآن.

the app is running there's no need to have that attribute anymore now let's

الآن دعونا نرى هل قمنا بالعمل المتوقع بعد هذه التدريبات.

see if those code changes we made work

وهنا التطبيق الذي يعمل في الجهاز والضغط على نشاط الأرقام، رائع

as expected so here's the app running our device and tapping into the numbers activity nice so the image is now a

وبالتالي فإن الصورة الآن عبارة عن مربع بالأبعاد 88×88 بكسل كثافة.

square with dimensions 88 DP by 88 DP

وخلفية الصورة بهذا اللون الأسمر الرائع

and the background of the image is this nice tan color so it's looking good so

تبدو الأمور جيدة إلى الآن.

far now let's move on to the

سننتقل الآن إلى الجزء التالي.

next part so first we have to set the

أولاً، يجب علينا ضبط الخلفية لتكون بنفس اللون البرتقالي

background to be the same orange color

لمنطقة النص.

for the text area and this orange color

وهذا اللون البرتقالي هو نفس لون الخلفية التي استخدمناها

is the same as the background color that

لفئة الأرقام في النشاط الرئيسي.

we use for the numbers category in the

لذلك تذكر اللون السداسي

main activity so remember it's hex color

يجب أن يكون اللون FT 8E09 بالفعل في ملف colors.xml لدينا.

fd-80 nine should already be in our colors dot XML file and sure enough is

ومن المؤكد، تم تعريفه على أنه مورد لون يسمى أرقام الفئة.

defined as the color resource called category underscore numbers so back in

وبالعودة إلى مخطط عنصر القائمة، سنضيف ذلك.

our list item layout let's add that so

سنقوم بضبط لون الخلفية للمخطط الخطي الذي يحتوي على

for the linear layout that contains our two text views we're going to set its

واجهتي النص الخاصة بنا إلى مورد أرقام الفئة

background color to the category underscore numbers resource and we refer

والإشارة كـ @لون/أرقام الفئة.

to it as at color slash category underscore numbers so by saving the

لذلك من خلال إعداد اللون على هذا المخطط الخطي

color on this linear layout will only

سيؤثر فقط على خلفية واجهات النصوص تلك.

influence the background of these text views now let's go back to the red lines

سنرجع الآن إلى السطور الحمراء ونرى ما تبقى لإجرائه.

and see what's left to do so we'll need

سنحتاج لتغيير تصميمات الخط لواجهات النصوص تلك.

to change the font stylings of these

يجب أن يكون لون الخط أبيض ويجب أن تكون كلمة miwork بالخط العريض.

text views they should be of a white font color and the Miwok word should be

ويجب أن يكون حجم الخط 18 بكسل مُحجم

bolded and both should be a font size 18

وهو من الدورة الأخيرة إذا كنت تتذكر يرسم مظهر النص متوسط.

SP which if you remember from the last course Maps the text appearance medium

في واجهة النص miwok أيضًا تكون خاصية مظهر النص

on the MOOC text view I'll set the text

appearance attribute to be text appearance medium and so this gets us

وبهذا نحصل على حجم الخط 18 بكسل مُحجم.

the font size of 18 SP then I'll set the

بعد ذلك سأقوم بضبط لون النص للون الأبيض.

text color to be white and I know that

أنا على دراية بأن إطار عمل آندرويد لديه مورد لون معرف مسبقًا.

the android framework has a predefined

حتى أتمكن من استخدام هذا اللون عن طريق استدعاء @آندرويد:اللون/أبيض ببساطة.

color resource so i can use that one by simply calling at android : color slash

وفي النهاية، أرغب في ضبط تنسيق النص ليكون خط عريض.

white and lastly i want to set the text

إلى ذلك أو أن يكون شيئا من هذا القبيل

style to be bold so i want i repeat

للنص الذي تظهره في الإعداد الافتراضي أو في الترجمات الإنجليزية.

something similar for the textview showing the default or english

لذلك أريد أن يكون مظهر النص متوسط واللون أبيض

translations so I want the text appearance 3 medium and the color to be

لكن لا أرغب في الخط العريض.

white but I don't want it to be bold so

لن أقوم بنسخ هذا السطر.

I won't copy that line all right let's

حسنًا، سنتحقق منه على جهاز الآن، اضغط على نشاط الأرقام.

check it out on a device now so tap into the numbers activity hmm so the

وبالتالي فإن مهر واجهات النصوص والخلفية يبدو صحيحًا

appearance of the text views and the background looks correct but the

لكن موضع واجهتي النص لا يبدو صحيحًا.

position of our two text views doesn't

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

look quite right so right now they're squished up into the top left corner of

للمخطط الخطي العمودي الذي يظهر هنا في الخلفية البرتقالية.

the vertical in your layout that's shown here in the orange background so if we

وبالتالي إذا ألقينا نظرة على الخطوط الحمراء لدينا، سنرى أن ما نحتاج

take a look back at our red lines we see

هو أن يكون لدينا واجهتي نص مركزتين عموديًا ضمن عنصر القائمة.

that what we need is to have our two text views vertically centered within

لمعرفة ذلك، سنحدد أولاً حدود كل واجهة نص

the list item so to figure that out let's first figure out the bounds of

ولمساعدتنا، سأقوم بالرسم على حدود مخطط العرض

each textview and to help us out I'm gonna turn on the show layout bounds

ضمن خيارات المطور في قائمة الإعدادات.

under the developers options

لذلك تذكر كيفية الوصول إلى هناك؟

the settings menu so remember how to get

ارجع إلى الإعدادات، مرر للأسفل لخيارات المطورين

there go back to settings scroll down to developer options and then a little bit

ثم يجب أن تعثر على حدود مخطط العرض خلال أكثر من منتصف مسافة التمرير للأسفل.

more than halfway down should be show

الآن، سنرجع إلى سير الجيش.

layout bounds so let's go back to our me

الآن، مع ظهور حدود المخطط، يمكنني رؤية أن واجهتي النص لدينا

walk out now with the layout bounds showing I can see that our two text

تم سحبهما إلى الحافة العلوية للمخطط الخطي العمودي.

views are squished up into the top edge of the vertical linear layout now I need

الآن، يلزم نقلهم إلى أسفل قليلاً، حتى

to move them down a little bit more so

تأخذ مزيد من الارتفاع العمودي في المخطط الخطي.

they take up more vertical height in the

هناك العديد من الطرق لتعديل هذا المخطط والعمل على نجاحه

linear layout now there are a number of ways to tweak this layout to make it

بطريقة واحدة.

work and here's one way so from the last

من الدورة الأخيرة،

course we learned that we can assign

تعلمنا أنه يمكننا تعيين عرض مخطط إلى واجهات فرعية.

layout weights to the children views so

حتى تأخذ مزيد من المساحة المتاحة في المخطط الخطي الأصلي.

they take up more available space in the parent linear layout now I can assign

الآن، يمكنني تعيين ارتفاع كل واجهة لتكون 0 واقوم بتوفير عرض لهم بحيث يكون 1

the height of each view to be zero and give each of them a weight of one so

لتكون المساحة العمودية مقسّمة بالتساوي بين كلا الواجهتين الفرعيتين.

that the vertical space is divided evenly between both child views in

بالإضافة إلى أنه يمكنني استخدام خاصية تسمى الجاذبية.

addition I can use an attribute called

بالنسبة لواجهة النص الأولى، سأقوم بضبط قيمة جاذبيتها لتكون للأسفل

gravity so for the first textview I'll set its gravity value to be bottom

لتدفع موضع محتوى النص ليكون أسفل الواجهة.

put your position the text content to be

ولواجهة النص الثانية، سأقوم بضبط جاذبيتها للأعلى.

at the bottom of the view and for the second textview i'll set its gravity

وتحديد موضع واجهة النص لتكون أعلى الواجهة.

attribute to be top and now position the textview to be at the top of the

وبالرجوع إلى الكود، هذا ما يجب أن يبدوا عليه.

textview and back in the code this is

لذلك سيكون لدى واجهة نص miwok عرض للأصل المطابق الذي سيملأ

what it should look like so the Miwok textview has a width of match parent which will fill the rest of

باقي مخطط عنصر القائمة.

the list item layout its height will be

سيكون الطول 0 بكسل كثافة ويكون العرض 1

0 dips and its weight will be 1 the

وستكون الواجهة الافتراضية لها عرض يطابق الأصل.

default textview also has a width of

سيكون الطول 0 بكسل كثافة ويكون العرض 1 أيضًا.

matched parent its height is also 0 dips and its weight is also 1 so this means

وهذا يعني أن واجهتي النص سيتقاسمان الارتفاع المتاح

that the two text views will split the

في المخطط الخطي الأصلي.

available height in the parent linear

ثم نقوم بضبط الجاذبية حيث يكون المحتوى داخل مواضع

layout then we set the gravity which changes where the content inside the

الواجهة.

view is positioned but note that it

لكن، لاحظ أن لن يتغير حجم الواجهة.

doesn't change the size of the view here

هنا حيث قمنا بتغيير موضع النص داخل واجهة النص في Miwok لتكون في الأسفل

we've positioned the text inside the muon textview to be at the bottom and

ويكون النص داخل واجهة النص الافتراضية في الأعلى.

the text inside the default textview to be at the top and this is what it looks

وهذا ما تبدوا عليه في الجهاز.

like on the device so tapping into

وبالضغط على الأرقام سنرى أن واجهتي النص مركزتين ضمن عنصر القائمة.

numbers we see that the two text views are centered within the list item so

وسنرى ما تبدو عليه بالنسبة للأنشطة الأخرى.

let's see what it looks like for the

لذلك هذه تبدو جيدة جدًا

other activities so these are looking

الشيء المهم الآن هو أنه يجب إصلاح لون عنصر قائمة الخلفية.

good so the only thing now that we need to fix is the background list item color so

حتى لا يكون اللون البرتقالي منتشر وبدلاً من ذلك يتم استخدام اللون المناسب

they're not all using this orange and instead are using the proper color for

Similar videos:

Fix_Phrases_Activity_to_Hide_Images
Udacity
901 views 14 likes 6 dislikes 22 Apr 201629% match

视图回收
 Udacity
7K views 97 likes 1 dislikes 08 Aug 201628% match

具有自定义 ArrayAdapter 的示例应用
 Udacity
3.8K views 51 likes 116 dislikes 08 Aug 201628% match

Music Player App
Udacity
904 views 11 likes 2 dislikes 06 May 201627% match

ListView and ArrayAdapter Code
Udacity
43.7K views 31 likes 25 dislikes 13 May 201627% match

根据列表向布局添加 TextView
Udacity
1.8K views 24 likes 5 dislikes 08 Aug 201626% match

自定义 ArrayAdapter
Udacity
2.5K views 32 likes 60 dislikes 08 Aug 201626% match

Untitled
Udacity
37.9K views 8 likes 2 dislikes 04 May 201626% match

需要自定义 ArrayAdapter
Udacity
3.1K views 28 likes 45 dislikes 08 Aug 201626% match

Play Correct Audio File Per Word
Udacity
827 views 11 likes 6 dislikes 06 May 201626% match

Revisão de Views e ViewGroups
Udacity
3K views 22 likes 1 dislikes 23 Feb 201525% match

Settings Privacy About Contact Donate