Anasayfa » Android » Android Linear Layout Layout Width – Layout Height

Android Linear Layout Layout Width – Layout Height

Daha önce layout width ve layout height özelliklerinin ne anlama geldiğini bu yazımızda anlatmıştık. Şimdi bu özelliği daha iyi kavrayabilmeniz için bir kaç örnek yapalım.

Yeni bir uygulama oluşturalım layout alanımıza 3 adet mavi kırmızı yeşil renklerinde TextView ekleyeceğiz.

Ben Layout Width Layout Height1 olarak kaydettim. layout dosyamızın adına main adını verdim.

layout dosyamızın içinde main.xml dosyasını açalım

RelativeLayout olan kısmı LinearLayout olarak değiştirelim

main.xml dosyamız

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"    
    tools:context=".MainActivity" >
    <TextView
        android:id="@+id/yesilText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00FF00"
        android:text="@string/yesilText">        
    </TextView>
    <TextView 
        android:id="@+id/maviText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000FF"
        android:text="@string/maviText"        
        />
    <TextView
        android:id="@+id/kirmiziText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FF0000"
        android:text="@string/kirmiziText">
        
    </TextView>

</LinearLayout>

uygulamamızın son hali

Layout-Width-Height-1

Burada her üç TextView elemanlarına layout_weight ve layout_height özellikleri için wrap_content değerini vererek ihtiyaç duyduğu kadar alan kaplamasını istedik.

Burada nesneler yanyana dizili bir şekilde dizilmiş olarak görünmektedir. Şimdi bu nesnelerin alt alta dizilmesini sağlıyalım.

Linear Layout içerisindeki nesnelerin yatay (vertical) dizilmesini sağlamak

Bunun için bu projemizin bir kopyasını alalım projemizin üzerinde iken sağ tuş ile kopyalayıp yeni projemizin adını girelim ben proje adını LayoutWidthHeight2 olarak girdim. Sizde istediğiniz bir isim girebilirsiniz

Şimdi layout dosyamız main.xml dosyamızı açalım. Bu üç nesneyi yatay olarak sıralamak için layout’umuza orientation özelliği gireceğiz

main.xml

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
tools:context=”.MainActivity”
android:orientation=”vertical”>
<TextView
android:id=”@+id/yesilText”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”#00FF00″
android:text=”@string/yesilText”>
</TextView>
<TextView
android:id=”@+id/maviText”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”#0000FF”
android:text=”@string/maviText”
/>
<TextView
android:id=”@+id/kirmiziText”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”#FF0000″
android:text=”@string/kirmiziText”>
</TextView>

uygulamamızın son hali

Layout-Width-Height-2

sadece   android:orientation=”vertical” eklemesini yaptık

Linear Layout içerisinde Layout Width ve Layout Height özelliklerine değer vermek

Şimdide bu TextView nesnelerine boyut verelim. Yukarıdaki projeyi package explorer alanından kopyalayalım. Bu örneğimizide LayoutWidthHeight3 adını verelim

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"    
    tools:context=".MainActivity"
    android:orientation="vertical" >
    <TextView
        android:id="@+id/yesilText"
        android:layout_width="100dp"
        android:layout_height="25dp"
        android:background="#00FF00"
        android:text="@string/yesilText">        
    </TextView>
    <TextView 
        android:id="@+id/maviText"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:background="#0000FF"
        android:text="@string/maviText"        
        />
    <TextView
        android:id="@+id/kirmiziText"
        android:layout_width="300dp"
        android:layout_height="75dp"
        android:background="#FF0000"
        android:text="@string/kirmiziText">        
    </TextView>
</LinearLayout>

Projemizin son hali

Layout-Width-Height-3

Yeşil Renk için 100dp genişlik 25dp yükseklik verdik

Mavi Renk için 200dp genişlik 50dp yükseklik verdik

Mavi Renk için 300dp genişlik 75dp yükseklik verdik

Burada dikkat edeceğimiz noktalar;

ekrana eklediğimiz 3 nesne bulunduğu layout içerisinde alt alta dizilmiştir. Bunu linear layout içerisinde android:orientation özelliği ile belirledik. orientation:vertical özelliği verdiğimizde ekran yatay konuma gelsede aynı özellikler geçerli olacaktır.

Üç nesnenin genişliği ve yüksekliğine bir önceki örneğimizden farklı olarak değer verdik.

Şimdi de nesnelerimizi dikey olarak hizalayalım

LinearLayout içerisinde nesneleri dikey hizalamak

Yine bir önceki projemizi copy paste yaparak kopyalayalım. Bu örneğimizin adınıda LayoutWidthHeight4 olarak girelim.

main.xml

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
tools:context=”.MainActivity”
android:orientation=”horizontal” >
<TextView
android:id=”@+id/yesilText”
android:layout_width=”50dp”
android:layout_height=”50dp”
android:background=”#00FF00″
android:text=”@string/yesilText”>
</TextView>
<TextView
android:id=”@+id/maviText”
android:layout_width=”100dp”
android:layout_height=”75dp”
android:background=”#0000FF”
android:text=”@string/maviText”
/>
<TextView
android:id=”@+id/kirmiziText”
android:layout_width=”150dp”
android:layout_height=”100dp”
android:background=”#FF0000″
android:text=”@string/kirmiziText”>

</TextView>
</LinearLayout>
Fazla verilen ölçüler küçük ekranlarda dışa taşacaktır. Burada ölçülere değer verek kendiniz belirleyebilirsiniz

Layout-Width-Height-4

bu örneğimizde nesneleri dikey olarak hizalanmış bir şekilde görüyoruz. Bu özelliği linear layout alanındaki orientation özelliğine verdiğimiz horizontal değeri ile gerçekleştirmiş olduk.

Şimdi de text size ile genişliğin nasıl değişebildiği hakkında bir örnek yapalım.

TextSize özelliği

Tekrar yukarıdaki örneğimizi kopyalayıp adını LayoutWidthHeight5 olarak yazalım. Android orientation özelliğini yatay yapalım.

main.xml

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
tools:context=”.MainActivity”
android:orientation=”vertical” >
<TextView
android:id=”@+id/yesilText”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”#00FF00″
android:text=”@string/yesilText”>
</TextView>
<TextView
android:id=”@+id/maviText”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”#0000FF”
android:text=”@string/maviText”
android:textSize=”60sp”
/>
<TextView
android:id=”@+id/kirmiziText”
android:layout_width=”200dp”
android:layout_height=”wrap_content”
android:background=”#FF0000″
android:text=”@string/kirmiziText”
android:textSize=”60sp”>
</TextView>
</LinearLayout>

Layout-Width-Height-5

Burada dikkat etmeniz gereken yer Mavi ve kırmızı renklerin fontlarının aynı olduğu halde mavi rengin daha geniş yer kapladığı. Bunun nedeni;

Biz kırmızı renge android:layout_width=”200dp”  vererek genişliğini bu alan içerisinde sınırlamasını istedik

Mavi renkte iste genişliğini android:layout_width=”wrap_conten” vererek genişliğine sınırlama getirmeden fontun büyüklüğüne göre sınırlamasını istedik.

Cevapla

E-posta adresiniz yayınlanmayacak. Required fields are marked *

*


üç + 7 =

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>