Return to Video

02-20 Padding vs. Margin

  • 0:00 - 0:02
    Şu ana kadar gayet iyi gidiyorsunuz.
  • 0:02 - 0:05
    Gerçekten harika yerleşimler tasarlama
    yolunda emin adımlarla ilerliyorsunuz.
  • 0:05 - 0:09
    Ancak, şu ana kadarki tasarladığımız
    tüm yerleşimlerde bir sorun görüyorum.
  • 0:09 - 0:13
    Görünümler ya ViewGroup'un kenarında
    ya da cihazın
  • 0:13 - 0:14
    karşısında yer alıyor.
  • 0:14 - 0:16
    Şu ana kadar bu derste
    tasarladığımız bütün yerleşimler için
  • 0:16 - 0:20
    görseli biraz daha çekici
    hale getirebiliriz, yani
  • 0:20 - 0:24
    biraz daha beyaz alan
    ekleyince daha güzel olacaklardır.
  • 0:24 - 0:26
    Bunu da bu videomuzda ele alacağımız
    padding ve margin
  • 0:26 - 0:29
    kavramlarıyla yapacağız.
  • 0:29 - 0:31
    Örneğin, buraya ve buraya
    biraz daha beyaz alan ekleyebiliriz
  • 0:31 - 0:34
    hatta en üst kısma da,
    bu sayede görünüm üst öğrenin
  • 0:34 - 0:38
    ve cihazın köşesinde karma
    karışık olmayacaktır.
  • 0:38 - 0:39
    Bu daha çok bir tasarım kararı,
  • 0:39 - 0:42
    çünkü bazen köşeden
    köşeye olmasını isteyebilirsiniz,
  • 0:42 - 0:45
    önceden bahsettiğim, görselin ekranın
    tamamını kapladığı görüntü efekti gibi.
  • 0:45 - 0:49
    Fakat her halükarda, daha ferah olması
    için beyaz alanı kullanabilirsiniz,
  • 0:49 - 0:53
    bu sayede içeriği okumak ve
    taramak daha kolay bir hal alacaktır.
  • 0:53 - 0:57
    Size görünüme padding veya margin
    eklemenin etkisini göstereceğim.
  • 0:57 - 0:59
    Buradaki "Hello" yazan
    TextView ile başlayalım.
  • 0:59 - 1:02
    Eğer görünüme 8 dip padding eklersek
  • 1:02 - 1:05
    o zaman burada her yöne sekiz
    dip olacak şekilde büyütüyor.
  • 1:05 - 1:08
    Eğer TextView'e 8 dip
    yerleşim margini eklersek
  • 1:08 - 1:11
    o zaman da bu şekilde görünür.
  • 1:11 - 1:13
    Margin eklemek için bunu ViewGroup'un
    içine koymanız gerekiyor, bu yüzden
  • 1:13 - 1:16
    buradaki çizgisel yerleşimin
    içine koydum.
  • 1:16 - 1:19
    Orjinal TextView'i alıp 8 dip
    kaydıran şey
  • 1:19 - 1:21
    çizgisel yerleşim.
  • 1:21 - 1:23
    Hem soldan hem de üstten,
  • 1:23 - 1:26
    ve ayrıca da yanlardan.
  • 1:26 - 1:28
    Yani alt TextView'de padding
    veya margin kullansanız da
  • 1:28 - 1:33
    burada padding TextView
    tarafından belirleniyor.
  • 1:33 - 1:36
    Marjin de üst ViewGroup
    tarafından belirleniyor.
  • 1:36 - 1:40
    Her ikisini de gerçek bir cihazda
    çalıştırırsanız ve TextView için
  • 1:40 - 1:43
    bir arka planınız yoksa, o zaman teknik
    olarak her ikisi de aynı şekilde gözükür.
  • 1:43 - 1:46
    Metin soldan 8 dip gelecek
    şekilde başlar, ve
  • 1:46 - 1:48
    cihazın üst kısmından da 8 dip
    aşağıda olur.
  • 1:48 - 1:52
    Ancak, TextView için renkli bir
    arka planınız varsa,
  • 1:52 - 1:55
    bu durumda kullanıcı TextView'in
    bu büyüklükte olduğunu görecektir.
  • 1:55 - 1:59
    Oysa diğer cihazda, TextView
    yalnızca bu büyüklükte olurdu.
  • 1:59 - 2:01
    Görünümde padingi gösteren
    kod da şu şekilde.
  • 2:02 - 2:07
    TextView XML Öğesinde, "8 dip"e eş olan
  • 2:07 - 2:11
    android:padding yazan
    bir özellik atayabilirsiniz.
  • 2:11 - 2:12
    Dip değeri olduğu sürece
  • 2:12 - 2:15
    padding için istediğiniz
    boyutu seçebilirsiniz.
  • 2:15 - 2:19
    8 diplik bir padding belirlediğimizde,
    TexView'in
  • 2:19 - 2:21
    sol, yukarı, aşağı ve sağ
    kenarlarına 8 dip ekliyor.
  • 2:22 - 2:25
    Genel android padding özelliğini
    kullanmak yerine
  • 2:25 - 2:29
    sola, sağa, üste veya
    alta ayırabilirsiniz.
  • 2:29 - 2:33
    Esasen, bu dört satırlık kod, bu tek
    satırlık kodla aynı işlevi görüyor.
  • 2:33 - 2:36
    Ancak, bu ince yapılı kontroller sağ, sol
    veya üst, alt taraflar için
  • 2:36 - 2:39
    farklı padding değerlerine sahip
    olmanıza olanak veriyor.
  • 2:39 - 2:43
    Bütün yönler için eşit padding
    değerleri belirlemenize gerek yok.
  • 2:43 - 2:47
    Padding için varsayılan değer sıfır,
    yani sol, sağ ve üst
  • 2:47 - 2:52
    padding değerini belirtip, alt kısmı es
    geçerseniz o zaman orası sıfır dip olur.
  • 2:52 - 2:56
    Margini tanımlamak için de
    gene TextView'e özellik ekliyorsunuz.
  • 2:56 - 3:00
    Özelliğin adı android : layout_margin
  • 3:00 - 3:03
    biz de, örneğin, 8 dipe eşitliyoruz.
  • 3:03 - 3:07
    Bu, alt TextView'i bütün köşeler için
    üst öğeden 8 dip uzaklaştırıyor.
  • 3:07 - 3:12
    Eğer yukarıda başka bir
    alt TextView olsaydı, margin atamamız
  • 3:12 - 3:15
    bu TextView'i ilk TextView'in
    8 dip altına iterdi.
  • 3:16 - 3:19
    Margin'e sahip olmanın bu görünümün
    etrafında bir güç kalkanı olması
  • 3:19 - 3:20
    gibi bir şey olduğunu düşünebilirsiniz.
  • 3:20 - 3:24
    Etrafındaki hiç bir görünüm
    bu 8 diplik bölgeye giremez.
  • 3:24 - 3:28
    Ya da yerleşim marginini 4 farklı
    yöne ayırabilirsiniz.
  • 3:28 - 3:32
    layout marginLeft,
    layout marginRight, top, ve bottom.
  • 3:32 - 3:36
    Bu değerlerden birini belirtmezseniz
    varsayılan olarak sıfır olacaktır.
  • 3:36 - 3:39
    Bu alt öğelere göre konumlananın
    ViewGroup olduğunu
  • 3:39 - 3:42
    hatırlamak için özelliklere
    bakabilirsiniz.
  • 3:42 - 3:45
    Hepsi margin için layout_ ile başlıyor.
  • 3:45 - 3:48
    Bu şekilde, bu görünümleri belirleyenin
    ViewGroup olduğunu
  • 3:48 - 3:49
    bilebilirsiniz.
  • 3:50 - 3:53
    Padding ve marjin bütün
    görünümlerde kullanılabilir.
  • 3:53 - 3:56
    Az önce öğrendiğimiz özellikleri
    uygulamaya sokalım.
  • 3:56 - 3:58
    Burada, çizgisel yerleşimde
    üç TextView'im var.
  • 3:58 - 4:01
    Hepsi ekranın sol kenarında
    sıkışmış durumda, bu yüzden
  • 4:01 - 4:02
    biraz daha fazla alan
    eklemek istiyorum.
  • 4:03 - 4:05
    Daha fazla margin ekleyerek başlayalım.
  • 4:06 - 4:08
    Güzel, artık TextView'in
    etrafında fazla alan var.
  • 4:09 - 4:11
    Diğer iki TextView için de
    aynısını yapacağım.
  • 4:12 - 4:17
    İlginç, bu 16 dip yukarıda
    ama aslında 32 dipte
  • 4:17 - 4:20
    çünkü ilk TextView'den 8 alt margin ve
  • 4:20 - 4:23
    ikinci TextView'den de
    8 dip üst margin alıyor.
  • 4:23 - 4:25
    Eğer alanların tutarlı
    olmasını istiyorsak
  • 4:25 - 4:30
    daima her görünüm arasında 16 dip olmalı,
    sonra da buradaki margini değiştirmeliyiz.
  • 4:30 - 4:33
    Her birine margin değerleri
    atayarak ayırabilirim.
  • 4:33 - 4:38
    Bu kodda, sol margin için 16 dip ve
    üst margin için 16 dipim var.
  • 4:38 - 4:41
    Bu ilk TextView için alt margin yok,
    bu yüzden
  • 4:41 - 4:43
    artık aralarındaki mesafe 16 dip
    olarak doğru oluyor.
  • 4:43 - 4:47
    Aynısı son TextView için de geçerli.
  • 4:47 - 4:49
    Güzel, artık bütün dikey aralıklar eşit.
  • 4:50 - 4:53
    Daha önce, bu görünümlerin kenarlarına
    beyaz alanlar ekleyeceğimi söylemiştim,
  • 4:53 - 4:56
    teknik olarak o alan saydam.
  • 4:56 - 4:59
    Arkasındakileri görebilirsiniz.
  • 4:59 - 5:02
    Bu durumda, ViewGroup'ta
    gri bir arka planımız var.
  • 5:02 - 5:05
    Margin ya da padding kullansak da
    yerleşim bu cihazda aynı görünecek
  • 5:05 - 5:09
    çünkü şu anda TextView'in üzerinde
    herhangi bir renkli arka plan yok.
  • 5:10 - 5:12
    O halde ekleyelim ve her bir
    görünümün sınırlarını görelim.
  • 5:13 - 5:16
    Tamam, şimdi bu ilk TextView için
    bir arka plan rengi var.
  • 5:16 - 5:20
    Sol ve üst margini eklediğimizde,
    ViewGroup'un TextView'i
  • 5:20 - 5:23
    yukarı ve aşağıdan 8 dip
    kaydırdığını görüyoruz.
  • 5:23 - 5:27
    Bu paddingi değiştirebiliriz ve şimdi
    TextView'in daha büyük olduğunu
  • 5:27 - 5:30
    ve sol ve üst kısımında 8 diplik
    yer kapladığını görüyoruz.
  • 5:31 - 5:34
    Yani görsel olarak, eğer bu TextView için
    bir arka plan rengi mevcutsa
  • 5:34 - 5:36
    padding veya margininiz
    olsa da olmasa da
  • 5:36 - 5:38
    cihazda farklı gözükebilir.
  • 5:38 - 5:41
    Aynısını diğer görünümler içinde
    yapabiliriz ve onları da görebilirsiniz.
  • 5:42 - 5:45
    Padding ve marging değerleri eklemek
    sadece bu alt görünümlerle sınırlı değil
  • 5:45 - 5:48
    ayrıca ViewGroup'a da ekleyebilirsiniz.
  • 5:48 - 5:51
    Eğer çizgisel yerleşime
    bir padding değeri eklersem
  • 5:51 - 5:56
    o zaman görünümün her yöne doğru
    16 dip kaydığını görebilirsiniz.
  • 5:56 - 5:59
    Padding veya margin için herhangi bir
    değer atayabileceğinizden bahsetmiştim.
  • 5:59 - 6:01
    Fakat hangi değeri seçeceğinizi
    nasıl bilebilirsiniz?
  • 6:01 - 6:05
    Materyal tasarım rehberi, artan
    8 dip kullanmanızı
  • 6:05 - 6:06
    öneriyor.
  • 6:06 - 6:09
    Bu biraz daha gelişmiş bir bilgi,
    fakat sonuçta bileşenlerimizin
  • 6:09 - 6:13
    ekranda 8 diplik mesafelerle
    sıralanmasını istiyoruz.
  • 6:13 - 6:16
    Şu an ekranda kareler gözükmüyor fakat
  • 6:16 - 6:18
    metni buraya konumlandırmak istiyorsanız,
  • 6:18 - 6:21
    iki kare sağa kaydırmalısınız.
  • 6:21 - 6:25
    Bu griddeki iki kare 16 dipe eşdeğer.
  • 6:25 - 6:29
    Bu e-posta ekranında, bütün ikonlar
    burada hizalanmış durumda.
  • 6:29 - 6:33
    Ekranın sol köşesinden
    16 dip uzaktalar ve
  • 6:33 - 6:38
    buradaki bütün metin de ekranın sol
    köşesinden 72 dip uzağında konumlanmış.
  • 6:38 - 6:41
    Gördüğünüz gibi içerik burada
    belirli bir sırayı
  • 6:41 - 6:42
    takip ediyor.
  • 6:42 - 6:44
    Görselleştirmenin bir başka yolu da şu.
  • 6:44 - 6:47
    Google I/O uygulamasından alınan
    bu ekran görüntüsünde,
  • 6:47 - 6:54
    içerik bu 16 dip sırasında ve buradaki
    72 dip sırasında hizalanmış durumda.
  • 6:54 - 6:57
    Ekranın sol köşesinden
    72 dip uzaklıkta.
  • 6:57 - 6:59
    Ve bu köşede,
  • 6:59 - 7:03
    içerik ekranın sağ köşesinden
    16 dip ötede duruyor.
  • 7:03 - 7:05
    Tablette daha fazla alan mevcut,
    bu sayede
  • 7:05 - 7:07
    biraz daha fazla padding mümkün.
  • 7:07 - 7:11
    Ekranın sol köşesinden 24 dip
    uzaklıkta olabilir,
  • 7:11 - 7:12
    bu diğer değerler içinde geçerli.
  • 7:12 - 7:17
    Bu değerleri tavsiye etmemizin nedeni
    okumayı daha kolay bir hale getirmek.
  • 7:17 - 7:20
    Örneğin, bu başlık bir kaç piksel
    daha kaymış olsaydı, ve
  • 7:20 - 7:24
    Subtext bir kaç piksel
    daha sağda olsaydı,
  • 7:24 - 7:26
    burada sivri bir köşe olurdu.
  • 7:26 - 7:30
    Bu da kullanıcının içeriği
    okumasını zorlaştırırdı.
  • 7:30 - 7:35
    Bu şekilde hepsini hizaladığınızda
    uygulamanızın kullanımı da kolaylaşıyor.
  • 7:35 - 7:38
    Marginde padding kullanılmasıyla
    ilgili bir kaç gerçek örnek.
  • 7:38 - 7:40
    Bu Google Takvim uygulaması
    ekran görüntüsünde,
  • 7:40 - 7:44
    buraya biraz kaymış bazı
    yazılar görüyoruz.
  • 7:44 - 7:47
    Takvim etkinlikleri arasında da
    biraz boşluklar var.
  • 7:47 - 7:48
    Padding kullanarak bunu uygularsak,
  • 7:48 - 7:52
    bu arka plan görüntüsü muhtemelen
    o boş alana genişleyecek.
  • 7:52 - 7:56
    Bunun yerine margin kullanrsak
    görünümün etrafına bir tampon bölge
  • 7:56 - 7:58
    eklenir, yani büyük ihtimalle margin.
  • 7:58 - 8:02
    İşte takvim etkinliği için detay
    sayfasından başka ekran görüntüsü.
  • 8:02 - 8:06
    Burada bir sürü metin var ve diğerlerine
    göre daha fazla boşluk mevcut.
  • 8:06 - 8:09
    Bu büyük boşlukları padding
    ekleyerek oluşturabiliriz.
  • 8:09 - 8:13
    Buraya bu boşluğu eklemek için,
    bu TextView'ine ya alt padding ya da
  • 8:13 - 8:15
    ya da üst padding ekleyebilirsiniz.
  • 8:16 - 8:18
    Her halükarda işe yarayacaktır.
  • 8:18 - 8:21
    Hatta yerleşim margini
    bile uygulayabilirsiniz.
  • 8:21 - 8:24
    Burada yerleşim margini mi yoksa padding
    mi olduğunu ayırt edemeyebilirsiniz
  • 8:24 - 8:28
    çünkü kullanılan arka plan saydam.
  • 8:28 - 8:31
    Şimdi faklı padding ayarları ve margin
    değerleriyle pratik yapma
  • 8:31 - 8:32
    sırası sizde.
  • 8:32 - 8:35
    Aşağıdaki bağlantılarda, başlayabilmeniz
    için başlangıç kodlarını verdik.
  • 8:35 - 8:39
    Padding ve margin değerlerini rahatça
    kullanacak hale geldiğinizde,
  • 8:39 - 8:40
    durmayın ve bu yerleşimi
    tasarlamaya çalışın.
  • 8:41 - 8:46
    Bu arada, bu metin köşelerden
    16 dip uzaklıkta yer alıyor.
  • 8:46 - 8:49
    Fakat iki textView arasında
    sadece 8 dip var.
  • 8:49 - 8:51
    İşiniz bittiğinde, bu kutuyu işaretleyin.
Title:
02-20 Padding vs. Margin
Description:

more » « less
Video Language:
English
Team:
Udacity
Project:
UD837 - Android for Beginners
Duration:
08:52

Turkish subtitles

Revisions Compare revisions