To build out this layout let's first think about the views that we need.
I'm going to assume that all of this is already built, and we're just
going to talk about the new things that we need to add to our layout.
The two new views that we need to add are a TextView for Toppings and
CheckBox view for the Whipped cream item.
You probably didn't know that this view existed in Android, but
hopefully doing a Google search helped you find this answer.
Moving on to Step 2, we need to position the views.
Assuming these views are already correctly positioned,
we just need to add Toppings and Whipped cream, vertically, in the same row.
Since the root view is a vertical,
linear layout, we can just add these two Views at the top of it.
For the third step, we need to style the views.
The style at the Toppings header is the same as the Quantity and
Order Summary headers, so we'll be able to just copy and
paste the headers that already exist.
The CheckBox view is new though so we need to style it accordingly.
We should allow for 24 dp of space in between the box and the text,
and we should change the font size of Whipped cream to be font size of 16 sp.
Let's make these changes to our app now.
To add a Toppings header that looks like the Quantity header, I can just copy and
paste this code.
I copy it and then add it to the top of this vertical LinearLayout.
Okay, so now it says Quantity twice here.
I'm going to change the text so that it says Toppings.
I also copied the margin bottom over so
that there's some space in between this header and the content below it.
Now we haven't added a CheckBox to our app before, so
I'm going to Google search for how to do it.
I'm going to search for checkbox android.
Remember to add android because there could be checkboxes for
other platforms, like for the web or other mobile platforms,
this will help you get to a specific result for Android.
Let's try the first link.
This is the reference documentation for the CheckBox class.
I scroll through and I see a nice class overview and
then it goes straight into the XML attributes.
What I'd really like though is an example of some XML for CheckBox.
So let's go back to the search results.
Let's click on the second link.
Cool, now it shows some pictures of Checkboxes.
And here's some XML.
This looks pretty good.
It has two CheckBoxes within a LinearLayout.
I'm just going to copy this first CheckBox, and
then I'm going to paste it into our app.
Back in our app, I'm going to paste it after the Toppings text, but
before the Quantity text, so right here.
I'm going to modify the XML because it doesn't exactly quite fit our use case.
I'm going to remove the id and also the text here.
Instead of meat, because our coffee shop doesn't sell meat,
I'm going to type in Whipped cream.
By the way, what you saw before, @string/meat,
was referring to a resource string in the strings.xml file.
We'll talk about that a little more later, but for now,
you can just type the string in directly here.
And look, the preview updates, so now we have a Checkbox that says Whipped cream.
What's cool about the Checkbox view is that it gives you a box,
as well as some text, so you don't have to add another text view here.
We also don't need this line here that talks about onClick.
All we care about for this coding task is making the CheckBox appear here.
The other way you could've arrived at this XML is by checking the common
Android views cheat sheet.
This cheat sheet lists a bunch of common Android views and
it has examples for the XML as well.
Here's the CheckBox view and here's an example of what it would look like and
the corresponding XML.
You could have copied the XML from here and pasted it into the app.
Going back to Android Studio let's run the app to see how it looks.
And here it is.
It looks pretty good.
We have the Toppings header and a Whipped cream CheckBox.
We also get this cool animation when we check the box.
The only problem I see though is that the spacing is off.
For example, it's too tight in between the Quantity header and
the Whipped cream CheckBox, and there's also not enough space in between here.
Going back to the red lines that were provided,
we should add 24 dp of space here, and change the font size to be 16 sp.
First I'm going to change the font size.
I'm going to type in android:textSize and then put in a 16sp.
I'm going to open up the preview here to check that it actually increased in font
size, and it did.
If you're not sure if it refreshed or not you can always hit this button.
Okay.
Now to figure out the spacing I actually got it to work
by doing a bunch of trial and error.
I tried to set the margin values and
then I tried to set the padding values, and it turned out that paddingLeft
does control the spacing in between the box and the text here.
Let's add the padding now.
Cool, the text moved over.
I still see one more problem, though.
There's enough vertical space here, but there's not enough vertical space here.
I either need to add bottom padding, or bottom margin to this CheckBox view, or
I need to add top padding, or top margin to this Quantity header.
Either way would work,
I'm just going to add a top margin to this Quantity header.
There, that looks better!
Now things appear more equally spaced.
I'm going to run this app on my device.
And here's the app.
It looks really good.
Great job.
When you need to add more UI changes to your app, you can follow this pattern
of Google searching for the information online and then applying it to your app.
ابناء هذه الـ Layout لنبدأ بالتفكير حول الـ Views التي نحتاجها
سأعتبر أن كل هذا مبني مسبقاً، ونحن
سنتكلم حول الأشياء الجديدة التي سنضيفها لـ Layout خاصتنا
الـ Views الاثنتان الجديدتان اللتان نحتاجهما هما TextViewsمن اجل Toopings
و CheckBox View من أجل العنصر "Whipped Cream"
ربما أنت لم تعرف حتى أن هذه الـ View موجودة حتى في Android لكن
أتأمل أن يساعدكم بحث جوجل بإيجاد هذا الجواب
الانتقال إلى الخطوة 2 لحتاج لتحديد موقع الـ Views
باعتبار أن هذه الـ Views ممركزة مسبقاً بشكل صحيح
نحن نحتاج فقط لإضافة Toppings و "Whipped cream"، ترويسةياً، في نفس الصف
بما أن الـ View الجذر هي
VerticalLinearLayout، نستطيع أن نضيف هاتين الـ Views في أعلاها
للخطوة الثالثة نحتاج لتسمية الـ Views
الأسلوب في الترويسة Toppings هو نفسه كما في َquantity
الترويسات orderSummary، لذا سنكون قادرين على نسخ
و لصق التوريسات الموجودة مسبقاً
إن الـ View المسماة CheckBox جديدة لذا نحن بحاجة لتسميتها وفقاً لذلك
يجب أن يكون لدينا مسافة من "24dp" بين المربع والنص
و يجب علينا تغيير حجم النص في الكريمة المخفوقة لحجم النص "16sp"
لنقم بهذه التغييرات على تطبيقنا الآن
لإضافة ترويسة Toppings يشبه الترويسة quantity أستطيع أن أنسخ
و ألصق هذا الكود فقط
أنسخه ثم اضيفه إلى قمة هذه الـ LinearLayout
حسناً، إذن الآن إنها تقول quantity مرتين هنا
سأغير النص بحيث تقول Toppings
لقد نسخت أيضاً أسفل الهامش
لذا لدي هناك بعض المساحة بين الترويسة والمضمون في الأسفل
الآن، لم نقم بإضافة CheckBox لتطبيقنا من قبل
لذا سأقوم بالبحث عن كيفية القيام بذلك على جوجل
سأبحث عن checkbox android
تذكر أن تضيف كلمة Android لأنه قد يكون هناك مربعات اختيار
لمنصات أخرى، كالويب أو منصات هواتف أخرى
هذه سوف تساعدك بالوصول لنتيجة محددة من أجل أندرويد
لنجرب الرابط الأول
هذا هو التوثيق المرجعي للصف CheckBox
أنا أمرر للأسفل و أشاهد هذا العرض الجميل للصف
ثم يذهب مباشرة إلى خصائص XML
ما أريده رغم ذلك هو مثال من XML عن CheckBox
لذا دعونا نعود إلى نتائج البحث
لننقر على الرابط الثاني
جيد، إنها تعرض بعض الصور لـ CheckBoxes
وهنا القليل من XML
هذا يبدو جيداً جداً
فيها CheckBoxes اثنين في LinearLayout
سأقوم فقط بنسخ الـ CheckBox الأول
و ثم سأقوم بلصقه في تطبيقنا
بالعودة لتطبيقنا، سألصقه بعد النص Toppings
وقبل النص Quantity إذن هنا تماماً
سأقوم بتعديل XML لأنها لا تناسب تماما حالة الاستخدام لدينا
سأقوم بإزالة المعرف والنص هنا أيضاً
بدلاً من اللحوم لأن مخزن القهوة لدينا لا يبيع اللحوم
سأكتب الكريمة المخوقة
بالمناسبة، ما رأيته قبلاً string/meat@
كان يشير إلى سلسلة الموارد في الملف "strings.xml"
سنتحدث عن ذلك قليلاً فيما بعد، ولكن الآن
يمكنك كتابة السلسلة مباشرة هنا
وانظر، تم تحديث المعاينة الآن لدينا CheckBox يقول "Whipped cream"
الجيد من ناحية CheckBox View أنها تمنحك مربعاً
مع بعض النصوص لذا لا داعٍ لإضافة View نصية هنا
كذلك لا نحتاج لهذا السطر هنا الذي يتكلم عن onClick
كل ما نهتم لأمره هنا في مهمة الكود هذه هو جعل الـ CheckBox يظهر هنا
الطريقة الأخر التي تمكنك من الوصول إلى هنا هي عن طريق التحقق من
صفحة غش "Android Views" المشهورة
هذه الصفحة تعرض قائمة من "Android Views" الشائعة
و لديها أمثلة عن XML أيضاً
وإليك CheckBox View و مثال عن كيفية ظهورها
و الـ XML المقابل لها
يمكنك نسخ الـ XML من هنا ولصقه في التطبيق
بالعودة إلى "Android Studio" دعونا نشغل التطبيق لنرى كيف يبدو
وها هي
إنه يبدو جيداً جداً
لدينا الترويسة Toppings و الـ CheckBox "Whipped cream"
نحصل أيضاً على هذه الحركة الجميلة عندما نختار الصندوق
والمشكلة الوحيدة التي أراها على الرغم من ذلك أن المساحات غير موجودة
على سبيل المثال هناك ضيق شديد بين الترويسة qunatity
و CheckBox لـ "Whipped cream" ولا يوجد فراغ كافٍ أيضاً هنا
بالعودة للأسطر الحمراء المقدمة مسبقاً
يجب أن نضيف مساحة من "24dp" هنا ونغير حجم الخط إلى "16sp"
أولاً سأغير حجم الخط
سأكتب في android:textSize ثم سأضع "16sp"
سأفتح المعاينة هنا لأتأكد من أنه كبر بالفعل حجم
الخط، وفعلاً تم ذلك
إذا لم تكن متأكداً أنه تم التحديث أو لا، يمكنك أن تضغط هذا الزر
حسناً
الآن لمعرفة التباعد علي أن أقوم بذلك حقيقةً
عن طريق مجموعة من المحاولات والأخطاء
حاولت تعيين قيم الهامش
ثم حاولت تعيين قيم الحشو و اتضح أن paddingLeft
لا تتحكم بالتباعد بين المربع و النص هنا
دعونا نضيف الحشو الآن
جيد، لقد تحرك النص
لا زلت أرى مشكلة أخرى على الرغم من ذلك
هنالك مساحة ترويسةية كافية هنا ولكن لا يوجد مساحة ترويسةية كافية هنا
يجب علي إما أن أضيف حشو زر أو هامش زر لهذه الـ View لـ CheckBox
علي إضافة حشو علوي أو هامش علوي للترويسة quantity
اي من الطرق ستفي بالغرض
ساضيف هامشاً علوياً للترويسة quantity
هناكن هذا يبدو أفضل
تبدو الأشياء متساوية بالبعد بشكل أفضل الآن
سأقوم بتشغيل هذا التطبيق على جهازي
وها هو التطبيق
إنه يبدو جيداً حقاً
عمل رائع
عندما تريد إضافة تغييرات جديدة على واجهة المستخدم في تطبيقك يمكنك اتباع هذه المنصة
من بحث جوجل من اجل المعلومات على الانترنت و من ثم تطبيقها على تطبيقك
Para construir este diseño, vamos a pensar primero en las vistas necesarias.
Voy a asumir que todo esto ya se ha hecho y que solo hablaremos
de las nuevas cosas que necesitamos añadir a nuestro diseño.
Las dos vistas que necesitamos agregar son una vista de texto para Toppings
y una vista CheckBox para el item Whipped cream.
Quizá no sabía que esta vista existía en Android, pero a lo mejor
buscándola en Google le ayude a encontrar esta respuesta.
En el Paso 2, necesitamos posicionar las vistas.
Suponiendo que las vistas ya están en su posición correcta, solo necesitamos
agregar Toppings y Whipped cream, verticalmente, en la misma hilera.
Ya que la vista raíz es un diseño lineal vertical,
podemos añadir estas dos vistas encima de la misma.
Para el tercer paso, necesitamos dar estilo a las vistas.
El estilo en el encabezado de Toppings es el mismo que los de Quantity
y Order Summary, entonces podemos copiar y pegar los encabezados existentes.
La vista CheckBox es nueva y por eso necesitamos darle el estilo adecuado.
Debiéramos permitir 24 pd de espacio entre la caja y el texto,
y debemos cambiar el tamaño de fuente de Whipped cream a 16 sp.
Hagamos esos cambios ahora a nuestra app.
Para agregar un encabezado a Toppings que se vea como el de Quantity,
puedo copiar y pegar este código.
Lo copio y luego lo añado encima de este LinearLayout vertical.
Ok, ahora dice aqui Quantity dos veces.
Voy a cambiar el texto para que diga Toppings.
También copié el margen inferior
para que haya un espacio entre este encabezado y el contenido debajo.
Aún no hemos agregado un CheckBox a nuestra app de antes,
así que buscaré en Google cómo hacerlo.
Voy a buscar sobre un checkbox en Android.
Recuerde agregar Android porque podría haber checkboxes
para otras plataformas, como por ejemplo la web u otras plataformas móviles,
Esto ayudará a obtener un resultado específico para Android.
Veamos el primer enlace.
Esta es la documentación de referencia para la clase CheckBox.
Si me desplazo por el texto veré un resumen de la clase
y luego va directo a los atributos XML.
Lo que me gustaría es ver un ejemplo de XML para CheckBox.
Así que regresemos a los resultados de la búsqueda.
Veamos el segundo enlace.
Bien, ahora me muestra algunas figuras de Checkboxes.
Y aquí hay un poco de XML.
Esto luce muy bien.
Tiene dos CheckBoxes dentro de un LinearLayout.
Voy a copiar la primera CheckBox, y luego la voy a pegar en nuestra app.
De vuelta en nuestra app, voy a pegarlo luego del texto de Toppings,
pero antes del texto de Quantity, justo aquí.
Voy a moditicar el XML, porque no se ajusta exactamente a nuestro caso.
Voy a remover el id y tambien el texto aquí.
En lugar de carne, porque nuestra cafetería no vende carne,
voy a escribir, Whipped cream.
Por cierto, lo que vimos antes, @string/meat,
se refería a una cadena de recursos, en el archivo strings.xml.
Ya hablaremos de eso más adelante, pero por ahora,
puede escribir la cadena de texto aquí directamente y mire,
la vista previa se actualiza, así que ahora en la Checkbox dice Whipped cream.
Lo que es bueno de la vista Checkbox, es que proporciona una caja,
así como un texto, para que no tenga que agregar otra vista de texto aquí.
Tampoco necesitamos esta linea aquí que habla de onClick.
Todo lo que nos importa en esta tarea es hacer que la CheckBox aparezca aquí.
Otra forma de llegar a este XML es chequear la hoja de trucos comunes
para vistas en Android.
Esta hoja de trucos enumera varias vistas comunes en Android
y contiene ejemplos del XML también.
Aquí está la vista CheckBox,
y aquí hay un ejemplo de cómo se vería el respectivo XML.
Podría haber copiado el XML desde aquí y pegarlo en la app.
Regresando a Android Studio vamos a correr la app para ver cómo luce.
Aquí está. Se ve muy bien.
Tenemos el encabezado Toppings y una CheckBox Whipped cream.
Tambień tenemos esta animación genial cuando chequeamos la caja.
El único problema que veo, sin embargo, es que falta el espaciado.
Por ejemplo, está muy ajustado entre el encabezado Quantity y el CheckBox
de Whipped cream y tampoco hay suficiente espacio aquí en el medio.
Regresando a las líneas rojas que fueron provistas,
deberíamos agregar 24 pd de espacio aquí, y cambiar el tamaño de fuente a 16 sp.
Primero voy a cambiar el tamaño de fuente.
Voy a escribir android:textSize y luego poner 16 sp.
Voy a abrir la vista previa aquí, para revisar que en realidad aumentó el tamaño
de la fuente y así es.
Si no está seguro si se actualizó, siempre puede dar clic en este botón.
OK.
Ahora para averiguar el espaciado, lo hice funcionar
después de mucho ensayo y error.
Intenté fijar los valores de margen
y luego los valores de relleno, y resultó que el valor izquierdo
controla el espaciado entre la caja y el texto aquí.
Agreguemos el relleno ahora.
Bien, el texto se movió.
Sin embargo, aún veo otro problema.
Hay suficiente espacio vertical ahí, pero no hay suficiente espacio aquí.
Necesito agregar relleno de fondo, o un margen inferior a esta vista CheckBox,
o necesito agregar relleno arriba, o un margen superior al encabezado Quantity.
De cualquier forma funcionaría.
Voy a agregar un margen superior al encabezado Quantity.
¡Ahora se ve mejor!
Ahora las cosas se ven mejor espaciadas.
Voy a correr esta app en mi dispositivo.
Y aquí está la app. En verdad luce bien.
Buen trabajo.
Cuando necesite agregar mas cambios a la interfaz de su app, puede seguir este
patrón de buscar en Google la información en línea y luego aplicarla a la app.
Pour construire de cette mise en page, pensez d'abord aux vues dont on a besoin.
Je vais supposer que tout cela est déjà construit et qu'on va juste
parler de nouvelles choses qu'on doit ajouter à notre mise en page.
Les deux nouvelles vues dont on doit ajouter sont le TextView pour les garnitures
et la vue CheckBox pour l'article crème fouettée.
Vous ne saviez probablement pas que cette vue existait dans Android, mais
heureusement faire une recherche sur Google vous a aidé à trouver cette réponse.
En passant à l'étape 2, on doit positionner les vues.
En supposant que ces vues sont déjà positionnées correctement,
on doit juste ajouter les garnitures et la crème fouettée, verticalement, dans la même colonne.
Tant que la vue racine est une mise en page,
verticale linéaire, on peut juste ajouter ces deux Vues en haut de ceci.
Pour la troisième étape, on doit styler les vues.
Le style à l'en-tête des garnitures est le même que la quantité et
les en-têtes du récapitulatif des commandes, donc on sera apte à juste copier et
coller les en-têtes qui existent déjà.
La vue CheckBox est nouveau quoique on doit le styler en conséquence.
On devrait tenir compte de 24 dp d'espace entre la boîte et le texte,
et on devrait changer la taille de police de crème fouettée pour être de 16 sp.
Effectuons ces changement à notre app maintenant.
Pour ajouter une en-tête de garniture qui ressemble à l'en-tête Quantity, on peut
copier et coller le code.
Je le copie et l'ajoute ensuite au sommet de ce vertical LinearLayout.
Ok, donc maintenant ça dit Quantity twice ici.
Je vais changer le texte de sorte à ce que ça dise Toppings.
J'ai aussi copié le margin bottom dessus de
sorte à ce qu'il y ait de l'espace entre cette en-tête et le contenu en-dessous.
Maintenant on n'a pas ajouté un CheckBox à notre app avant, donc
Je vais chercher sur google comment on fait ça.
Je vais chercher le checkbox android.
Rappelez-vous d'ajouter android car il pourrait y avoir des cases à cocher pour
les autres plateformes, comme pour le web ou autres plateformes mobiles,
ça vous aidera à obtenir un résultat spécifique pour Android.
Essayons le premier lien.
C'est la documentation de référence pour la classe CheckBox.
Je fais défiler et je vois un bon aperçu de la classe et
Alors il va tout droit dans les attributs XML.
Ce que je voudrais quoiqu'il en soit est un exemple de certains XML pour Checkbox.
Bon revenons aux résultats de la recherche.
Cliquez sur le second lien.
Cool, maintenant ça montre quelques images de cases à cocher.
Et voici quelques XML.
Ça semble assez bien.
Il a deux cases à cocher dans un LinearLayout.
Je vais juste copier cette première case à cocher et
puis je vais le coller dans notre app.
Retour dans notre app, je vais le coller après le texte de garnitures, mais
avant le texte Quantity, donc ici.
Je vais modifier le XML car il ne s'adapte pas exactement à notre cas.
Je vais supprimer l'id et aussi le text ici.
Au lieu de viande, car notre café ne vend pas de viande,
Je vais taper Crème fouettée.
En passant, ce que vous avez vu avant, @string/meat,
se référait à une chaîne de ressource dans le fichier strings.xml.
Nous en parlerons un peu plus tard, mais pour le moment,
vous pouvez taper la chaîne directement ici.
Et regardez, les mises à jour précédemment, donc on a une case qui dit Crème fouettée.
Ce qui est cool avec la vue case à cocher est que ça vous donne une case,
aussi bien que quelque texte, donc vous n'avez pas à ajouter une autre vue texte.
On n'a pas non plus besoin de cette ligne qui parle de onClick.
Tout ce qui nous importe pour cette tache de codage est de faire apparaître la case ici.
L'autre moyen pour arriver à ce XML est en cochant cette feuille de triche
des vues communes Android.
Cette feuille de triche liste un tas de vues communes Android views et
ça a aussi bien un exemple pour le XML.
Voici la vue de case à cocher et voici un exemple de ce que ça ressemblerait et
le XML correspondant.
Vous auriez pu copier le formulaire XML ici et le coller dans l'app.
En revenant à Android Studio exécutons l'app pour voir à quoi ça ressemble.
Et voilà.
Il semble assez bien.
On a l'en-tête de garnitures et une case Crème fouettée.
On a aussi une cool animation quand on coche la case.
Le seul problème que je vois est que l'espacement est inactif.
Par exemple, c'est trop serré entre l'en-tête Quantity et
la case Crème fouettée et il n'y a pas assez de place entre eux ici.
En revenant à la ligne rouge qui a été fourni,
on devrait ajouter 24 dp d'espace ici et changer la taille de la police à 16 sp.
Premièrement je vais changer la taille de la police.
Je vais taper android:textSize et alors mettre 16sp.
Je vais ouvrir la prévisualisation pour vérifier que ça augmente en taille de la
police et c'est le cas.
Si vous n'êtes pas sûr si actualisé ou non, vous pouvez toujours appuyer sur le bouton.
Ok.
Maintenant pour découvrir l'espacement je l'ai fait fonctionner
en faisant un tas d'essai et d'erreur.
J'ai essayé de régler les valeurs de margin et puis
j'ai essayé de régler les valeurs de padding, et il s'avère que paddingLeft
contrôle l'espacement entre la case et le texte.
Ajoutons le padding maintenant.
Cool, le texte s'est déplacé.
Je vois encore un problème pourtant
Il y a assez d'espace vertical ici, mais là il n'y a pas assez d'espace vertical.
Je dois même ajouter bottom padding ou bottom margin à cette vue case à cocher ou
je dois ajouter top padding ou top margin à cette en-tête Quantity.
Dans tous les cas ça marcherait,
je vais juste ajouter une marge supérieur à cette en-tête Quantity.
Là, ça semble mieux !
Maintenant, les choses apparaissent plus proportionnellement espacées.
Je vais exécuter cette app sur mon dispositif.
Et voilà l'app.
Ça semble vraiment bien.
Beau travail.
Quand vous devez ajouter plus de changements UI à votre app, vous pouvez suivre ce modèle
de recherche google pour les informations en ligne et l'appliquer ensuite à votre app.
Untuk membuat penataan seperti ini mari pertama memikirkan tentang tampilan yang kita butuhkan
Saya akan mengasumsikan bahwa semua ini telah terbentuk, dan kita hanya akan
berbicara mengenai hal-hal baru yang perlu kita tambahkan dalam penataannya.
Dua tampilan baru yang perlu kita tambahkan adalah TextView untuk Toppings dan
tampilan kotak centang untuk pilihan Whipped cream
Anda mungkin tidak pernah mengetahui bahwa tampilan ini ada di Android, tetapi
semoga dengan melakukan pencarian Google membantu anda mendapatkan jawaban ini.
Berlanjut ke langkah ke 2, kita perlu menempatkan tampilannya.
Dengan berasumsi bahwa tampilan ini sudah berada di posisi yang benar,
kita hanya perlu menambahkan Toppings dan Whipped cream, secara vertikal, dalam baris yang sama.
Berhubung tampilan dasarnya adalah vertikal,
tata letak linear, kita dapat menambahkan dua tampilan ini di atasnya.
Untuk langkah ketiga, kita perlu memberi gaya pada tampilan-tampilannya.
Gaya pada header bagian Toppings adalah sama dengan Quantity dan
header bagian Order Summary, jadi kita hanya cukup menyalin dan
menempelkan header-headernya yang telah ada.
Tampilan kotak centang baru, walaupun demikian kita perlu memberi gaya dengan penyesuaian.
Kita harus dapat memberikan 24 dp ruang diantara kotak dan tulisan,
dan kita harus merubah ukuran fon dari Whipped cream menjadi ukuran fon 16 sp.
Mari membuat perubahan-perubahan ini pada aplikasi kita sekarang.
Untuk menambahkan sebuah header Toppings yang menyerupai header Quantity,
Saya dapat hanya menyalin dan menempelkan kode ini.
Saya menyalinnya dan kemudian menambahkannya ke bagian atas dari penataan vertikal linear ini.
Oke, jadi sekarang itu akan tertulis Quantity dua kali disini.
Saya akan merubah teksnya jadi akan tertulis Toppings.
Saya juga menyalin melebihi pias bawah jadi
nantinya akan ada sebagian ruang diantara header yang ini dan konten di bawahnya.
Sekarang kita belum menambahkan sebuah kotak centang ke aplikasi kita, jadi
Saya akan melakukan pencarian Google tentang bagaimana melakukannya.
Saya akan mencari untuk android kotak centang.
Ingat untuk menambahkan android karena akan ada kotak centang untuk
platform-platform lain, seperti untuk web dan platform mobile lainnya,
ini dapat membantu anda mendapatkan hasil yang spesifik untuk Android.
Mari kita coba tautan yang pertama.
Ini mereferensikan dokumentasi untuk kelas kotak centang.
Saya akan menyelusurinya dan dapat melihat ikhtisar kelas yang bagus dan
itu akan langsung menuju ke atribut XML.
Hal yang tetap saya sukai adalah contoh dari beberapa XML untuk kotak centang.
Jadi mari kembali ke hasil pencarian.
Mari kita klik pada tautan yang kedua.
Keren, sekarang ini menampilkan beberapa gambar-gambar dari kotak centang.
Dan ini beberapa XML.
Yang ini kelihatannya cukup bagus.
Ada dua kotak centang diantara sebuah LinearLayout.
Saya hanya akan menyalin kotak centang pertama ini, dan
kemudian Saya akan menempelkannya di aplikasi kita
Kembali ke aplikasi kita, Saya akan menempelkannya setelah teks Toppings, tetapi
sebelum teks Quantity, jadi tepat disini.
Saya akan memodifikasi XMLnya karena itu tidak cukup sesuai dengan kasus yang kita gunakan
Saya akan menghilangkan identitasnya dan juga teks yang disini.
Melainkan daging, karena kedai kopi kita tidak menjual daging,
Saya akan mengetik Whipped cream.
Omong-omong, apa yang anda lihat sebelumnya @untai/meat
adalah mereferensikan ke sumber untai di file strings.xml.
Kita akan membicarakan hal tersebut nanti, namun untuk sekarang,
anda dapat hanya mengetik untaiannya langsung disini.
Dan lihat, update pratinjau,
sekarang kita memiliki sebuah kotak centang yang bertuliskan Whipped cream.
Hal yang keren tentang tampilan kotak centang adalah memberi anda sebuah kotak,
dan juga beberapa teks, jadi anda tidak perlu menambahkan tampilan teks lainnya disini.
Kita juga tidak membutuhkan garis ini disini yang berkata tentang onClick.
Yang kita perhatikan mengenai tugas pengodean ini
adalah membuat kotak centang terlihat disini.
Cara lainnya anda dapat saja tiba di XML ini dengan memeriksa
contekan tampilan biasa Android.
Daftar contekan ini berisi setumpuk tampilan biasa Android dan
juga memiliki contoh-contoh untuk XML juga.
Ini tampilan kotak centang dan ini adalah contoh dari bagaimana akan terlihat dan
berkorespondensi dengan XML.
Anda mungkin sudah menyalin XML dari sini dan menempelkannya di aplikasi.
Kembali ke Studio Android,
mari jalankan aplikasinya untuk melihat bagaimana tampilannya.
Dan inilah dia.
Terlihat cukup bagus.
Kita memiliki header Toppings dan kotak centang Whipped Cream
Kita juga mendapatkan animasi keren ketika kita memeriksa kotaknya.
Satu-satunya masalah yang saya lihat adalah spasinya tidak ada.
Sebagai contoh, ini terlalu rapat diantara header Quantity dan
kotak centang Whipped cream, dan juga tidak cukup spasi diantaranya disini.
Mari kembali ke garis merah yang telah tersedia,
kita harus menambahkan spasi 24 dp disini, dan mengganti ukuran fonnya ke 16 sp.
Pertama-tama saya akan mengganti ukuran fonnya.
Saya akan mengetik android:textSize dan akan memasukkan 16 sp
Saya akan membuka pratinjau disini untuk memeriksa apakah itu benar-benar menaikkan
ukuran fonnya, dan ya benar.
Jika anda tidak yakin apakah itu sudah terbaharui atau belum anda dapat selalu menekan tombol ini.
Oke.
Sekarang untuk mengetahui jaraknya, sebenarnya gunakanlah
untuk mengerjakan sekelompok percobaan dan kesalahan.
Saya mencoba menetapkan tampilan pias dan
kemudian Saya mencoba tampilan blok, dan ternyata bahwa paddingLeft
memang mengontrol jarak diantara kotak dan teks disini.
Mari kita tambahkan bloknya sekarang.
Keren, teksnya berpindah.
Saya masih melihat satu lagi masalah.
Terdapat spasi vertikal yang cukup disini, tetapi tidak terdapat spasi vertikal yang cukup disini.
Saya juga perlu menambahkan blok bawah, atau pias bawah pada tampilan kotak centang, atau
Saya perlu menambahkan blok atas, atau pias atas pada header Quantity ini.
Yang mana saja tetap akan bekerja,
Saya hanya perlu menambahkan sebuah pias atas pada header Quantity ini.
Lihat, ini terlihat lebih baik!
Sekarang hal-hal ini terlihat lebih sama spasinya.
Saya akan menjalankan aplikasi ini pada alat saya.
Dan inilah aplikasinya.
Terlihat cukup bagus.
Kerja yang bagus.
Ketika anda butuh menambahkan perubahan UI pada aplikasi anda, anda dapat mengikuti pola ini
dari pencarian Google untuk informasi online dan kemudian aplikasikan pada aplikasi anda.
このレイアウトにするのに必要なViewを 考えてみましょう。
これらはビルド済みとして
レイアウトに必要なものだけ説明します。
新しく追加しなければならないViewは ToppingsのTextViewと
Whipped creamの チェックボックスです。
AndroidにこのViewがあることを 知らない方もいるでしょう。
その場合は、Googleで調べてみてください。
ステップ2に進みます。 Viewを位置付けなければいけません。
これらのViewが正確な位置にあるとすると、
必要なのは「Topping」と「Whipped Cream」を同じ列に縦に並べることです。
基本的に画面が縦なので
やるべきことは この2つのViewを上に追加するだけ。
ステップ3では、Viewのスタイルを整えます。
Toppingsのヘッダーのスタイルは、
QuantityとOrder Summaryと 同じなので
コピー&ペーストします。
チェックボックスは新しいので、 スタイリングしなければなりません。
ボックスとテキストの間のスペースは24 dp、
Whipped Creamのフォントサイズは 16 spにします。
それではアプリを変更しましょう。
Toppingsのヘッダーは、 Quantityと同じなので、
このコードをコピー＆ペースト。
コピーしたら、このLinearLayout上に 追加します。
すると、Quantityが2つ表示されます。
ここをToppingsに変えます。
marginBottomもコピーして、
このヘッダーの間にスペースを作ります。
チェックボックスを作るのは初めてなので
やり方をGoogleで調べます。
「checkbox android」で検索します。
必ず「android」を含めてください。
Webや携帯のプラットフォームの チェックボックスと混同させないためです。
これでAndroidの検索結果が得られます。
最初のサイトを試しましょう。
CheckBoxのクラスに関する情報です。
スクロールしてみると、クラスの概観や
XMLの属性が書かれています。
ここで確認したいのは CheckBoxのXMLのサンプルです。
もう一度、検索結果画面に戻りましょう。
2つ目をクリックします。
素晴らしい、ここにチェックボックスの画像や
XMLもあります。
良さそうですね。
LinearLayoutに CheckBoxが2つあります。
最初のCheckBoxをコピーして
アプリにペーストしましょう。
ToppingsとQuantityの間、
ここにペーストします。
このXMLは、私たちのアプリに 合っていないので修正します。
IDとこのテキストも消します。
カフェで肉は売らないので、meatの代わりに
Whipped Creamを入力します。
ところで@string/meatは
strings.xmlファイルの 文字列を参照していました。
これついては後ほど説明します。
ここに直接文字列を入力します。
Whipped Creamの チェックボックスができました。
このCheckBox Viewの良い点は、 ボックスとテキストを同時に作れ、
他にテキストを入力する必要がないことです。
onClickの部分は必要ありません。
ここで一番重要なのは、チェックボックスが ここに表示されることです。
このXMLを作成する他の方法としては、
Android Viewのチートシートです。
ここには、よく使うAndroidViewが 記載されています。
XMLのサンプルもあります。
CheckBox Viewもあり、 そのXMLに応じた
サンプル画像もあります。
このXMLをコピーして、 自分のアプリにペーストします。
Android Studioに戻って、 見栄えを確認しましょう。
どうでしょう。
良さそうですね。
Toppings、 Whipped Creamのボックス
チェックすると、 アニメーションもあります。
問題は、スペース設定が なくなっていることです。
Quantityとチェックボックスの間が狭く、
十分にスペースがありません。
もう一度、設定を振り返りましょう。
ここのスペースは24 dp、 フォントサイズは16 sp
まずフォントサイズを変更しましょう。
android:textSize、 そして"16 sp"を入力します。
フォントサイズが反映されたかどうか プレビューで確認します。
できています。
更新されたかどうか不安な場合は、 このボタンをクリックしましょう。
それでは
スペースについて さらに詳しく見てみましょう。
そのために練習と失敗が必要です。
正しい余白の値を設定し、
パディング値も設定しましたが、
左側のパディングがボックスとテキストの 間隔に影響することが判明しました。
パディングを追加しましょう。
これでテキストが移動しました。
ただし、問題がもう一つあります。
ここには十分スペースがありますが、 こっちにはありません。
これを調整するためには、 Quantityヘッダーの下のパディングか ボックスのマージンを追加するか
上のパディングか マージンを追加する必要があります。
どちらでもOKです。
今回は、Quantityヘッダーの 上のマージンを追加します。
これで改善されました！
スペースが均等になりました。
これから端末でアプリを起動してみます。
こちらがアプリです。
バッチリですね。
とてもよくできました。
さらにアプリのUIを変更したい場合は、
Googleで調べて 自分のアプリに適用しましょう。
이 레이아웃을 만들기 위해 우선 어떤 뷰가 필요한지 생각해 봅시다.
일단 이 모두가 이미 만들어져 있다고 가정하고, 여기에 무엇을
새롭게 붙일 것인가에 대해서만 이야기할 거예요.
두 가지 뷰를 덧붙여야 하는데, 토핑 관련 텍스트뷰랑
휘핑 크림 아이템에 쓸 체크박스예요.
이 뷰가 안드로이드에 존재한다는 걸 모르셨을 지도 모르지만
구글 검색을 해보면 답을 찾으실 수 있을 겁니다.
2단계로 넘어가죠. 이제 뷰의 위치를 설정해야 합니다.
뷰가 이미 제 위치에 있다고 가정하면,
토핑과 휘핑크림만 같은 줄에 세로로 붙이면 되네요.
루트 뷰가 수직선 레이아웃이므로
이 두 개의 뷰를 여기 맨 위에 붙이기만 하면 됩니다.
3단계로, 이 뷰의 스타일을 만들어야죠.
'토핑' 헤더의 스타일은 '수량' 및 '주문 요약'과
동일합니다. 따라서 이미 존재하는 헤더를 복사해서
붙여넣기만 하면 될 겁니다.
체크박스 뷰는 그와 별개니까 그에 맞게 스타일링 해야 겠죠.
박스와 텍스트 사이에 24 dp의 공간이 있어야 겠죠.
그리고 '휘핑 크림' 폰트 사이즈를 16 sp로 바꿉니다.
우리 앱에서 바꿔 봅시다.
'토핑' 헤더를 '수량' 헤더랑 똑같이 보이게 하려면, 이 코드를
바로 복사 후 붙여넣기 합니다.
이것을 카피해서 여기 수직 레이아웃 부분에 붙입니다.
좋아요, 이제 '수량'이 여기에 두 번 나타나죠.
이제 텍스트를 바꿔서 '토핑'으로 표시되게 할 거예요.
문단 간격 부분 역시 복사해서
이 헤더랑 아래 내용 사이에 공간이 생기게 할 거예요.
아직 앱에 체크박스를 추가하지 않았군요. 그래서
추가하는 방법을 구글로 검색해 보겠습니다.
'체크박스 안드로이드'로 검색해 보죠.
'안드로이드'라고 덧붙이는 걸 잊지 마세요. 웹 혹은 다른
모바일 플랫폼에서 체크박스를 추가하는 방법일 수도 있으니까요.
이러면 안드로이드 앱 대상의 특정 결과를 얻을 수 있겠죠.
첫 번째 링크를 볼까요.
체크박스 클래스용 레퍼런스네요.
스크롤 해볼까요. 클래스 개요도 괜찮아 보이고
바로 XML 속성으로 들어가네요.
하지만 제가 원하는 정보는 체크박스 용 XML 코드의 예니까,
검색 결과로 다시 돌아가겠습니다.
두 번째 링크를 클릭해 보죠.
좋아요. 이제 체크박스 그림이 보이는 군요.
여기 XML 코드도 있어요.
이 링크가 괜찮을 것 같네요.
여기엔 LinearLayout에 체크박스 2개가 들어 있습니다.
여기 첫 번째 체크박스를 복사한 다음,
우리 앱에 가져다 붙일 거예요.
앱으로 돌아와서, 이걸 '토핑'과 '수량' 사이에 붙이고 싶으니
그럼 바로 여기겠군요.
XML을 수정해야 겠네요. 우리가 쓰기엔 사이즈가 좀 안 맞아요.
ID랑 여기 텍스트를 제거하겠습니다.
'고기'는 안 되겠죠. 우리 커피숍에선 고기를 안 파니까요.
'휘핑크림'이라고 적어넣습니다.
그건 그렇고, 방금 전에 보신 "@string/meat"는
strings.xml 파일 안의 리소스 문자열에 대한 레퍼런스였어요.
이것도 나중에 다시 보겠지만 지금은 그냥
바로 여기에 입력하시면 됩니다.
보세요. 프리뷰 화면이 업데이트되어 휘핑크림이라는 체크박스가 생겼죠.
이 체크박스 뷰가 좋은 건 텍스트가 이미 들어가 있어서,
여기에 다른 텍스트뷰를 또 붙여넣을 필요가 없다는 거예요.
onClick이라고 되어 있는 여기도 필요 없어요.
이 코딩 과제에선 여기에 체크박스를 만들기만 하면 되니까요.
이 XML은 일반 안드로이드 뷰 치트시트라는 걸 클릭하셔도
얻을 수 있습니다.
이 치트시트에는 여러 가지 일반적 안드로이드 뷰는 물론
관련 XML 예도 들어 있습니다.
여기 체크박스 뷰를 보시면, 이 코드로 만드는 체크박스의
모양 예시와 그 XML 코드가 나와 있습니다.
여기서 XML을 복사하셔서 앱에 붙여 넣으면 되는 거죠.
안드로이드 스튜디오로 앱을 가동해서 어떻게 되었는 지 봅시다.
여기 있네요.
괜찮아 보이는데요.
'토핑' 헤더와 '휘핑크림' 체크박스가 생겼습니다.
박스를 체크하면 멋진 애니메이션 효과도 나타나네요.
유일한 문제는 공간 띄우기네요.
여길 보시면, '수량' 헤더와 체크박스가 너무 붙어 있고
이 사이에도 여유 공간이 별로 없어요.
빨갛게 표시된 부분으로 돌아가 봅시다.
여기에 공간을 24 dp 두고, 폰트 사이즈를 16 sp로 바꿔야 하네요.
우선 폰트 사이즈를 바꿔 보죠.
"android:textSize"라고 입력한 후, 16sp라고 적어 넣겠습니다.
여기에 프리뷰를 열어 보면 폰트 크기가 늘어난 걸 .
볼 수 있죠.
새로 고침 되었는 지 모르겠으면 이 버튼을 누르시면 됩니다.
좋아요.
사실 이 공간 띄우기 문제를 해결하려고
몇 번의 실수를 거듭해야만 했어요.
여백 값을 새로 맞추고
시작글 여백값을 맞추려고 했는데, 보니까 좌측 여백값이
박스랑 텍스트 사이 공간도 결정하고 있더라고요.
텍스트 삽입을 붙여 봅시다.
좋아요. 텍스트가 옮겨갔네요.
아직 또 하나의 문제가 있는데요.
이 부분에는 수직 공간이 충분한데, 여기는 별로 없어요.
바닥 텍스트 삽입이나 여백값을 여기 체크박스 뷰에 추가하거나, 또는
시작 텍스트 삽입이나 여백값을 여기 수량 헤더에 붙여야 겠어요.
어느 쪽이든 상관 없을 겁니다.
저는 위 여백값을 '수량' 헤더에 추가할께요.
자, 이제 한결 보기 좋아졌죠!
줄 간격이 훨씬 균등해졌습니다.
이제 앱을 기기에서 작동해 보죠.
이렇게 됩니다.
훨씬 보기 좋아졌군요.
잘 했어요.
앱에 UI 변동사항을 더 첨가하려면 이렇게 구글 검색을 하셔서 해당
정보를 인터넷에서 찾은 후 여러분의 앱에 적용하면 됩니다.
Ao construir este layout, pensemos nas visualizações necessárias.
Vou partir do princípio que tudo isso já está construído, e nós só vamos
falar sobre as coisas novas que precisamos adicionar ao layout.
As duas novas visualizações que precisamos adicionar
são um TextView para coberturas
e uma visualização CheckBox para o chantilly.
Você talvez não soubesse que esta visualização existia no Android,
mas com sorte, uma busca no Google ajudou você a encontrar esta resposta.
Seguindo para o passo 2, precisamos posicionar as visualizações.
Se estas visualizações já estiverem na posição correta,
só precisamos adicionar Coberturas e Chantilly verticalmente em uma coluna.
Como a visualização de raiz é um layout vertical e linear,
podemos só acrescentar estas visualizações no topo.
No terceiro passo, vamos estilizar as visualizações.
O estilo no cabeçalho Coberturas é o mesmo dos cabeçalhos
Quantidade e Resumo do Pedido, então podemos simplesmente
copiar e colar os cabeçalhos que já existem.
Já a visualização CheckBox é nova, então precisamos estilizá-la de acordo.
Devemos dar 24dp de espaço entre a caixa e o texto,
e devemos mudar o tamanho da fonte de Chantilly para 16sp.
Vamos fazer essas alterações no nosso aplicativo.
Para acrescentar um cabeçalho Coberturas que pareça o cabeçalho Quantidade,
basta copiar e colar o código.
Copio e então o acrescento ao topo deste LinearLayout vertical.
Certo, então agora aqui diz Quantidade duas vezes.
Vou mudar o texto, para que diga Coberturas.
Também copiei a margem do fundo,
de forma que há algum espaço entre este cabeçalho e o conteúdo abaixo.
Agora, não acrescentamos um CheckBox ao aplicativo antes,
então vou ver no Google como fazer isso.
Vou buscar por caixa de marcação android.
Lembre-se de acrescentar Android, pois podem haver caixas de marcação
para outras plataformas, como para a web ou outras plataformas móveis.
Isso ajudará a conseguir um resultado específico para Android.
Vamos tentar o primeiro link.
Esta é a documentação de referência para a classe CheckBox.
Percorro o documento e vejo uma bela visão geral de classe
e então ela vai diretamente para os atributos XML.
Eu realmente gostaria, no entanto, de um exemplo de XML para CheckBox.
Então, voltemos aos resultados de busca.
Vamos clicar no segundo link.
Legal, agora mostra algumas figuras de caixas de marcação.
E aqui está um pouco de XML.
Parece muito bom.
Tem duas CheckBoxes dentro de um LinearLayout.
Vou copiar a primeira CheckBox,
e então vou colar em nosso aplicativo.
De volta ao aplicativo, vou colar isto depois do texto Coberturas,
mas antes do texto Quantidade, então, bem aqui.
Vou modificar o XML porque ele não encaixa em nosso caso.
Vou remover o id e também o texto aqui.
Em vez de carne, porque nosso café não vende carne,
vou digitar Chantilly.
Por sinal, o que você viu antes, @string/meat,
referia-se a uma resource string no arquivo strings.xml.
Vamos falar sobre isso depois, mas, por enquanto,
você pode só digitar a string diretamente aqui.
E veja, o preview atualizou, então temos uma caixa que diz Chantilly.
O bom da visualização de caixa de marcação é que ele dá uma caixa,
assim como texto, então você não precisa adicionar
outra visualização de texto aqui.
Também não precisamos desta linha que fala sobre onClick.
Só o que nos importa para esta tarefa é fazer a CheckBox aparecer aqui.
A outra forma como você poderia ter chegado a este XML
seria olhando a tabela de visualizações comuns de Android.
Esta tabela lista algumas visualizações comuns de Android
e tem exemplos de XML também.
Aqui está a visualização de CheckBox e eis um exemplo de como ficaria
e o XML correspondente.
Você poderia ter copiado o XML daqui e colado no aplicativo.
Voltando ao Android Studio, vamos rodar o aplicativo para vê-lo.
E aqui está.
Está muito bom.
Temos o cabeçalho Coberturas e uma CheckBox de Chantilly.
Também tem uma animação legal quando marcamos a caixa.
O único problema que vejo é que o espaçamento está errado.
Por exemplo, está muito apertado entre o cabeçalho Quantidade
e a CheckBox Chantilly, e também não há espaço suficiente por aqui.
Voltando às linhas vermelhas que nos deram,
deveríamos adicionar 24dp de espaço aqui, e mudar o tamanho da fonte para 16sp.
Primeiro, vou mudar o tamanho da fonte.
Vou digitar android:textSize e depois colocar 16sp.
Vou abrir o preview aqui para confirmar que a fonte aumentou,
e aumentou mesmo.
Se você não sabe se atualizou, você pode apertar este botão.
Certo.
Com relação ao espaçamento, eu consegui fazer funcionar
na base de muita tentativa e erro.
Tentei definir os valores de margem
e então tentei definir o padding, e acabou que paddingLeft
controla o espaçamento entre a caixa e o texto aqui.
Vamos acrescentar o padding agora.
Legal, o texto se mexeu.
Ainda vejo mais um problema.
Tem espaço vertical suficiente aqui, mas aqui não tem.
Preciso ou acrescentar padding embaixo, ou margem embaixo nesta visualização,
ou preciso acrescentar padding no topo, ou margem no topo neste cabeçalho.
Qualquer um dos dois funcionaria,
então vou adicionar uma margem ao topo neste cabeçalho de Quantidade.
Pronto, ficou melhor!
Agora as coisas parecem ter um espaçamento mais igual.
Vou rodar este aplicativo no meu aparelho.
E aqui está o app.
Ficou muito bom.
Bom trabalho.
Quando precisar mudar mais a UI do seu aplicativo,
você pode seguir este padrão de buscar a informação no Google
e depois aplicar ao aplicativo.
Чтобы сделать такую раскладку, подумайте как все должно выглядеть.
Я буду считать что все это уже сделано и мы лишь
обсудим новые элементы которые надо добавить в раскладку.
Два новых элемента которые надо добавить это TextView для Toppings и
CheckBox для Whipped cream.
Вы наверное не знаете что такая панель есть в Android, но
надеюсь, что поиск в Google поможет вам найти ответ.
Во втором шаге нам надо расставить панели.
Считая что эти панели уже верно расположены,
нам надо добавить Toppings Whipped cream, вертикально в той же строке.
Поскольку главная раскладка
вертикальная и линейная, мы добавим эти панели наверху.
В третьем шаге нам надо сконструировать панели.
Стиль заголовка Toppings такой же как у заголовков Quantity и
Order Summary - поэтому мы можем просто скопировать
и вставить существующие заголовки.
Панель CheckBox нам придется конструировать отдельно.
Надо установить 24 dp отступа между флажком и текстом,
и надо изменить размер шрифта Whipped cream на 16 sp.
Давайте сделаем это все в приложении сейчас.
Чтобы добавить заголовок Toppings, такой же как Quantity, я могу
скопировать этот код.
Я копирую и добавляю его вверху вот этой раскладки LinearLayout.
Итак, теперь Quantity здесь указано дважды.
Я изменю текст на Toppings.
Я также скопирую нижний отступ так, чтобы
было место между заголовком и содержимым ниже.
Мы не добавляли CheckBox в наше приложение раньше, и
я поищу в Google как это делать.
В поиске я ввожу "checkbox android".
Не забудьте указать android потому что тут могут быть флажки для
других платформ, например интернет или мобильных платформ,
это поможет вам найти результат именно для Android.
Попробуем первую ссылку.
Это справочник для класса CheckBox.
Я пролистываю, это неплохое описание класса и
вот оно переходит к аттрибутам XML.
Что мне надо - это некоторые примеры XML для CheckBox.
Вернемся к результатам поиска.
Пройдем по второй ссылке.
Здорово, здесь есть картинки флажков.
А вот и XML.
Выглядит очень неплохо.
Здесь есть два CheckBoxes для LinearLayout.
Я просто скопирую превый CheckBox, и
вставлю в наше приложение.
В приложении я вставлю его сразу после текста Toppings, но
перед текстом Quantity, вот здесь.
Я изменю XML потому что он не очень подходит для нашего случая.
Я уберу id и текст вот здесь.
Вместо мяса, поскольку наша кофейня не торгует мясом,
я напишу - Whipped cream.
Кстати, то что вы видели раньше, @string/meat,
это было обращение к ресурсной строке в файле strings.xml.
Мы поговорим об этом позже, а сейчас
вы можете прописать строку сразу вот здесь.
И видите - предпросмотр изменился и у нас есть флажок Whipped cream.
Что здорово у Checkbox - это то, что так вы получаете квадратик,
вместе с текстом и вам не надо добавлять еще текст здесь.
Вам также не нужна вот эта строка, которая описывает onClick.
О чем надо помнить в этом задании - это заставить флажок появиться тут.
Мы могли найти этот XML заглянув в знакомые
таблицы подсказок по Аndroid.
В этой памятке перечислено множество известных раскладок Аndroid,
также с примерами XML.
Вот раскладка CheckBox, а вот пример как она выглядит и
и соответствующий XML.
Вы могли бы скопировать XML отсюда и вставить в приложение.
Запустим приложение в Android Studio и посмотрим что получилось.
Вот так.
Очень неплохо.
У нас есть заголовок Toppings и флажок Whipped cream.
А еще вот такая анимация при нажатии на флажок.
Единственная проблема, что я вижу - это плохой отступ.
Например, вот здесь слишком тесно между заголовком Quantity и
флажком Whipped cream и мало места вот здесь.
Вернемся к нашим красным линиям,
нам надо добавить 24 dp пространства здесь и сменить шрифт на 16 sp.
Сначала я изменю размер шрифта.
Я напишу android:textSize и установлю 16sp.
В предпросмотре я проверю действительно ли увеличился шрифт,
да, увеличился.
Если вы не уверены, что обновление прошло - нажмите эту кнопку.
Oк.
Чтобы отрегулировать отступы,
пришлось много перепробовать.
Я пыталась установить размеры отступов, а потом
выставить заполнения, и оказалось, что paddingLeft
управляет зазором между квадратиком и текстом вот здесь.
Добавлю заполнение.
Отлично - идем дальше.
Я виже еще одну проблему.
Здесь достаточно места по вертикали, а здесь нет.
Мне надо добавить заполнение внизу, или нижний отступ к этому CheckBox,
или верхнее заполнение или верхний отступ к заголовку Quantity.
Любое сработает,
я добавлю верхний отступ к этому заголовку Quantity.
Вот, намного лучше!
Все элементы расставлены более аккуратно.
Я запущу приложение на своем устройстве.
Вот оно.
Выглядит очень хорошо.
Отличная работа.
Когда вам надо изменить UI в вашем приложении можно следовать этому
шаблону по поиску в Google информации и использования ее в приложении.
Bu yerleşimi yapmak için önce ihtiyacımız olan görünümler üzerine düşünelim.
Bunun tümünün yapılmak için hazır olduğunu varsayacağım ve
yerleşimimize eklememiz gereken yeni şeyler hakkında konuşacağız.
Eklememiz gereken iki yeni görünüm, Malzemeler için MetinGörünümü
ve Köpük krema için OnayKutucuğu görünümüdür.
Bu görünümün Android içinde var olduğunu muhtemelen bilmiyordunuz ama neyse ki
bir Google aramasıyla cevabı bulabiliriz.
2. adıma geçelim, görünümleri konumlandırmamız gerek.
Bu görünümlerin doğru biçimde konumlandırıldığını varsayarak,
Malzemeler ve Köpük krema'yı dikey olarak aynı sıraya eklemeliyiz.
Ana görünüm bir dikey çizgisel yerleşim
olduğundan dolayı, yalnızca bu iki Görünümü üst kısmına ekliyoruz.
Üçüncü aşamada, görünümlere biçim vermemiz gerekiyor.
Malzemeler başlığının biçimi Miktar ve
Sipariş Özeti başlıklarıyla aynı bu yüzden var olan başlıkları
kopyala yapıştır yapabiliriz.
OnayKutucuğu görünümü yeni olduğu için, ona da uygun biçimde bir biçim vermeliyiz.
Metin ve kutucuk arasında 24 dp boşluk bırakmalıyız,
ve Köpük krema'nın yazı tipi büyüklüğünü 16 sp olarak değiştirmeliyiz.
Bu değişiklikleri şimdi de uygulamamızda yapalım.
Miktar başlığına benzer bir Malzemeler başlığı eklemek için, kopyala yapıştır
yapabilirim.
Kopyaladım ve sonra bu dikey çizgisel yerleşimin üst kısmına ekledim.
Pekala, şimdi iki tane Miktar olduğunu söylüyor.
Metni değiştireceğim ki, Malzemeler densin.
alt kenar boşluğunu da kopyaladım ki,
başlık ile altındaki içerik arasında biraz boşluk olsun.
Daha önce uygulamamıza bir OnayKutucuğu eklemedik bu nedenle
Google'da nasıl yapılacağını aratacağım.
onay kutucu android şeklinde arama yapacağım.
Android kelimesini eklemeyi unutmayın çünkü web ya da
mobil platformların da onay kutucuğu seçeneği olabilir.
Dediğim şekilde aratırsanız Android için spesifik sonuçlar elde edersiniz.
İlk linki deneyelim.
Bu, OnayKutucuğu için bir başvuru kılavuzu.
Aşağıya doğru kaydırıyorum, sınıfa genel bakış başlığını görüyorum ve
sonra doğruca XML niteliklerine doğru gidiyor.
Aslında görmek istediğim OnayKutucuğu için, bazı XML örnekleri bulmaktı.
Arama sonuçlarına geri dönelim.
İkinci linke tıklayalım.
Güzel, bazı OnayKutucuğu resimleri gösteriyor.
İşte burada bazı XML'ler var.
Oldukça iyi görünüyor.
Biz çizgisel yerleşim içinde iki OnayKutucuğu var.
ilk OnayKutucuğu'nu kopyalayacağım ve
sonra uygulamamıza yapıştıracağım.
Malzemeler metninden önce ama Miktar metininden sonra bir yere,
işte buraya yapıştıracağım.
XML'de değişiklikler yapacağım çünkü kullanım durumumuza tam olarak uymuyor.
Hem kimliği hem de metini buradan kaldıracağım.
Kafeler et satmadığı için, etin yerine
Köpük krema yazacağım.
Bu arada, daha önce gördüğünüz @dizi/et,
dizi.xml dosyası içindeki kaynak diziye gönderme yapıyordu.
Bunun hakkında daha sonra konuşacağız fakat şimdilik
diziyi doğrudan buraya yazalım.
Ve gördüğünüz gibi, ön izleme güncellendi böylece Köpük krema onay kutucuğu oluştu.
Onay kutucuğu'nun en iyi tarafı size bir kutucuk ve aynı zamanda
bir metin vermesi, böylece başka bir metin eklemeniz gerekmez.
üstüneTıklama'dan bahseden bu satıra da ihtiyacımız yok.
Bu kodlama görevi için önemli olan, onay kutucuğunun burada görünmesidir.
Bu XML'ye ulaşmanın diğer bir yolu, genel Android görünüm
kopya kağıtlarıdır.
Bu kopya kağıdı, bir dizi genel Android görünümü listeler ve
aynı zamanda XML örnekleri içerir.
İşte OnayKutucuğu görünümü ve neye benzediğine ilişkin bir örnek ve
karşılık gelen XML.
XML'yi buradan kopyalayabilir ve uygulamaya yapıştırabilirdiniz.
Neye benzediğini görmek için, uygulamamızda yürütelim.
İşte sonuç.
Oldukça iyi görünüyor.
Malzemeler başlığımız ve bir Köpük krema OnayKutucuğumuz var.
Kutucuğu işaretlediğimizde ayrıca bu havalı animasyonu da görebiliyoruz.
Burada yine de bir boşluk bırakmayla ilgili sorun görünüyor.
Miktar başlığı ile Köpük krema OnayKutucuğu arası
çok dar, ayrıca burada da yeterince boşluk yok.
Önceden sağlanan kırmızı çizgilere dönerek,
buraya 24 dp bir boşluk eklemeliyiz ve yazı tipi boyutunu 16 sp yapmalıyız.
Önce yazı tipi boyutunu değiştireceğim.
android:metinBoyutu yazacağım sonra boyutu 16 sp yapacağım.
Ön izlemeyi açacağım ve yazı boyutunun artıp artmadığını kontrol edeceğim
ve ettim.
Yenilendiğinden emin değilseniz, her zaman bu tuşu kullanabilirsiniz.
Pekala.
Şimdi boşlukları halletmek için deneme yanılma yöntemiyle
çalıştıracağım.
Kenar boşluğu değerlerini girmeyi denedim
ve sonra dolgu değerlerini girmeyi denedim, görüldüğü gibi solDolgu kutucuk ile metin
arasındaki boşluğun oluşmasını sağlıyor.
Şimdi dolguyu ekleyelim.
Harika, metin kenara doğru kaydı.
Bir sorun daha görüyorum yine de.
Burada yeterli dikey boşluk var ama burada yok.
Bu OnayKutucuğu'na ya alt dolgu ya da alt boşluk eklemeliyim ya da
bu Miktar başlığına ya üst dolgu ya da üst boşluk eklemeliyim.
Her iki yöntem de çalışır,
ben Miktar başlığına üst boşluk ekleyeceğim.
İşte, şimdi daha iyi görünüyor!
Şimdi her şey eşit olarak boşluklandırılmış görünüyor.
Bunu cihazımdaki uygulamada yürüteceğim.
İşte uygulama.
Gerçekten iyi görünüyor.
iyi iş başardık.
Uygulamanıza daha çok UI değişikliği eklemek istediğini zaman, Google araması
yöntemiyle online bilgi edinebilir ve uygulamanızda uygulayabilirsiniz.
Để làm layout này trước tiên nghĩ xem cần chế độ hiển thị nào.
Giả định là tất cả phần này đã được thiết lập rồi.
Chỉ cần nói về những điều mới mẻ cần đưa vào layout.
Có hai hiển thị mới cần chèn TextView Các loại nhân phủ
hiển thị ô đánh dấu cho tiêu đề Kem sữa béo.
Có thể bạn chưa biết hiển thị ô đánh dấu đã có trong Android
nhưng mong khi bạn tìm trên Google bạn sẽ tìm thấy câu trả lời.
Qua bước 2, cần định vị các hiển thị.
Giả sử các hiển thị đã định vị chính xác.
Chỉ cần Các loại nhân phủ và Kem sữa béo chạy theo trục dọc thẳng hàng.
Vì chế độ hiển thị gốc định vị theo
bài trí tuyến tính dọc, chỉ cần chèn hai hiển thị này trên nó.
Bước thứ 3, thiết lập kiểu cho chế độ hiển thị.
Các kiểu ở tiêu đề Các loại nhân phủ giống kiểu phần tiêu đề Số lượng
tiêu đề Nhật ký đặt hàng vì thế chỉ cần copy và dán
các tiêu đề hiện có.
Nhưng hiển thị ô đánh dấu là chế độ mới cho nên cần phải định kiểu cho nó.
Nên để 24dp khoảng trống ở giữa ô đánh dấu và văn bản
nên thay đổi kích cỡ phông chữ của chữ Kem sữa béo thành 16 sp. sp.
Thực thi các thay đổi này lên ứng dụng.
Chèn tiêu đề Các loại nhân phủ giống tiêu đề Số lượng
copy dán đoạn code này.
Tôi sao chép và chèn đoạn code ở trên của bài trí tuyến tính dọc.
Được rồi Ở đây hiển thị chữ Số lượng hai lần.
Tôi sẽ thay đổi nội dung để ghi Các loại nhân phủ.
Tôi cũng sao chép code lề dưới này qua
để tạo khoảng trống giữa tiêu đề này và nội dung dưới.
Chúng ta chưa chèn ô đánh dấu vào ứng dụng.
Tôi sẽ Google xem hướng dẫn.
Tôi sẽ tìm kiếm android. Checkbox.
Nhớ nhập thêm từ android vì Google có thể ra kết quả ô đánh dấu
cho nền tảng khác, ví dụ nền tảng web hoặc nền tảng di động,
làm thế này bạn sẽ tìm được ngay kết quả tìm kiếm cho nền tảng Android.
Thử đường dẫn đầu tiên.
Đây là sưu liệu tham khảo cho lớp ô đánh dầu.
Tôi kéo trang xuống dưới nhìn hiển thị code tổng quan lớp, khá tốt
nó trỏ thẳng đến các thuộc tính XML.
Điều tôi đang cần là một ví dụ XML cho ô đánh dấu.
Hãy quay trở lại kết quả tìm kiếm.
Click vào đường dẫn thứ 2.
Tuyệt vời, trang này hiển thị hình ảnh ô đánh dấu.
Đây là một số XML.
Trông được đây.
Nó có hai ô đánh dấu trong mục LinearLayout.
Tôi chỉ cần copy ô đánh dấu đầu tiên
sau đó dán vào ứng dụng.
Trở lại ứng dụng, tôi sẽ dán nó sau tiêu đề Các loại nhân phủ
nhưng trước tiêu đề Số lượng, ngay đây.
Tôi sẽ điều chỉnh XML vì nó không phù hợp với bài tập đang dùng.
Tôi sẽ bỏ mã ID và phần nội dung văn bản ở đây.
Thay vì ghi là thịt quán cafe không bán thịt.
Tôi sẽ nhập nội dung là Kem sữa béo.
Nhân tiện, những gì bạn thấy lúc nãy tức là cú pháp @string/meat,
có liên quan đến tài nguyên trong file string.xlm.
Chúng ta sẽ nói về nó, nhưng để sau còn bây giờ,
bạn chỉ cần nhập vào chuỗi này trực tiếp ở đây.
Xem kìa, bản xem trước cập nhật có một ô đánh dấu ghi là Kem sữa béo.
Chế độ hiển thị ô đánh dấu này hay ở chỗ nó cung cấp cho bạn một ô,
bên cạnh có luôn phần nội dung bạn khỏi chèn thêm hiển thị văn bản.
Không cần dòng này onClick. Here nói về onClick.
Cần quan tâm trong bài tập code này là làm sao ô đánh dấu xuất hiện.
Một cách khác để tìm ra XML này
là cheat sheet hiển thị Android phổ biến.
Cheat sheet này liệt kê một loạt hiển thị Android phổ biến
ngoài ra còn cho ví dụ XML nữa.
Đây là hiển thị ô đánh dấu ví dụ này để bạn hiểu nó sẽ ra sao
bên cạnh đây là các XML tương ứng.
Bạn có thể copy XML từ đây rồi dán nó vào ứng dụng.
Trở lại với Android Studio chạy ứng dụng xem nó trông ra sao.
Đây rồi.
Cũng được đó.
Có tiêu đề Các loại nhân phủ và ô đánh dấu Kem sữa béo.
Cũng có hiệu ứng động rất thú vị khi đánh dấu tích vào ô đánh dấu.
Vấn đề duy nhất mà tôi nhận ra là không thấy có khoảng trống.
Ví dụ, chỗ này quá chật chội giữa tiêu đề Số lượng
với ô đánh dấu Kem sữa béo Ở đây không đủ khoảng trống ở giữa.
Trở lại đường minh họa màu đỏ đã vẽ ở đầu bài.
Cần chèn 24 dp khoảng trống ở đây sau đó thay đổi cỡ chữ về mức 16sp.
Đầu tiên, thay đổi kích thước phông chữ.
Gõ Android: textSize [Kích thước chữ] sau đó cho kích thước 16sp.
Tôi sẽ mở chế độ xem trước ở đây kiểm tra xem kích thước đã tăng hay chưa.
Xong rồi.
Kiểm tra xem trang đã refresh[làm mới] bạn có thể sử dụng nút này.
Được rồi.
Để xử lý phần trống này tôi thực sự đã làm được
thông qua nhiều lần làm thử và mắc lỗi.
Tôi đã đặt giá trị canh lề
sau đó đặt giá trị khoảng đệm, tôi phát hiện có paddingLeft [đệm trái]
Sẽ điều chỉnh khoảng trắng giữa ô đánh dấu và nội dung ở đây.
Bây giờ chèn khoảng đệm.
Hay quá, văn bản đã dịch sang một bên.
Tôi vẫn thấy có một vấn đề.
Đã có đủ khoảng cách chiều dọc ở đây nhưng chỗ này không đủ chỗ chiều dọc.
Hoặc tôi sẽ chèn khoảng đệm dưới tức là lề dưới cho hiển thị ô đánh dấu
hoặc tôi sẽ chèn khoảng đệm trên tức là lề trên cho tiêu đề Số lượng.
Làm cách nào cũng được.
Tôi sẽ chèn lề trên cho tiêu đề Số lượng.
Đấy! Tốt rồi!
Bây giờ mọi thứ có vẻ khá đồng đều.
Chạy thử ứng dụng trên thiết bị của tôi.
Và đây là ứng dụng.
Trông được lắm.
Làm tốt rồi.
Khi bạn cần thay đổi giao diện người dùng trong ứng dụng, có thể làm theo kiểu này
hãy lên Google tìm kiếm thông tin sau đó đưa vào ứng dụng.
为了创建这个布局 我们首先想想需要哪些 View
我假设所有的这一切都已经建好了
只是讨论需要增加到布局里的新东西
我们需要增加的这两个 View 是内容为 Toppings 的 TextView
和内容为生奶的 CheckBox 视图
你可能不知道 Android 里存在这个 View
但是希望你用 Google 搜索帮助你找到答案
继续第二步 我们需要定位 View
假设这些 View 已经正确定位好
我们只需要在同一排垂直增加 Toppings 和 Whipped cream
因为根 View 是垂直的
LinearLayout 我们只是在它的顶部增加两个 View
第三步 我们需要设计 View
在 Toppings 标题的样式和 Quantity 以及 Order Summary 标题的样式是一样的
我们只是复制
和粘贴早已存在的标题
这个 CheckBox 视图是新的 所以我们相应地需要设计它的样式
让框与文本之间的距离为 24 dp
将 Whipped cream 字体大小改为 16 sp
现在 在我们的应用上做出这些改变
为了添加一个像 QUANTITY 的标题的Toppings 标题
我只是复制粘贴这段代码
复制它 然后添加它到这个垂直 LinearLayout 的顶部
好 所以现在显示两个 QUANTITY
我想要改变文本使它显示 Toppings
复制底部空白部分
这样标题和下面的内容之间有一些空间
在我们没有添加 CheckBox 给应用之前
我想用 Google 搜索怎样去做
搜索 checkbox android
记得加上 android 因为其他平台也有可能有 CheckBox
例如网页 或其他移动平台
这会让你得到和 Android 相关的结果
我们试一下第一个链接
这是 CheckBox 类的参考文档
向下滚动 可以看到一个类的概述
然后直接进入 XML 属性
我真的喜欢这个 即使它是 CheckBox 在 XML 中使用的一些例子
返回搜索结果
单击第二个链接
酷 现在它显示一些 CheckBox 的图片
这是一些 XML
这看起来非常好
在 LinearLayout 里有两个 CheckBox
我只是复制第一个 CheckBox 的代码
然后粘贴它到我们的应用里
返回我们的应用 我将它粘贴到 Toppings 文本之后
不过在 QUANTITY 文本之前 所以这里正好
我想要修改 XML 因为它不是非常适合我们的使用情况
我将删除 id 和这里的 text
替换肉 因为咖啡店里不卖肉
我将设计 Whipped cream 的类型
顺便说一句 你之前看到的 @string/meat
是指在 strings.xml 文件里的一个资源字符串
之后我们会再谈谈这一点 但是现在
你可以在这里直接输入字符串
看 预览更新了 所以现在有一个叫 Whipped cream 的 CheckBox
CheckBox 给你一个框
和一些文本 所以你在这里你不必增加另外的文本视图
我们也不需要 onClick 这一行
对于这个编码任务我们所关心的是使 CheckBox 出现在这里
你能够到这个 XML 的其他方式是通过
检查常见的 Android 视图备忘单
这个备忘单列出了一些常见的 Android 视图
它有一些 XML 的例子
这是 CheckBox 视图 这是它是什么样的一个例子
和对应的 XML
你可以从这复制 XML 代码
返回 Android Studio 然后运行应用来看它是什么样的
它在这里
看起来非常好
我们有一个 Toppings 标题和一个 Whipped cream 复选框
我们也得到了这个酷的动画 当我们勾选这个框的时候
我看到的唯一的问题是没有间距
例如 QUANTITY 标题和 Whipped cream 复选框太近了
它们之间没有足够的空间
返回我们标注红线的地方
我们应该在这增加 24 dp 的空间 并改变字体大小为 16 sp
首先 我将先改变字体的大小
输入 android:textSize=“16sp”
我将打开这里的预览来检查它是否增加字体大小
确实变大了
如果你不确定它是否刷新 你可以一直按这个按钮
好
现在为了弄清楚间隔
我通过一些实验和错误工作得到了经验
我试着设置外间距值
和内间距值 事实证明 paddingLeft
控制着框和文本之间的间距
现在我们增加内间距
文本移动到这了
但还存在一个问题
这里有足够的垂直空间 但是这里没有
我要么添加底部内边距 要么添加底部外边距给这个 CheckBox
或添加顶部内边距 又或者添加顶部外边距给 QUANTITY 标题
无论是哪种工作方式都能奏效
我选择给 QUANTITY 标题添加 marginTop（顶部外边距）属性
看起来更好了
现在各个部分之间的间距更匀称了
我将在我的设备上运行这个应用
这是应用运行效果
看起来非常好
干得漂亮
当你需要将更多的 UI 变化添加到你的应用时 你可以按照
Google 搜索网上信息的模式 然后将它应用到你的应用里
要建立這個配置，首先 思考我們需要的檢視方式
我要假設這些都已經建立好 我們只需要
談談需要新增到配置的新東西
我們需要新增的兩個檢視 是澆頭的TextView
與鮮奶油選項的勾選框格
你大概不知道安卓有這個項目
希望透過谷哥搜尋 可以幫你找到答案
繼續到第二步驟 我們需要決定配置的位置
假設這些項目位置都正確
我們只需要在同一排 新增澆頭與鮮奶油項目
因為原始項目是垂直
線形配置，我們只需要 在上方新增這兩個項目
第三步驟，設計項目
澆頭標題的風格與數量
和訂單概要一樣 所以我們只需要複製
貼上已經存在的標題
勾選框格項目是新的 所以需要設計風格
框格與文字之間的間格是24點
而且要將鮮奶油的字型大小 改為16點
現在就讓我們在應用程式做改變
要讓澆頭標題跟數量一樣 我只要複製
貼上編碼
複製然後新增到垂直線形配置上方
好，現在這裡有兩個數量
我要把文字改成澆頭
我也複製下方邊緣空白
讓標題與下方內文之間有間格
我們還沒在應用程式加入勾選框格
所以我要用谷哥搜尋如何做
我要搜尋安卓勾選框格
記得要加安卓 因為可能有其他平台的
勾選框 像是網頁或其他行動平台
這能將搜尋結果特定在安卓平台
我們先試試第一個連結
這是勾選框格的參考文件
我捲動檢視 看到不錯的等級概要
然後直接就是XML屬性
我喜歡XML勾選框格的範例
所以讓我們再回去搜尋結果
點選第二個連結
酷，這顯示勾選框格的圖片
也有一些XML
這看起來不錯
有兩個線形配置的勾選框格
我要複製第一個勾選框格
然後貼到我們的應用程式
回到我們的應用程式 我要貼在澆頭文字後面
但在數量文字前面，在這裡
我要修改XML 因為這不太適合我們的案子
我要移除id還有這裡的文字
把肉類換掉 因為我們的店不賣肉類
我要輸入鮮奶油
對了，你在 @string/meat前面看到的
是strings.xml檔案的參照資源
我們之後會做更多說明 但是現在
你只要直接在這裡輸入字串
看，預覽更新，所以現在 我們有鮮奶油的勾選框格
勾選框格項目很棒的是
有一個框格與文字 你不需要再新增文字項目
我們也不需要這裡的onClick
這個編碼任務是要讓 勾選框格出現在這裡
另一個完成XML的方式是 查看通用的
安卓項目快檢表
這個快檢表有一堆通用的安卓項目
也有XML的範例
這是勾選框格項目 這是看起來的樣子
對照到XML
你可以從這裡複製XML 然後貼到應用程式裡
回到安卓工作室 執行應用程式看看
就是這樣
看起來不錯
我們有澆頭標題 與鮮奶油的勾選框格
勾選框格時 也有很酷的動畫效果
唯一的問題是沒有空格
舉例來說，數量標題與
鮮奶油勾選框太擠了 這裡也沒有足夠的間格
回到我們提供的紅標行
我們要加24點間格 把字型大小改成16點
首先我要改字型大小
我要輸入android.textSize 然後輸入16sp
我要打開預覽 看字型有沒有變大
有，變大了
如果你不確定有沒有更新 你可以點擊這個按鍵
好
現在看看間隔 我已經設定好了
經過多次嘗試之後
我要設定邊緣值
然後試著設定填充值 結果paddingLeft
控制框格與文字的間格
讓我們新增間格
酷，文字移動了
我還是發現一個問題
這裡有足夠的垂直空間 但是這裡的垂直空間不夠
我可以新增底部空間 或是勾選框格的底部邊緣
或是新增上方空間 或是在數量標題上方加邊緣
任一種方式都可以
我要在數量標題上方加邊緣空間
好了，看起來好多了！
現在項目的間格較一致了
我要在我的裝置上執行應用程式
這就是應用程式
看起來不錯
做得好
需要新增更多UI變更到 應用程式時，你可以照這個模式
線上谷哥搜尋資訊 然後套用到你的應用程式