← Ana Sayfaya Dön

Layoutlar ve Çeşitleri - XML

Kategori: Android20 Ocak 2025

Layout

Layout, bir uygulamanın genel yapısını oluşturan temel bileşenlerdir. Kullanıcının uygulamayı görüntülemesi için gerekli olan tüm bileşenleri içerir.

Layout Notları

Layout kısmı ile ilgili notlar sürekli güncellenecektir.

Fotoğraf ekleyeceğinde png, jpg, jpeg gibi formatları kullan ve kaydettiğin resmi kopyalayıp drawable klasörüne yapıştır.

Constraint Layout

Constraint Layoutlarda ekrandaki yerlerini belirliyoruz, şuradan şu kadar boşluk var gibi.

  • Constrait ayarlarken resmin, yazının, butonun üzerine tıklayarak çıkan daireler ile sayfada hizalamasını yapıyoruz.
  • Constraint Layout'ta resimleri veya butonları sürekli yeniden boyutlandırabiliriz.

Not: Constraint Layout'ta resimleri veya butonları HER cihazda ortada yapmak için sayfanın sağına ve soluna sabitleyip aynı boşluğu bırakıyoruz, ardından boyutları dinamik ayarlamak için width ve height'ı 0dp (match constraint)olarak ayarlıyoruz.

Not: Infer Constraint ile çok basit düzeydeki sayfalar için hizalama yapabiliriz ama birkaç bileşenden sonra sapıtıyor, manuel yapmak en iyisi :)

Linear Layout

Linear Layout, bir düz çizgi üzerinde elemanları hizalama yapmak için kullanılır.

  • Linear Layout'ta elemanları yatay veya dikey olarak hizalama yapabiliriz. andorid:orientation komutu ile belirtilir.

  • Linear Layout'ta da elemanların boyutlarını ayarlayabiliriz.

  • Komponentler xml dosyasındaki sıralarına göre hizalanır. Yani resim üstte dursun istersen kodda da üstte olmalı.

  • Layout_gravity ile komponentlerin hizalanmasını ayarlayabiliriz, center vs..

Frame Layout

Frame Layout sayfanın tamamını kaplayacak şekilde çalışır, mesela bir harita uygulamasında harita kısmını kaplamak için kullanılır.

Relative Layout

Relative Layout, sayfadaki elemanların birbirlerine göre konumlarını belirlemek için kullanılır.

  • Ekleme yapılacak

Grid Layout

Grid Layout, ızgara görünümü gibi bir görünüm oluşturmak için kullanılır.

  • Ekleme yapılacak

XML Layout

XML, yaptığımız arayüzün kodlarını yazdığımız dosyadır.

XML kodlarını ezberleye gerek yok, çalışılan komponentin üstüne tıklayınca kodlarını görebiliriz.

XML Layout kısmı da sürekli güncellenecektir.

  • activity_main.xml dosyası, uygulamanın ana sayfasını temsil eden XML dosyasıdır. Bu dosya, uygulamanın ana ekranını oluşturmak için kullanılır.

  • andorid:layout_width = "match_parent" ilgili komponenti yayıyor, daha büyük bir şey geldiğinde mesela uzun bir metin, bunun taşmaması için daha fazla alan sağlamış oluyor.

  • Benzer şekilde ilgili komponentin rengini, boyutunu, vs. ayarlayabiliriz.

  • Constraint Layout'ta ise layout_constraintTop_toTopOf, End_ToEndOf gibi kısımlar da kullanılır. Bunlar da hizalama için kullanılır.

  • "match_parent" ilgili komponentin ebeveyninin boyutunu alır. Yani üzerinde çalıştığı cihazın boyutunu alır.

  • "wrap_content" daha çok metin içeren komponentlerde kullanılır ve içeriğine göre boyutunu dinamik olarak belirler.

İç İçe Layoutlar

Bir layout içerisinde başka bir layout kullanmak istersek, bu işlem iç içe layoutlar olarak adlandırılır.

Constraint Layout içerisinde Linear Layout, Linear Layout içerisinde de Constraint Layout kullanılabilir. Herhangi bir sınırlama veya şart yok.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <ImageView android:id="@+id/imageView" android:layout_width="match_parent" android:layout_height="176dp" android:layout_marginTop="50dp" android:layout_gravity="center" app:srcCompat="@drawable/rdr" /> <TextView android:id="@+id/textView" android:layout_width="match_parent" android:layout_height="30dp" android:layout_marginTop="24dp" android:text="RDR-2" android:textAlignment="center" android:textColor="#CC1612" android:textColorLink="#D31D1D" android:textSize="18sp" android:layout_gravity="center" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_marginTop="24dp" android:gravity="center"> <!-- Duz gravity yapiyoruz buraya dikkat --> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="15dp" android:text="Iyi Oyun" /> <!-- Margin top end falan degil sade margin ise her tarafa ayni, mesela burda her tarafa 15dp --> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="15dp" android:text="Kotu Oyun" /> </LinearLayout> </LinearLayout>

Bu kodda Linear Layout içerisinde Linear Layout kullanılmıştır.

Vertical tanımlanan bir layoutta yan yana butonlar koymak istersek, horizontal bir layout kullanırız ve bu layoutu da ilgili layoutun içerisinde tanımlarız.

Yazdığımız kodun resmi:

Blog Resmi

Not: Kötü diyen bir anca önce sayfayı terk ederse sevinirim tşk.