We've been making a guest list so
far for the party.
>> Wait, this is the guest list for
the birthday party, right, Catherine?
>> Yeah.
>> I really hope I'm on this list.
>> Well, we'll have to see about that.
>> Wow, I feel really small about that.
>> Well, speaking about small,
let's talk about the size
of views on a screen.
>> Oh, we've used the fixed written
height, which is the dp, right?
>> Yeah, the width and height.
And we could also set,
wrap content, with view.
>> Right, which is a strange way of
saying that the view is going to
wrap itself around the content.
So the content grows large,
the view grows large, the content
is small and the view grows small.
>> Yeah, and there's actually a third
one which is called, match parent.
>> That seems a little strange.
That sounds like a dating website for
single parents.
>> Not quite.
Match parent means that the view will
be As wide or as tall as the parent.
>> Oh, so that makes sense.
I am a view, I have a parent and
my width and
height is going to be
the same as my parent.
Okay.
>> Exactly, so that's to summarize,
the different values that you can
set for a size of a view is width.
Fixed dp for width and height.
>> Correct,
you can also do wrap_content.
And the next one we're
going to try out is
>> match_parent.
Here are some examples of how setting
different widths on the child views
in a linear layout can affect
the final user interface.
In this example we set each child
view to have a fixed width of 200 dp.
If the content inside each
view is greater than 200 DP
then you run risk of cutting
some content off like this.
In this example we set each child
view to have a width a wrap content.
Now all the content content is shown,
but
the width of each view really varies
based on what's inside each view.
In this example, we set the width of
each child view to be match parent.
Now you see that the width of each child
is as wide as the parent view group.
Regardless of the content inside of it.
Now those same values can also be
applied for the height of each view.
In this example we set the height of
this child text view to be 200 dp.
If the content inside
it is taller than that.
Then you run the risk of cutting
off some of the content.
In this example, we set the height of
the child text view to be wrap content.
That way all the content will
be displayed on screen and
nothing will be cut off because
the size of the text view is dependent
on the content inside of it.
In this example, we set the height of
the child text view to be match parent.
That way the child view is as
tall as the parent itself,
regardless of the content inside it.
Let's open the XML visualizer now and
try to be more like our
parents in the code.
We're providing you a link to the XML
visualizer with some starter code
in the instructor notes below.
In this case,
the LinearLayout is the root view
of this layout because it's
the first and outermost view.
If we set match_parent for the width and
height of this root view, and
we set this as the main
layout of our app,
then this linear layout will be as
tall and wide as the device screen.
I can show you by setting
the background of this linear layout
to be a non-transparent color.
If I set a gray background color
on this linear layout Then,
you can see how the gray extends
the full width and height of the device.
Now, what happens if I try
to change the width or
height of these text
views to be match parent?
To make it clear where
the bounds of each view are,
I'm going to set a background
color on each of the views.
Now I'm going to change the height of
this text view to be match parent.
By the way, you spell it match_parent.
And now you see that this text view
takes up the full height of the parent.
Unfortunately, it pushes
everything else off the screen, so
we don't really want that.
So let's change it back to wrap content.
Okay.
So let's change the width now to be
match parent and see what it does.
Now the width of the TextView is as
wide as the parent, which in turn,
is as wide as the device screen.
If I change the other TextViews
to also be match_parent
You can see that it also starts to
take up the full width of the parent.
I also want to point out one more thing.
Every time you see an attribute that
starts with layout underscore, like
layout height or layout width, these are
actually view group layout parameters.
These are used by the parent view
group to determine the size and
the position of these views.
Meanwhile, the other attributes
like background, text size, and
text are handled by the TextView
in terms of styling its own view.
But these view group layout
parameters are handled by the parent.
Now it's your turn to try
different width and height values.
For the link to the XML visualizer
with some starter code,
see the instructor notes below.
Try to change the width and
height values of each TextView.
You can set a fixed dp value,
wrap-content, or match_parent.
Remember that for each view, the width
and height values don't have to match.
When you're done,
check this box to continue.
قمنا حتى الآن بإنشاء
قائمة المدعوين إلى الحفلة.
لحظة، هذه هي قائمة المدعوين
لحفلة عيد الميلاد، صحيح يا كاثرين؟
أجل
أتمنى أن أكون ضمنها.
حسناً، سنرى بهذا الشأن.
أحسّ بالصغر الآن.
بالحديث عن الصغر،
لنتحدث عن حجم المعاينات على الشاشة.
لقد استخدمنا العرض والارتفاع المحددين،
أي قيم الـ dp أليس كذلك؟
نعم، العرض والارتفاع.
ويمكننا استخدام
التفاف المحتوى مع المعاينة.
صحيح، و هي طريقة غريبة لقول أن المعاينة
سوف تقوم بلّف نفسها حول المحتوى.
لذا، عندما يزداد حجم المحتوى،
فستكبر المعاينة،
وإذا صغُر المحتوى تصغر المعاينة.
وهناك سمة ثالثة
تدعى match parent مطابقة العنصر الأب.
هذا يبدو غريباً.
يبدو كموقع مواعدة للآباء العزّاب.
ليس تماماً.
مطابقة العنصر الأب تعني أن المعاينة
ستكون بنفس ارتفاع وعرض العنصر الأب.
هذا يبدو منطقياً.
أنا معاينة، ولديّ عنصر أب
وسيكون عرضي وارتفاعي
مثل الأب تماماً.
- حسناً
- تماماً، لنلخص ذلك،
القيم المختلفة التي يمكنك
ضبطها للمعاينة هي العرض.
قيم dp محددة للعرض والارتفاع.
صحيح، يمكنك استخدام
التفاف المحتوى أيضاً.
وسنقوم بعد ذلك بتجربة
مطابقة العنصر الأب.
إليك بعض الأمثلة لتوضيح
كيف أن ضبط عروض مختلفة في المعاينة الابن
في الواجهة الخطية يمكن أن يؤثر
على واجهة المستخدم النهائية.
في هذا المثال قمنا بإعطاء كل من المعاينات
الأبناء ليحصل على قيمة ثابتة للعرض 200 dp.
إذا كان المحتوى داخل
كل معاينة أكبر من 200dp
فستخاطر عندها بحذف بعض المحتوى هكذا.
في هذا المثال قمنا بضبط كل معاينة ابن
لتملك قيمة عرض التفاف المحتوى.
الآن يظهر جميع المحتوى،
لكن عرض كل معاينة يختلف تبعاً لمحتواها.
في هذا المثال،
ضبطنا عرض كل معاينة ابن ليطابق الأب.
تلاحظ الآن أن عرض كل
ابن بنفس عرض مجموعة الأب.
بغض النظر عن المحتوى داخلها.
والآن يمكن تطبيق القيم ذاتها
على ارتفاع جميع المعاينات.
في هذا المثال ضبطنا ارتفاع
معاينة النص الابن ليكون 200dp .
إذا كان المحتوى أطول من ذلك،
فسستخاطر عندها بحذف بعض المحتوى.
في هذا المثال، ضبطنا قيمة ارتفاع معاينة
النص الابن على القيمة التفاف المحتوى.
بهذه الطريقة سيظهر
كامل المحتوى على الشاشة.
ولن يحذف شيء لأن حجم
معاينة النص يعتمد على المحتوى داخلها.
في هذا المثال، ضبطنا ارتفاع
معاينة نص الابن ليطابق الأب.
بهذه الطريقة ستكون المعاينة
الابن بنفس ارتفاع الأب.
بغض النظر عن المحتوى داخلها.
لنقم الآن بفتح محاكي الـ XML،
ولنحاول مشابهة الآباء بالنص البرمجي.
سنزوّدك برابط لمحاكي الـ XML
مع بعض النصوص البرمجية الابتدائية
في ملاحظات المعلم في الأسفل.
في هذه الحالة،
تكون الواجهة الخطية هي المعاينة الجذر
لهذه الواجهة لأنها
المعاينة الأولى والأشمل.
إذا استخدمنا match_parent
للعرض والارتفاع لمعاينة الجذر،
وسنجعل هذه الواجهة الأساسية لتطبيقنا.
عندها ستكون هذه الواجهة الخطية
بنفس طول وارتفاع شاشة الجهاز.
سأريك عن طريق ضبط
خلفية هذه الواجهة الخطية
بلون غير شفاف.
إذا جعلت الخلفية بلون
رماديّ لهذه الواجهة الخطية،
عندها يمكنك ملاحظة أن اللون
يمتد لكامل عرض وارتفاع الجهاز.
ماذا يحصل
لو قمت بتغيير عرض أو ارتفاع
أحد هذه المعاينات
النصية لتشابه العنصر الأب؟
لتوضيح حدود كلّ معاينة،
سأغيّر لون الخلفية في جميع المعاينات.
وسأغيّر ارتفاع هذه
المعاينة النصية ليطابق الأب.
وبالمناسبة، تُكتب هكذا match_parent.
يمكنك ملاحظة أن هذه المعاينة النصية
تأخذ كامل ارتفاع الأب.
للأسف، تقوم بدفع كل
مابقي لخارج الشاشة،
ونحن لا نريد ذلك.
لذا سنغيرها للقيمة wrap content.
حسناً.
لنغير الآن العرض
ليشابه الأب ونرى ما سيحصل.
الأن عرض معاينة النص
هذه يطابق عرض الأب،
والذي هو بنفس عرض الشاشة.
إذا عدّلت باقي المعاينات
النصية لتصبح match_parent.
يمكنك ملاحظة أنها
أخذت عرض الأب كاملاً.
أريد الإشارة إلى أمرٍ آخر.
في كل مرة ترى فيها سمة تبدأ بـ _layout،
مثلlayout height ارتقاع الواجهة
أو layout width عرض الواجهة
هذه معاملات لمجموعة معاينة الواجهة.
وتستخدمها مجموعات المعاينة الآباء،
لتحديد حجم وموضع هذه المعاينات.
في حين أن السمات الأخرى
كلون الخلفية وحجم الخط،
يتم تنسيقها في معاينة النص ذاتها.
لكن متغيرات واجهة
مجموعة المعاينة هذه تُعالج من قبل الأب.
الآن حان دورك لتجرّب
عدة قيم للعرض والارتفاع.
للحصول على رابط محاكي الـ XML
و النص البرمجيّ الابتدائي،
انظر إلى ملاحظات المعلم.
حاول تغيير قيم العرض
والارتفاع لكّل معاينة نصية.
يمكنك استخدام قيم dp محددة،
أو wrap-content أو match_parent.
تذكّر أنه ليس من الضروري
تطابق العرض والارتفاع لكل معاينة.
عندما تنتهي،
ضع إشارة في هذا المربع للمتابعة.
We've been making a guest list so
far for the party.
>> Wait, this is the guest list for
the birthday party, right, Catherine?
>> Yeah.
>> I really hope I'm on this list.
>> Well, we'll have to see about that.
>> Wow, I feel really small about that.
>> Well, speaking about small,
let's talk about the size
of views on a screen.
>> Oh, we've used the fixed written
height, which is the dp, right?
>> Yeah, the width and height.
And we could also set,
wrap content, with view.
>> Right, which is a strange way of
saying that the view is going to
wrap itself around the content.
So the content grows large,
the view grows large, the content
is small and the view grows small.
>> Yeah, and there's actually a third
one which is called, match parent.
>> That seems a little strange.
That sounds like a dating website for
single parents.
>> Not quite.
Match parent means that the view will
be As wide or as tall as the parent.
>> Oh, so that makes sense.
I am a view, I have a parent and
my width and
height is going to be
the same as my parent.
Okay.
>> Exactly, so that's to summarize,
the different values that you can
set for a size of a view is width.
Fixed dp for width and height.
>> Correct,
you can also do wrap_content.
And the next one we're
going to try out is
>> match_parent.
Here are some examples of how setting
different widths on the child views
in a linear layout can affect
the final user interface.
In this example we set each child
view to have a fixed width of 200 dp.
If the content inside each
view is greater than 200 DP
then you run risk of cutting
some content off like this.
In this example we set each child
view to have a width a wrap content.
Now all the content content is shown,
but
the width of each view really varies
based on what's inside each view.
In this example, we set the width of
each child view to be match parent.
Now you see that the width of each child
is as wide as the parent view group.
Regardless of the content inside of it.
Now those same values can also be
applied for the height of each view.
In this example we set the height of
this child text view to be 200 dp.
If the content inside
it is taller than that.
Then you run the risk of cutting
off some of the content.
In this example, we set the height of
the child text view to be wrap content.
That way all the content will
be displayed on screen and
nothing will be cut off because
the size of the text view is dependent
on the content inside of it.
In this example, we set the height of
the child text view to be match parent.
That way the child view is as
tall as the parent itself,
regardless of the content inside it.
Let's open the XML visualizer now and
try to be more like our
parents in the code.
We're providing you a link to the XML
visualizer with some starter code
in the instructor notes below.
In this case,
the LinearLayout is the root view
of this layout because it's
the first and outermost view.
If we set match_parent for the width and
height of this root view, and
we set this as the main
layout of our app,
then this linear layout will be as
tall and wide as the device screen.
I can show you by setting
the background of this linear layout
to be a non-transparent color.
If I set a gray background color
on this linear layout Then,
you can see how the gray extends
the full width and height of the device.
Now, what happens if I try
to change the width or
height of these text
views to be match parent?
To make it clear where
the bounds of each view are,
I'm going to set a background
color on each of the views.
Now I'm going to change the height of
this text view to be match parent.
By the way, you spell it match_parent.
And now you see that this text view
takes up the full height of the parent.
Unfortunately, it pushes
everything else off the screen, so
we don't really want that.
So let's change it back to wrap content.
Okay.
So let's change the width now to be
match parent and see what it does.
Now the width of the TextView is as
wide as the parent, which in turn,
is as wide as the device screen.
If I change the other TextViews
to also be match_parent
You can see that it also starts to
take up the full width of the parent.
I also want to point out one more thing.
Every time you see an attribute that
starts with layout underscore, like
layout height or layout width, these are
actually view group layout parameters.
These are used by the parent view
group to determine the size and
the position of these views.
Meanwhile, the other attributes
like background, text size, and
text are handled by the TextView
in terms of styling its own view.
But these view group layout
parameters are handled by the parent.
Now it's your turn to try
different width and height values.
For the link to the XML visualizer
with some starter code,
see the instructor notes below.
Try to change the width and
height values of each TextView.
You can set a fixed dp value,
wrap-content, or match_parent.
Remember that for each view, the width
and height values don't have to match.
When you're done,
check this box to continue.
Hasta ahora, hemos creado
una lista de invitados para la fiesta.
¿La lista de invitados
para la fiesta de cumpleaños?
Sí.
Espero estar en esa lista.
Bueno, ya veremos...
Vaya... Ahora me siento
como si fuera un niño pequeño.
Hablando de cosas pequeñas,
vamos a hablar del tamaño
de las vistas en pantalla.
Hemos utilizado
la altura corregida, el DP, ¿verdad?
Sí, la anchura y la altura.
También podemos configurar
cómo se coloca el contenido con la vista.
Es una forma rara de decir que la vista
va a entrar dentro del contenido.
Si el contenido aumenta, la vista crece.
Y si disminuye, la vista se ajusta.
Y hay una tercera opción,
que es lo que llamamos match_parent.
Qué extraño...
Suena como si te metieras en una página
para ligar con padres solteros.
No tiene nada que ver.
"match_parent" significa
que la vista será
igual de ancha o alta
que la de su padre.
Tiene sentido.
Yo soy una vista y tengo un padre.
Yo seré igual de ancho
y largo que mi padre.
Sí, eso es.
Así que vamos a resumir.
Los valores que se pueden ajustar
en una vista son la anchura,
corregir DP para la anchura y la altura...
También puedes usar wrap_content.
Y lo siguiente que vamos a probar
es match_parent.
Veamos unos ejemplos de cómo al ajustar
la anchura de las diferentes vistas hijas
en una disposición lineal podemos alterar
la interfaz de usuario final.
En este ejemplo, hemos fijado
el ancho de cada vista en 200dp.
Si el contenido que está
dentro de cada vista se pasa de 200dp,
correremos el riesgo
de que el contenido se corte, como aquí.
En este ejemplo,
hemos configurado cada vista hija
para que tenga un ancho
que se ajuste al contenido wrap_content.
Ahora se muestra todo el contenido,
pero el ancho de cada vista varía mucho
dependiendo de lo que haya dentro de ella.
En este ejemplo, hemos configurado
el ancho de cada vista hija
para que coincida con el del padre.
Puedes ver que el ancho de cada hijo
es igual
que el del ViewGroups, el padre.
Independientemente del contenido
que haya en ellas.
Esos valores pueden aplicarse también
a la altura de cada vista.
En este ejemplo, hemos fijado
la altura de la TextView hija a 200dp.
Si el contenido es más alto,
correremos el riesgo
de que el contenido aparezca cortado.
En este ejemplo,
hemos configurado la TextView hija
para que se ajuste
al contenido wrap_content.
Así, se mostrará
todo el contenido en pantalla
y no habrá ninguna parte cortada,
porque el tamaño de la TextView
depende del contenido que haya en ella.
En este ejemplo, hemos configurado
la altura de cada vista hija
para que coincida
con la del padre match_parent.
Así, la vista hija
es igual de alta que la de su padre,
independientemente
del contenido que haya en ella.
Vamos a abrir el visor XML
para intentar ser
como nuestros padres en el código.
Encontrarás un enlace
al visor XML con el código base
en las notas del formador, abajo.
En este caso,
tenemos la LinearLayout en vista root
de esta disposición porque
es la primera vista y la más exterior.
Si configuramos el ancho y la altura
a match_parent en esta vista root,
y la configuramos como
la disposición principal de nuestra app,
esta LinearLayout será tan alta
y ancha como la pantalla del dispositivo.
Puedo enseñarte cómo configurar
el fondo de esta LinearLayout
para que tenga un color no transparente.
Si pongo un gris de color de fondo
en esta LinearLayout,
verás que el gris se extiende
a lo largo y ancho del dispositivo.
¿Qué pasaría si trato de cambiar
el ancho o la altura
de estas TextViews a match_parent?
Para dejar claros
los extremos de cada vista,
voy a poner un color de fondo
para cada una de ellas.
Voy a cambiar la altura
de esta TextView a match_parent.
Recuerda que entre las dos palabras
hay una barra baja match_parent.
Ahora verás que la TextView
ocupa toda la altura del padre.
Por desgracia,
saca todo fuera de la pantalla,
así que no es lo que queremos.
Vamos a volver a poner wrap_content.
Bien.
Vamos a cambiar el ancho
a match_parent para ver lo que pasa.
El ancho de la TextView
es igual que el del padre.
Y este, a su vez,
es igual que el del dispositivo.
Si cambio también
las otras TextViews a match_parent,
verás que empiezan a ocupar
todo el ancho que ocupa su padre.
Quiero destacar otra cosa.
Cada vez que veas un atributo
que empieza por layout con algo más,
como layout_height o layout_width,
en realidad son ViewGroups
con ajustes de disposición.
Se utilizan por el ViewGroup padre
para determinar el tamaño
y la posición de las vistas.
Los demás atributos,
como el de background,
textSize o text,
dependen de la TextView
como estilo de la propia vista.
Pero estos parámetros de disposición
del GroupView dependen del padre.
Ahora te toca a ti probar con diferentes
valores de anchura y altura.
Para acceder al enlace del visor XML
con el código base,
mira las instrucciones
del formador, abajo.
Cambia los valores
de anchura y altura de cada TextView.
Puedes seleccionar un valor fijo de DP,
wrap_content o match_parent.
Recuerda que para cada vista, la anchura
y la altura no tienen que coincidir.
Cuando estés,
marca este recuadro para continuar.
On a donc préparé
la liste des invités à la fête.
>> Attends, c'est ça la liste
des invités à l'anniversaire, Katherine ?
>> Oui.
>> J'espère être sur cette liste.
>> Ouais, c'est à envisager.
>> Aouh. Je me sens
tout petit, tout à coup.
>> En parlant de « petit »,
parlons un peu des dimensions
des vues à l'écran.
>> Oh, c'est quand on a fixé la largeur
et la hauteur avec les dp, hein ?
>> Oui, la largeur et la hauteur.
On aurait aussi pu avoir
wrap_content de la vue.
>> Oui c'est l'étrange formule
pour dire que la vue va
« enlacer le contenu »
donc si le contenu grossit,
la vue aussi et
si le contenu rétrécit, la vue aussi.
>> Oui, et il existe
une troisième valeur, « match_parent ».
>> Ça fait un peu étrange.
Ça sonne comme le nom d'un site de
rencontres pour parents sans conjoints.
>> Pas tellement.
match_parent veut dire que la vue sera
aussi large ou longue que la vue parente.
>> Oh, c'est logique.
Je suis une vue, j'ai un père,
et j'aurais donc la même carrure
et la même taille
que mon père.
Ok.
>> Exactement. Donc pour résumer,
les différentes valeurs pour dimensionner
une vue sont la larg--une valeur fixe
de dp en largeur ou en hauteur.
>> Voilà. On peut aussi
avoir wrap_content.
Et la prochaine
qu'on va essayer est…
>> match_parent.
Voici des exemples pour voir en quoi
différentes largeurs de vues filles
dans une disposition linéaire peuvent
impacter l'interface utilisateur finale.
Dans cet exemple, on a réglé chaque vue
enfant avec une largeur fixe de 200 dp.
Si le contenu d'une vue
dépasse la largeur de 200 dp,
on cours le risque de tronquer
du contenu comme ici.
Dans cet exemple, on a réglé la largeur
de chaque vue fille à wrap_content.
Ceci affiche
tout le contenu,
mais la largeur d'une vue varie beaucoup
suivant ce qu'elle peut contenir.
Dans cet exemple, chaque vue fille
a une largeur de valeur match_parent.
On voit ici que les vues enfants
ont la même largeur de la vue parente,
quel que soit le contenu
de la vue enfant.
On peut appliquer les mêmes valeurs
à la hauteur height de chaque vue.
Dans cet exemple, on a réglé la hauteur
de cette vue enfant à 200 dp.
Si le contenu de la vue
est plus grand qu'elle,
on cours alors le risque
de tronquer une partie du contenu.
Dans cet exemple, on a réglé la hauteur
de la TextView enfant à wrap_content.
Ainsi le contenu sera affiché
à l'écran sans
rien tronquer parce que
la taille de la TextView dépendra
de son contenu.
Dans cet exemple, on règle la hauteur
de la TextView enfant à match_parent.
Ainsi, la vue fille sera
aussi grande que la vue parente,
quel que soit son contenu.
Lançons maintenant le Visualiseur XML et
essayons d'être plus comme
nos parents ; dans le code.
Un lien vers le Visualiseur XML
vous est fourni avec du code de départ
dans les consignes ci-dessous.
Dans notre cas, LinearLayout
est la « vue racine » de
notre disposition car c'est
la première et plus externe des vues.
Si on règle la largeur et la hauteur
de la vue racine sur match_parent,
et qu'on en fait la disposition
principale de l'application,
alors cette LinearLayout aura
les dimensions de l'écran de l'appareil.
Je peux vous le montrer en passant
le fond de cette disposition linéaire
sur une couleur
autre que transparente.
Si je règle la couleur de fond
de LinearLayout sur gris,
on voit que ce gris prend toute la
largeur et toute la hauteur de l'écran.
Qu'arriverait-il
si je changeais la largeur
et la hauteur de ces TextViews
à match_parent ?
Pour mieux visualiser
les bords de chaque vue,
je vais mettre un fond à chaque vue.
Je vais maintenant changer la hauteur
de cette TextView à match_parent.
Au fait, ça s'épelle
match, tiret bas, parent.
On remarque que cette TextView occupe
toute la hauteur de la vue parente.
Malheureusement, elle pousse
du coup tout le reste hors de l'écran,
ce n'est pas ce qu'on veut.
Remettons donc wrap_content.
Ok.
Réglons maintenant la largeur à
match_parent pour voir.
Maintenant la TextView est aussi large
que sa vue parente, qui elle-même
est aussi large que l'écran
de l'appareil.
Si je change la valeur
des autres TextView en match_parent,
on voit qu'elles vont également prendre
toute la largeur de la vue parente.
J'aimerais aussi souligner autre chose :
chaque fois qu'on a un attribut
qui débute par « layout_ », comme
layout_height ou layout_width, il s'agit
de paramètre de disposition de groupes.
Ils servent en fait au groupe parent
de vues à déterminer la taille et
la position de ses vues.
Par comparaison, les autres attributs
comme background, textSize et
text sont gérés par la TextView
afin de se styliser elle-même.
Ces paramètres de disposition de vue
sont, eux, exploités par la parente.
À votre tour d'essayer différentes
valeurs de largeur et de hauteur.
Pour vous rendre sur le Visualiseur XML
avec un code de départ,
lisez les consignes ci-dessous.
Changez les valeurs de largeur
et de hauteur de chaque TextView.
Vous pouvez fixer la valeur en dp,
ou mettre wrap_content ou match_parent.
N'oubliez pas que la largeur et la hauteur
ne sont pas forcés d'être de même valeur.
À la fin, cochez cette case
pour la suite.
Sejauh ini kita telah membuat
daftar tamu.
Tunggu, ini daftar tamu untuk
pesta ulang tahun kan, Catherine?
Ya.
Semoga saya ada di daftar ini.
Yah, kita harus lihat dulu.
Wow, saya jadi merasa kecil hati.
Bicara tentang kecil,
mari kita bahas ukuran tampilan layar.
Kita sudah gunakan
tinggi tetap tertulis, yaitu dp, kan?
- Ya, lebar dan tinggi.
- Benar.
Kita juga bisa atur wrap_content tampilan.
Benar, cara yang aneh mengatakan bahwa...
...tampilannya akan menyesuaikan ruangnya.
Jika ruangnya besar,
tampilan membesar. Dan sebaliknya.
Ya, dan sebenarnya ada
yang ketiga yang bernama
match_parent.
Kedengarannya agak aneh.
Kedengarannya seperti situs kencan
untuk orangtua tunggal.
Tidak juga.
Match_parent maksudnya tampilan
akan selebar atau setinggi induknya.
Oh, itu masuk akal.
Saya adalah tampilan, saya punya orangtua.
Dan... lebar dan tinggi saya
akan sama dengan orangtua saya.
Tepat, jadi untuk menyimpulkan,
beragam nilai yang bisa Anda atur
untuk ukuran tampilan adalah...
...dp tetap untuk lebar dan tinggi.
Tepat. Anda juga bisa
lakukan wrap_content.
Selanjutnya yang akan kita coba
adalah match_parent.
Inilah beberapa contoh cara mengatur
lebar yang berbeda pada tampilan anak
di LinearLayout yang dapat
mempengaruhi hasil antarmuka.
Di contoh ini kami atur tiap tampilan anak
untuk punya lebar tetap 200dp.
Jika ruang di dalam tiap tampilan
lebih besar dari 200dp,
maka Anda berisiko memotong
beberapa muatannya seperti ini.
Pada contoh ini kami atur lebar
tiap tampilan anak menjadi wrap_content.
Sekarang semua muatannya pas,
tapi lebar tiap tampilannya beragam
tergantung yang ada dalam tiap tampilan.
Pada contoh ini, kami atur lebar
tiap tampilan anak menjadi match_parent.
Sekarang Anda lihat bahwa lebar tiap anak
selebar induk kelompok tampilannya.
Terlepas isi di dalamnya.
Sekarang nilai yang sama itu juga bisa
diaplikasikan untuk tinggi tiap tampilan.
Pada contoh ini kami atur
tinggi TextView anak 200dp.
Jika isi di dalamnya lebih tinggi,
maka ada risiko muatannya terpotong.
Pada contoh ini, kami atur tinggi
tampilan teks anak supaya wrap_content.
Dengan begitu semua muatan
akan terlihat pada layar
dan tak ada yang terpotong,
karena ukuran TextView
bergantung dari muatan di dalamnya.
Pada contoh ini, kami atur tinggi
TextView anak menjadi match_parent
Dengan begitu tampilan anak
setinggi orangtuanya,
terlepas konten di dalamnya.
Mari buka XML Visualizer
dan coba membuat kode
yang lebih mirip induknya.
Kami berikan tautan ke XML Visualizer
dengan beberapa kode awal
dalam catatan instruktur di bawah.
Pada kasus ini, LinearLayoutnya
adalah tampilan pokok dari tata letaknya
karena ini adalah tampilan pertama
dan yang paling luar.
Jika kita atur match_parent untuk lebar
dan tingginya dari tampilan pokoknya,
dan kita atur ini sebagai
tata letak utama aplikasi kita,
maka LinearLayout ini akan
setinggi dan selebar layar pada perangkat.
Saya bisa tunjukkan dengan mengatur
latar LinearLayout ini
menjadi warna yang tidak transparan.
Jika saya pasang warna latar
abu-abu pada LinearLayout ini,
Anda bisa lihat bagaimana abu-abunya
menjadi penuh pada layar perangkat.
Nah, apa yang terjadi jika saya ubah
lebar atau tinggi tampilan teks
menjadi match_parent?
Untuk memperjelas
di mana ikatan tiap tampilannya
saya akan atur
warna latar di tiap tampilan.
Sekarang saya akan ubah tinggi
tampilan teks menjadi match_parent.
Omong-omong, ejaannya
match, garis bawah, parent.
Sekarang Anda lihat bahwa TextView ini
memakan tinggi penuh induknya.
Sayangnya, ia menyingkirkan
semuanya dari layar.
Kita tak menginginkan itu.
Jadi mari ubah kembali
menjadi wrap_content.
Baik.
Mari kita ubah lebarnya menjadi
match_parent dan lihat yang terjadi.
Sekarang lebar TextViewnya
selebar induknya,
yang juga menjadi
selebar layar perangkatnya.
Jika saya ubah TextView lain
menjadi match_parent,
Anda bisa lihat itu juga mulai
memakan lebar penuh induknya.
Saya juga mau bahas satu hal lagi.
Tiap kali Anda melihat atribut
yang berawal dengan garis bawah,
seperti Layout_height dan Layout_width,
ini sebenarnya adalah
parameter tata letak kelompok tampilan.
Ini digunakan kelompok tampilan induk
untuk menentukan
ukuran dan posisi tampilan ini.
Sementara itu, atribut lain seperti
latar, ukuran teks dan teks
ditangani oleh TextView untuk
mengatur tampilannya sendiri.
Tapi parameter tata letak
kelompok tampilan ini
ditangani oleh induknya.
Sekarang giliran Anda mencoba
berbagai nilai lebar dan tinggi.
Untuk tautan ke XML Visualizer
dengan beberapa kode awal,
lihat catatan instruktur di bawah.
Coba ubah nilai lebar dan tinggi
untuk tiap TextView.
Anda bisa atur nilai dp tetap,
wrap_content, atau match_parent.
Ingatlah untuk tiap tampilan,
nilai lebar dan tingginya tak perlu cocok.
Jika sudah, centang untuk melanjutkan.
これまでパーティのお客リストを
作ってきました
- 誕生パーティ用のお客リストだね?
- ええ
僕がリストに入ってるといいけど
それは後で分かるわ
肩身が狭いなぁ
狭いと言えば
画面のビューのサイズの話をしましょう
固定の高さを使ったね
dp だね
ええ 幅と高さよ
ビューに wrap_content も設定できるわ
それは変な言い方だね
ビューがコンテンツを包み込むって
じゃコンテンツが大きくなれば
ビューも大きくなり
コンテンツが小さくなれば
ビューも小さくなる
実は第3に match_parent というのもあるの
それはちょっと変だね
片親たちの出会い系サイトみたいだ
そうでもないわ
match_parent の意味はビューの幅又は
高さが親と同じになることよ
じゃ分かる
僕はビューで 親がいて
僕の幅と高さが親と同じになるんだ
その通りよ まとめると
ビューのサイズに設定できる
様々な値は 幅です
幅と高さの固定dp
wrap_content もできる
次に試すのは
match_parent です
ここではいくつか例をあげ
リニアレイアウトの子ビューに
色々な値を設定して
最後のUI にどう影響するか見ましょう
この例では各子ビューに
200 dp の固定幅を設定します
各ビュー内のコンテンツが
200 dp を超えると
こんな風にコンテンツがいくらか
切れる危険があります
この例では各子ビューに
幅の wrap_content を設定しました
すると全コンテンツが表示されますが
各ビューの幅が その中のものに基づいて
変わります
この例では各子ビューの幅を
match_ parent に設定しました
今度は各子どもの幅は
その中のコンテンツに関わりなく
親のビューグループと同じ幅になります
それらの同じ値は各ビューの高さにも
適用できます
この例では この子テキストビューの
高さを200 dp に設定しました
その中のコンテンツがそれより高ければ
コンテンツがいくらか切れる危険があります
この例では子テキストビューの高さを
wrap_content に設定しました
こうすると画面に全コンテンツが表示されー
何も切れないでしょう
なぜならテキストビューのサイズは
その内部のコンテンツに依るからです
この例では 子テキストビューの高さを
match_parentに設定しました
そうすると子ビューは
その中のコンテンツに関わりなく
親自身と同じ高さです
では XML visualizer を開きー
コードにある私達の親に
もっと近づけなさい
スターターコード付 XML Visualizer への
リンクを
下の講師ノートにあげておきます
この場合 リニアレイアウトは
このレイアウトのルートビューです
それは最初で最外部のビューだからです
このルートビューの幅と高さに
match_parent を設定しー
これをアプリのメインレイアウトに設定すると
このレイアウトは端末画面と
同じ高さと幅になります
このリニアレイアウトの背景を
不透明色に設定して
お見せしましょう
このリニアレイアウトの背景を灰色に
設定すると
灰色が端末の幅と高さのいっぱいに
広がるのが分かります
これらのテキストビューの幅か
高さを match_parent に変えると
どうなるでしょう?
各ビューの境界がはっきりするようにー
ビューの各々に背景色を設定しますね
ではこのテキストビューの高さを
match_parent に変えます
ところでmatch_parentと綴りなさい
今度はこのテキストビューが親の高さ
いっぱいを占めるのがわかります
残念ながら これは他の全てを画面から
押し出すので
これは望みませんね
だから wrap_ content に戻しましょう
では 今度は幅をmatch_parent にして
どうなるか見ましょう
今度は テキストビューの幅は
親と同じ幅になり 同様に
端末画面と同じ幅になります
他のテキストビューも
match_parent に変えると
親の幅いっぱいを占めて行くのがわかります
もう一つ指摘しておきましょう
layout_heightとかlayout_ widthのように
毎回レイアウト下線で始まる属性を見ます
これらは実はビューグループレイアウト
パラメータです
これらは親ビューグループに使われー
これらのビューのサイズと位置を
決めます
一方 背景 テキストサイズ
テキストのような他の属性は
それ自身のビューをスタイルする
テキストビューによって処理されます
しかしこれらのビューグループレイアウト
パラメータは親によって処理されます
では 様々な幅と高さの値にする
あなたの番です
スターターコード付きXML Visualizerへの
リンクは
下の講師ノートを参照しなさい
各テキストビューの幅と高さの値を
変えなさい
固定 dp 値か wrap-contentか
match_parent を設定できます
各ビューで 幅と高さの値は一致する必要は
ありません
終わったら
ボックスにチェックして次へ行きなさい
파티용 게스트 리스트를
만들어 봤습니다
>>잠시만요, 이게 생일파티용
게스트 리스트인가요, 캐서린?
>>그런데요
>>제가 그 리스트에 있으면 좋겠네요
>>한 번 봐야겠네요
>>와, 제가 정말 작게 느껴지네요
>>작다고 하니까 말인데요
화면의 View 크기를 이야기 해볼까요
>>고정 높이인 DP를 써 왔죠?
>>네, 넓이와 높이죠
View로 내용을 설정하고
감쌀 수도 있습니다
>>네, View가 스스로 콘텐츠을
감싼다니 신기하네요
콘텐츠가 커지면 View가 커지고
콘텐츠가 작아지만
View가 작아집니다
>>네, match_parent라는
세 번째가 있습니다
>>좀 이상하게 들리네요
마치 한 부모를 위한
데이트 사이트처럼 들려요
>>그렇지는 않아요
match_parent는 View가 Parent만큼
넓어지거나 커지는 것을 말합니다
>>아, 그렇네요
제가 View이고 Parent가 있으면
제 넓이와 높이는 저의
Parent와 같아지는 거군요.
>>바로 그거에요
요약하면, View의 크기로
설정하는 값이 넓이입니다
넓이와 높이의 고정 DP이죠
>>맞아요. wrap_content를 해도 되죠
다음에 해 볼 것은
>>match_parent이죠
아이 View를 리니어 레이아웃에서
다른 넓이로 설정하는 것이
최종 사용자 인터페이스에 어떻게
영향을 주는지에 관한 예시를 보여드릴게요
이 예시에서 각 아이 View는
200DP 고정 넓이로 설정했습니다
각 View 안의 콘텐츠가
200DP보다 크면
이렇게 콘텐츠가 잘릴
우려가 있습니다
이 예에서는 아이 View를
wrap_content 넓이로 설정했습니다
이제 모든 콘텐츠가 보이지만
각 View의 넓이가 어디에
들어 있느냐에 따라 다르게 나옵니다
이 예에서는 각 아이 View를
match_parent로 설정했습니다
이제 각 아이의 넓이가 Parent ViewGroup과
같은 넓이로 보일 겁니다
그 안의 콘텐츠와 관계 없이 말이죠
같은 값이 각 View의 높이에도
적용될 수 있습니다
이 예에서는 아이 TextView 높이를
200DP로 설정했습니다
콘텐츠가 그 보다 크면
컨텐츠가 잘릴 우려가 있죠
이 예에서는 아이 TextView 높이를
wrap_content로 설정했습니다
그럼 화면에 모든 콘텐츠가 나오고
TextView가 그 안의 콘텐츠에 연동되기
때문에 아무것도 잘리지 않습니다
이 예에서는 아이 TextView 높이를
match_parent로 설정했습니다
그럼 아이 TextView가 Parent와
같은 높이로 나옵니다
그 안의 콘텐츠와 상관없이요
이제 XML비쥬얼라이저를 열어서
코드에서 parent와 같이 해 봅시다
아래 강의 노트에
초보자용 코드와 함께
XML비쥬얼라이저 링크를
제공해 드립니다
여기에서 리니어 레이아웃은
기본 View가 되는데
그것이 가장 처음이자
중요한 View이기 때문입니다
이 기본 View의 넓이와 높이를
match_parent로 설정하고
이것은 우리 앱의
주요 레이아웃으로 설정하면
이 리니어 레이아웃은 기기화면에
맞는 넓이와 높이가 될 겁니다
리니어 레이아웃을
불투명 색 배경으로 설정해서
보여드릴 수 있습니다
리니어 레이아웃에
회색 배경을 설정하면
기기에 넓이와 높이에 꽉 차게
회색이 되는 걸 볼 수 있습니다
이제 이 TextView의 넓이와 높이를
match_parent로 바꾸면
어떻게 될까요?
각 View의 주변을 분명히 하기 위해
각 View의 배경색을 설정하겠습니다
이 TextView의 높이를
match_parent로 바꾸겠습니다
그런데, 이건
match_parent로 써야 합니다
이 TextView가 parent의
총 높이에 맞게 나옵니다
안타깝게도 이것은 모든 것을
화면에 꽉 차게 만듭니다
그런 것은 원치 않죠
그러니 wrap_content로
다시 바꿉시다
좋아요
넓이를 match_parent로 바꾸고
어떻게 되나 보겠습니다
TextView의 넓이가 parent와
같은 넓이가 되었는데
그것이 다음에
기기 화면과 같은 넓이입니다
다른 TextView를
match_parent로 바꾸면
이것도 parent와 같은
넓이로 꽉 차기 시작합니다
한 가지 더 말씀드리고 싶은데요
layout_로 생긴 계수를 보시면
layout_height나 layout_width같은 이것은
실제로 이것은 ViewGroup 레이아웃 변수를 말합니다
이는 View의 배치와 크기를 결정하는
parent ViewGroup에 의해 사용됩니다
그 동안, 배경, 텍스트 크기,
텍스트 같은 다른 계수들은
View의 스타일의 관점에서
TextView가 다룹니다
이 ViewGroup 레이아웃
변수는 parent가 다룹니다
이제 여러분이 다른 넓이와
높이 값을 써 볼 차례입니다
초보자용 코드가 있는
XML비쥬얼라이저 링크는
아래의 강의노트를 보세요
각 TextView의 넓이와
높이 값을 바꿔 보세요
고정 값, wrap_content,
match_parent를 설정할 수 있습니다
각 View, 넓이와 높이 값은
같을 필요는 없습니다
다 마치시고 다음으로 가려면
이 네모를 클릭하세요
Estamos fazendo a
lista de convidados da festa.
Esta é a lista de convidados para
a festa de aniversário?
- Certo, Katherine?
- Sim.
Espero que eu esteja nesta lista.
Bem, precisamos ver isso.
Puxa, eu me sinto bem pequeno agora.
Bem, falando sobre pequeno,
Vamos falar sobre tamanho
de views em uma tela.
Nós usámos a altura escrita fixa.
- Que é o dp, certo?
- Sim, a largura e a altura.
- Muito bem.
- E poderíamos também
definir wrap_content na view.
Que é uma forma estranha de dizer
que a view irá se modelar
em torno do conteúdo.
O conteúdo cresce,
a view também cresce.
O conteúdo diminui,
a view....
Sim, tem também um terceiro,
chamado de match_parent.
Isso soa um pouco estranho.
Soa a site amoroso para pais solteiros.
Não é bem assim.
match_parent significa que a view será
tão larga ou tão alta quanto o pai.
Isso faz sentido.
Eu sou uma view, tenho um pai,
e minha largura e altura
serão como as de meu pai.
- Ok.
- Exato, resumindo,
os diferentes valores que pode definir
no tamanho de uma view são:
dp fixo para a largura e altura.
- Correto.
- Também pode usar wrap_content.
E o próximo que nós vamos
experimentar... match_parent.
Aqui estão alguns exemplos de como
views filhas de diferentes larguras
em um LinearLayout podem afetar a UI final.
Neste exemplo, definimos cada view filha
para ter uma largura fixa de 200 dp.
Se o conteúdo de cada view
for maior que 200 dp,
então você corre risco de cortar
algum conteúdo como este.
Neste exemplo, definimos a largura de cada
view filha para wrap_content.
Agora todo o conteúdo é mostrado,
mas a largura de cada view realmente varia
conforme o conteúdo de cada uma.
Neste exemplo, definimos a largura de cada
view filha para match_parent.
Agora pode ver que a largura de cada filha
é tão larga quanto o ViewGroup pai,
independentemente de seu conteúdo.
Esses mesmos valores também podem
ser aplicados à altura de cada view.
Neste exemplo, definimos a altura
da TextView filha para 200 dp.
Se o conteúdo for mais alto que isso,
então corre risco de cortar
parte do conteúdo.
Neste exemplo, definimos a altura
da TextView filha para wrap_content.
Desse modo, todo o conteúdo
será exibido na tela
e nada será cortado porque o tamanho da TextView
é dependente de seu conteúdo.
Neste exemplo, definimos a altura da
TextView filha para ser match_parent.
Desse modo, a view filha será
tão alta quanto o pai,
independentemente de seu conteúdo.
Vamos abrir agora o visualizador XML
e entar ser mais como nossos pais, no código.
Estamos fornecendo um link para o
visualizador XML e algum código inicial
nas notas do instrutor abaixo.
Neste caso, o LinearLayout é a view raiz
porque é a primeira view e a mais exterior.
Se definirmos a largura e a altura
desta view raiz como match_parent,
e definirmos este como o principal
layout do nosso app,
então o LinearLayout aqui será tão alto e
largo quanto a tela do dispositivo.
Posso mostrar isso definindo
o fundo do LinearLayout
para uma cor não transparente.
Se eu definir a cor cinza para
o fundo deste LinearLayout
então poderá ver como a cor cinza se estende
a toda a largura e altura do dispositivo.
O que acontece se eu
tentar mudar a largura e altura
destas TextViews para match_parent?
Para deixar clara a delimitação de cada view,
Vou definir uma cor de fundo
para cada uma das views.
Agora vou mudar a altura desta
TextView para ser match_parent.
A propósito, escreve-se "match_parent".
Agora você pode ver que esta
TextView ocupa toda a altura do pai.
Infelizmente empurra tudo o resto
para fora da tela,
e realmente nós não queremos isso.
Então vamos mudar de volta para wrap_content.
Feito, agora vamos mudar a largura para
match_parent e ver o que faz.
Agora a TextView é tão larga quanto o pai,
que, por sua vez, é tão largo
quanto a tela do dispositivo.
Se eu também mudar as outras
TextViews para match_parent,
pode ver que também começam
a ocupar toda a largura do pai.
Gostaria de fazer mais uma observação.
Cada vez que você vê um atributo
que comece por layout_,
como layout_height ou layout_width,
na verdade está vendo parâmetros
de layout de ViewGroups.
Estes são usados pelo ViewGroup pai para
determinar o tamanho e a posição destas views.
Enquanto isso, os outros atributos como
fundo, tamanho de texto, texto,
são tratados pela TextView
para estilizar sua própria view.
Mas estes parâmetros de layout
do ViewGroup são tratados pelo pai.
Agora é sua vez de tentar
outros valores de largura e altura.
Para o link do visualizador XML
com código inicial,
ver as notas do instrutor abaixo.
Tente mudar a largura e
altura de cada TextView.
Pode definir um valor dp fixo,
wrap_content ou match_parent.
Os valores de largura e altura não
precisam ser iguais para cada view,
Quando terminar,
marque esta caixa para continuar.
Я составляла список гостей для вечеринки.
— Это список гостей на день рождения,
не так ли, Катерина?
— Да.
— Надеюсь, я есть в этом списке.
— Ну, надо подумать.
— Я чувствую себя неловко.
— Хорошо.
Давайте поговорим о размере
представлений на экране.
— Мы использовали фиксированную
высоту в dp, правильно?
— Да, ширину и высоту.
Мы также можем задать
обтекание контента для представления.
— Да, странный способ
сказать, что представление должно
охватывать весь контент.
Контент растет — растет и представление,
контент маленький —
представление уменьшается.
— Да, есть и третий вариант:
соответствие родительскому представлению.
— Кажется немного странным.
Звучит как сайт знакомств для
одиноких родителей.
— Не совсем.
Это означает, что
представление будет совпадать
по ширине или высоте с родительским.
— Да, это имеет смысл.
Я представление, у меня есть родитель,
и моя ширина и высота будут такими же,
как у родительского представления.
— Точно. Давайте обобщим.
Различные значения, которые можно
задать для ширины представления,
фиксированные в dp для ширины и высоты.
— Правильно.
Также можно использовать wrap_content.
А еще мы собираемся попробовать значение
match_parent.
Вот несколько примеров, как различные
настройки ширины дочерних представлений
в линейной разметке могут влиять
на конечный интерфейс пользователя.
В этом примере мы задаем
для каждого дочернего
представления фиксированную ширину 200 dp.
Если контент в каждом
представлении больше 200 dp,
вы рискуете обрезать его часть, как здесь.
В этом примере мы задаем
для каждого дочернего представления
ширину wrap content.
Теперь показан весь контент,
но ширина каждого представления
изменяется в зависимости от его контента.
В этом примере мы задаем для ширины
значение match parent.
Теперь ширина дочерних представлений
равна ширине родительской группы.
Независимо от контента внутри них.
Такие же значения можно применить
и для высоты представлений.
В этом примере мы задаем для высоты
дочернего представления значение 200 dp.
Если контент в представлении
выше этого значения,
вы рискуете обрезать часть контента.
В этом примере мы задаем
для высоты дочернего
представления значение wrap content.
Таким образом, весь контент будет
показан на экране,
и никакая часть не обрезается, поскольку
размер текстового представления зависит
от контента внутри него.
В этом примере мы задаем
для высоты дочернего представления
значение match parent.
Дочернее представление совпадает
по высоте с родительским,
независимо от контента внутри него.
Давайте откроем XML Visualizer
и попробуем больше походить на наших
родителей в этом коде.
Мы предоставили ссылку на XML Visualizer
с начальным кодом
в примечаниях инструктора ниже.
В данном случае LinearLayout —
это корневое представление разметки,
потому что оно первое и внешнее.
Если задать значение
match_parent для ширины и высоты
этого корневого представления и задать его
как основную разметку для приложения,
то эта линейная разметка
будет соответствовать высоте
и ширине экрана устройства.
Чтобы показать это, я задам
для фона этой разметки
непрозрачный цвет.
Если я задам серый цвет фона
для этой разметки,
вы увидите, как серый цвет занимает
всю ширину и высоту экрана.
Что произойдет, если я изменю ширину или
высоту этих текстовых
представлений на значение match parent?
Чтобы ясно видеть
границы каждого представления,
я задам цвет фона для каждого из них.
Теперь изменяю высоту этого
текстового представления на match parent.
Пишется как match_parent.
Видим, что теперь это представление
соответствует по высоте родительскому.
К сожалению, оно вытолкнуло
с экрана все остальное,
так что нам это не нужно.
Давайте вернемся к значению wrap content.
Хорошо.
Теперь изменим значение ширины на
match parent и посмотрим на результат.
Теперь ширина текстового
представления равна
ширине родительского,
которое в свою очередь
совпадает по ширине с экраном устройства.
Если я изменю для других представлений
значения на match_parent,
они тоже будут соответствовать
по ширине родительскому.
Хочу обратить внимание еще на один момент.
Когда вы видите атрибут, который
начинается с layout и подчеркивания,
например layout_height или layout_width,
это атрибуты разметки
группы представлений.
Они используются родительской группой
представлений для определения размера
и расположения этих представлений.
А другие атрибуты,
такие как фон, размер шрифта и текст,
определяют вид отдельного представления.
Но эти параметры разметки группы
представлений обрабатываются родительским.
Теперь ваш черед поэкспериментировать
с различными значениями ширины и высоты.
Ссылка на XML Visualizer
с начальным кодом приведена
в примечаниях инструктора ниже.
Попробуйте изменить значения ширины и
высоты каждого из текстовых представлений.
Можно задать фиксированное значение в dp,
значение wrap_content или match_parent.
Помните, что значения ширины и
высоты не обязательно должны совпадать.
После завершения
установите этот флажок, чтобы продолжить.
Parti için misafir listesi yapıyorduk.
Doğumgünü partisinden bahsediyorsun
değil mi Catherine?
Evet.
Umarım listedeyim.
Bakacağız artık.
Gerçekten küçük düşmüş hissettim.
Küçük demişken
ekrandaki görüntü boyutları
hakkında konuşalım.
Sabit yükseklik kullanmıştık
değil mi, dp olan?
Evet, genişlik ve yükseklik.
Ayrıca içeriği sar (wrap_content)
olarak ayarlayabiliriz.
Ki bu görüntünün kendisini
içeriğin etrafına sarmasının
garip bir şekilde söylenişidir.
Yani içerik büyürse,
görüntü de büyür, içerik küçükse
görüntü de küçülür.
Evet ve aslında bir üçüncü şey daha var,
adı da match parent.
Bu biraz garip görünüyor.
Kulağa yalnız anne babalar için
randevu sitesiymiş gibi geliyor.
Pek sayılmaz.
Match parent demek görüntü
üst öğe kadar geniş veya uzun olur demek.
Mantıklı.
Ben bir görüntüyüm,
benim bir üst öğem var ve
genişlik ve yüksekliğim de üst öğem
ile aynı olacak.
- Tamam.
- Aynen, yani özetlersek,
bir görüntünün boyutu için ayarlayacağınız
farklı değerler genişliktir.
Genişlik ve yükseklik için sabit dp.
Doğru, ayrıca wrap_content de yapabilirsin.
Ve deneyeceğimiz diğer şey ise
match_parent.
LinearLayout'ta alt görüntüde farklı
genişlik değerlerin son kullanıcı
arayüzünü nasıl etkileyebileceğine
dair birkaç örnek verelim.
Bu örnekte her alt görüntüyü
sabit 200 dp değerine ayarlıyoruz.
Eğer her görüntüdeki içerik
200 dp'den büyük ise
o zaman bunun gibi bazı
içeriği kırmayı göze almalısınız.
Bu örnekte, her alt görüntü genişliğini
wrap_content olarak ayarlıyoruz.
Şimdi tüm içerik gösteriliyor fakat
her görüntünün genişliği içeriğine
olana bağlı olarak değişiyor.
Bu örnekte, her alt görüntü genişliğini
match_parent olarak ayarlandı.
Gördüğünüz gibi, her alt öğenin genişliği
üst görüntü grubu kadar oluyor.
İçeriğine bağlı değil.
Bu aynı değerler her görüntü
yüksekliği için de uygulanabilir.
Bu örnekte bu alt görünümün
yüksekliğini 200 dp olarak ayarladık.
Eğer içeriği ondan uzunsa
o zaman içeriğin bir kısmının
kırpılması riski bulunuyor.
Bu örnekte, bu alt görünümün
yüksekliğini wrap_content ayarladık.
Böylece tüm içerik ekranda gösterilecek ve
hiçbir kırpma olmayacak çünkü
metin görünümünün boyutu
içeriğine bağlı olacak.
Bu örnekte, bu alt görünümün
yüksekliğini match_parent ayarladık.
Böylece alt görünüm üst öğe
yüksekliğinde olacak ve
içeriğine bağlı olmayacak.
Şimdi XML görüntüleyiciyi açalım ve
kodlarken daha çok anne-babamız
(parents) gibi olmaya çalışalım.
Aşağıdaki notlarda başlangıç kodu ile birlikte
XML görüntüleyici linkini veriyoruz.
Bu durumda, LinearLayout
bu layout'un kök görünümü
çünkü ilk ve en dıştaki görüntü bu.
Eğer kök görünüm genişlik ve
yüksekliğini match_parent
ve bunu uygulamanın
ana layout'u ayarlarsak
bu LinearLayout cihaz ekranı kadar
uzun ve geniş olacak.
Bunu LinearLayout arkaplanını
transparan olmayacak şekilde
ayarlayarak gösterebilirim.
Bu LinearLayout arkaplanını gri yapsam,
grinin cihaz genişlik ve yüksekliğini
sardığını görebilirsiniz.
Şimdi, bu TextView'ların
genişlik veya
yüksekliğini match_parent olarak
değiştirmeyi denersem ne olur?
Her bir görüntünün sınırlarını görmek için
her görüntü için bir arkaplan ayarlayacağım.
Şimdi bu TextView yüksekliğini
match_parent olarak değiştireceğim.
Bu arada, match altçizgi parent olarak yazın.
Gördüğünüz gibi bu TextView
üst görünümün genişliğini aldı.
Ne yazık ki, her şeyi ekranın dışına atar
yani bunu istemeyiz.
O zaman onu tekrar wrap_content yapalım.
Tamam.
Şimdi genişliği match_parent yapalım
ve ne yaptığını görelim.
Şimdi, TextView üst görüntü kadar geniş
ki o halde cihaz ekranı kadar geniş olacak.
Eğer diğer TextView'ları da
match_parent olarak değiştirirsem
onun da üst görünümün genişliğini
aldığını görebilirsiniz.
Bir şeyi daha belirtmek istiyorum.
Layout_ ile başlayan bir öznitelik görürseniz
layout_height veya layout_width gibi,
bunlar görüntüleme grubu layout parametreleridir.
Bunlar bu görüntülerin boyut
ve konumunu belirlemek için
üst görüntü grubu tarafından kullanılır.
Bu arada, arkaplan, metin boyutu
ve metin gibi diğer öznitelikler
kendi görüntüsünü tasarım açısında
TextView tarafından kontrol ediliyor.
Fakat bu grup layout parametreleri
üst öğe tarafından halledilir.
Farklı genişlik ve yükseklik değerleri
deneme sırası şimdi sizde.
Bazı başlangıç kodları ile XML
görüntüleyici linki için
aşağıdaki ders notlarına bakın.
Her TextView için genişlik ve yükseklik
değerlerini değiştirmeyi deneyin.
Sabit bir dp değeri belirleyebilir,
wrap_content veya match_parent yapabilirsiniz.
Unutmayın ki, her görüntü için, genişlik
ve yükseklik değerleri eşleşmek zorunda değil.
Bitirdiğinizde, devam etmek için
bu kutuyu işaretleyin.
Ta đang làm một danh sách khách mời
cho bữa tiệc.
Có phải là danh sách khách mời
cho tiệc sinh nhật phải không Catherine?
Đúng vậy.
Tôi hy vọng mình
có tên trong danh sách này.
Ta sẽ xem xét điều đó sau.
Tôi cảm thấy cơ hội khá nhỏ nhoi.
À tiện nói về nhỏ,
hãy nói về kích thước
các view trên một màn hình.
Ồ, ta đã sử dụng chiều dài văn bản
cố định dp, phải không?
Vâng, chiều rộng và chiều dài.
Và ta cũng có thể thiết lập
gói nội dung bằng các view.
Phải, đó là một cách lạ để các view
bao quanh nội dung.
Nội dung hiển thị rộng hơn,
các view lớn hơn, nội dung hiển thị nhỏ
các view cũng nhỏ.
Vâng, và thực sự chỉ có một phần ba
trong số đó giống view gốc.
Có vẻ hơi lạ nhỉ.
Có vẻ giống như một trang web hẹn hò
dành cho các phụ huynh đơn thân.
Không hẳn vậy.
Giống view gốc có nghĩa là view con đó
sẽ rộng hoặc dài giống view gốc.
Ồ, tôi hiểu rồi.
Tôi là một view, tôi có mẹ,
chiều rộng và chiều dài của tôi
sẽ giống như mẹ của tôi.
Được rồi.
Chính xác, vậy tóm lại là,
các giá trị bạn có thể thiết lập
cho kích thước của một view là chiều rộng.
dp cố định cho chiều rộng và chiều dài.
Đúng vậy,
bạn cũng có thể làm wrap_content.
Và kế tiếp chúng tôi
sẽ thử thực hiện
match_parent.
Dưới đây là một số ví dụ về việc thiết lập
độ rộng khác nhau của các view con
trong một layout tuyến tính
ảnh hưởng đến giao diện của người dùng.
Ở ví dụ này, ta thiết lập mỗi view con
có chiều rộng cố định là 200 dp.
Nếu nội dung bên trong mỗi view
lớn hơn 200 dp.
thì bạn có nguy cơ phải bỏ bớt
một số nội dung như thế này.
Trong ví dụ này, ta thiết lập mỗi view con
với mỗi chiều rộng một wrap_content.
Giờ tất cả nội dung đã được hiển thị,
nhưng chiều rộng của mỗi view khác nhau
dựa vào nội dung bên trong chúng.
Ở ví dụ này, ta thiết lập chiều rộng
của mỗi view con giống với view gốc.
Giờ bạn thấy rằng độ rộng của mỗi view con
đã giống độ rộng view gốc.
Bất kể các nội dung bên trong của nó.
Giờ các giá trị giống nhau này có thể
áp dụng cho chiều dài của từng view.
Ở ví dụ này, ta thiết lập chiều dài
của view con này là 200 dp.
Nếu nội dung bên trong
cao hơn mức đó,
thì bạn có có thể sẽ phải
cắt bớt một số nội dung.
Ở ví dụ này, ta thiết lập chiều cao
của view con bao toàn nội dung.
Theo cách này tất cả nội dung
sẽ được hiển thị trên màn hình
không có gì cần cắt bỏ
vì kích thước của text view phụ thuộc
vào nội dung bên trong nó.
Ở ví dụ này, chúng tôi thiết lập chiều dài
của text view con giống view gốc.
Bằng cách đó view con
có chiều dài giống view gốc,
bất kể nội dung bên trong nó.
Giờ ta hãy mở visualizer XML và
cố gắng giống
các code của view gốc.
Chúng tôi cung cấp cho bạn một liên kết
đến XML visualizer với mã khởi động
trong các ghi chú hướng dẫn dưới đây.
Ở trường hợp này, LinearLayout
là view gốc của layout này
bởi vì nó là giao diện đầu tiên
và ở ngoài cùng.
Nếu thiết lập match_parent cho chiều rộng
và chiều dài của view gốc này,
và thiết lập này nó trở thành
layout chính trong ứng dụng của chúng ta,
thì layout tuyến tính này
sẽ dài và rộng như màn hình thiết bị.
Tôi có thể chỉ cho bạn thấy
bằng cách thiết lập nền
cho layout tuyến tính này
là một màu không trong suốt.
Nếu đặt một màu nền màu xám
lên layout tuyến tính này
thì bạn có thể thấy màu xám kéo dài
chiều rộng và chiều dài của thiết bị.
Bây giờ, chuyện gì sẽ xảy ra
nếu tôi thử thay đổi
chiều rộng hoặc chiều dài của text view
giống như view gốc?
Để rõ hơn về điểm giới hạn
của mỗi view,
Tôi sẽ thiết lập một nền
màu sắc trên mỗi một view.
Bây giờ tôi sẽ thay đổi chiều dài
của text view này giống với view gốc.
Tiện đây, bạn gõ luôn match_parent.
Và giờ bạn thấy rằng text view này
có chiều dài giống view gốc.
Thật không may, nó lại đẩy mọi thứ khác
ra khỏi màn hình,
và ta không muốn điều đó.
Vì vậy, hãy đổi trở lại bao toàn nội dung.
Được rồi.
Hãy thay đổi chiều rộng trùng với view gốc
và xem nó làm được những gì.
Bây giờ chiều rộng của TextView
đã giống view gốc,
và cũng giống chiều rộng
của màn hình điện thoại.
Nếu tôi thay đổi TextViews khác
thành match_parent
Bạn có thể thấy nó cũng bắt đầu
có chiều rộng giống view gốc.
Tôi cũng muốn chỉ ra một điều nữa.
Mỗi khi bạn nhìn thấy một thuộc tính
bắt đầu với đường gạch dưới,
giống như chiều dài hoặc rộng layout,
chúng là các thông số layout nhóm.
Chúng được nhóm view gốc sử dụng
để xác định kích thước và vị trí
của các view này.
Trong khi đó, các thuộc tính khác
như hình nền, cỡ chữ
và kiểu chữ được xử lý bởi các TextView
bằng cách tự tạo kiểu cho view của nó.
Nhưng những thông số layout nhóm này
được xử lý bởi các view gốc.
Giờ đến lượt bạn sẽ thử thay đổi
giá trị chiều rộng và chiều dài khác nhau.
Về các liên kết để đến XML visualizer
nơi có mã khởi tạo,
bạn hãy xem các ghi chú
hướng dẫn dưới đây.
Hãy thử thay đổi giá trị chiều rộng
và chiều dài của mỗi TextView.
Bạn có thể thiết lập giá trị dp cố định,
wrap_content, hoặc match_parent.
Nhớ rằng với từng view, giá trị chiều rộng
và dài không nhất thiết phải giống nhau.
Khi bạn thực hiện xong,
tích vào ô này để tiếp tục.
我们已经为派对写好了一个客户列表
等等 这是生日派对的列表 对吗 Catherine?
对
我真希望自己在列表里
我们来看看吧
我感觉它很小
说到小的话
我们讨论一下在屏幕上视图的尺寸
我们使用固定的高度值 就是 dp 对吗?
宽和高
我们也可以在视图中设置 wrap_content
对 一种奇怪的说法 这个视图将会根据
内容的多少来改变大小
内容变大
视图变大 内容变小 视图会变小
还有第三个 叫做 match parent
看起来有点奇怪
听起来像是给单身父母的相亲网站
并不是这样的
Match parent 的意思是这个视图和它的父视图等宽或等高
也就是说
我是视图 我有一个父视图 我的宽和高
与我的父视图一样
确实 这是总结
你设置的一系列视图的不同值就是宽度
宽和高的固定单位是 dp
对 你也可以设成 wrap_content
下一个我们要尝试的是
match_parent
这有一些关于如何在线性布局中设置子视图中不同宽
能影响最后的用户界面的例子
在示例中 我们设置每一个子视图的宽度为固定值 200dp
如果每个视图中的内容大于 200dp
你会有缺少某些内容的风险 像这样
在这个例子中 我们设置子视图的宽度为 wrap_content
现在所有的内容都显示出来了 但是
每个视图的宽度都是根据它里面的内容来改变的
在这个例子中 我们设置子视图的宽度为 match_parent
现在你能看到子视图的宽度和父 ViewGroup 的宽度一样
不管它里面的内容是什么
这些值同样适用于视图的高度
在示例中 我们设置每一个子视图的高度为固定值 200 dp
如果它的内容比这个高度值大
你就有缺少某些内容的风险
在这个示例中 我们设置子视图的高度为 wrap_content
所有的内容都会显示在屏幕上
而且不会有缺少的内容 因为 TextView 的大小
取决于里面内容
在这个示例中 我们设置子视图的高度为 match_parent
这种方式的话 子视图就会和父视图一样高
不管里面的内容是什么
现在我们打开 XML可视化工具
试试父视图中的代码
我们给你一个有起始代码的 XML 可视化工具的链接
在讲师注释下面
在这个例子中 LinearLayout 是这个布局的根视图
它是第一个和最外面的视图
如果我们把根视图的宽和高都设为 match_parent
并且我们把它设为应用的主要布局
这个线性布局和设备屏幕的大小是一样的
我给你展示一下设置线性布局的背景
为不透明颜色
如果在线性布局中 将背景设为灰色
然后你会看到 灰色延伸满整个设备屏幕
现在 如果我将这些视图的的宽和高
改为 match_parent 会发生什么?
为了使每个视图的边界更清晰
我会给每个视图设置一个背景颜色
现在 我将这个 TextView 的高设为 match_parent
顺便 你拼写一下 match_parent
你会看到这个 TextView 占据这个父视图的全部高度
不幸的是 它将屏幕上的其他东西都掩盖
我们不想这样
我们将它改回 wrap_content
好
我们将宽改为 match_parent 来看看它是什么样子
现在 TextView 的宽度和父视图一样
也就是说 和设备屏幕一样宽
如果我将其他的 TextView 也改为 match_parent
你会看到它也开始占据父视图的整个宽度
我想指出的还有一件事
每次你看到一个以 layout_ 开始的属性
像 layout_height 或者 layout_weight 它们实际上是 ViewGroup 的布局参数
父视图使用它们来决定
这些视图的大小和位置
同时 其他的属性 像背景 文字大小和文本
是由 TextView 就自己本身的样式来操作的
但是视图组参数是由父视图来操作的
现在 该你尝试设置不同的宽和高的值了
起始代码的 XML 可视化工具的链接
在教学笔记下面
试着改变每个 TextView 的宽和高的值
你可以设置固定 dp 值 wrap_content 或 match_parent
记住对于每个视图 当你做的时候 宽和高的值不必相称
点击这个复选框继续
我們已經列出了一個參加派對的
人員名單
>> 等等 這是參加生日派對的人員名單
是嗎 Catherine?
>> 是的
>> 我真的希望我也在這個名單上
>> 好的 讓我們來看一看
>> 我覺得它看起來很小
>> 說到小
讓我們來說說螢幕上的
檢視圖大小
>> 是的 我們使用的是固定文字高度
單位是dp對吧
>>是的 寬度和高度
我們稱為檢視圖
包裹文字
>> 是的 也就是說
檢視圖把文字內容
包裹在其內
當文字變大時
檢視圖也變大
內容變小時 檢視圖也變小
>> 實際上還有第三個設定
也就是match parent.
>> 這看上去似乎有點奇怪
聽上去像是為單身父母設計的
相親網站
>> 不是的
Match parent的含義是檢視圖的
寬度和高度與父級檢視圖保持一致
>> 這樣就好理解了
我是一個檢視圖 我有父級檢視圖
我的寬度和
高度將與我的父級檢視圖
保持相同
好的
>> 總而言之
你可以為檢視圖設定
不同的寬度值
寬度和高度設定為固定dp值
>> 是的
還可以設定為 wrap_content
接下來
我們要嘗試的是
>> match_parent.
這裏有一些例子
介紹怎樣為子檢視圖設定不同的寬度值
在線性版面中 這將會影響
最終的使用者介面
在這個例子中 我們可以將
每個檢視圖的寬度設定為200 dp
如果每個檢視圖中的內容
寬度大於200 DP
可能會導致一部分的內容
被剪切掉 就像這樣
在這個例子中 我們將每個子視圖的
寬度設定為wrap content.
現在 全部內容都已經顯示
但是
每個檢視圖的寬度會根據其內部的
內容發生變化
在這個例子中 我們把每個子檢視圖
的寬度設定為match parent
現在你可以看到每個子檢視圖的寬度
與父檢視圖群組相同
無論檢視圖內有多少文字
現在 可以把這些相同的設定值
用於每個檢視圖的高度
在這個例子中 我們把
每個檢視圖的高度設定為200 dp
如果檢視圖內的文字高度
大於此設定高度
一些文字可能會
被剪掉
在這個例子中 我們把子文字檢視圖的
高度設定為 wrap content
這樣 所有內容
將顯示在螢幕上 而且
不會剪掉任何內容
因為文字檢視圖的大小取決於
其內部的內容
在這個例子中 我們把子文字檢視圖
的高度設定為match parent.
這樣子檢視圖的高度
將與父檢視圖相同
無論其內部的文字有多少
讓我們打開XML檢視器
在代碼中模擬
父檢視圖
在下面的指導教程中,
我們提供一個XML檢視器連結
和一些初始代碼
在這個例子中
LinearLayout是這個版面的
根視圖 因為它是
第一個也是最外層的檢視圖
如果我們把這個根視圖
的寬度和高度設定為match_parent
我們把它設定為應用程式
的主版面
然後這個線性版面的高度和寬度
將會與設備螢幕相同
我可以展示給你看
我把這個線性版面的背景設定為
一種不透明顏色
如果我在這個線性版面上
設定一個灰色背景顏色
你可以看到灰色延伸到
設備的整個寬度和高度
現在 如果我把這些文字檢視圖的
寬度或
高度設定為match parent
將會發生什麼
為了顯示
每個檢視圖的邊界位置
我在每個檢視圖上
設定一個背景顏色
現在我把這個文字檢視圖的高度設定
更改為 match parent
順便說一下 應該寫作match_parent.
現在你看到這個文字檢視圖
占據父檢視圖的整個高度
不幸的是 它把所有其他
內容推出到屏幕之外
這並不是我們想要的
現在 我們把改回為wrap content
好的
現在把寬度改為
match parent 看看是什麼效果
現在 TextView的寬度變得與
父檢視圖相同 進而
與設備螢幕寬度相同
如果我把其他TextView
也更改為match_parent
你可以看到 它也開始占據
整個父檢視圖寬度
我還要指出另外一件事情
所有以layout和下劃線開頭的屬性
比如layout_height或layout_width
都是檢視圖群組版面參數
父級檢視圖群組使用這些參數
來確定這些檢視圖的大小
和位置
同時 其他屬性
例如背景 文字大小
和文字等 由TextView
根據它自己的檢視圖樣式進行處理
但是這些檢視圖群組版面參數
由父級檢視圖處理
現在 請你嘗試
設定不同的寬度和高度值
請找到含有部分初始代碼的
XML檢視圖的連結
請參閱下面的指導說明
嘗試更改每個TextView的
寬度和高度
可以設定固定dp值
wrap-content或match_parent.
請記住 對於每個檢視圖
寬度值和高度值不必相等
完成之後
請選擇這個方塊並繼續