Layout Çeşitleri Ve Kullanımları

Android’de bir tasarımı yaparken bilinmesi gerekenleri kısa bir şekilde derlemeye çalıştım.

Umarım faydalı olur.

Compenent:Tasarımın içinde kullanılan her bir bileşene verilen addır.

Örneğin: EditText ,TextView ,Button ,ImageView…

Layout:Projelerin arayüz kısmında tasarımın nasıl bir formatta gerçekleşeceğini belirleyen hizalama temalarının temel adıdır.

Layout ve Compenentlerin Boyutlandırılması:

Wrap_contect: İçinde bulunduğu compenentin boyutu kadar yer kaplar.

Match_parent: İçinde bulunduğu compenenti tam bir doğrultuyla kaplar.

Android:hight=”wrap-context”

Android:width=”match_parent”

Şeklinde kullanılır.

1*wbzdg3NQz46R0t69wtHD9A Layout Çeşitleri Ve Kullanımları Haberler

1)LinearLayout:

Compenentleri yatay veya dikey olarak hizalanmasını sağlayan bir yapıdır.

· Yatay hizalama:

Android:oriantion=”horizontal”

· Dikey hizalama:

Android:oriantion=”vertical”

Kod bloklarıyla gerçekleşir.

https://gist.github.com/demiresra6507/72b9211e3a277aca7b7f7a7552e8ee7a

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical” android:layout_width=”match_parent”
android:layout_height=”match_parent”>
%%LinearLayout kullanımları
<LinearLayout
android:id=”@+id/layout1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”horizontal”
android:layout_marginLeft=”90dp”
android:layout_marginTop=”20dp”
android:background=”@color/colorAccent”>
<EditText
android:id=”@+id/name_txt”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:hint=”@string/app_name”/>
<EditText
android:id=”@+id/surename_txt”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginLeft=”20dp”
android:hint=”Demir”/>
</LinearLayout>
<LinearLayout
android:id=”@+id/layout2″
android:layout_width=”185dp”
android:layout_height=”wrap_content”
android:layout_marginTop=”50dp”
android:layout_marginLeft=”90dp”
android:background=”@color/colorPrimary”
android:orientation=”vertical”>
<EditText
android:id=”@+id/name2_txt”
android:layout_width=”150dp”
android:layout_height=”wrap_content”
android:hint=”@string/app_name” />
<EditText
android:id=”@+id/surename2_txt”
android:layout_width=”150dp”
android:layout_height=”wrap_content”
android:layout_marginTop=”20dp”
android:hint=”Demir” />
</LinearLayout>
</LinearLayout>

2)RelativeLayout:

Compenentleri bazı kodlar yardımıyla istediğimiz yere istediğimiz şekilde hizalama olanağı tanır.

· Layout_ alignParent: Bileşenleri ,ekran içersindeki bir kenara veya köşeye hizalamak için kullanılır.

-Layout_alignParentTop->Üste hizala

-Layout_alignParentBottom->Alta hizala

-Layout_alignParentRight->Sağa hizala

-Layout_alignParentLeft->Sola hizala

· Margin: Tasarım elementlerinin birbirinden ayrılması için kullanılır.

-MarginTop->Üstten boşluk

-MarginBottom->Alttan boşluk

-MarginLeft->Soldan boşluk

-MarginRight->Sağdan boşluk

https://gist.github.com/demiresra6507/60405a73ee57861d8070d7e1cb9400e9

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:app=”http://schemas.android.com/apk/res-auto”
android:orientation=”vertical” android:layout_width=”match_parent”
android:layout_height=”match_parent”>
%%RelativeLayout Kullanımı
<ImageView
android:id=”@+id/camera_imgView”
android:layout_width=”100dp”
android:layout_height=”100dp”
app:srcCompat=”@android:drawable/ic_menu_camera”
android:layout_marginLeft=”130dp”
android:layout_marginTop=”50dp” />
<TextView
android:id=”@+id/mail_txt”
android:layout_width=”match_parent”
android:layout_height=”25dp”
android:layout_below=”@+id/camera_imgView”
android:hint=”E-posta “/>
<TextView
android:id=”@+id/password_txt”
android:layout_width=”match_parent”
android:layout_height=”25dp”
android:layout_below=”@+id/mail_txt”
android:hint=”Şifre: “/>
<Button
android:id=”@+id/Login_btn”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_below=”@+id/password_txt”
android:layout_marginLeft=”150dp”
android:layout_marginTop=”20dp”
android:hint=”GİRİŞ”/>
</RelativeLayout>

3)GridLayout:

Bu layout ile kullanılan compenentler ,bir dikdörtgen alana ızgara şeklinde düzenlenir.

· columnCount:Sütun sayısını verir.

İlgili Haber  Kabine toplantısı sonrası Cumhurbaşkanı Recep Tayyip Erdoğan Açıklama Yaptı. Kısıtlamalar kalktı'mı? Okullar açılacak'mı?

· rowCount:Satır sayısını verir.

· useDefaultMargins=”true”: Varsayılan kenar boşluklarını kullan.

· layout_columnSpan=”2”: İki birim kolonluk(sütunluk) yer kapla.

· layout_rowSpan=”2”: İki birim satırlık yer kapla.

· layout_gravity=”fiil”: Kapladığı alan kadar yeri doldur.

https://gist.github.com/demiresra6507/26a44918b12e7028a0d0d10bbaacdbd6

<?xml version=”1.0″ encoding=”utf-8″?>
<GridLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical” android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:columnCount=”3″
android:rowCount=”3″>
%%GridLayout Kullanımı
<Button
android:layout_height=”wrap_content”
android:layout_width=”wrap_content”
android:background=”#CFD0D3″
android:text=”1″ />
<Button
android:layout_height=”wrap_content”
android:layout_width=”wrap_content”
android:background=”#CFD0D3″
android:text=”2″ />
<Button
android:layout_height=”wrap_content”
android:layout_width=”wrap_content”
android:background=”#CFD0D3″
android:text=”3″ />
<Button
android:layout_height=”wrap_content”
android:layout_width=”wrap_content”
android:background=”#CFD0D3″
android:text=”4″ />
<Button
android:layout_height=”wrap_content”
android:layout_width=”wrap_content”
android:background=”#CFD0D3″
android:text=”2″ />
<Button
android:layout_height=”wrap_content”
android:layout_width=”wrap_content”
android:background=”#CFD0D3″
android:text=”5″ />
<Button
android:layout_height=”wrap_content”
android:layout_width=”wrap_content”
android:background=”#CFD0D3″
android:text=”6″ />
<Button
android:layout_height=”wrap_content”
android:layout_width=”wrap_content”
android:background=”#CFD0D3″
android:text=”7″ />
</GridLayout>

4)FrameLayout:

Android bileşenlerinin birbirine karışmadan,çakışmadan üst üste gelmesini sağlar.

Örneğin:Bir resmin üzerine isim veya puan yazımında kullanılır.

· scaleType=”Center”: İstenilen compenenti ortala

· Diğer layoutlarda kullanılan her kod kullanılabilir.

https://gist.github.com/demiresra6507/706001db13e5a0919552722bd294a32f

<?xml version=”1.0″ encoding=”utf-8″?>
<FrameLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:app=”http://schemas.android.com/apk/res-auto”
android:orientation=”vertical” android:layout_width=”match_parent”
android:layout_height=”match_parent”>
%%FrameLayout Kullanımı
<ImageView
android:id=”@+id/flower1_imgView”
android:layout_width=”100dp”
android:layout_height=”100dp”
app:srcCompat=”@drawable/papatya” />
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:hint=”Papatya”
android:layout_marginTop=”80dp”
android:layout_marginLeft=”50dp”/>
</FrameLayout>

5)ConstraintLayout:

Genel olarak yeni bir proje sayfası açıldığında direkt olarak bu layout bulunur ve isteğe bağlı olarak layout değiştirilir.

Yerleştirilen kompenentin konumunu boyutunu kendi otomatik olarak ayarlar.

https://gist.github.com/demiresra6507/98f3a4f71e9d670f8c7172138b491a8c

<?xml version=”1.0″ encoding=”utf-8″?>
<android.support.constraint.ConstraintLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:app=”http://schemas.android.com/apk/res-auto”
android:orientation=”vertical”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>
%%ConstraintLayout Kullanımı
<TextView
android:text=”ConstraintLatout Text”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:id=”@+id/textView”
android:layout_marginStart=”16dp”
android:layout_marginTop=”16dp”
app:layout_constraintLeft_toLeftOf=”parent”
app:layout_constraintTop_toTopOf=”parent”
android:layout_marginLeft=”16dp”
android:layout_marginEnd=”16dp”
app:layout_constraintRight_toRightOf=”parent”
android:layout_marginRight=”16dp” />
</android.support.constraint.ConstraintLayout>

6)TableLayout:

Html’de kullanılan tablo oluşturma şekillerine benzemektedir. Android uygulamalarda çok nadir olarak kullanılır ama yine de bilinmesi gerekir. Tablo şeklinde yapılması gereken tasarımların kolay ve pratik bir şekilde kodlanmasını sağlar.

https://gist.github.com/demiresra6507/bd06bdda29f06e046c85d650a45d9eab

<?xml version=”1.0″ encoding=”utf-8″?>
<TableLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical” android:layout_width=”match_parent”
android:layout_height=”match_parent”>
%%TableLayout Kullanımı
<TableRow
android:id=”@+id/firstRow”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:layout_marginTop=”50dp”
android:layout_marginLeft=”50dp”>
<TextView
android:id=”@+id/test1_txt”
android:layout_width=”150dp”
android:layout_height=”wrap_content”
android:background=”#b0b0b0″
android:padding=”28dip”
android:text=”Text 1″
android:textColor=”#000″
android:textSize=”22dp” />
<TextView
android:id=”@+id/test2_txt”
android:layout_width=”150dp”
android:layout_height=”wrap_content”
android:background=”#FF0000″
android:padding=”28dip”
android:text=”Text 2″
android:textColor=”#000″
android:textSize=”22dp” />
</TableRow>
<TableRow
android:id=”@+id/secondRow”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:layout_marginLeft=”50dp”>
<TextView
android:id=”@+id/test3_txt”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”#b0b0″
android:padding=”28dip”
android:text=”Text 3″
android:textColor=”#000″
android:textSize=”22dp” />
<TextView
android:id=”@+id/test4_txt”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”#00c4ff”
android:padding=”28dip”
android:text=”Text 4″
android:textColor=”#000″
android:textSize=”22dp” />
</TableRow>
</TableLayout>

Tasarımlarda Kullanılabilecek Diğer Hizalama Kodları:

1- Dışarıdan Hizalama

· layout_above : Bir A compenentinin ID’sini bu kod ile B compenentinin içine yazarsak B compenenti ,A compenentinin daima üstünde olur.

İlgili Haber  Beştepe'de Cumhurbaşkanı Erdoğan başkanlığında gerçekleşen Kabine Toplantısı sona erdi Açıklama Yapıyor

· layout_below : Bir A compenentinin ID’sini bu kod ile B compenentinin içine yazarsak B compenenti ,A compenentinin daima altında olur.

· layout_toRightOf : Bir A compenentinin ID’sini bu kod ile B compenentinin içine yazarsak B compenenti ,A compenentinin daima sağında olur.

· layout_toLeftOf : Bir A compenentinin ID’sini bu kod ile B compenentinin içine yazarsak B compenenti ,A compenentinin daima soluna olur.

2- İçeriden Hizalama

· layout_alignLeft : Bir A compenentinin ID’sini bu kod ile B compenentinin içine yazarsak B compenenti ,A compenentinin solundan başlayarak içine doğru hizalanır.

· layout_alignRight : Bir A compenentinin ID’sini bu kod ile B compenentinin içine yazarsak B compenenti ,A compenentinin sağından başlayarak içine doğru hizalanır.

· layout_alignBottom : Bir A compenentinin ID’sini bu kod ile B compenentinin içine yazarsak B compenenti ,A compenentinin altından başlayarak içine doğru hizalanır.

· layout_alignTop : Bir A compenentinin ID’sini bu kod ile B compenentinin içine yazarsak B compenenti ,A compenentinin üstünden başlayarak içine doğru hizalanır.

Yararlandığım kaynaklara bu ve buradan ulaşabilirsiniz. Ayrıca kodun tamamına ulaşmak için detıkla’manız yeterli:)

Kendim de olabildiğince açık anlatmaya çalıştım.Yazdığım bu yazı umarım siz okuyuculara yeterince faydalı olur.

İyi çalışmalar..

E-bültene Abone Ol Merak etmeyin. Spam yapmayacağız.

Yazar

kodamcasi.com ADMİN

İlgili Yazılar

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Hızlı yorum için giriş yapın.

Başka Yazı Yok

Kayıt Ol

VEYA

Zaten üye misiniz? Giriş Yap

Giriş Yap

VEYA

Henüz üyeliğiniz yok mu? Kayıt Ol

close

Abone ol!