To build this layout,
I open up the activity_main.xml file.
I know that I need a vertical linear
layout to put each of these views
in a vertical column.
So, I'm going to first change the
relative layout into a linear layout.
Immediately, it shows an error saying
that the opening tag does not match
the closing tag, so I can just copy
this over and then paste it down here.
Now the tags match.
Next, I can add in the views.
First, I have a quantity text view.
So I'm going to take this text view and
then change the text inside to quantity.
Next, I have a text view that says zero.
So I can copy the first text view and
paste it below it.
I'm going to change it so the text says
zero to match the screenshot here.
The last child in this
linear layout is a button.
We haven't added a button before in our
layout, so let's Google Search that.
If you open up a browser you
can search for button android.
This first link looks good,
it's a developer.android.com site.
And here's the documentation for button,
we can ignore most of this text here.
We scroll down to read
the class overview.
It talks a little bit about some Java
code, which we haven't learned yet but
down here we have some xml for a button.
We can copy this and
see what it does in our code.
In our layout I'm going to add
a button below these two text views.
I'm going to paste the code
from the documentation here.
And now instead of the self destruct
string, I'm going to go for
something a little
friendlier like order.
This last line we can also
delete because we don't need it.
Cool, so now you have a quantity text
view, a text view that says zero, and
an order button.
Let's run it on our app,
to see what it looks like,
by hitting the green play button.
We can see down here
that it's still building.
Oh, this isn't what we wanted.
It appears that our linear layout is
actually horizontal instead of vertical.
So let's make sure that we add
the orientation attribute.
We're going to change this to say
android;orientation="vertical".
That should fix the problem.
So let's hit run again.
Okay, that's better now.
The three children are showing
up in a vertical column.
Now we just need to
style these fields so
they look a little bit more like
the screenshot we were given.
From this screenshot we see that
the quantity text view is in all caps.
In lesson one we learned about
an attribute called android:textAllCaps,
and it's showing up here
in the auto-complete.
If it shows up like this,
you can just hit enter and
it automatically adds it
in the code here for you.
We set that value to be true
because we want it in all caps.
The reason why it's better to use
this attribute to capitalize the text
is because if we ever want to change the
UI so that quantity is in lower case,
like this, all we need to do
is just remove this attribute
instead of going and changing this text.
Next, for this text here that says zero,
we should use a text size of 16sp.
Let me add that now and it shows up
in the auto-complete suggestions so
I just hit enter and
then I choose 16sp for the value.
We also want it to be
a black font color.
I'm going to use the Android
system color for
black, which is referred to like this.
Cool, that takes care of both
the quantity and the zero text views.
The order button is fine as is, it will
automatically capitalize the text for
you in a button and the height and
width are wrap content.
We do have a need to resolve
this vertical space here.
We want 16dp of padding or
margin in between the quantity and
the zero text views.
We also want also want 16dp of
padding in between the zero and
the order button.
You can implement this
in many different ways,
I'm just going to choose to add it as
layout top margin for this button.
And I'm going to add it as a bottom
margin for this quantity text view.
Feel free to do it a different
way as long as it looks the same.
The reason why I chose to do a bottom
margin and a top margin is because I
know that this middle area
here is going to change later.
We're going to change it to be
a quantity picker with a plus and
minus button, and I still want to have
16dp of space between the quantity
title and the picker.
Same for the button.
Okay, let's run it again
now on our device.
Cool, and it looks just like we wanted.
The quantity text view is in all caps,
the zero text view is in
black font color, size 16sp, and
we have the order button here.
We also have 16dp of space
between these views.
Good job.
Oh, and I almost forgot.
The quiz also asks for what happens
when you click on this button.
Well, actually it does nothing,
for now at least.
Keep watching to find
out what happens next.
لبناء واجخة العرض هذه أفتح ملفّ
activity_main.xml.
أعلم أنّي أحتاج لواجهة عرض خطّيّة عاموديّة
لوضعها في كلّ من هذه المعاينة
في خطّ عامودي.
سأغيّر أوّلًا االتّخطيط النّسبي
الى تخطيط خطّي.
للحال، نرى خطأً يقول
أنّ ترميز الفتح
لا تتلاءم مع ترميزالإغلاق،
لذا يمكنني أن أنسخ ذلك ولصقه هنا.
والآن تتلاءم.
بعد ذلك، أستطيع إضافة المعاينات.
أوّلًا، لديّ معاينة نصية للكميّة.
إذن، سآخذ هذه المعاينة النّصية
وأغيّر النّص داخلها الى الكمّية.
بعد ذلك، لديّ نصّ يظهر صفر.
إذن، يمكنني أن أنسخ المعاينة
النّصية الأوّلى وألصقها أسفلها.
سأغيّره لكي يُظهر النّص صفرًا
لكي يطابق لقطة الشّاشة هنا.
التّقسيمة الأخيرة
في هذا التّخطيط الخطّي هو زرّ.
لم نزد زرًّا في واجهة عرضنا من قبل،
فلنبحث كيفيّة فعل ذلك في Google.
إن فتحت متصفّحًا بإمكانك البحث
عن زرّ أندرويد.
الرّابط الأوّل يبدو جيّدًا، إنّه موقع
developer.android.com.
هذا هو التّوثيق للزّر، بإمكاننا تجاهل
معظم هذا النّص هنا.
سننزل لكي نقرأ لمحة عامّة عن الفئة.
تتضمّن القليل من نصّ جافا البرمجي،
الذي لم نتعلّمه بعد
ولكن هنا لدينا الـ XML للزّر.
يمكننا أن ننسخ هذا وسنرى ماذا سيفعل
في نصّنا البرمجي.
في واجهة عرضنا سأزيد زرّين
تحت هاتين المعاينتين النصّيتين.
سألصق النّص البرمجي من التّوثيق هنا.
والآن بدل من سلسلة التّدمير الذّاتي،
سأختار شيئًا أكثر ودًّا كـ "طلب".
بإمكاننا محو السّطر الأخير
إذ إنّنا لا نحتاجه،
رائع، والآن لدينا معاينة نصّية للكمّية،
معاينة نصّ تُظهر صفرًا،
وزرّ للطّلب.
لنشغّله في تطبيقنا، كي نرى كيف يبدو،
عبر الضّغط على زرّ التّشغيل الأخضر(Play).
يمكننا أت نرى هنا أنّه ما زال يُنشأ.
ليس هذا ما أردناه.
يبدو أن تخطيطنا الخطّي هو أفقيًّا
وليس عاموديًّأ.
إذًا لنتأكّد من خاصيّة الإتّجاه.
سنغيّرها
الى android:orientation="vertical".
سيحلّ هذا المشكلة.
لنشغّله مرّة أخرى.
حسنًا هذا أفضل.
الأبناء الثّلاثة تظهر في عامود رأسي.
الآن علينا أن نغيّر
شكل هذه المعاينات
حتى يبدوا أكثر شبهًا بلقطة الشّاشة
التي حصلنا عليها.
من لقطة الشّاشة نرى
أن معاينة نص الكمّية هو بأحرف كبيرة.
في الدّرس الأوّل تعلّمنا عن خاصيّة
اسمها android:textAllCaps،
وهو يظهر هنا في الإكمال التّلقائي.
إن ظهر كذلك، يمكنك ضغط Enter
سيزيدها الى نصّكم البرمجي تلقائيًّا.
سنحدّد تلك القيمة كصحيحة،
إذ إنّنا نريد الأحرف الكبيرة.
من الأفضل استعمال
هذه السمة لتكبير الأحرف
سببه أنّه إن أردنا تغيير واجهة المستخدم
كي تظهر أحرف صغيرة هكذا،
كلّ ما نحتاج أن نفعله
هو أن نزيل هذه الخاصيّة
بدل أن نقوم بتغيير هذا النّص.
بعد ذلك، علينا استعمال حجم ١٦sp
للنّص الذي يظهر صفرًا،
دعوني أضيف ذلك الآن، وهو يظهر
في اقتراحات الإكمال التّلقائي،
وسأضغط Enter ثمّ أختار قيمة ١٦sp.
ونريد أن يكون لون الخطّ أسود.
سأستعمل نظام ألوان أندرويد للأسود،
والذي يُشار إليه هكذا.
عظيم، ذلك يهتمّ بأمر معاينة نصَّ
الكمّية والصّفر.
زرّ الطّلب مناسب كما هو،
ستُكَبَّر الأحرف تلقائيًّا في الزّر،
والطّول والعرض هما wrap_content.
نحن نحتاج الى حلّ
لهذه المسافة العاموديّة هنا.
نريد ١٦dp من المساحة أو الهامش
بين معاينتي نصّ الكميّة والصّفر.
نريد أيضًا مساحة ١٦dp بين الصّفر
وزرّ الطّلب.
يمكنك تنفيذ ذلك بطرق كثيرة مختلفة،
سأختار زيادتها
كتصميم للهامش الأعلى لهذا الزّر.
وسأزيدها كهامش سفلي
لمعاينة نصّ الكميّة.
لا تتردّوا بأن تقوموا بالأمر
بطريقة مختلفة طالما يخلق المظهر نفسه.
سبب اختياري للهوامش في الأعلى والأسفل
هو لأنّي أعلم أنّ المنطقة الوسطى
ستتغيّر لاحقًا.
سنغيّرها لتصبح منتقٍ للكمّية
مع زرّ زائد وناقص،
وما زال عليّ أن أضع مساحة ١٦dp
بين عنوان الكمّية والمنتقي.
والأمر نفسه بالنّسبة للزّر.
والآن لنشغّلها مرّة أخرى على جهازنا.
عظيم، تبدو الآن كما نريد.
معاينة نصّ الكميّة هو بأحرف كبيرة،
معاينة نصّ الصّفر هو بخطّ أسود، حجم ١٦sp،
ولدينا زرّ الطّلب هنا.
ولدينا مساحة ١٦dp بين المعاينات.
أحسنتم.
كدت أنسى! الإختبار يسأل أيضًا ماذا يحدث
عندما تضغطون على هذا الزّر.
حسنًا، لا يحصل أيّ شيء، على الأقلّ الآن.
تابعوا المشاهدة لتكتشفوا
ماذا يحدث بعد ذلك.
Para crear este diseño tengo que abrir
el archivo activity_main.xml.
Sé que necesito
un diseño vertical y lineal
para poner cada una de estas vistas
en una columna vertical.
Así que primero cambiaré
el RelativeLayout por el LinearLayout.
En seguida me aparece un error,
diciendo que la etiqueta de apertura
no coincide con la de cierre.
Lo soluciono copiando esta de aquí
y pegándola aquí abajo.
Ahora las etiquetas coinciden.
Lo siguiente es añadir las vistas.
En la primera vista
pone "quantity" [cantidad].
Me voy a TextView,
le cambio el texto y pongo quantity.
Ahora tengo una vista en la que pone 0.
Copio la primera TextView
y la pego en la de abajo.
La cambiaré para que aquí ponga 0
al igual que en la captura de pantalla.
El último hijo en este diseño lineal
es un botón.
Como no hemos añadido ningún botón antes
en nuestro diseño, busquémoslo en Google.
Abre tu navegador y busca:
"botón android".
Este primer enlace tiene buena pinta,
la página es: developer.android.com.
Aquí hay información para "botón".
Ignoremos esta parte de texto de aquí.
Deslicémonos hacia abajo
para leer un resumen de la clase.
Habla un poco sobre el código Java,
el cual aún no hemos aprendido.
Aquí abajo tenemos algo de XML
que sirve para poner un botón.
Podemos copiarlo para ver
qué hace en nuestro código.
En nuestro diseño añadiré un botón
debajo de estas dos TextView.
Voy a pegar aquí el código
que hemos encontrado en nuestra búsqueda.
Y ahora en lugar del hilo self_destruct,
voy a buscar algo más amistoso
como, por ejemplo,
Order [Pedir].
Podemos borrar esta última línea también
ya que no la necesitamos.
Ahora tienes una TextView de "Cantidad",
una TextView en la que pone 0,
y un botón de "Pedido".
Ejecutémoslo en nuestra app
para ver qué aspecto tiene,
pulsando el botón de reproducción
de color verde.
Aquí podemos ver que aún se está creando.
Esto no es lo que queríamos.
Parece que nuestro LinearLayout
es horizontal en lugar de vertical.
Vamos a asegurarnos de que hemos añadido
el atributo sobre la orientación.
Vamos a cambiar esto para que ponga:
android:orientation="vertical".
Esto debería resolver el problema.
Pulsemos otra vez el botón de reproducir.
Bien, eso está mejor.
Los tres hijos se muestran
en una columna vertical.
Ahora tenemos que diseñar estos campos
para que se parezcan un poco más
a la captura de pantalla que nos dieron.
En la captura de pantalla, el TextView
"Cantidad" está todo en mayúsculas.
En la lección uno hablamos de un atributo
llamado android:textAllCaps,
y nos aparece aquí,
en autocompletar.
Cuando lo veas así,
si le das a Enter,
se te añadirá automáticamente
en el código.
A este valor le hemos puesto true
porque lo queremos todo en mayúsculas.
Es mejor utilizar este atributo
para poner en mayúsculas todo el texto
porque cuando queramos cambiar la UI
para que la cantidad salga en minúsculas,
todo lo que tendremos que hacer
es quitar este atributo
sin necesidad de cambiar este texto.
Sigamos. Este texto en el que pone 0
debería tener un tamaño de texto de 16sp.
Lo voy a añadir ahora y justo me sale
como sugerencia de autocompletar.
Le doy a Enter
y después escojo 16sp como valor.
También queremos que tenga
una fuente de color negro.
Utilizaré el color negro
del sistema de Android,
que lleva el mismo nombre.
Bien, esto sirve tanto para la TextView
de "Cantidad" como para la de 0.
El botón de "Pedido" está bien como está.
Escribirá en mayúsculas el texto
en el botón de manera automática
y la altura y el ancho son wrap_content.
Necesitamos arreglar
este espacio vertical de aquí.
Queremos 16dp de empaquetado o margen
entre las vistas de texto
de "Cantidad" y 0.
También queremos 16dp de empaquetado
entre el 0 y el botón de "Pedido".
Puedes implementar esto
de muchas maneras diferentes.
Voy a añadirlo como diseño
del margen superior para este botón.
Y lo añadiré como margen inferior
para la vista de texto de "Cantidad".
Si lo prefieres, hazlo de otra manera,
pero haz que se parezca a este.
He escogido poner un margen superior
y uno inferior
porque sé que este área de aquí en medio
más tarde cambiará.
Lo cambiaremos para que sea
un selector de cantidad,
con un botón de más y menos,
y aún quiero tener 16dp de espacio
entre el título de cantidad y el selector.
Usaremos el mismo criterio para el botón.
Bien, ejecutémoslo ahora
otra vez en nuestro dispositivo.
Perfecto, tiene justo
la apariencia que queríamos.
La vista de texto de "Cantidad"
está en mayúsculas,
la vista de texto del 0 está
en una fuente negra y hace16sp de tamaño,
y tenemos el botón de "Pedido" aquí.
También tenemos
16dp de espacio entre las vistas.
Buen trabajo.
Oh, casi se me olvida.
El test también pregunta
qué pasa cuando pulsas este botón.
Bueno, en realidad no pasa nada,
al menos por ahora.
Sigue atento para descubrir
qué pasa después.
Pour créer cette disposition,
j'ouvre le fichier activity_main.xml.
J'aurai besoin d'une disposition
linéaire verticale pour placer chaque vue
dans une colonne verticale.
Je vais donc d'abord changer
la disposition de relative à linéaire.
L'éditeur me signale directement
que la balise ouvrante est différente de
la fermante, donc je vais copier
ceci pour le coller ici, en bas ;
balises identiques, voilà.
Ensuite, je peux ajouter les vues.
D'abord, j'ai une TextView « quantité ».
Je vais donc prendre cette TextView et
changer le texte affiché en « quantité ».
Ensuite, j'ai une TextView qui dit « 0 ».
Je peux donc copier la première
TextView et la coller plus bas.
Je change sa valeur pour que le texte
dise « 0 » comme dans ma capture.
Le dernier enfant de
cette disposition linéaire est un bouton.
On n'avait jamais ajouté de bouton dans
nos dispositions avant, alors voyons ça.
En ouvrant un navigateur,
on peut chercher "Button Android".
Ce premier lien a l'air bon,
le site est en developer.android.com.
Et voici la documentation pour Button,
on peut passer la majorité de ce texte.
On fait défiler pour pouvoir
lire le survol de cette classe.
Il parle un peu de code JAVA,
on n'en a pas encore appris, mais
plus bas, ici, on a
du code XML pour un bouton.
On peut copier ceci et
voir ses effets dans notre code.
Dans notre disposition, j'ajoute
un bouton sous les deux TextViews.
Je colle mon code pris
dans la documentation ici.
Ensuite, au lieu de la chaîne
self_destruct, je vais plutôt
afficher une chose plus
sympathique comme Commander.
On peut aussi effacer la dernière
ligne, on n'en aura pas besoin.
Cool. On a donc une TextView "quantité",
une autre qui affiche "0", et un bouton
"Commander".
Exécutons ce script,
pour voir ce que ça donne,
avec ce bouton vert Lecture.
On voit en bas
que la machine compile le code.
Oh, ce n'est pas ce qu'on veut.
Il semble que notre disposition linéaire
soit en fait horizontale, pas verticale.
Veillons donc à ajouter
l'attribut "orientation".
On va le changer à, mettons…
« android:orientation="vertical" ».
Ça devrait régler le problème.
Refaisons Exécuter.
Ok, c'est déjà mieux.
Les trois enfants s'affichent
dans une colonne verticale.
Il ne reste qu'à
styliser ces vues pour
qu'ils ressemblent plus
à la capture qu'on nous a donnée.
Sur la capture on voit que la TextView
"quantité" est écrire en majuscules.
Dans la leçon 1, on a vu qu'il existe
un attribut « android:textAllCaps ».
Il apparaît ici dans l'auto-complétion.
S'il apparaît comme ici,
il suffit de faire Entrée
et l'éditeur l'insérera
automatiquement dans le code.
On place la valeur à "true"
parce qu'on veut le texte en majuscules.
S'il vaut mieux utiliser cet attribut
pour mettre les lettres en majuscules,
c'est parce que si on modifie l'interface
pour passer "quantité" en minuscules,
comme ici, il suffira
de retirer l'attribut
au lieu de chercher
à changer le texte.
Ensuite, pour la TextView qui dit "0",
il faut une taille de police de 16 sp.
Je vais l'ajouter, l'attribut apparaît
dans les auto-complétions possibles alors
je fais juste Entrée et
j'indique 16 sp en valeur.
On veut aussi que
la police soit de couleur noire.
J'utilise le système
de couleurs d'Android pour le
noir, qu'on appelle comme ceci.
Cool. On s'est ainsi occupé
des TextViews "quantité" et "0".
Le bouton Commander est bien ainsi,
le texte est toujours mis en majuscules
dans les boutons, avec une hauteur
et une largeur en "wrap_content".
On doit cependant s'occuper
de cet espace vertical.
On veut 16 dp de marge intérieure
ou extérieure entre les TextViews
"quantité" et "0".
On veut aussi 16 dp de marge intérieure
entre le "0" et
le bouton Commander.
On peut l'implémenter
de bien des façons,
Je préfère juste l'ajouter comme
marge supérieure pour le bouton ;
puis comme marge inférieure
pour la TextView "quantité".
N'hésitez pas à faire autre chose
tant que l'aspect final est le même.
J'ai préféré placer des marges
supérieures et inférieures parce que je
sais que cette zone au milieu
changera plus tard.
On la changera pour en faire
un sélecteur de quantité avec des
boutons plus et moins, et je tiens
à avoir 16 dp d'espace entre le titre
"quantité" et le sélectionneur.
Pareil pour le bouton.
Ok, relançons le code
sur notre appareil.
Cool, l'écran est pile comme on voulait.
La TextView "quantité" est
tout en majuscules, la TextView "0"
a une police noire de 16 sp, et on a
le bouton Commander ici.
On a aussi un espace
de 16 dp entre ces vues.
Beau travail.
Oh, j'avais oublié.
Le quiz demande aussi ce qui se passe
quand on appuie sur ce bouton.
Ben… En fait, il ne fait rien.
Pour le moment, du moins.
Restez attentifs pour
connaître la suite.
Untuk membuat layout ini,
saya membuka fail activity_main.xml.
Saya tahu saya butuh
LinearLayout vertikal
untuk meletakkan setiap tampilan ini
dalam kolom vertikal.
Pertama, saya akan mengubah
RelativeLayout menjadi LinearLayout.
Ini segera menampilkan kesalahan
bahwa tag pembuka tidak cocok
dengan tag penutup.
Saya bisa menyalin ini
dan merekatkannya di bawah sini.
Sekarang tag-nya cocok.
Lalu saya bisa
menambahkan tampilannya.
Pertama, ada TextView "Quantity".
Saya akan mengambil TextView ini
dan mengganti teksnya menjadi "Quantity".
Berikutnya, ada TextView
yang bertuliskan "0".
Saya bisa menyalin TextView pertama
dan merekatkannya di bawahnya.
Saya akan ganti teksnya menjadi "0"
agar cocok dengan cuplikan layar ini.
Anak terakhir dalam LinearLayout ini
adalah tombol.
Kita belum pernah menambahkan tombol
dalam layout. Mari cari di Google.
Jika membuka peramban,
Anda bisa mencari "button android".
Taut pertama ini tampak bagus.
Ini situs developer.android.com.
Ini dokumentasi untuk tombol. Kita bisa
mengabaikan mayoritas teks di sini.
Kita gulirkan ke bawah
untuk membaca Class Overview.
Ini membahas sedikit tentang kode Java
yang belum kita pelajari.
Namun di bawah sini, ada XML untuk tombol.
Kita bisa menyalin ini dan melihat
pengaruhnya pada kode.
Dalam layout, saya akan menambahkan
tombol di bawah kedua TextView ini.
Saya akan merekatkan kode
dari dokumentasi tadi di sini.
Sekarang, alih-alih string self_destruct,
saya akan memilih
yang lebih bersahabat, seperti "Order".
Baris terakhir ini juga bisa dihapus
karena tidak perlu.
Bagus, sekarang Anda punya TextView "0"
dan "Quantity" serta tombol Order.
Jalankan di aplikasi
untuk lihat hasilnya
dengan mengeklik
tombol putar berwarna hijau ini.
Di bawah, kita bisa melihat
aplikasinya sedang dibuat.
Bukan ini yang kita mau.
Tampaknya, LinearLayout kita
adalah horizontal, bukan vertikal.
Jadi, pastikan kita menambahkan
atribut orientasi.
Kita akan mengubah ini
dengan android:orientation="vertical".
Itu akan memecahkan masalah ini.
Kita klik Run lagi.
Itu lebih baik.
Ketiga anak ini ditampilkan
dalam kolom vertikal.
Sekarang tinggal mempercantiknya
agar lebih mirip
dengan cuplikan layar yang tersedia.
Dari cuplikan layar ini, kita melihat
TextView "Quantity" berhuruf besar.
Di Pelajaran 1, kita mempelajari atribut
yang disebut android:textAllCaps.
Atribut itu muncul
dalam autocomplete ini.
Jika muncul seperti ini,
tinggal tekan enter
dan ini akan otomatis
ditambahkan pada kode.
Kita buat nilainya "true"
karena kita ingin huruf besar semua.
Lebih baik menggunakan atribut ini
untuk menulis teks dengan huruf besar
karena antarmuka pengguna ingin diubah
agar "Quantity" ditulis
dengan huruf kecil seperti ini,
kita tinggal menghapus atribut ini
alih-alih mengubah teksnya.
Berikutnya, untuk teks "0", kita harus
menggunakan ukuran teks 16 sp.
Saya tambahkan sekarang.
Ini muncul di saran autocomplete.
Jadi, saya tekan enter saja,
lalu saya memilih 16 sp untuk nilainya.
Kita juga ingin warna hurufnya hitam.
Saya akan menggunakan warna sistem Android
untuk hitam yang ditulis seperti ini.
Bagus, itu menyelesaikan
TextView "Quantity" dan "0".
Tombol Order-nya sudah bagus.
Ini akan otomatis membuat
teks dalam tombolnya berhuruf besar.
Tinggi dan lebarnya wrap_content.
Namun kita harus menyelesaikan
ruang vertikal ini.
Kita menginginkan padding
atau margin sebesar 16dp
antara TextView "Quantity" dan "0".
Kita juga menginginkan padding 16 dp
antara "0" dan tombol Order.
Anda dapat menerapkan ini
dalam berbagai cara.
Saya hanya akan menambahkannya
sebagai layout margin atas
untuk tombol ini.
Saya akan tambahkan sebagai margin bawah
untuk TextView "Quantity" ini.
Silakan melakukannya dengan cara lain
selama tampilannya sama.
Penyebab saya memilih
margin bawah dan margin atas
adalah karena saya tahu
area tengah ini akan berubah nantinya.
Kita akan menjadikannya pemilih kuantitas
dengan tombol plus dan minus.
Saya juga masih
menginginkan jarak 16 dp
antara "Quantity", judul,
dan pemilih kuantitas.
Begitu pula dengan tombol ini.
Mari kita jalankan lagi sekarang
pada perangkat kita.
Bagus, dan ini persis
seperti yang kita mau.
TextView "Quantity" ditulis
dengan huruf besar,
TextView "0" menggunakan
huruf 16 sp berwarna hitam,
dan ada tombol Order di sini.
Juga ada jarak 16 dp
antara tampilan-tampilan ini.
Bagus.
Saya hampir lupa.
Dalam kuis juga ada pertanyaan,
apa yang terjadi saat tombol ini diklik?
Tidak terjadi apa-apa,
setidaknya untuk sekarang.
Terus saksikan untuk ketahui
apa yang terjadi berikutnya
このレイアウトを構築するために
activity_main.xml ファイルを開きます
これらのビューを縦に配置する
リニアレイアウトが必要です
まず最初に相対レイアウトを
リニアレイアウトに変えます
すぐに開始タグと終了タグが一致しませんという
エラーが表示されますので
コピーして下に貼り付けます
これで一致しました
次にビューに追加していきます
まずは Quantity(量)の
テキストビューにします
ここのテキストビューの中身を
Quantityに変更します
次は 0(ゼロ)というテキストビューです
最初のテキストビューを
コピーして下に貼り付けます
このスクリーンショットに合うように
テキストを0に書き換えます
このリニアレイアウトの
最後の入れ子はボタンです
ボタンを入れるのは初めてなので
Google で検索しましょう
ブラウザで button Android と検索します
最初のリンクでいいでしょう
developer.android.com のサイトです
ボタンに関するドキュメントですが
大部分は無視してかまいません
「クラスの概要」までスクロールしましょう
まだ習っていない Java コードについて
話していますが
下にボタンの XML が載っています
これをコピーして
コードに書き込んでみましょう
2つのテキストビューの下に
ボタンを追加します
ここにコピーしたコードを貼り付けます
self destruct string を消して
order(注文)にしてみましょう
最後の一行も必要ないので削除しましょう
これでQuantity(量) 0(ゼロ)のテキストビュー
order(注文)のボタンができました
アプリを実行してみましょう
緑のプレイボタンを押します
下を見ると まだ構築の途中ですね
おっと 違いますね
リニアレイアウトが縦ではなく
横に表示されてしまいました
orientationの属性を
追加することにしましょう
android:orientation="vertical"
に変更します
これで解決したはずです
もう一度実行しましょう
良くなりました
3つの子ビューが縦に並びました
フィールドのスタイルを少し整えて
例のスクリーンショットのように
見えるようにしましょう
この画面ではQuantityの
テキストビューはすべて大文字です
最初のレッスンで
android:textAllCaps を学びましたね
オートコンプリートにも出てきています
enter を押せば自動的に
コードに追加してくれます
大文字にしたいので値は‟true”とします
大文字にする際に
この属性を使う利点は
UI を変更したくなり
quantity を小文字にすることになったら
テキストを書き換えるのではなく
属性を削除するだけで済むからです
次は0というテキストのサイズを
16sp に変えます
またオートコンプリートの
選択肢に出てきたので
enter を押して値を 16sp にします
フォントの色も黒にしたいですね
Androidの黒のシステムカラーを使います
このように書きます
quantityと0のテキストビューができました
注文ボタンはこのままでいいでしょう
大文字になっていますし
高さと幅はwrap contentになっています
この縦のスペースを何とかする必要があります
量とゼロの間に 16dp のパディングか
マージンを入れたいですね
ゼロと注文ボタンの間にも
16dp のパディングが必要です
実装方法はたくさんありますが
私は ボタンには上にマージンを追加します
quantityには
下部マージンを追加することにします
結果が同じであれば他の方法でも構いません
私が上部マージンと
下部マージンを使うことにしたのは
この真ん中のエリアは後で変更するからです
プラスとマイナスのボタンの量を
選べるピッカーにしますが
quantity の見出しとピッカーの間に
16dp のスペースを入れたいからです
ボタンも同じです
デバイスで実行してみましょう
思った通りにできました
quantityのテキストビューはすべて大文字になり
0のテキストビューは 16sp の黒で表示
注文ボタンがここにあります
ビューの間に
16dp のスペースがあります
よくできました!
忘れるところでした
クイズでは このボタンを押すと
どうなるか問われます
今のところ何も起きません
どうなるかは続きをご覧ください
이 레이아웃을 만들기 위해
activity_main.xml 파일을 열어요.
이 뷰들을 수직 열에 각각 놓기 위해
수직 LinearLayout이
필요함을 알아요.
먼저 RelativeLayout을
LinearLayout으로 바꿀게요.
즉시, 여는 태그가 닫는 태그와
일치하지 않는다는
에러 메시지가 발생했네요.
이걸 복사해서 여기 아래에 붙여 넣어요.
이제 태그가 일치합니다.
다음으로 뷰를 추가합시다.
먼저, quantity 텍스트 뷰가 있어요.
이 뷰를 가지고 안의 텍스트를
quantity로 바꿀게요.
다음으로 0이라고 말하는
텍스트 뷰가 있어요.
첫 번째 텍스트 뷰를 복사해
여기 아래에 붙여 넣을 수 있어요.
이것을 바꿔서 여기 화면과 같도록
텍스트가 0이 되도록 할 겁니다.
이 LinearLayout의 마지막
child는 버튼입니다.
전에 우리 레이아웃에 버튼을 추가한 적이
없었으니, Google에서 검색해보죠.
브라우저를 열면 button
android라고 검색할 수 있어요.
첫 링크가 좋아 보이네요.
developer.android.com 사이트예요.
여기 버튼에 관한 문서가 있어요.
여기 대부분의 텍스트는 무시하고요.
클래스 개요를 보기 위해
아래로 스크롤해 내려갑니다.
우리가 아직 배운 적 없는
Java 코드에 대해 얘기하지만,
여기 아래에 버튼을 위한
xml도 있네요.
이걸 복사해서 우리 코드에서
무슨 일이 일어나는지 봅시다.
우리 레이아웃에 두 텍스트 뷰
아래에 버튼을 추가할 겁니다.
문서에서 온 코드를
여기 붙여넣을 겁니다.
이제 자폭하는 문자열 대신
order 같은 더 친근한 것으로 가볼게요.
마지막 줄은 필요하지 않으므로
지워도 되죠.
좋아요, 이제 quantity 텍스트 뷰,
0이라는 텍스트 뷰,
order 버튼이 있죠.
어떻게 보이는지 알기 위해
초록 재생 버튼을 눌러서
앱을 실행해봅시다.
이것이 구축되고 있는 걸
여기서 볼 수 있어요.
이건 우리가 원하던 게 아니에요.
우리 LinearLayout이 사실
수직이 아니라 수평으로 나타나네요.
방향 속성을 넣어봅시다.
android:orientation="vertical"이라고
말하도록 바꿔봅시다.
그럼 문제가 해결될 겁니다.
다시 실행을 눌러요.
좋아요, 이제 낫네요.
세 children은 수직 열에서 보여요.
우리는 이 필드에 스타일을 줘서
우리가 받은 화면 그림과
더 비슷하게 만들어야 합니다.
화면 그림에서 quantity 텍스트 뷰가
모두 대문자인 것을 볼 수 있어요.
레슨 1에서 android:textAllCaps
라는 속성을 배웠어요.
이는 자동 완성으로 나타나죠.
이렇게 나타난다면, 그냥 엔터를 눌러
당신을 위해 여기 코드에
자동으로 입력되게 하세요.
우리는 모두 대문자이길 바라므로
값을 참으로 둡니다.
텍스트를 대문자화할 때
이 속성을 쓰는 게 더 나은 이유는
당신이 UI를 바꿀 때 quantity가
이렇게 소문자일 때,
우리가 할 일은 그저 이 속성을
없애는 것이기 때문입니다.
텍스트를 찾아 바꿀 필요 없이요.
다음으로 여기 텍스트는 0은
16sp로 바뀌어야 합니다.
지금 추가하죠. 이것은
자동완성으로 제안되었으니
저는 엔터를 누르고
값으로 16sp를 선택합니다.
저는 글꼴 색이 검정이길 원해요.
검은색을 위한
Android 시스템 컬러를 사용하죠.
그건 이렇게 참조됩니다.
좋아요, 그건 quantity와 0
텍스트 뷰 모두를 다루는군요.
order 버튼은 이대로 괜찮고
버튼 속의 텍스트를
자동으로 대문자화할 겁니다.
높이 너비는 wrap_content네요.
우리는 이 수직 공간을 해결해야 해요.
quantity와 0 텍스트 뷰 사이에
16dp의 패딩이나 마진을 원해요.
또한 텍스트 뷰 0과
order 버튼 사이에도
16dp의 패딩을 원해요.
다양한 많은 방법으로
이걸 할 수 있어요.
저는 이 버튼에 layout_marginTop
을 추가하겠어요.
quantity 텍스트 뷰에는
marignBottom을 추가하고요.
같은 모습으로 보인다면
다른 어떤 방법으로 해도 상관없어요.
제가 아래 마진과 위의 마진을
선택한 이유는
여기 이 중간 부분이
나중에 바뀔 것을 알기 때문이죠.
우리는 이것을 + - 버튼이 있는
quantity picker로 바꿀 것이고
전 quantity 와 picker 사이에
여전히 16dp의 공간을 원해요.
버튼에도 마찬가지고요.
좋아요, 다시
기기에서 실행해 봅시다.
멋져요. 우리가 원하던 것 같네요.
quantity 텍스트 뷰는 대문자고
0 텍스트 뷰는 검은색 글자색이고
사이즈는 16sp이고,
여기 order 버튼이 있죠.
이 뷰들 사이에 16dp의
공간도 있죠.
잘 했어요. 잊을 뻔 했네요
이 퀴즈는 이 버튼을
클릭했을 때 발생하는 일도 물어보죠.
사실 지금으로선
아무 일도 안 일어나네요.
다음에 무슨 일이 일어나는지
찾기 위해 계속 보세요.
Para construir este layout,
preciso abrir o arquivo activity_main.xml.
Sei que preciso de um LinearLayout vertical
para colocar essas Views
em uma coluna vertical.
Primeiro vou mudar o RelativeLayout
em um LinearLayout.
Imediatamente, ele mostra um erro
na tag de abertura
que não coincide com a tag de fechamento,
assim, copio daqui para colar aqui.
Agora as tags coincidem.
Em seguida, vou adicionar as Views.
Primeiro, tenho o TextView de Quantidade.
Vou aproveitar este TextView
e alterar seu texto para Quantidade.
O próximo é o TextView com o valor zero.
Posso copiar o primeiro TextView
e colar aqui abaixo deste.
Vou alterar o texto para o texto do valor 0
coincidir com a imagem da tela.
O último filho neste LinearLayout é o botão.
Ainda não adicionamos botão no layout,
então vamos buscar no Google.
Ao abrir navegador,
procure por "botão Android."
Este primeiro link parece bom,
é um site developer.android.com.
Aqui está a documentação para o botão.
Podemos ignorar a maior parte do texto.
Vamos rolar a tela para ler
o resumo da Classe.
O texto trata de um código Java,
que ainda não aprendemos.
Mas aqui, temos arquivos
em XML para um botão.
Podemos copiar isto
e ver faz em nosso código.
Em nosso layout vou adicionar o botão
abaixo dessas duas TextViews.
E colar o código da documentação
neste local do nosso código.
E agora, em vez da string
de "autodestruição",
vamos para algo mais amigável,
como o nosso Pedido.
Não precisamos do resto,
podemos apagar a linha.
Legal, você agora tem uma TextView de Quantidade,
uma TextView que diz 0,
e um botão de Pedido.
Vamos executar no app,
e ver como se parece,
apertando o botão verde Play.
Vemos aqui embaixo
ele sendo construído.
Opa, não é isso que queremos.
Parece que o LinearLayout
é horizontal ao invés de vertical.
Então, vamos garantir que adicionamos
o atributo de orientação.
Vamos mudar para o texto
android;orientation=vertical.
Isso deve resolver o problema.
Vamos executar novamente.
Ok, agora está melhor.
Os três elementos filhos exibidos
em uma coluna vertical.
Só falta customizar esses campos
para que fiquem parecidos
com o nosso modelo de tela.
Na tela vemos a TextView
de Quantidade em maiúscula.
Na Lição 1, conhecemos o atributo
chamado android:textAllCaps.
E ele aparece aqui
no autocompletar.
Se aparecer isso,
basta apertar Enter.
E será automaticamente adicionado ao código.
Definimos esse valor como true,
porque queremos tudo em maiúsculas.
O motivo de usar esse atributo
para capitalizar o texto,
é para se quisermos mudar
a interface do usuário,
e mostrar QUANTIDADE
em letras minúsculas, como aqui,
tudo o que precisaremos fazer
é remover este atributo sem alterar o texto.
Para a TextView que exibe o valor "0",
devemos usar o texto com tamanho 16 sp.
Vou adicionar agora,
a sugestão surge no autocompletar,
e então aperto Enter.
Vou escolher então 16 sp para o valor.
Também queremos fonte de cor preta.
Vou usar o sistema de cores Android para o preto,
com esta referência aqui.
Legal, assim concluímos as TextViews
de Quantidade e do valor "0".
O botão de Pedido está bem sim,
ele capitalizará automaticamente texto em um botão,
e a largura e altura de wrap_content.
Precisamos corrigir o espaço vertical aqui.
Queremos 16 dp de padding ou margem
entre TextViews de Quantidade e "0".
Também queremos distância de 16 dp
entre o "0" e o botão de Pedido.
Você pode implementar isso
de maneiras diferentes,
Para este botão vou adicionar como layout_marginTop,
E como layout_marginBottom
para a TextView Quantidade.
Fique à vontade para usar outro modo,
desde que fique assim.
Escolhi fazer uma margem inferior
e uma margem superior
é porque sei que esta área central
irá mudar mais tarde.
Será alterado para seletor de quantidade
com um botões de somar e subtrair.
e eu ainda quero ter 16 dp de espaço
entre o título Quantidade e o seletor.
O mesmo vale para o botão.
Ok, vamos executá-lo novamente
em nosso dispositivo.
Legal, ficou exatamente como queríamos.
O TextView QUANTIDADE
está em maiúsculas,
a TextView "0" tem fonte preta,
16 de tamanho, e o botão de Pedido aqui.
Temos também 16 dp de espaço entre as Views
Bom trabalho! Opa, e eu quase esqueci.
O questionário também pergunta
o que ocorre quando você aperta o botão.
Bem, na verdade, ele não faz nada,
pelo menos no momento.
Assista para descobrir
o que acontece a seguir.
Чтобы создать данный макет,
открываем файл activity_main.xml.
Я знаю, что нам нужен вертикальный
линейный дизайн макета, где каждый элемент
будет выстроен в вертикальный столбец.
Для начала необходимо поменять
относительную структуру на линейную.
Сразу же мы получаем ошибку, сообщающую
что открывающий тег не соответствует
закрывающему тегу, поэтому я просто
скопирую это и вставлю сюда.
Теперь теги совпадают.
Далее, я могу добавить элементы.
Во-первых, у нас есть поле количества.
Возьмем этот текстовый элемент и
изменим надпись на Quantity [Количество].
Далее, у нас есть поле с надписью 0.
Тогда я скопирую первое поле и
вставлю его ниже.
Я изменю его, чтобы надпись была 0,
как показано на снимке экрана.
Последний дочерний элемент этого
линейного макета это кнопка.
Мы еще не добавляли кнопки ранее на наш
макет, поэтому давайте поищем в Google.
Открыв браузер, вы можете
начать поиск по словам «кнопка Android».
Первая ссылка выглядит интересно,
это сайт developer.android.com.
И здесь есть документация по кнопкам, мы
можем просто пропустить большинство текста
Прокрутим вниз, чтобы перейти к
обзору класса.
Здесь рассказывает о коде Java, который
мы еще не изучали, но
здесь также есть XML-код для кнопки.
Мы скопируем это и проверим,
как это будет работать в нашем коде.
На нашем макете я добавлю
кнопку ниже этих двух текстовых полей.
Я вставлю код
из документации сюда.
И теперь вместо строки selfdestruct
[самоуничтожение] я вставлю что-нибудь
более дружественное,
вроде «Заказать».
Последние строки мы также можем
удалить, поскольку они нам не нужны.
Здорово, теперь у нас есть текстовое поле
количество, поле с нулем и
кнопка выполнения заказа.
Теперь запустим это в приложении,
чтобы проверить, как это выглядит,
нажав зеленую кнопку запуска.
Мы видим, что приложение
все еще генерируется.
Ой, это не то, что мы хотели.
Оказалось, что наш линейный макет на самом
деле горизонтальный, а не вертикальный.
Поэтому необходимо добавить
атрибут ориентации.
Изменим это на
android;orientation="vertical".
Это должно помочь решить проблему.
Нажмем запуск еще раз.
Отлично, так то лучше.
Три дочерних элемента показаны
в вертикальном виде.
Теперь необходимо
настроить стили этих полей таким образом,
чтобы они выглядели похоже на те
на снимке экрана, который нам дали.
На изображении мы видим, что поле
количества написано заглавными буквами.
На первом уроке мы изучили
атрибут android:textAllCaps,
и он появился здесь
в автозавершении кода.
Если он появляется таким образом,
можно просто нажать Enter и
он будет автоматически
добавлен в ваш код.
Мы устанавливаем это значение в True,
чтобы текст отображался заглавными буквами
Причина, по которой лучше использовать
этот атрибут для изменения текста,
в том, что если когда-либо мы захотим
изменить интерфейс, поменяв буквы на
маленькие, как здесь, все что нам нужно —
просто удалить этот атрибут
вместе замены всего текста.
Далее, для теста, где написан ноль,
необходимо установить размер в 16sp.
Добавим это и атрибут появляется в
списке автозавершения, поэтому
я просто нажму Enter и
выберу 16sp в качестве значения.
Также необходимо поменять цвет
текста на черный.
Используем системный цвет
Android в качестве
черного, что выглядит вот так.
Здорово, это изменит оба текстовых поля —
количества и нуля.
Кнопка заказа уже в порядке, система
автоматически изменит формат текста для
вас, а высота и ширина
изменяться под содержимое.
Нам необходимо разобраться с
этим вертикальным пространством.
Необходимо установить интервалы или
отступ в 16dp между надписью «Quantity»
нулем.
Также интервал в 16dp необходим
между надписью 0 и
кнопкой заказа.
Вы можете добиться этого
множеством способов,
а я сделаю это путем добавления верхнего
отступа для этой кнопки.
Также я добавлю нижний отступ
для текстового поля количества.
Вы можете спокойно сделать это иным
способом, если результат будет такой же.
Причина, по которой я решила сделать это
путем нижнего и верхнего отступов, в том,
потому что я знаю, что данная область
в середине будет изменяться далее.
Мы изменим это, чтобы
можно было выбирать количество кнопками
плюс и минус, и я также хочу оставить
отступ в 16dp между надписью
количество и селектором.
То же самое для кнопки.
Хорошо, давайте запустим это
еще раз на нашем устройстве.
Отлично! Выглядит как мы хотели.
Количество теперь заглавными буквами,
текстовое поле с нулем написано
черным шрифтом, размера 16sp, и далее
у нас кнопка заказа.
Также, между элементами
установлен интервал в 16dp.
Прекрасно!
Ой, я почти забыла.
В задании спрашивается, что произойдет
когда вы нажмете на кнопку?
Вообще-то, ничего не произойдет,
по крайней мере пока.
Смотрите далее, чтобы
узнать больше.
Bu yerleşimi oluşturmak için,
activity_main.xml dosyasını açıyorum.
Biliyorum ki bu görünümlerin her birini
dikey bir sütuna koymak için
dikey çizgisel yerleşim gerekiyor.
Bu yüzden önce RelativeLayout'u
LinearLayout'a değiştirmem gerek.
Hemen açma etiketinin kapatma
etiketine uymadığını söyleyen
bir hata gösteriyor, böylece bunu
kopyalayıp buraya yapıştırabiliyorum.
Şimdi etiketler uyuyor.
Sonra görünümleri ekleyebilirim.
Önce, miktar TextView'im var.
Bu yüzden bu TextView'i alıp içindeki
metni miktar yapacağım.
Sonra, sıfır yazan bir TextView'im var.
Bu yüzden ilk TextView'i kopyalayıp
altına yapıştırabilirim.
Metni buradaki ekran görüntüsüne
uyması için sıfır olarak değiştireceğim.
Bu LinearLayout'daki son
alt görünüm bir düğme.
Daha önce yerleşimimize düğme eklemedik,
bu yüzden bunu Google'da arayalım.
Bir tarayıcı açarsanız,
Android düğmesi arayabilirsiniz.
İlk bağlantı iyi görünüyor,
developer.android.com sitesi.
Düğme için dokümantasyon burada, buradaki
metnin büyük bir kısmını göz ardı edin.
Sınıf tanıtımını okumak
için aşağı iniyoruz.
Daha öğrenmediğimiz bazı Java
kodlarından bahsediyor;
ama aşağıda düğme için
bazı XML kodları var.
Bunu kopyalayıp kodumuza
neler yaptığına bakalım.
Yerleşimimizde bu iki TextView
altına bir düğme ekleyeceğim.
Kodu buradaki dokümantasyondan
yapıştıracağım.
Şimdi kendini yıkan bir
dizgi yerine, "Order"(Sipariş) gibi
daha dostane bir şey kullanacağım.
Son satırı da silebiliriz,
çünkü ihtiyacımız yok.
Güzel, şimdi bir miktar TextView'i,
sıfır diyen bir TextView ve
sipariş düğmemiz var.
Nasıl olduğunu görmek için
buradaki yeşil oynat
düğmesine basarak
uygulamamızda çalıştıralım.
Burada hâlâ oluştuğunu görebiliriz.
Bu istediğimiz şey değildi.
LinearLayout aslında dikey olmak
yerine yatay olarak görünüyor.
O yüzden oryantasyon özelliğini
eklediğimize emin olalım.
Bunu android;orientation="vertical"
diyecek şekilde değiştiriyoruz.
Bu sorunu çözmeli.
Haydi tekrar "Run"(Çalıştır)'a basalım.
Tamam, şimdi daha iyi.
Üç alt görünüm dikey sütunda görünüyor.
Şimdi bu alanları biçimlendirmemiz gerek,
böylece bize verilen ekran
görüntüsüne biraz daha benzerler.
Bu ekran görüntüsünde miktar TextView'in
büyük harf olduğunu görüyoruz.
1. derste android:textAllCaps
adında bir özellik öğrendik
ve burada otomatik
tamamlamada görünüyor.
Eğer böyle görünürse,
sadece "Giriş"e basabilirsiniz
ve sizin için buraya otomatikman ekler.
Değeri true olarak ayarlıyoruz,
çünkü hepsini büyük harf istiyoruz.
Metni büyük harfe çevirmede bu özelliği
kullanmanın daha iyi olmasının nedeni,
eğer kullanıcı arabirimini değiştirmek
için miktarı küçük harf yapmak istersek,
bunun gibi, gidip bu metni
değiştirmek yerine yapmamız
gereken tek şey, bu özelliği kaldırmak.
Sonra, burada sıfır diyen metin için
metin büyüklüğü olarak 16sp kullanmalıyız.
Bunu şimdi ekleyeyim ki otomatik
tamamlama önerilerinde çıksın,
böylece "Giriş"e basıyorum ve
sonra değer için 16sp seçiyorum.
Aynı zamanda siyah yazı tipi
rengi olmasını istiyoruz.
Siyah için Android sistem
rengini kullanacağım,
ki bu şekilde atıf yapılıyor.
Güzel, bu hem miktar, hem de
sıfır TextView'leri halletti.
"Sipariş" düğmesi bu şekilde iyi, metni
otomatik olarak bir düğmede
büyük harfe çevirecek ve
yükseklikle genişlik ise içerik sarmalı.
Buradaki bu dikey aralığı
çözümlemek durumundayız.
Miktar ve sıfır TextView arasında
16dp iç boşluk veya
kenar boşluğu istiyoruz.
Aynı zamanda sıfır ve "Sipariş"
düğmesi arasında 16dp
iç boşluk istiyoruz.
Bunu farklı yollarla uygulayabilirsiniz.
Bu düğme için yerleşim üst kenar
boşluğu olarak ekleyeceğim.
Bu miktar TextView için alt kenar
boşluğu olarak ekleyeceğim.
Aynı göründüğü sürece farklı
yolla yapmakta serbestsiniz.
Alt ve üst kenar boşluğu olarak
yapmayı seçmemin sebebi,
bu ortadaki alanın sonra
değişeceğini bilmem.
Artı ve eksi düğmeleriyle onu
bir adet seçiciye dönüştüreceğiz,
hâlâ miktar başlığı ve
seçici arasında 16dp alan
olmasını istiyorum.
Düğme için de aynı.
Tamam, şimdi tekrar
kendi cihazımızda çalıştıralım.
Güzel ve tam istediğimiz gibi görünüyor.
Miktar TextView hep büyük harfli,
sıfır TextView siyah yazı tipi renginde,
16sp büyüklüğünde ve
burada "Order" düğmemiz var.
Bu görünümler arasında
16dp aralığımız var.
İyi iş çıkardınız. Az kalsın unutuyordum.
Test bu düğmeye bastığınızda
ne olacağını da soruyor.
Aslında şimdilik bir şey yapmıyor.
Neler olduğunu görmek
için seyretmeye devam edin.
Để xây dựng layout này,
Tôi mở file activity_main.xml.
Tôi biết là cần một layout tuyến tính dọc
để đưa các view này
thành một cột dọc.
Vì vậy, đầu tiên tôi sẽ thay đổi
layout tương đối thành layout tuyến tính.
Ngay lập tức, nó xuất hiện một lỗi
thông báo các thẻ mở không phù hợp
với thẻ đóng, nên tôi chỉ có thể sao chép
sau đó dán nó xuống ở đây.
Bây giờ các thẻ đã phù hợp.
Tiếp theo, có thể thêm vào các view.
Đầu tiên, tôi có text view quantity.
Vậy tôi sẽ đi lấy text view này, sau đó
thay đổi text bên trong nó thành quantity.
Tiếp theo, tôi có một text view ghi zero.
Vậy tôi có thể sao chép chữ zero
và dán ngay bên dưới.
Tôi sẽ thay đổi nó để chữ zero
phù hợp với ảnh chụp màn hình ở đây.
View con cuối cùng trong layout
tuyến tính này là một nút.
Ta đã không thêm nút vào layout trước đó,
vì vậy hãy Google Search nó.
Nếu bạn mở một trình duyệt
bạn có thể tìm kiếm nút android.
Liên kết đầu tiên này có vẻ tốt,
đó là trang developer.android.com.
Và đây là tài liệu về nút android,
ta có thể bỏ qua hầu hết văn bản ở đây.
Chúng ta kéo xuống để đọc
tổng quan về lớp.
Nó nói một chút về một số code Java,
mà chúng ta chưa được học,
nhưng dưới này
ta có một số mã xml cho nút.
Ta có thể sao chép mã này
xem chúng sẽ làm gì trong code của ta.
Trong layout của chúng ta, thêm
một nút bên dưới hai text view này.
Tôi sẽ dán code
từ tài liệu ở đây.
Bây giờ thay vì chuỗi tự hủy,
tôi sẽ đi chọn một chút gì đó
thân thiện như order.
Dòng cuối cùng này cũng có thể
xóa đi bởi vì chúng ta không cần đến nó.
Tuyệt, vậy bây giờ bạn có
text view quantity, text view zero,
và một nút lệnh.
Hãy chạy nó trong ứng dụng,
để xem sẽ thế nào,
bằng cách nhấn vào
nút play màu xanh lá cây.
Chúng ta có thể thấy ở dưới này
nó vẫn đang xây dựng.
Ồ, không phải là cái chúng ta muốn.
Có vẻ như layout tuyến tính của chúng ta
thực sự nằm ngang thay vì nằm dọc.
Vì vậy, hãy chắc chắn rằng ta đã thêm
thuộc tính định hướng.
Chúng ta sẽ thay đổi nó thành
android:orientation= "vertical".
Điều đó sẽ khắc phục vấn đề.
Vậy hãy nhấn run một lần nữa.
Được rồi, tốt hơn rồi đấy.
Ba view con xuất hiện
trong một cột dọc.
Giờ chỉ cần định dạng các trường
để giống với các màn hình,
mà ta được cho trước.
Từ màn hình này ta thấy
text view quantity được viết hoa tất cả.
Trong bài một chúng ta đã học về
thuộc tính tên là android: textAllCaps,
và nó hiển thị ở đây
sau khi tự động hoàn tất.
Nếu nó hiển thị như thế này,
bạn chỉ cần nhấn Enter
và nó sẽ tự động thêm vào
trong code ở đây.
Chúng ta thiết lập giá trị đó là đúng
vì ta muốn nó được viết hoa tất cả.
Lý do tại sao nên sử dụng thuộc tính này
để viết hoa toàn văn bản
là bởi nếu chúng ta muốn thay đổi
giao diện người dùng
cho quantity viết chữ thường như thế này,
tất cả những gì ta cần làm
chỉ là loại bỏ thuộc tính này
thay vì thay đổi dòng chữ đó.
Tiếp theo, với dòng zero này,
chúng ta nên sử dụng cỡ chữ 16sp.
Tôi sẽ dùng cỡ đó và nó hiển thị
trong các đề xuất tự động hoàn tất
nên tôi chỉ cần nhấn Enter
và sau đó chọn 16sp cho giá trị.
Chúng tôi cũng muốn font chữ màu đen.
Tôi sẽ sử dụng màu đen
trong bảng màu Android,
được gọi như thế này.
Tuyệt vời, màu này sẽ là của
cả hai text view quantity và zero.
Nút order được rồi, nó tự động viết hoa
cho bạn trong một nút với
chiều cao và chiều rộng
nằm trong phần nội dung.
Chúng ta cần phải giải quyết
không gian dọc này ở đây.
Ta muốn cỡ 16dp lót hoặc lề
ở giữa text view quantity và zero.
Ta cũng muốn cũng muốn cỡ 16dp lót hoăc lề
ở giữa zero và nút order.
Ta cũng muốn cũng muốn cỡ 16dp lót hoăc lề
ở giữa zero và nút order.
Bạn có thể thực hiện
bằng nhiều cách khác nhau,
Tôi sẽ thêm nó
như là lề trên của layout cho nút này.
Tôi sẽ thêm nó như là lề dưới của layout
cho text view quantity này.
Hãy thoải mái thử những cách khác
miễn là nó trông giống nhau.
Lý do tại sao tôi đã chọn
để lề dưới và lề trên
là vì biết khu vực ở giữa này
sau đó sẽ thay đổi.
Chúng tôi sẽ thay đổi nó thành
một bảng chọn số lượng
với nút + và nút -,
và tôi vẫn muốn có 16dp không gian
giữa dòng quantity và bảng chọn.
Tương tự với nút cũng vậy.
Được rồi, ta hãy chạy lại một lần nữa
trên thiết bị.
Tuyệt, và nó đã
giống như ý muốn của chúng ta.
Text view quantity đã được viết hoa,
text view zero đã có font chữ màu đen,
kích thước 16sp, và ta có nút order ở đây.
Ta cũng có 16dp không gian
giữa các dòng.
Làm tốt lắm.
Ồ, suýt thì tôi quên mất.
Bài kiểm tra cũng sẽ hỏi đến
chuyện gì sẽ xảy ra khi bạn bấm nút này.
À, thực sự thì chẳng có gì cả,
ít nhất là lúc này.
Hãy tiếp tục quan sát
xem chuyện gì xảy ra tiếp theo.
为了建立这个布局 我们打开 activity_main.xml 文件
我们用垂直线性布局把这些视图
垂直的放置
所以第一步 我需要把 RelativeLayout 改成 LinearLayout
立刻就出现了一个错误提示 即起始标记与
结束标记不匹配 所以我把这个复制粘贴到这里来
现在 标记就匹配了
下一步 我可以加入视图
首先 需要一个 QUANTITY TextView
所以 我用这里的这个 TextView 并且把它的 text 改为 “Quantity”
接下来 我需要一个写着 0 的 TextView
我把上面第一个 TextView 复制到下面
根据这个屏幕截图 我把它的 text 改为 “0”
这个线性布局中的最后一个子视图是一个按钮
我们还没有在布局中添加按钮 你可以在 Google 中搜索如何添加按钮
如果你打开了一个浏览器 你可以搜索 “button android”
第一个链接看起来不错 它是 developer.android.com 网站的链接
这是关于 Button 的文档 我们忽略大部分的内容
将滑动条向下拉 来看类的概述
这里提到了一些我们还没有学过的 Java 代码
但是在下面有关于 Button 的 XML 代码
我们复制它 看看它的效果
在我们的布局中 我要在这两个 TextView 下面添加一个 Button
我们把代码粘贴在这
把 “@string/self_destruct”
改成 “ORDER”
最后一行可以删掉 因为我们不需要
现在 我们就有了一个 “QUANTITY” TextView 一个 “0” TextView
和一个 “ORDER” Button
运行我们的应用 看看它是什么样子的
通过点击绿色的运行按钮
从下面可以看到它还在编译
这不是我们想要的
看起来水平布局代替了垂直布局
让我们确定一下是否添加了orientation 属性
把这里改成 android;orientation="vertical"
问题解决了
再点击运行
现在好啦
这三个子视图垂直排列在这里
现在 我们要设置样式
使得它们看起来与屏幕截图更加相似
从这张截图我们可以看到 QUANTITY 的文本是大写的
我们在课程一中学过一个属性 android:textAllCaps
在自动填充提示里有这个属性
如果提示框里有这个属性 你可以直接点回车键
它就自动地添加到这里了
我们把它的值设置为 true 因为我们希望显示大写字母
我们之所以用这个属性
是因为 如果我们想改变用户界面使得 QUANTITY 为小写
我们只需要删除这个属性就够了
而不用改变文本
接下来 把 “0” 设置为 16sp 大小
我们添加一个 textSize 属性 提示框里已经显示出来了
点击回车即可 把它的值设置为 16sp
我想把它设置成黑色字体
我将使用 Android 系统中的黑色
通过这样来引用它
这两个 TextView 已经设置好了
Button 这样就很好 它的文本都是自动大写的
它的 height 和 width 的值都是 wrap_content
我们需要解决垂直的间隔问题
我们希望 “QUANTITY” 和 “0” 之间有 16dp 的
内间距 或者外边距
我们也希望 “0” 和 “ORDER” 按钮之间
有 16dp 的内边距
你可以通过很多方法实现它
我是通过给 Button 添加 Layout_marginTop 来实现的
给 QUANTITY TextView 添加 一个 Layout_marginBottom 属性
你可以尝试其他的方法 只要效果一样就行了
我之所以用 内边距和外边距 是因为我知道
中间的区域将会改变
我们把它变成一个数量选择器
这个选择器包含增加和减少按钮 并且希望 quantity 的标题
与选择器之间有 16dp 的间隔
对 Button 也是一样
在设备上重新运行它
效果正是我们想要的
QUANTITY TextView 中的文本都是大写的 “0” TextView 中的文本都是
黑色字体 并且字体大小都是 16dp 而且 ORDER Button 也在这
而且这些视图中的间隔都是 16dp
干得好 我差点忘了
还有一个问题是 当点击按钮之后会发生什么
目前什么也没发生
看看接下来会发生什么
好了,希望那個不是太差。
不如我們再做另外一個編碼的問題吧
請看這個編碼, 然後告訴我,
這個文本展示的闊度是多少?
你可以將答案寫在這裡。