Okay, so we've seen TextView code for
the first time.
>> But
it's kind of hanging out in limbo.
>> Right, we do need a space
where we can house it.
>> Yeah, that space is an IDE.
>> There's that acronym again.
What does it stand for again, Catherine?
>> Integrated Development Environment
>> Right, and
we are going to be using
Android Studio in this class.
This is what it looks like.
Still a little intimidating.
>> Yeah.
I think we might need something
that will help our learner
ramp up a little bit easier.
>> Right, so we've been working
on developing something that is
Android Studio on training wheels,
in the tradition of really convoluted
acronyms in computer science,
we are calling it XMLV.
>> Which stands for XML Visualizer.
>> So you write a little bit of XML?
You get to see the output.
You write some more,
you get to see more output.
>> Yeah.
So let's go use it.
>> Okay.
>> Since this XML visualizer was
created specifically for this course,
it won't provide all the functionality
that Android Studio supports.
But eventually in the problem
set of this lesson,
we'll get you into Android Studio so
you won't need this website anymore.
A link is in the instructor notes
If you want to follow along.
For this code,
the text says Happy Birthday.
So when I look at the device it says,
Happy Birthday.
Now let's try to change the text
to Happy Birthday, Kunal.
And then when I zoom in on the device
preview you see that it now says,
Happy Birthday, Kunal.
And what happens by trying to
stand the width and the height.
I'll pick some arbitrary
values like the 300dp for
the width and 500 for the height.
And now in the preview pane, you see
that the TextView is a lot bigger.
The text though, however, is still
the same size in the top left corner.
Notice that for the width and
height values of 300 and
500 is followed by dp in each case.
This is a unit of measure
like centimeters or
millimeters, that we use to describe
the size of views on Android.
As well as the distancing between views.
The unit dp stands for
density-independent pixels.
Let me explain why we need that.
Say these beautifully drawn rectangles
represent different devices.
They're the same physical size, but
they differ in terms of resolution.
This is a medium resolution device with
a medium number of pixels on the screen,
high resolution and
extra-high resolution device.
When I say pixel, I mean a phone screen
is made up of many tiny squares,
which are pixels, and they light up
based on what you're looking at.
So if I define the size of a view, for
example, a button, to be 2 pixels tall
by 2 pixels wide, this is what it would
look like on a medium resolution device.
On a high resolution device,
it would also be 2 pixels by 2 pixels.
But it's a little bit smaller,
because there's a lot more pixels trying
to be packed into this device, and
then on an extra high resolution device
where there's tons more pixels packed
into this space,
this button is actually pretty tiny.
I can barely tap on it with my finger.
I have to use edge of my finger or
my fingernail to reach it.
Just because I have extra
high resolution device,
doesn't mean I have a smaller finger.
I still want to be able to tap
the buttons on the screen.
And that is why we have
density-independent pixels.
I can define my button to
be 2dps tall by 2dps wide.
This is what it would look like
across the different devices.
It is the same physical size, but
under the hood Android is mapping
it to a different number of pixels.
You don't have to worry about any of
that logic, all you need to remember
is that you need to define your
sizes in terms of dp values.
When designing your apps, we recommend
that all touch targets like buttons
should be at least 48dps tall and wide.
Notice that it says 48dps and
not 48 pixels,
otherwise it would be really tiny on
this extra high resolution device.
This will make your app easy to use for
everyone.
So with all of this knowledge,
I want you to try and
change the TextView code now.
You're going to be writing your very
first lines of XML, how exciting.
So first try to change
the text in the TextView.
And then try to change
the sides of the TextView.
Then I want you to try to
create an error sad face.
And then I want you to undo it,
happy face.
حسناً، رأينا النص البرمجي الخاص
بمعاينة النص لأول مرة.
لكن، يبدو معلقاً نوعاً ما.
أجل،
نريد مساحةً لنضعه بها.
هذه المساحة تدعى IDE.
عدنا للاختصارات مرةً أخرى.
إلى ماذا يرمز ذلك، كاثرين؟
- بيئة تطوير متكاملة.
- أجل،
وسنستخدم أندرويد استوديو في هذه الدروس.
هكذا يبدو شكله.
مازلت خائفاً قليلاً.
أجل، اعتقد أننا بحاجة شيءٍ ما
ليساعد طلابنا على البداية بشكل أسهل.
نعم، كنا قد عملنا على تطوير
شيءٍ كتدريب على الأندرويد استوديو،
وكعادة اختصارات الحاسب المعقدة،
أطلقنا عليه XMLV
وهو اختصار لـXML Visualizer.
فتكتب قليلاً بلغة XML؟
ويمكنك رؤية الخرج.
وتكتب المزيد،
فترى المزيد من الخرج.
أجل
لنبدأ باستخدامه.
حسناً.
بما أن XML visualizer
قد صُمّم خصيصاً لهذه الدورة،
لن يضم كامل الخصائص التي
يدعمها أندرويد استوديو.
ولكننا في نهاية هذا الدرس،
سننتقل إلى أندرويد استوديو
ولن نحتاج هذا الموقع بعد الآن.
يوجد الرابط في ملاحظات المعلم
أن أردته.
من أجل هذا النص الرمجي،
النص هو "عيد ميلاد سعيد".
فعندما أنظر إلى الجهاز سأرى عبارة
"عيد ميلاد سعيد"
الآن، لنغير النص إلى
"عيد ميلاد سعيد، كونول"
وسأقرّب على معاينة الجهاز
يمكنك أن ترى ماهو مكتوب
"عيد ميلاد سعيد، كونول".
وما سيحصل عندما
أحاول ضبط العرض والارتفاع.
سأختار قيماً عشوائية
٣٠٠ دي بي مثلاً للعرض،
و ٥٠٠ من أجل الارتفاع.
والآن ترى في تبويب المعاينة
أن معاينة النص أصبحت أكبر بكثير.
ولكن مايزال النص بنفس
الحجم في الزاوية العليا اليسرى.
لاحظ أن قيمتا العرض والارتفاع
٣٠٠ و ٥٠٠ قد أضيفت لهما دي بي.
هذه وحدة قياس كالسنتيمتر أو المليمتر،
ونستخدمها لوصف حجم المعاينات في أندرويد.
وكذلك البُعد بين المعاينات.
وترمز إلى بكسل الكثافة المستقل.
دعني أشرح لك لما نحتاج هذا.
لنفترض أن هذه المستطيلات تمثّل
أجهزة مختلفة.
جميعها لها ذات الحجم الفيزيائي،
لكنها تخلف بما يتعلق بالدقّة.
هذا هاتف متوسط الدقة
بعدد بكسلات متوسط على الشاشة،
جهاز بدقة عالية،
وجهاز بدقة عالية شديدة.
وعندما أقول بكسل،أعني أن شاشة الهاتف
تحتوي على مربعات صغيرة،
والتي هي بكسلات،
وتضيء بحسب ماتنظر إليه.
فإذا ماضبطت حجم معاينةٍ ما،
زر مثلاً، ليكون ٢ بكسل طولاً
و٢ بكسل عرضاً،
هذا ماسيبدو عليه في جهاز متوسط الدقة.
في جهاز عالي الدقة،
ستكون أبعاده ٢*٢ بكسل أيضاً.
ولكنه أصغر قليلاً،
لأن هناك المزيد من البكسلات
تحاول أن تتسع في هذا الجهاز،
في الجهاز ذو الدقة العالية،
توجد الكثير من البكسلات مكدسة
في هذه المساحة،
لهذها يظهر الزر صغيراً.
بالكاد أستطيع الضغط عليه بإصبعي.
يجب أن أستخدم طرف
إصبعي أو الظفر لأصل إليه.
ولكنني إذا ماكنت أملك
جهازاً دو دقة عالية،
هذا لا يعني امتلاكي لإصبع أصغر.
مازلت أريد أن أنقر
على الزر في الشاشة.
ولهذا لدينا بكسل الكثافة المستقل.
سأقوم بضبط الزر ليكون ٢ دي بي عرضاً،
و ٢ دي بي طولاً.
وهذا ماسيبدو عليه الزر
في الأجهزة المختلفة.
نفس الحجم الفيزيائي،
ولكن أندرويد يشرف
على تحويله لعدد بكسلات مختلفة.
لا تشغل بالك بفهم هذا المنطق،
كل مايلزمك تذكره
هو أنه يجب أن تضبط
قيمك باستخدام دي بي.
وعند تصميم تطبيقك،
ننصحك بأن تجعل كل الأهداف التي ستُلمس
كالأزرار، أن تكون على
الأقل ٤٨ دي بي طولاً وعرضاً.
لاحظ أننا قلنا ٤٨ دي بي
وليس ٤٨ بكسل.
وإلا فستظهر ضئيلة جداً على
الأجهزة عالية الدقة جداً.
وهذا يجعل جهازك سهل الاستخدام للجميع.
وبهذه المعلومات،
أريد منك الآن أن تحاول
وتغير من النص البرمجي لمعاينة النص.
ستقوم بكتابة أسطرك الأولى بلغة XML.
كم هذا رائع.
حاول أولاً أن تغير النص
بداخل معاينة النص.
ثم حاول تغيير حجم معاينة النص.
ثم أريد منك إنشاء خطأ.
بوجه حزين.
ثم التراجع عنه.
بوجه سعيد.
Okay, so we've seen TextView code for
the first time.
>> But
it's kind of hanging out in limbo.
>> Right, we do need a space
where we can house it.
>> Yeah, that space is an IDE.
>> There's that acronym again.
What does it stand for again, Catherine?
>> Integrated Development Environment
>> Right, and
we are going to be using
Android Studio in this class.
This is what it looks like.
Still a little intimidating.
>> Yeah.
I think we might need something
that will help our learner
ramp up a little bit easier.
>> Right, so we've been working
on developing something that is
Android Studio on training wheels,
in the tradition of really convoluted
acronyms in computer science,
we are calling it XMLV.
>> Which stands for XML Visualizer.
>> So you write a little bit of XML?
You get to see the output.
You write some more,
you get to see more output.
>> Yeah.
So let's go use it.
>> Okay.
>> Since this XML visualizer was
created specifically for this course,
it won't provide all the functionality
that Android Studio supports.
But eventually in the problem
set of this lesson,
we'll get you into Android Studio so
you won't need this website anymore.
A link is in the instructor notes
If you want to follow along.
For this code,
the text says Happy Birthday.
So when I look at the device it says,
Happy Birthday.
Now let's try to change the text
to Happy Birthday, Kunal.
And then when I zoom in on the device
preview you see that it now says,
Happy Birthday, Kunal.
And what happens by trying to
stand the width and the height.
I'll pick some arbitrary
values like the 300dp for
the width and 500 for the height.
And now in the preview pane, you see
that the TextView is a lot bigger.
The text though, however, is still
the same size in the top left corner.
Notice that for the width and
height values of 300 and
500 is followed by dp in each case.
This is a unit of measure
like centimeters or
millimeters, that we use to describe
the size of views on Android.
As well as the distancing between views.
The unit dp stands for
density-independent pixels.
Let me explain why we need that.
Say these beautifully drawn rectangles
represent different devices.
They're the same physical size, but
they differ in terms of resolution.
This is a medium resolution device with
a medium number of pixels on the screen,
high resolution and
extra-high resolution device.
When I say pixel, I mean a phone screen
is made up of many tiny squares,
which are pixels, and they light up
based on what you're looking at.
So if I define the size of a view, for
example, a button, to be 2 pixels tall
by 2 pixels wide, this is what it would
look like on a medium resolution device.
On a high resolution device,
it would also be 2 pixels by 2 pixels.
But it's a little bit smaller,
because there's a lot more pixels trying
to be packed into this device, and
then on an extra high resolution device
where there's tons more pixels packed
into this space,
this button is actually pretty tiny.
I can barely tap on it with my finger.
I have to use edge of my finger or
my fingernail to reach it.
Just because I have extra
high resolution device,
doesn't mean I have a smaller finger.
I still want to be able to tap
the buttons on the screen.
And that is why we have
density-independent pixels.
I can define my button to
be 2dps tall by 2dps wide.
This is what it would look like
across the different devices.
It is the same physical size, but
under the hood Android is mapping
it to a different number of pixels.
You don't have to worry about any of
that logic, all you need to remember
is that you need to define your
sizes in terms of dp values.
When designing your apps, we recommend
that all touch targets like buttons
should be at least 48dps tall and wide.
Notice that it says 48dps and
not 48 pixels,
otherwise it would be really tiny on
this extra high resolution device.
This will make your app easy to use for
everyone.
So with all of this knowledge,
I want you to try and
change the TextView code now.
You're going to be writing your very
first lines of XML, how exciting.
So first try to change
the text in the TextView.
And then try to change
the sides of the TextView.
Then I want you to try to
create an error sad face.
And then I want you to undo it,
happy face.
Bien, hemos visto el código TextView
por primera vez.
Pero es como estar en el limbo.
Correcto, necesitamos un espacio
donde alojarlo.
Sí, y ese espacio es un IDE.
- Otra vez ese acrónimo.
- Sí.
¿Qué significa, Catherine?
- Entorno de Desarrollo Integrado.
- Correcto.
Y en esta clase usaremos Android Studio.
Así es como se ve.
Todavía un poco intimidante.
Sí, creo que podríamos necesitar algo
que ayude a facilitar un poco
el aprendizaje del alumno.
Así que hemos trabajado
en el desarrollo de algo
que es Android Studio
sobre ruedas de entrenamiento,
que en la tradición
de siglas muy complejas
en ciencias de computación,
lo llamamos XMLV.
Lo que significa Visualizador XML.
Entonces escribes un poco de XML
y puedes ver la salida.
Escribes un poco más,
y puedes ver más salida.
Sí, entonces usémoslo.
Bueno.
Puesto que este visualizador de XML
fue creado específicamente
para este curso,
no proporcionará toda la funcionalidad
que Android Studio soporta.
Pero en definitiva con el conjunto
de problemas de esta lección,
te introduciremos en Android Studio
y ya no necesitarás este sitio web.
Hay un enlace en las notas del instructor
si quieres seguir adelante.
En este código,
el texto dice "Happy Birthday!".
Así que cuando me fijo en el dispositivo
dice Happy Birthday!.
Ahora cambiemos el texto
a "Happy Birthday, Kunal!".
Cuando observamos
la vista previa del dispositivo
vemos que ahora dice,
Happy Birthday, Kunal!.
Y qué sucede si establecemos
la anchura y la altura.
Tomaré algunos valores arbitrarios
como 300 dp para la anchura
y 500 para la altura.
Ahora en el panel de vista previa,
ves que el TextView es mucho más grande.
El texto, sin embargo,
sigue siendo del mismo tamaño
en la esquina superior izquierda.
Observa que los valores
de anchura y de altura
de 300 y 500 son seguidos
por dp en cada caso.
Esta es una unidad de medida,
como los centímetros y los milímetros,
que utilizamos para describir
el tamaño de las vistas en Android,
así como el distanciamiento
entre las vistas.
La unidad dp significa
píxeles independientes de la densidad.
Déjame explicar
por qué necesitamos eso.
Digamos que estos rectángulos
que están bellamente dibujados
representan diferentes dispositivos.
Son del mismo tamaño físico,
pero difieren en cuanto a la resolución.
Este es un dispositivo
de resolución media
con un número medio
de píxeles en la pantalla,
un dispositivo de resolución alta
y uno de resolución extra-alta.
Cuando digo píxel, me refiero
a que una pantalla de teléfono
se compone de muchos cuadraditos,
que son los píxeles,
y se encienden según lo que estés viendo.
Si defino que el tamaño de una vista,
por ejemplo un botón,
sea de 2 píxeles de alto
por 2 píxeles de ancho,
se vería así en un dispositivo
de resolución media.
En un dispositivo de resolución alta,
también sería de 2 píxeles por 2 píxeles.
Pero es un poco más pequeño,
porque hay muchos más píxeles
que están comprimidos en este dispositivo,
y en un dispositivo
de extra alta resolución
donde hay muchos más píxeles
que están comprimidos en este espacio,
este botón es realmente muy pequeño.
Apenas puedo tocarlo con mi dedo.
Tengo que usar el borde de mi dedo
o mi uña para llegar a él.
El hecho de tener un dispositivo
de extra alta resolución
no significa que tenga
un dedo más pequeño.
Aún así, quisiera poder tocar
los botones en la pantalla.
Y es por eso que tenemos
píxeles independientes de la densidad.
Puedo definir que mi botón sea
de 2 dp de alto por 2 dp de ancho.
Así se vería
en los diferentes dispositivos.
Es el mismo tamaño físico,
pero por debajo, Android asigna
una cantidad distinta de píxeles.
No tienes que preocuparte
por nada de esa lógica.
Todo lo que necesitas recordar
es que tienes que definir los tamaños
en términos de valores dp.
Al diseñar tus aplicaciones,
te recomendamos
que todos los objetivos táctiles
como los botones
tengan al menos 48 dp de alto y de ancho.
Nota que dice 48 dp y no 48 píxeles,
de lo contrario se vería muy pequeño
en este dispositivo
de extra alta resolución.
Esto hará que tu aplicación
sea fácil de usar para todos.
Con todo este conocimiento,
quiero que intentes cambiar
el código TextView ahora.
Vas a escribir tus primeras líneas de XML,
¡qué emocionante!.
Primero trata de cambiar
el texto en el TextView.
Y luego trata de cambiar
el tamaño del TextView.
Luego quiero que trates de crear
un error, cara triste.
Y luego quiero que lo deshagas,
cara feliz.
On a vu le code TextView
pour la première fois.
Mais c'est comme
traîner dans les limbes.
On a besoin d'un espace
où nous pouvons nous abriter.
Oui, cet espace est un IDE.
C'est à nouveau cet acronyme.
C'est quoi ça, Catherine ?
Integrated Development Environment
ok et
Nous allons utiliser
Android studio dans cette classe.
Ceci est à quoi il ressemble.
C'est encore un peu intimidant.
Je pense que nous pourrions
avoir besoin de quelque chose
qui aidera nos apprenant
à ramper plus facilement.
On va travailler sur le développement
quelque chose qui fait parti
de la base d'Android Studio,
et qui est un nouveau
acronymes en informatique,
on appelle cela XMLV.
Qui signifie XML Visualizer.
Vous écrivez donc un peu de XML ?
Vous allez voir la sortie.
Vous écrivez plus de code, vous
aurez plus en sortie.
Ok.
Allons donc l'utiliser.
Ok.
Depuis ce visualiseur XML a été créé
spécifiquement pour ce cours,
il ne fournira pas toutes les fonctions
qu'Android Studio prend en charge.
Mais dans le problème de
cette leçon,
On utilisera Android studio et vous
n'aurez plus besoin de ce site.
Un lien est dans les notes de
l'instructeur Si vous voulez suivre.
Pour ce code,
le texte dit Joyeux anniversaire.
Quand je regarde l'appareil, il dit,
Joyeux anniversaire.
Essayons de changer le texte
Happy Birthday, Kunal.
Je zoome sur le dispositif prévisualisé
vous voyez qu'il dit maintenant,
Happy Birthday, Kunal.
Et ce qui se passe en essayant de tenir
la largeur et la hauteur.
Je vais reprendre certaines valeurs
arbitraires comme le 300dp pour
la largeur et 500 pour la hauteur.
Dans le volet d'aperçu, vous voyez que le
TextView est beaucoup plus grand.
Le texte est encore de même
taille dans le coin supérieur gauche.
Notez que pour la largeur et
la hauteur elles ont des valeurs de 300 et
500 suivie par DP dans chaque cas.
Ceci est une unité de mesure
comme centimètres ou
Millimètres, que nous utilisons pour
décrire la taille de vues sur Android.
En plus de l'éloignement entre les vues.
Le DP de l'unité signifie
pixels indépendants de la densité.
Permettez-moi de vous expliquer
pourquoi nous avons besoin de cela.
Ces rectangles magnifiquement dessinés
représentent différents dispositifs.
Ils sont de la même taille physique, mais
ils diffèrent en termes de résolution.
C'est un dispositif de résolution moyen
avec un nombre moyen de pixels,
haute résolution et
dispositif extra-haute résolution.
Je veux dire un écran de téléphone
est constitué de nombreux petits carrés,
qui sont des pixels, et ils allument
basés sur ce que vous cherchez.
Je définis la taille d'un point de vue,
un bouton, à être de 2 pixels de haut
par 2 pixels de large, ça va ressembler à
ça sur un dispositif de résolution moyen.
Sur un périphérique haute résolution,
il serait également 2 pixels par 2 pixels.
Mais il est un peu plus petit,
Car il y a plus de pixels embarqués
dans ce dispositif, et
puis sur un dispositif de haute
résolution où il y a des tonnes de pixels
dans cet espace,
ce bouton est en fait assez petite.
Je peux à peine
appuyer dessus avec mon doigt.
Je dois utiliser
mon ongle pour l'atteindre.
Parce que j'ai un dispositif
de haute résolution,
ne signifie pas que
je dois avoir un petit doigt.
Je veux toujours être en mesure de cliquer
les boutons sur l'écran.
Et voilà pourquoi nous avons des
pixels indépendants de la densité.
Je peux définir mon bouton à
être 2dps haut par 2dps larges.
Ceci est ce à quoi ça ressemblerait
à travers les différents dispositifs.
C'est de la même taille
physique, mais
Android mappe une manière
différent les pixels.
Vous ne devez pas vous soucier de ça
tout ce que vous devez vous rappeler
Est que vous devez définir vos
tailles en termes de DP.
On vous recommande que toutes les
cibles tactiles comme des boutons
soient au moins de
48dps haut et de large.
Notez qu'il est dit 48dps et
pas 48 pixels,
Sinon ça serait vraiment minuscule sur
ce dispositif à haute résolution.
Cela rendra votre application
facile à utiliser pour tout le monde.
Donc, avec tout ce savoir,
Je veux que vous essayiez et
changiez le code de TextView maintenant.
L'écriture de vos premières lignes
de XML, est passionnant.
Donc d'abord essayez de changer
le texte dans la TextView.
Et puis essayez de changer
les côtés de la TextView.
Puis essayez de créer une erreur
:(
Et puis je veux que vous l'annuliez,
:)
Baik, kita sudah lihat
kode TextView pertama kalinya.
Tapi sepertinya masih belum jelas.
Benar, kita butuh ruang sebagai tempatnya.
Ya, ruang itu bernama IDE.
- Nah, ada singkatan lagi.
- Ya.
- Apa kepanjangannya, Catherine?
- Integrated Development Environment
Benar. Kita akan gunakan
Android Studio di kelas ini.
Seperti inilah kelihatannya.
Masih sedikit mengintimidasi.
Ya. Sepertinya kita butuh sesuatu
yang akan membantu siswa
memahami dengan lebih mudah.
Benar, jadi kami telah membuat sesuatu
yaitu Android Studio untuk pelatihan,
dalam tradisi singkatan berbelit
pada ilmu komputer.
Kami menyebutnya XMLV.
Kepanjangannya XML Visualizer.
Jadi, Anda menulis sedikit XML?
Anda harus melihat keluarannya.
Anda menulis lagi,
Anda mendapat keluaran lagi.
Ya. Jadi mari kita gunakan.
Baik.
Karena XML Visualizer
dibuat khusus untuk kursus ini,
tidak semua fungsi Android Studionya ada.
Tapi akhirnya, masalah yang dibuat
untuk pelajaran ini,
Anda akan gunakan Android Studio
sehingga Anda tidak butuh situs ini lagi.
Tautan ada di catatan instruktur
jika Anda ingin mengikutinya.
Untuk kode ini,
teksnya tertulis Happy Birthday.
Jadi ketika saya lihat pada perangkat,
tulisannya Happy Birthday.
Nah, mari coba ubah teksnya
menjadi Happy Birthday, Kunal.
Jika saya besarkan tampilannya,
Anda bisa lihat sekarang tulisannya,
Happy Birthday, Kunal.
Dan apa yang terjadi jika
kita ubah lebar dan tingginya.
Saya coba pakai nilai asal saja seperti...
...300dp untuk lebarnya
dan 500dp untuk tingginya.
Dan sekarang di panel tampilan,
Anda lihat TextView lebih besar.
Tapi ukuran teksnya
masih sama di pojok kiri atas.
Perhatikan untuk nilai lebar
dan tingginya 300 dan 500
diikuti dengan dp di setiap angkanya.
Ini adalah satuan unit
seperti centimeter atau milimeter,
yang digunakan untuk menggambarkan
ukuran tampilan di Android
dan juga jarak antar tampilan.
Satuan dp kepanjangan dari
density-independent pixels
(piksel bebas kepadatan).
Mari saya jelaskan
mengapa kita membutuhkannya.
Katakanlah kotak yang indah ini
mewakili perangkat yang berbeda.
Ukuran fisiknya sama,
tapi resolusinya beda.
Ini adalah perangkat resolusi menengah
dengan piksel ukuran sedang pada layar,
perangkat resolusi tinggi,
dan ekstra tinggi.
Ketika saya bilang piksel, maksud saya
layar terdiri dari banyak kotak kecil,
yaitu piksel, dan mereka menyala
tergantung dari apa yang Anda lihat.
Jadi jika saya menentukan ukuran tampilan,
contohnya, tombol,
tinggi 2 piksel kali lebar 2 piksel,
seperti inilah kelihatannya
pada perangkat resolusi menengah.
Pada perangkat resolusi tinggi,
juga 2 x 2 piksel.
Tapi sedikit lebih kecil,
karena ada lebih banyak piksel
yang harus masuk ke perangkat ini.
Lalu pada perangkat resolusi ekstra tinggi
di mana ada sangat banyak piksel
yang termuat di ruang ini,
tombol ini sebenarnya cukup kecil.
Sangat sulit ditekan dengan jari saya.
Saya harus menggunakan
ujung jari atau kuku untuk menekannya.
Hanya karena saya punya
perangkat resolusi ekstra tinggi,
tak berarti jari saya lebih mungil.
Saya ingin tetap bisa
menekan tombol di layar.
Dan itulah sebabnya kita memakai
piksel bebas kepadatan.
Saya bisa tentukan tombol
dengan tinggi 2dps kali lebar 2dps.
Seperti inilah kelihatannya
pada perangkat yang berbeda.
Ukuran fisiknya sama.
Tapi di balik itu, Android mengubahnya
menjadi ukuran piksel yang berbeda.
Anda tak perlu memikirkan logikanya,
yang Anda harus ingat hanyalah
menentukan ukurannya dalam nilai dp.
Saat mendesain aplikasi, kami sarankan
semua target tekan yang seperti tombol
harus sedikitnya
setinggi dan selebar 48dps.
Perhatikan bahwa itu
48dps dan bukan 48 piksel.
Jika tidak, nanti akan jadi amat kecil
di perangkat resolusi ekstra tinggi.
Ini akan membuat aplikasi Anda
mudah digunakan semua orang.
Dengan semua pengetahuan ini,
saya mau Anda coba
dan ubah kode TextView sekarang.
Anda akan menulis baris pertama
XML Anda. Asyik sekali.
Pertama, coba ubah teks pada TextView.
Dan coba ubah ukuran TextView.
Lalu coba buat eror
dengan muka sedih.
Lalu kembalikan lagi, muka senang.
テキストビューのコードを初めて見ましたね
でも宙ぶらりんね
確かに収納するスペースが要るね
ええ そのスペースが IDE よ
またその頭辞語だね
何の略だっけ?
Integrated Development Environment
(統合開発環境)
このクラスでAndroid Studio を使います
こんな風に見えます
まだ少しビクビクするよ
学習者がもう少し簡単に
取り組めるようなものが要るかもね
それで練習用Android Studio の開発に
取り組んだんだけど
コンピュータサイエンスの複雑な頭辞語の
伝統で XMLV と呼んでいるものです
XML Visualizer のことです
じゃ 少し XML を書く?
出力を見れる
もう少し書くと もう少し出力する
早速使いましょう
この XML visualizer は特にこのコース用に
作られたので
Android Studio が対応する機能の
全部はありませんが
いずれは このレッスンで設定される問題で
Android Studio に入るので
もうこのサイトは要らなくなります
進みたければ
講師注記にリンクがあります
このコードでは
テキストは「誕生日おめでとう」です
それでデバイスを見ると
「誕生日おめでとう」と出ています
そのテキストを
「誕生日おめでとう クナル」と変えてみます
次にデバイスのプレビューを拡大すると
今度は「誕生日おめでとう クナル」と
出ています
幅と高さを変えるとどうなるでしょう?
任意の値を選んで
幅を 300dp 高さを500 dp にしてみます
今度はプレビュー枠で
テキストビューがうんと大きく見えます
ところがテキストはやはり同じ大きさで
左上端にあります
各ケースで300と500という
幅と高さの値の後に
dpがついていますね
これはセンチメートルとか
ミリメートルのような測定単位で
Android でビューのサイズを説明する為に
使います
ビュー間の距離についても同様です
単位 dp は density-independent pixels
(密度非依存ピクセル)を表します
なせそれが必要か説明しましょう
これらのきれいな描画の四角形が
異なるデバイスを表すとします
物理的サイズは同じですが
解像度の点で異なります
これは画面上中位のピクセル数の
中解像度デバイスでー
高解像度デバイス 超高解像度デバイスです
ピクセルとは 携帯画面を構成する
沢山の小さな四角形のことで
それらは 見ているものに基づいて
明るくなります
だから例えばビューのサイズを
縦横2ピクセルに定めると
中解像度デバイスではこう見えます
高解像度デバイスでは
同じく 縦横2 ピクセルでも
少し小さ目になります
なぜならこのデバイス内にもっと沢山の
ピクセルが詰っているからです
スペースに更にずっとピクセルが詰まった
超解像度デバイスでは
このボタンは実際上とても小さくー
指で押せない位です
指先か爪で触るしかないです
超解像度デバイスだからといってー
指は小さくならないのにー
画面のボタンを押せなければなりません
それで私達は密度に依存しないピクセルを使うのです
ボタンを縦横 2dp に定められます
すると様々なデバイスでこう見えます
物理的サイズは同じですが
内部でAndroid が様々な数のピクセルを
割り当てています
その論理について心配しなくていいです
dp 値でサイズを定める必要があると
覚えればいいだけです
アプリをデザインする際
ボタンのようなタッチターゲットは全て
最小で縦横48dp にするのがお勧めです
48ピクセルではなく48dp であることに
注目して下さい
さもないとこの超解像度デバイスでは
非常に小さくなります
こうするとアプリが誰でも使いやすくなります
これを踏まえた上で
テキストビューのコードを変えていただきます
これから初めて XML を書くのですよ
わくわくしますね
まずテキストビューのテキストを変えて下さい
次にテキストビューのサイズを変えて下さい
次にエラーを作って下さい
暗い顔?
そうしてそれを取り消して下さい
明るい顔ね
TextView 코드를 처음으로 봤죠.
>> 이건 림보에 빠져있어요.
>> 그래요, 우리가 이걸 사용할
공간이 필요해요.
>> 네, 그 공간은 IDE예요.
>> 다시 그 약자군요.
캐서린, 그건 무엇의 약자죠?
>> 통합 개발 환경이요.
>> 좋아요
우리는 이 강의에서
Android Studio를 사용하죠.
그건 이렇게 보여요.
아직 조금 두렵게 하는 거죠.
>> 네, 제 생각에
우리 학생들이 더 쉽게
발전하도록 도울 것이 필요해요.
>> 맞아요, 우리는 무언가를
개발하는 데 일했는데,
그건 보조 바퀴가 되는
Android Studio에서 였고,
이는 컴퓨터의 난해한
약자로 불리는 XMLV 입니다.
>> 이는 XML 가시화 도구입니다.
>> XML을 조금 써요?
결과를 볼 거예요.
당신이 조금 더 쓰면,
더 많은 결과를 갖겠죠.
>> 네.
사용해봐요.
>> 좋아요.
>> XML 가시화 도구는 이 코스를
위해 특별히 만들어 졌어요.
이것은 Android Studio가 제공하는
모든 기능을 제공하지 않아요.
하지만 이 수업의 과제에서
Android Studio로 갈 것이고
이 사이트를 더 사용하지 않을 거예요.
따라오고 싶다면
instructor note에 링크가 있어요.
이 코드에서, 텍스트는
Happy Birthday라고 해요.
우리가 기기를 보면
Happy Birthday라고 말하죠.
이제 텍스트를 Happy
Birthday, Kunal로 바꿔봅시다.
기기 미리보기를 확대하면
이것이 Happy Birthday, Kunal
이라고 말하는 것이 보여요.
너비와 높이에 무엇이 발생할까요?
좀 추상적인 숫자 300dp를 너비로
500dp를 높이도 고를게요.
이제 미리보기 화면에서
더 커진 TextView를 볼 수 있죠.
하지만 텍스트는 여전히
같은 사이즈로 왼편 위쪽에 있어요.
너비와 높이를 300, 500으로
두었을 때
각각 dp가 붙는 것이 보이시죠.
이것은 센티미터나 밀리미터 같은
측정의 단위인데
안드로이드의 뷰 사이즈를
나타내는 데 사용됩니다.
뷰들 사이의 거리도 마찬가지고요.
단위 dp는 density-
independent pixels의 약자입니다.
이게 왜 필요한지 설명해드릴게요.
다른 기기를 대신하는 예쁘게 그려진
직사각형이 있다고 합시다.
그들은 물리적으로 같은 사이즈지만
해상도에 따라서는 다릅니다.
이는 화면에 중간 정도 픽셀수를 가진
중간 해상도의 기기예요.
높은 해상도와 매우 높은 해상도 기기고요.
픽셀은, 폰 화면은 매우 작고 많은
사각형으로 이루어져 있어요.
그것은 픽셀이고 그들이
당신이 보는 것을 만들죠.
뷰의 사이즈를 정의하면,
예를 들어, 버튼을 2픽셀 높이
2픽셀 너비로 정의하면,
중간 해상도 기기에선 이렇게 보여요.
해상도가 높은 기기에서는
이것도 2픽셀, 2픽셀이지만
약간 더 작습니다.
이 기기에 박힌 픽셀이
더 많기 떄문이죠.
매우 높은 해상도 기기에선
매우 더 많은 픽셀이 이 공간에 있어
그래서 버튼은 정말 작죠.
이것을 거의 손가락으로
누를 수도 없어요.
닿기 위해서 손가락 끝과
손톱을 사용해야 해요.
제가 매우 해상도가 높은
기기를 가졌다고해서
제가 더 작은 손가락을
가지는 건 아니에요.
저는 여전히 화면 상의
버튼을 누르고 싶어요.
그래서 density-independent
pixel이 있어요.
저는 버튼을 2dps 높이
2dps 너비로 정의해요.
이것이 다른 기기에서 이렇게 보여져요.
이는 물리적으로 같은 사이즈지만
안드로이드 내부에서는
다른 수의 픽셀로 그려내죠.
당신은 이 논리에 대해
걱정할 필요 없어요.
당신이 기억할 모든 것은
dp값으로 사이즈를 정의하는 것입니다.
당신 앱을 디자인할 때,
버튼 같은 터치할 대상을
최소한 48dps 높이 너비로
만드는 것을 권장합니다.
48dps를 말하는 것이지
48픽셀이 아닙니다.
그렇지 않으면 초고해상도 기기에서
매우 작아질 것입니다.
이는 모두가 앱을 쉽게
사용하도록 해줄거예요.
이 모든 지식을 바탕으로
당신이 TextView 코드를
지금 바꿔보길 바랍니다.
당신은 XML의 첫 행을 쓰는 거예요.
정말 흥분되죠.
먼저 TextView 안의 텍스트를
바꿔보세요.
그리고 TextView의
주변을 바꿔보세요.
에러를 만들어보세요.
슬픈 표정.
그리고 다시 고쳐보세요.
기쁜 표정.
Então nós vimos código
de TextView pela primeira vez.
- Mas é como estar em um limbo.
Certo!
Precisamos de um espaço
onde possamos colocar tudo.
Sim, e esse espaço é um IDE.
Oi, essas siglas de novo.
O que isso significa, Katherine?
- Ambiente de Desenvolvimento Integrado
- Ok.
E nós vamos utilizar
o Android Studio nesta aula.
E é parecido com isso.
Ainda um pouco intimidante.
Sim, acho que precisamos de algo
que ajudará os nosso alunos
a entender um pouco melhor.
Vimos desenvolvendo algo
que é Android Studio para iniciantes,
com siglas bastante complicadas
da ciência da computação,
que estamos chamando XMLV.
- Quer dizer Visualizador XML.
- Então você escreve um pouco de XML...
E verá o resultado,
escreve mais...
- E verá mais resultados.
- Sim!
- Então vamos usá-lo.
- Ok.
Como este visualizador de XML
foi criado especificamente para este curso,
ele não irá fornecer todas as funcionalidades
que o Android Studio suporta.
Mas, posteriormente, no conjunto
de problemas desta lição,
vamos fazê-lo usar o Android Studio,
e não vai mais precisar deste site.
O link está nas notas do instrutor,
se quiser acompanhar.
Neste código,
o texto diz "Parabéns!".
Então, quando eu olho
para o dispositivo, diz "Parabéns!".
Agora vamos tentar mudar o texto
para "Parabéns, Kunal!".
E quando der zoom na visualização,
você verá que ele agora diz:
"Parabéns, Kunal!"
E o que sucede se eu mudar a largura e a altura?
Eu vou escolher alguns valores
arbitrários como 300 dp
para a largura e 500 dp para a altura.
Agora no painel de visualização,
você verá que a TextView é muito maior.
O texto, porém, ainda é do mesmo
tamanho no canto superior esquerdo.
Note que os valores de largura
e altura de 300 e 500
são seguidos pela sigla dp em cada caso.
Esta é uma unidade de medida,
como centímetros ou milímetros,
que usamos para descrever
o tamanho de views no Android,
bem como o distanciamento entre as views.
A unidade "dp" significa
pixels independentes de densidade.
Eu explico por que precisamos disso.
Digamos que esses lindos retângulos
representam diferentes dispositivos.
Eles são do mesmo tamanho físico,
mas diferem em termos de resolução.
Este é um dispositivo de média resolução
com um número médio de pixels na tela,
dispositivo de alta resolução e
dispositivo de resolução extra-alta.
Quando eu digo pixel, quero dizer
que a tela do celular possui vários quadrados
minúsculos, que são os pixels,
que acendem com base no que você está olhando.
Se eu definir o tamanho de uma view,
por exemplo um botão,
para 2 pixels de altura por 2 pixels de largura,
isto é o que aparentaria em um
dispositivo de média resolução.
Em um dispositivo de alta resolução,
também seria 2 pixels por 2 pixels.
Mas é menor porque tem mais pixels
se comprimindo no dispositivo.
E em um dispositivo de resolução extra alta,
tem muitos mais pixels comprimidos.
Dentro deste espaço, o botão é,
na verdade, muito pequeno.
Eu mal posso tocar nele com o meu dedo.
Tenho que usar a ponta do meu dedo,
ou a unha, para tocá-lo.
Só porque eu tenho um dispositivo
de resolução extra alta,
não significa que eu tenho um dedo menor.
Eu ainda quero ser capaz de tocar
os botões na tela.
Por isso temos pixels independentes de densidade.
Eu posso definir o meu botão para ser
2 dps de altura por 2 dps de largura.
Isto é como ficaria em diferentes dispositivos.
É o mesmo tamanho físico,
mas, internamente, o Android mapeia
para um número diferente de pixels.
Mas não se preocupe com isso,
lembre apenas
que precisa definir seus tamanhos
em termos de valores "dp".
Ao construir seus apps,
recomendamos
que todos os alvos sensíveis ao toque,
como botões,
tenham, pelo menos,
48 dps de altura e largura.
Observe que dizemos 48 dps e não 48 pixels,
senão seria muito pequeno neste
dispositivo de resolução extra alta.
Isto fará o seu app fácil
de usar para qualquer pessoa.
Com todo esse conhecimento,
eu quero que você experimente
alterar o código da TextView agora.
Você está escrevendo suas primeiras
linhas de XML, que emocionante!
Primeiro tente mudar o texto na TextView.
Em seguida, tente mudar
os lados da TextView.
Depois quero que você tente gerar um erro, ":(",
E, então, que você o desfaça,":)".
Итак, мы увидели код
для TextView в первый раз.
Но пока он завис где-то на орбите.
Верно, нам надо куда-то
его установить.
Да, это будет IDE.
Опять это сокращение.
Катрин, напомни что он значит?
Integrated Development Environment
Верно, в этом уроке мы будем
использовать Android Studio.
Вот как это выглядит.
Все еще немного запутанно.
Думаю, надо что-то,
что поможет ученикам
легче понимать урок.
Верно, мы будем разрабатывать
что-то учебное в
Android Studio с традиционными
запутанными
компьютерными сокращениями,
мы называем это XMLV.
Это значит XML Visualizer.
Ты напишешь немного XML?
Увидишь результат.
Ты напишешь еще, и результата
будет больше.
Ага.
Используем его.
Ладно.
Поскольку XML visualizer был создан
для этого курса,
в нем не весь функицонал
как в Android Studio.
Но во время урока,
когда будет надо, мы
перейдем в Android Studio и этот
сайт больше не будет нужен.
Ссылка на заметки, которым
вы можете следовать.
В этом коде текст -
это Happy Birthday.
И на устройстве пишет Happy Birthday.
А сейчас попробуем изменить текст на
Happy Birthday, Kunal.
И когда я выведу его на устройство,
мы увидим
Happy Birthday, Kunal.
И что случится, если я попробую
оставить высоту и ширину.
Возьму случайное значение
в 300dp для ширины
и 500 для высоты.
Теперь на предпросмотре вы видите,
что зона текста стала гораздо больше.
А текст в верхнем левом углу
остался того же размера.
Обратите внимание что значения
ширины и высоты -
300 и 500 указаны в dp
в обеих случаях.
Это единица измерения,
как сантиметр или
миллиметр, с ее помощью мы
определяем размер в Android.
А также расстояние между раскладками.
Название dp значит
density-independent pixels.
Позвольте объяснить
для чего нам это надо.
Допустим этот красивый прямоугольник
представляет разные устройства.
Они одинакового размера
но отличаются разрешением.
Это устройство среднего разрешения со
средним количеством пикселей,
устройство с высоким и
очень высоким разрешением.
Когда я говорю пиксель это значит что
экран состояит из маленьких квадратов
пикселей, и они светятся тем
на что вы смотрите.
Я определяю размер предмета,
например кнопки, в 2 пикселя высотой
и 2 писеля шириной и вот так
он выглядит на среднем разрешении.
На высоком разрешении
это тоже 2 пикселя на 2 пикселя.
Но немного меньше размером,
потому что всего пикселей
гораздо больше в устройстве и
на очень высоком разрешении тонны
пикселей стоят на такой же площади
и кнопка выглядит очень маленькой.
Я с трудом попадаю по ней пальцем.
Приходится нажимать самым
кончиком или ногтем.
Если у меня устройство
с очень высоким разрешением
это не значит что у меня
маленькие пальцы.
Мне все также надо нажимать
кнопки на экране.
Вот поэтому мы пользуемся
density-independent pixels.
Я могу указать что кнопка будет
2dps на 2dps размером.
Вот так это будет выглядеть
на разных устройствах.
Физически тот же размер, но
в Android используется
разное количество пикселей.
Не заморачивайтесь про эту логику,
вам только надо помнить,
что надо определять размеры в dp.
При конструировании приложений
мы советуем чтобы все кнопки
были размером как минимум
48dps в высоту и ширину.
Обратите внмимание 48dps
а не 48 пикселей,
иначе она будет очень маленькой на
устройстве с высоким разрешением.
Так всем будет легко пользоваться
вашим приложением.
Теперь когда вы все это знаете,
я хочу чтобы вы попробовали
изменить код TextView.
Вы напишете свои первые строки XML,
это удивительно.
Сначала попробуйте изменить
текст в TextView.
Потом попробуйте изменить
стороны в TextView.
Потом я хочу чтобы вы сделали ошибку.
А потом исправили ее, отменив.
Tamam, TextView kodunu ilk defa gördük.
Ancak daha tam yerli yerine oturmadı.
Yerleştireceğimiz bir alana ihtiyaç var.
O alan da bir IDE.
Yeniden o kısaltma.
Neyin kısaltmasıydı, Katherine?
Integrated Development Enviroment
(Tümleşik Geliştirme Ortamı).
Evet ve bu derste
Android Studio'yu kullanacağız.
İşte böyle gözüküyor.
Hâlâ biraz ürkütücü.
Evet. Öğrencimizin daha da
hızlanması için bir şeylere
ihtiyacımız var.
Evet, destek tekerlekli
Android Studio diyebileceğimiz
bir şey geliştirmeye çalışıyoruz,
bilgisayar biliminin karışık
isim kısaltma geleneğine göre
XMLV diyoruz.
XML Visualizer (Görüntüleyici) anlamında.
Biraz XML yazıyorsun,
sonra çıktıya bakıyorsun.
Biraz daha yazıp,
tekrar çıktılara bakıyorsun.
Evet, kullanıp görelim.
Tamam.
XML Visualizer sırf bu kurs
için tasarlandığından
Android Studio'nun sunduğu
olanakları sağlamayacaktır.
Eninde sonunda,
bu ders setinde,
sizi Android Studio ile tanıştıracağız,
böylece bu siteye ihtiyacınız olmayacak.
Takip etmek isterseniz
eğitmen notlarında bir bağlantı var.
Bu kod için,
metinde Happy Birthday! yazıyor.
Cihaza baktığımda da
Happy Birthday! yazıyor.
Metini değiştirip
Happy Birthday, Kunal! yazalım.
Cihaza yakınlaştığımda
önizlemede görüyorsunuz ki
Happy Birthday, Kunal! yazıyor.
Genişlik, yükseklik değerlerini
değiştirince ne oluyor görelim.
Genişlik için 300 dp ve
yükseklik için 500 dp
gibi rastgele değerler veriyorum.
Önizlemede TextView'in
daha büyük olduğunu gördük.
Ancak metin aynı boyutta
sol üst köşede duruyor.
Genişlik değeri 300,
yükseklik değeri 500,
değerleri dp ile
tanımlandığına dikkat edin.
Bu ölçü birimini santimetre,
milimetre gibi, Android'de
görüntü boyutlarını tanımlamak
için kullanıyoruz.
Aynı şekilde görüntüler
arası uzaklık için de.
Dp'nin açılımı, density-independent pixels
(Yoğunluktan bağımsız pikseller).
Bunu neden kullandığımızı açıklayayım.
Bu güzelce çizilmiş dörtgenler
farklı cihazları temsil etsin.
Fiziksel olarak aynı boyuttalar,
ancak çözünürlük olarak farklılar.
Orta çözünürlüklü bir cihaz için
orta sayıda piksel var ekranda.
Yüksek çözünürlüklü bir cihaz ve
ekstra yüksek çözünürlüklü bir cihaz var.
Piksel dediğim zaman birçok
küçük kareden oluşan telefon ekranı,
küçük kareler piksel, neye baktığınıza
göre ışık veriyorlar.
Bir görüntünün boyutlarını belirliyorum,
örneğin, bir buton, 2 piksel boyunda,
2 piksel genişliğinde, orta çözünürlüklü
bir cihazda böyle gözükecek.
Yüksek çözünürlüklü cihazda
2 piksele 2 piksel olacak,
ancak daha küçük.
Çünkü cihaz üzerinde
daha fazla piksel var.
Ekstra yüksek çözünürlüklü bir cihazda
daha fazla piksel olduğundan
bu alanda, buton bayağı küçük.
Parmağımla zor dokunuyorum.
Parmağımın kenarları ya da
tırnağımı kullanıyorum.
Ekstra çözünürlüklü
cihazım var diye,
daha küçük parmağım olacak değil.
Ekrandaki butonlara
yine de dokumak istiyorum.
İşte bu yüzden
yoğunluktan bağımsız pikseller var.
Butonumu 2 dp boy,
2 dp en olarak tanımlayabilirim.
Farklı cihazlarda böyle gözükecektir.
Fiziksel olarak aynı, ancak
arka planda Android farklı sayıda
piksele tanımlıyor.
Bunları dert etmenize gerek yok,
ancak şunu hatırlayın,
boyutları dp değerleriyle
tanımlamalısınız.
Uygulama tasarlarken
buton gibi tüm dokunulacak görüntüler
en azından 48 dp boy ve 48 dp en olmalı.
48 piksel değil, 48 dp dikkat edin,
diğer türlü ekstra yüksek çözünürlüklü
cihazlarda çok küçük olur.
Bu uygulamanızı herkes için
kolay kullanılır yapacak.
Tüm bu bildiklerinizle,
şimdi TextView kodunu
değiştirmenizi istiyorum.
XML'de ilk satırlarınızı
yazacaksınız, çok heyecanlı.
İlk önce TextView içindeki metni
değiştirmeye çalışın.
Sonra da TextView boyutlarını
değiştirmeyi deneyin.
Bir hata mutsuz yüzü
oluşturmanızı istiyorum.
Sonra da hatayı geri alıp
mutlu yüz olarak düzeltmenizi.
Chúng ta đã xem code TextView
lần đầu tiên.
Nhưng vẫn chỉ giống
cưỡi ngựa xem hoa.
Đúng thế, chúng ta cần một không gian
để có thể xây một ngôi nhà.
Đúng, không gian đó là một IDE.
Lại là một từ viết tắt nữa.
Nó viết tắt cho gì vậy, Catherine?
Integrated Development Enviroment
(môi trường phát triển tích hợp)
Chúng ta sẽ dùng Android Studio
trong lớp học này.
Nó trông như thế này.
Vẫn có vẻ hơi đáng sợ.
Đúng vậy. Tôi nghĩ
chúng ta cần vài thứ
giúp người học theo dõi dễ hơn.
Đúng, vì vậy chúng tôi đang tiến hành
phát triển vài thứ
tại Android Studio,
theo truyền thống viết tắt
trong ngành khoa học máy tính,
chúng tôi gọi là XMLV.
Có nghĩa là XML Visualizer.
Vậy là bạn đã viết một ít XML?
Hãy xem thành quả nào.
Bạn viết thêm,
và nhận thêm thành quả.
Đúng vậy.
Vậy hãy dùng nó.
Được.
Vì XML visualizer này được tạo ra
là đặc biệt dành cho khóa học này,
nó sẽ không có tất cả chức năng
mà Android Studio hỗ trợ.
Nhưng về vấn đề được đặt ra
trong bài học này,
chúng tôi sẽ đưa bạn vào Android Studio
và bạn sẽ không cần tới website này nữa.
Có một đường link ở mục instructor notes
nếu bạn muốn vào.
Với code này,
dòng text ghi là Happy Birthday.
Vậy là khi tôi nhìn vào thiết bị,
nó sẽ hiện Happy Birthday.
Giờ hãy thử thay đổi dòng text
thành Happy Birthday, Kunal.
Và khi tôi phóng to thiết bị
để bạn thấy thì nó sẽ là
Happy Birthday, Kunal.
Và điều gì xảy ra khi cố thay đổi
độ rộng và chiều cao.
Tôi sẽ chọn vài giá trị bất thường
như 300dp cho độ rộng
và 500 cho độ cao.
Giờ trong khung preview,
bạn thấy TextView lớn hơn nhiều.
Tuy vậy, dòng text vẫn có kích cỡ như cũ
ở góc trên lề trái.
Chú ý rằng độ rộng 300
và chiều cao 500
được gắn đuôi dp.
Đây là đơn vị đo lường
như xăng-ti-mét
hay mi-li-mét được dùng
để mô tả kích cỡ view trên Android.
Cũng như khoảng cách giữa các view.
Đơn vị dp là viết tắt của
density-independent pixels.
Tôi sẽ giải thích lý do chúng ta cần nó.
Những hình chữ nhật được vẽ này
đại diện cho các thiết bị khác nhau.
Chúng có cùng kích cỡ vật lý,
nhưng lại khác nhau về độ phân giải.
Đây là thiết bị có độ phân giải trung bình
với số pixel trung bình trên màn hình,
thiết bị có độ phân giải cao
và cực cao.
Khi tôi nói pixel, ý tôi màn hình di động
được tạo lên từ nhiều ô vuông nhỏ,
gọi là pixel, và chúng sáng lên
dựa vào những gì bạn đang nhìn thấy.
Vậy nếu định nghĩa kích thước của 1 view,
ví dụ như một button là cao 2 pixel
và rộng 2 pixel, đây là những gì bạn thấy
ở thiết bị có độ phân giải trung bình.
Trên thiết bị phân giải cao,
cũng vẫn là 2x2 pixel.
Nhưng nó nhỏ hơn,
vì có nhiều pixel
được đưa vào thiết bị này,
và trên thiết bị phân giải cực cao
có nhiều pixel hơn cả
thì button này thực sự rất nhỏ.
Tôi khó mà có thể dùng ngón tay
gõ vào nó.
Tôi phải dùng mé ngón tay
hay móng tay để chạm vào.
Chỉ vì tôi có thiết bị
phân giải cực cao,
không có nghĩa
tôi có ngón tay nhỏ hơn.
Tôi vẫn muốn có thể chạm vào button
trên màn hình.
Và đó là lý do chúng ta có
density-independent pixel.
Tôi có thể cho button của mình
cao 2dps và rộng 2dps.
Nó sẽ giống như thế này
ở trên các thiết bị khác nhau.
Chúng có cùng kích cỡ vật lý,
nhưng đằng sau Android đã dùng
số lượng pixel khác nhau.
Bạn không phải lo lý giải điều này,
chỉ cần nhớ là
bạn cần xác định kích cỡ
theo đơn vị dp.
Khi thiết kể app của mình, chúng tôi
khuyên những điểm chạm như button
nên cao và rộng ít nhất 48dps.
Chú ý là 48 dp
chứ không phải 48 pixel,
nếu không nó sẽ rất bé
trên thiết bị phân giải cực cao.
Điều này sẽ giúp app của bạn
dễ dùng hơn với mọi người.
Với tất cả những điều trên,
giờ tôi muốn bạn thử
thay đổi code TextView.
Bạn sẽ viết những dòng XML đầu tiên,
thật hào hứng.
Đầu tiên hãy cố thay đổi
dòng text trong TextView.
Rồi cố thay đổi kích thước TextView.
Sau đó tôi muốn bạn mắc lỗi,
mặt buồn.
Rồi muốn bạn làm lại nó,
mặt vui.
我们第一次已经见过 TextView 代码
但还是有点迷惑
是的 我们需要一个地方来安置它
这个地方是 IDE
又是缩写
回答一下它代表什么 Catherine?
— 集成开发环境 — 对
我们在课堂上会使用 Android Studio
这是它的界面
还是有点吓人
我想我们应该需要些东西
来帮助初学者快速上手
我们正开发一些
Android Studio 的培训软件
按照计算机科学中传统缩写方案 我们称它为 XMLV
是一款 XML 可视化工具
你写了一些 XML ?
看看输出
写的越多 输出越多
对
我们开始使用它
好
由于 XML 可视化工具 是专为本课程设置的
它不会提供 Android Studio 所有支持的功能
但在本课最后的问题中
我们会让你用 Android Studio你不再需要这个网站
如果你要跟着做 可以在讲师注释上找到链接
对于这个代码 文字显示 Happy Birthday
我们可以看到设备上显示 Happy Birthday
现在我们将文本改成 Happy Birthday, Kunal
然后在设备上放大预览
现在显示的是 Happy Birthday, Kunal.
如果改变宽和高会发生什么
我取个随意值
宽300 高500
现在 在预览窗口 TextView 区域变大了
然而 左上角的文本还是相同大小
注意宽300和
高500后面跟着的 dp
这是一个测量单位 像厘米
或毫米一样 我们用它来描述Android视图的大小
以及视图间的距离
单位 dp 表示独立密度像素
我来解释一下为什么我们需要这个
假设这些矩形代表不同的设备
它们大小一样 但是分辨率不同
这个是中等分辨率的设备 在屏幕上像素的数目中等
高分辨率和极高分辨率的设备
这里说的像素 意思是手机屏幕是由很多称之为像素的小方格构成
它们根据你看的东西被点亮
如果我定义一个视图的大小 例如 一个按键 高2像素
宽2像素 它在中等分辨率的设备上看起来是这样的
在高分辨率设备上 它也是2像素乘2像素
但是看起来会小一些
因为在手机上有更多的像素堆砌在一起
在极高分辨率设备上 会有更多像素堆砌在一个空间
按钮看起来更小
我都无法用手指去点击它
我必须用手指边缘或指甲去点击它
因为我有极高分辨率设备
不代表我有更小的手指
我还是想点击屏幕上的按键
这就是为什么我们需要 dp
我可以定义按键高2像素宽2像素
这就是在不同设备上它的样子
它们有相同的大小
但在Android内部它用不同数目的像素绘制
你不用担心这些逻辑
你只要记住你需要 dp 值来定义视图的大小
设计应用时 我们建议所有可触摸的目标 如按键
宽和高至少为48 dps
注意是48 dps 不是48像素
否则在超高分辨率设备上 它看起来会特别的小
对使用者来说 你的应用会好用好多
有了这些知识 我想让你现在尝试一下
现在修改 TextView 代码
你会激动地写你的第一行 XML代码
第一个尝试是改写 TextView 的文本
然后尝试改写 TextView 的位置
接着我想让你尝试写出一个悲伤的脸
然后撤销 改成一个开心的脸
好了, 我們第一次看過文字顯示編碼。
但它似乎仍然未有決定。
對, 我們於屋內是需要有空位。
對, 空位是一個IDE。
這裡再一次出現首字母縮略字
6
00:00:12,580 --> 00:00:13,721
Catherine,這代表什麼?
進階環境發展對, 及
我們會於堂上用安桌工作坊。
就會看似這樣。
仍然有點令人膽怯的。
對。我認為我們需要一些東西
去幫助我們的學者去容易一點立足。
對, 所以我們在發展一些東西在
安桌工作坊於訓導汽車, 於錯綜複雜的傳統
首字母縮略詞於電腦科學, 我們叫作XMLV。
意思是XML觀看台。
所以你寫一點XML?
你可以看到輸出。
你再寫多一些, 你可以再看到多些輸出。
對。
我們前往使用。
好了。
由於這XML觀看台是等別為這課堂而設的。
它不會提供所有安桌工作坊支持的工能。
但最終於這課堂的問題,
我們讓你進安桌工作坊因此你不再需要這網址。
連結在指令筆記內。若你想跟著。
這個編碼, 文字說生日快樂。
所以當我看著裝置它說生日快樂。
現在我們改文字為Kunal, 生日快樂。
之後當我放大裝置的預設看它現在說,
Kunal, 生日快樂。
stand the width and the height.
而當高或闊不變時會發生什麼。
我會用一些武斷值如300點給
闊及500給高度。
現在於預看台, 你看到文字顯示大很多。
但文字, 仍是於左上角同一大小。
留意300值的闊及高及
500是被點跟隨於每一個情況。
這是量度的單位如厘米或
豪米,我們用來形容安桌顯示的大小。
及圖像之間的距離。
點單位意思是獨立點數象素。
讓我解釋為何我們需要。
話說這些美麗的長方形代表不同的裝置。
他們的大小相同, 但象素卻不同。
這是一個中等象素的裝置及
一個中等數象素於屏幕,
高象素及特高象素的裝置。
當我說象素,
我意思是電話屏幕是由很多小細正方形組成,
即是象素,而當你們看著時會被亮著。
所以當我例明圖像的大小,
例如, 按扭, 要2點高
及2點闊,
這就是於中等象素裝置上看來會如何。
於高象素裝置, 它會是2點對2點。
但它細小很多,
因為這有很多點試著堆於裝置上,及
於特高象素裝置會有超多點子堆
於空位上,這按扭其實很細。
我很難手手指按上。
我要用手指邊或手指甲去按上。
只因為我有特高象素裝置,
不代表我有小手指。
我仍然想按屏幕上的按扭。
而這就是我們有獨立點子素的原因。
我可以較我的按扭到2點高及2點闊。
這於裝置上會看似這樣。
這是實則的大小, 但
於安桌機件下是不同象素的數目。
你不用擔心這些邏輯,你只需要記著
你只需要用點數來改變大小。
當設計你的程式時, 我們建議所有按扭
起碼要48點高及闊。
留意它說48點而不是48象素,
否則於這特高象素裝置看來會很細。
這會令你的程式對於所有人都很易用。
所以有了這些知識我想你試
現在改變文字顯然編碼。
你將會寫你第一行的XML程式, 真興奮。
所以首先改變文字顯示內的文字。
之後試試改變文字顯示的則邊。
之後我想你試制作一個錯誤不開心臉。
之後我想你取消,開心臉。