Build Quantity Picker Layout - Solution Udacity English Turkish

Build Quantity Picker Layout - SolutionYouTube↗ IA↗(long shot)
Education 1.6K views 16 likes 0 dislikes 27 May 2015

Udacity 651K subscribers United States YouTube↗

First I look at the screen shot and decide that since the,

Ekran resmine ilk baktığımda sıralı olduğu için

these are in rows, it looks like a vertical linear layout.

vertical linear layout gibi gözüküyor.

The second child though is not a single view,

İkinci ast tek bir görüntü değil

in fact that's a horizontal linear layout of three views.

aslında üç görüntünün horizontal linear layout'u.

This is what the view hierarchy diagram would look like.

Görüntü hiyeraşi şeması bu şekilde.

We have a vertical linear layout as a root view and five children under that.

Bir root görüntüsü olarak vertical linear layout ve beş astı var.

The linear layout itself has three children as well.

Linear layout bile kendi içinde üç alta sahip

Once we have the diagram it's easy to create this skeleton of XML code now.

Şema elimizde olunca XML kodunun iskeletini kurmak kolay.

The root view is a linear layout and

Root görüntüsü bir linear layout ve

it contains a text view as its first child followed by a linear layout

linear layout'u takip ettiği TextView birinci alt,

which has a button, text view, and button inside of it.

Button var, TextView, ve içinde bir Button daha var.

And this is the closing tag for the linear layout and

Ve bu linear layout için kapanış etiketi

then we have the text view, another text view, and a button.

sonra TextView, daha sonra tekrar TextView ve bir Button.

Which are all children of the parent linear layout.

Hepsi linear layout'un altı.

>From this XML we can go in to Android Studio and

XML'den Android Studio'ya geçiş yapabilir,

modify our existing layout to look more like this.

varolan düzeni bu şekilde değiştirebilirsiniz.

In Android Studio I open up activity main XML layout file.

Android Studio'da activity main XML layout dosyasını açıyorum.

We're going to make the changes in place in this file so

Değişiklikleri bu dosyada gerçekleştireceğiz

that they match more closely to our desired layout.

bu şekilde istediğimiz düzene daha da yaklaşalım.

The first child is a TextView.

İlk alt bir TextView.

That we already have.

Bu zaten var.

And it's supposed to be the quantity header.

Quantity header olmalı.

Next we should have a nested linear layout

Sonra üç görüntü dahil edilen

that contains three views inside of it.

nested linear layout var.

We don't have that yet, so let's add it.

Şimdi yok ancak ekleyelim.

I'm going to hit Enter and then just start typing LinearLayout.

Enter'a basıp LinearLayout yazmaya başlıyorum.

It also shows up as one of the auto complete options.

Otomatik tamamla seçeneği ortaya çıkıyor.

So I can just hit okay.

Tamam deyip devam ediyorum.

Then it auto populates the attributes that I should fill in.

Sonra doldurmam gereken listeyi otomatik olarak getiriyor.

Because width and height are required.

Çünkü genişlik ve yükseklik lazım.

I set the width to be match_parent, which will in turn

Genişliği match_parent ayarlıyorum,

match the width of it's parent, and this will match the width of the screen.

bu genişliği üstle eşitler, ve bu da ekran genişliğine eşit.

For layout height, I don't want to set match_parent, otherwise,

Yükseklik için, match_parent ayarlaması yapmıyorum, çünkü

it will push the other views off the screen vertically.

bu diğer görüntüleri dikey olarak ekran dışına itecektir.

So I'm just going to say wrap_content here.

Burada wrap_content deyip geçiyorum.

That way the LinearLayout will only be as tall as the two buttons and

Bu şekilde LinearLayout içinde TextView ile yalnız

TextView inside of it.

iki buton uzunluğunda olacaktır.

Now, this closing tag should be moved after all the children

LinearLayout astları eklendikten sonra kapanış etiketi

of the LinearLayout have been added.

taşımış olamalı.

So that will go down here.

Böyle aşağı inecek.

When you have children inside of a view group,

Görüntü grubu içinde ast oluşturuğunuzda

you should indent the children by four spaces.

dört boşluk girintili olmalı.

I'm going to add a space here too because I like to have a blank line in

Buraya da bir boşluk koyacağım çünkü her XML elementinin arasında

between each XML element.

bir boş satır olsun istiyorum.

One more thing we're missing is setting the orientation of this LinearLayout.

Unuttuğumuz tek şey LinearLayout oryantasyonunu ayarlamak.

Earlier we decided that the LinearLayout should be horizontal so

Daha önce LinearLayout'un yatay olacağına karar vermiştik

that the buttons and the TextView appear horizontally.

böylece Button'lar ve TextView yatay gözükükecek.

Cool. Now that matches what we wanted.

Harika. İstediğimiz eşleşmeleri yapalım.

Next we have, two TextViews and a Button which we already have in our layout.

İki TextView ve bir Button çoktan düzende.

So I think we're done.

Yani burada işimiz bitti.

If you wanted to check the design pane, this is what it would look like.

Tasarım paneline baktığımızda böyle gözükecektir.

We have a vertical linear layout with five direct children and

Beş direkt astı olan bir vertical linear layout ve

this linear layout has three more children.

ve üç astı olan linear layout var.

Let's run it on our device to see what happens.

Cihazımızda çalıştırıp ne olduğunu görelim.

So, this looks close to what we want but not quite.

Bu isteğimize yakın ama istediğimiz şey değil.

The quantity picker is appearing horizontally, which is a good sign.

Quantity picker yatay gözüküyor, bu iyiye işaret.

But we want the minus button on the left hand side and the plus button

İstediğimiz düzenin ekran görüntüsünde olduğu gibi

to be on the right hand side, as shown In the screenshot of the desired layout.

eksi butonunu sol el tarafında, artı butonunu sağ el tarafında istiyoruz.

Also, these buttons are tightly squeezed up against the edge of this TextView.

Ayrıca butonlar TextView kenarlarına sıkışmışlar.

If I remember the screenshot correctly, we also want eight dips of space on

Ekran görüntüsünü doğru hatırlıyorsam, bu TextView'de

the left-hand side and right-hand side of this TextView.

sağ el tarafında ve sol el tarafında sekiz dp olmalı.

So let's add that now.

Şimdi onu ekleyelim.

Going back to the XML,

XML'e geri dönüyorum.

I'm going to move the plus button to be after the TextView.

Artı butonunu TextView sonrasına taşıyorum.

And then move the minus button to be before the TextView.

Eksi butonunu ise TextView öncesine taşıyorum.

In a horizontal row, we should have the minus button, followed by the two,

Yatay sırada önce eksi tuşu sonra iki yazısı

followed by the plus button.

sonra da artı tuşu olmalı.

We also want to add padding around this TextView.

TextView etrafına dolgu yapmak da istiyoruz.

We could either add it as margin or padding, but

Bunu padding ya da margin kullanarak yapabiliriz.

I'm just going to do padding.

Padding yapacağım.

And we'll set the value to be eight dips.

Ve değerini sekiz dp ayarlıyorum.

Okay, great.

Tamam, güzel.

Now I have a hunch that there's a bunch of extra white spaces and

Birkaç ekstra boşluk olduğuna dair

the ordering of our attributes may be incorrect,

içimde bir his var, ve android kod stil klavuzuna göre

according to the android code style guidelines.

özelliklerin düzeni doğru olmayabilir.

So, in the menu at the top of your screen, click on code and

Ekranın yukarısındaki menüde koda tıklıyorum ve

then click on reformat code.

sonra reformat code'a sonra

And also rearrange code.

rearrange code'a tıklıyorum.

And that should rearrange all the attributes and

Bu tüm özellikleri düzenleyecek ve

fix up all the formatting for you automatically.

otomatik olarak formatı onaracak.

Okay, great.

Tamam, güzel.

Let's run the app again.

Uygulamayı tekrar çalıştıralım.

There. That's better.

İşte. Böyle daha güzel.

Now there's space around the two and the minus button is on the left-hand

Şimdi iki etrafında, sol el tarafında eksi butonu ve

side and the plus button is on the right-hand side.

sağ el artı butonu etrafında boşluklar var.

[SOUND] it looks good.

Güzel görünüyor.

And then we also check that it still works.

Hala çalıştığından emin olmalıyız.

So, I'm going to pick an arbitrary quantity and then order.

Rastgele bir miktar verip çalıştıracağım.

And that looks correct.

Doğru gözüküyor.

[SOUND] that was a long journey to get this quantity picker on the screen.

Quantity picker'ı ekranda görmek uzun bir yolculuktu.

All right. The app is looking really good.

Tamam. Uygulama güzel gözüküyor.

But so far, I've only showed you how to show numbers on the screen.

Şimdiye kadar ekranda nasıl sayı göstereceğinizi öğrettim.

What if you want to show text on the screen?

Ekranda metin göstermek isterseniz ne olacak?

Keep watching to find out.

Öğrenmek için izlemeye devam edin.

Similar videos:

Nested ViewGroups
Udacity
70.9K views 17 likes 0 dislikes 27 May 201537% match

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

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

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

Hook Up Two Buttons
Udacity
89.5K views 25 likes 0 dislikes 23 May 201532% match

Width and Height
Udacity
120.6K views 97 likes 1 dislikes 27 May 201531% match

Relative to Other Views
Udacity
180K views 93 likes 0 dislikes 26 May 201531% match

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

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

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

06c_q_Add_TextView_for_Price
Udacity
81.8K views 26 likes 1 dislikes 22 May 201531% match

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

Relative Layout
Udacity
49.2K views 356 likes 11 dislikes 06 Jun 201630% match

Coding Challenge #4: Purple Rain in Processing
The Coding Train
1.8M views 39.3K likes 1.2K dislikes 25 Apr 201630% match

A Quick Tour of Android Studio
Udacity
18.1K views 71 likes 3 dislikes 06 Jun 201630% match

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

Debugging a Crash
Udacity
81.8K views 43 likes 1 dislikes 23 May 201529% match

Order of operations example: putting it all together | Pre-Algebra | Khan Academy
Khan Academy
584.7K views 279 likes 26 dislikes 19 Jan 201129% match

Padding vs. Margin
Udacity
114.7K views 75 likes 3 dislikes 21 Jul 201529% match

Define a Method
Udacity
65.1K views 24 likes 0 dislikes 16 Jul 201529% match

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

Add or Remove Parameters
Udacity
63.6K views 27 likes 0 dislikes 14 Jul 201529% match

Increíble truco de Magia Fácil de Hacer
Sr. Mago
75K views 3K likes 50 dislikes 13 Jul 201929% match

XML Syntax
Udacity
337.3K views 279 likes 14 dislikes 26 May 201529% match

Using Variables
Udacity
40.1K views 14 likes 2 dislikes 04 Jun 201529% match

GAFAS de REALIDAD DISTORSIONADA - INCREÍBLE INVENTO CASERO | Te Digo Cómo
Te Digo Cómo
373.7K views 10.6K likes 453 dislikes 23 Jul 201729% match

Inputs to a Method
Udacity
42.5K views 18 likes 2 dislikes 14 Jul 201529% match

ANILLO del TIEMPO de GOKU OSCURO o BLACK GOKU | MANUALIDADES RECICLAJE | DIY Te Digo Cómo
Te Digo Cómo
1.5M views 39.5K likes 1.1K dislikes 27 Oct 201729% match

Copiar archivos grandes de más de 4Gb en Memoria USB o Tarjeta SD | Películas 4K | Fat32 NTFS exFat
AirXander
112.3K views 3.8K likes 208 dislikes 25 Nov 201829% match

Урок 19. Блуза "Малахитовая бабочка". Подготовка к сборке. Вязание крючком. Ирландское кружево.
Crochet. Irish lace. “Людмила” Вязание Крючком
1.5K views 147 likes 0 dislikes 19 Jan 202128% match