Nested ViewGroups Udacity Arabic English

Nested ViewGroupsYouTube↗ IA↗(long shot)
Education 70.9K views 17 likes 0 dislikes 27 May 2015

Udacity 651K subscribers United States YouTube↗

Click to Play Video

هيا ننظر إلى كيفية تطبيق مجموعات الواجهة المتداخلة في التطبيق.

Let's look at how nested ViewGroups would apply to our app.

المعلومات في التطبيق تبدو مرتبة في عمود رأسي.

The information in our app looks like it's arranged in a vertical column.

ولذا يمكننا استخدام مخطط خطي عمودي لها.

So we can use a vertical LinearLayout for this.

هذا يبدو جيدًا

This looks good so

لأن لدينا واجهة لكل صف في المخطط الخطي العمودي.

far because we have one view per row in the vertical LinearLayout.

ولكن عند الوصول إلى هذا الصف، فهو مكون بالفعل من عدة واجهات.

But when we get to this row, it's actually made up of multiple views.

يمكننا استخدام مخطط خطي أفقي لبناء هذا الصف المكون من زار،

We can use a horizontal LinearLayout to build out this row composed of a button,

وواجهة النص، وزرار.

a TextView, and a button.

ولذا فإن المخطط الخطي قد يكون الفرع الثاني

So this LinearLayout would be the second child in

في المخطط الخطي العمودي الأكبر.

the bigger vertical LinearLayout.

سريعًا، سأعرض لك ثلاثة ملفات مخطط إكس إم إل مختلفة،

In a moment, I'm going to show you three different XML layout files, and

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

I want to ask you which one you think accurately builds up

المخطط الذي نريده.

the layout that we want.

المسألة هنا ليس المطلوب منك نسخ هذه الملفات

The catch is I don't want you to copy these files and

وتشغيلها في آندرويد ستوديو.

run them in Android Studio.

أريد منك تخمين علمي وفق

I want you to make an educated guess based off of reading and

قراءتك وفهمك لهذا الكود.

understanding this code.

يمكنك العثور على هذا الرابط في ملحوظات المعلم.

You can find this link in instructor notes.

به ثلاث خيارات، الخيار أ، والخيار ب، والخيار ج.

It has three options listed, Option A, Option B, and Option C.

أحد هذه الخيارات يبني المخطط الذي نريده على نحوٍ صحيح.

One of these options correctly builds out the layout that we want.

وهذا أمر صعب لأننا لم نواجهه من قبل

This is going to be challenging because we haven't previously encountered

إكس إم إل مع مجموعات الواجهة المتداخلة.

XML with nested ViewGroups.

سنقوم بتقسيم هذا التحدي عبر مسابقتين،

We're going to split this challenge across two quizzes, so

لذلك لن أطلب منكم اتخاذ قرار بعد.

I won't ask you to make a decision yet.

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

For this first quiz, I want you to sketch out the view hierarchy diagram

لجميع ملفات إكس إم إل.

for each of the XML files.

وإليك مثالا سريعا على ما معنى التسلسل الهرمي للواجهة.

Here's a quick spiel on what view hierarchy means.

ستحتاج إلى أوراق

You'll need paper and

وشيئ تكتب به لرسم هذه الرسومات البيانية.

something to write with in order to sketch out these diagrams.

الطريقة التي ينظم بها آندرويد جميع هذه الواجهات في الشاشة موجود في التسلسل الهرمي للواجهة،

The way that Android organizes all these views on screen is in a view hierarchy,

أو هيكل الشجرة للواجهات.

or a tree structure of views.

هذا ببساطة رسم بياني يقدم التسلسل الهرمي للواجهة.

This is simply a diagram that represents the view hierarchy.

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

It shows the parent and child relationships among the views.

الواجهة الجذر لجميع المخطط عبراة عن مخطط خطي.

The root view of this whole layout is a LinearLayout.

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

It has three children, a RelativeLayout, a TextView, and another TextView.

وفي المقابل، هذا المخطط النسبي له الفرع الخاص به وواجهة الصورة

And then this RelativeLayout in turn has its own children, an ImageView and

وواجهة النص.

بالنسبة لمجموعة تطبيق الخنزير،

For our Puddles the Pig app,

هذا هو التسلسل الهرمي للواجهة الذي أنشأته آندرويد.

this is the view hierarchy that gets created by Android.

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

We have a RelativeLayout as a root view, and it has four children, an ImageView,

وزوج من واجهة النص، إضافة إلى مخطط خطي.

a couple TextViews, as well as a LinearLayout.

والمخطط الخطي هذا له واجهتين صور كفروع له.

And this LinearLayout, in turn, has two ImageViews as its children.

والآن قد فهمت طبيعة الرسم البياني للتسلسل الهرمي للواجهة.

Now you understand what a view hierarchy diagram is.

برسم الرسم البياني لكل من مخططات إكس إم إل هذه،

By sketching out the diagram for each of these XML layouts,

ستفهم جيدًا أي واجهة هي الواجهة الأصل، وأي منها الفرع،

you'll better understand which view is the parent view, who the children are,

سواء كانت الفروع لها واجهات فرع أم لا.

and whether those children have children views or not.

إذا كنت لا تزال بحاجة إلى المزيد، هنا بعض الأمثلة على كيفية الاستعانة بمخططات إكس إم إل

If you still need a hint, here are some examples of how to go from XML layouts

في رسم الرسم البياني للتسلسل الهرمي لواجهة.

to drawing a view hierarchy diagram.

في هذا المخطط، لدينا واجهة جذر لمخطط خطي.

In this layout, we have a root view of a LinearLayout.

على أي حال، لقد أضفت هذه النقاط

By the way, I added these

لأنني لم أستطع ضبط جميع الأكواد هنا.

dots here because I couldn't fit all the code here.

مع الواجهة الجذر بصفتها مخطط خطي، لقد رسمت ذلك في أعلى الشجرة.

With a root view as a LinearLayout, you draw that at the top of the tree.

وبعد ذلك تحتوي على فرعين لواجهة النص،

And then it contains two children TextViews, so

ولذا قد رسمت هؤلاء بصفتهم فروع تحت هذا، وهذا هو المطلوب.

you draw those as children underneath that, and that's it.

هذا المخطط معقد كثيرًا.

This is a more complicated layout.

لدينا واجهة جذر أي أنها مخطط خطي،

We have a root view that's a LinearLayout, and

وتحتوي على ثلاثة فروع مباشرة، وواجهتين نص، ومخطط نسبي،

it contains three direct children, two TextViews, and a RelativeLayout, and

وبعد ذلك نجد داخل المخطط النسبي، واجهة الصورة وواجهة النص بصفة فروع.

then inside that RelativeLayout, we have an ImageView and a TextView as children.

عند الانتهاء من الرسم البياني للتسلسل الهرمي للواجهة

When you're done drawing out the view hierarchy diagram for

لكل خيار، تابع وحدد هذه المربعات للاستمرار.

each option, then go ahead and check these boxes to continue.

في الاختبار التالي، سأطلب منك تحديد اختيارك عن خيارك الأفضل،

In the following quiz, I'll ask you to make a selection

ولكن الآن، غير مطلوب منك اتخاذ أي قرار.

on which option is best, but for now, you don't have to make a decision.

Similar videos:

Build Quantity Picker Layout - Solution
Udacity
1.6K views 16 likes 0 dislikes 27 May 201537% match

Nested ViewGroups
Udacity
8.6K views 46 likes 2 dislikes 06 Jun 201634% match

Do XML ao Java
Udacity
6.6K views 43 likes 3 dislikes 06 Jun 201633% match

Build the Quantity Picker Layout
Udacity
53.9K views 20 likes 1 dislikes 27 May 201532% match

Plan How to Build the Quantity Picker
Udacity
79.6K views 28 likes 0 dislikes 22 May 201531% match

Recap
Udacity
10K views 58 likes 1 dislikes 06 Jun 201631% match

Nested View Groups
Udacity
1.4K views 8 likes 0 dislikes 22 May 201531% match

Positioning - Solution
Udacity
2.9K views 24 likes 4 dislikes 08 Jun 201528% match

Practice Calling Object Methods
Udacity
40K views 10 likes 2 dislikes 14 Jul 201528% match

String Data Type
Udacity
78.9K views 30 likes 0 dislikes 28 May 201528% match

LinearLayout
Udacity
206K views 104 likes 0 dislikes 26 May 201528% match

Build Layout
Udacity
147.7K views 27 likes 0 dislikes 29 May 201527% match

Declare and Initialize
Udacity
39.7K views 10 likes 1 dislikes 04 Jun 201527% match

Build_Layout
Udacity
3.3K views 15 likes 0 dislikes 22 May 201527% match

Calculate Price Method
Udacity
69.1K views 16 likes 0 dislikes 14 Jul 201527% match

Layout Weight
Udacity
3.8K views 26 likes 1 dislikes 22 May 201526% match

Views
Udacity
763.8K views 380 likes 11 dislikes 25 Sep 201526% match

Simple ImageView
Udacity
150K views 82 likes 1 dislikes 26 May 201526% match

06a_q_Modifying_First_Line_of_Java_Code
Udacity
87.4K views 21 likes 2 dislikes 22 May 201526% match

3 : The Drawable Folder SOL
Udacity
3.1K views 17 likes 2 dislikes 25 May 201525% match

Mac El Capitan Geekbench Before and After
Ceadd L
14.3K views 136 likes 12 dislikes 08 Jun 201525% match

The Secret Technique for 3D Drawings! - How to Draw an Anamorphic Rose in 3D
Fine Art-Tips
335.8K views 7.6K likes 124 dislikes 12 Nov 201325% match

Settings Privacy About Contact Donate