Anasayfa » Android » Android Table Layout

Android Table Layout

TableLayout

Table layout verilerimizi satır ve sutun şeklinde göstermek için kullanırız. Table layout html deki table yapısına benzer.

Android Table Layout 1

Alttaki resimde kımızı yeşil – mavi sarı renklerimiz yanyana sıralandı. Yani Kırmızı ve Yeşil TextView nesneleri bir satırın elemanı Mavi ve Sarı Renkli TextView nesneler ayrı bir satırın elemanıdır.

<TableLayout 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"
 android:shrinkColumns="0"
 android:stretchColumns="1">
 <TableRow>
 <TextView
 android:text="Kırmızı"
 android:background="#aa0000"
 android:textColor="#FFFFFF"
 android:layout_width="match_parent"
 android:layout_height="match_parent"/>
 
 <TextView
 android:text="Yeşil"
 android:background="#00aa00"
 android:textColor="#FFFFFF"
 android:layout_width="match_parent"
 android:layout_height="match_parent"/> 
 </TableRow>
 
 <TableRow>
 <TextView
 android:text="Mavi"
 android:background="#0000aa"
 android:textColor="#FFFFFF"
 android:layout_width="match_parent"
 android:layout_height="match_parent"/>
 
 <TextView
 android:text="Sarı"
 android:background="#ffef03"
 android:layout_width="match_parent"
 android:layout_height="match_parent"/> 
 </TableRow>
 </TableLayout>

Table Layout tablo satırlarından oluşur.  Table Layout içerisinde kullandığımız özelliklere bakalım

android:shrinkColumns="0"

Shrink Columns index değeridir

android:stretchColumns="1"

stretchColumns ise kolunu genişletir 1 ise 1. Column manasına gelir.

Diyelimki html deki gibi birden fazla kolonlar için aynı özelliği vermek istiyoruz. O zaman kolon adlarını virgülle belirtmek zorundayız. Tüm kolonlara aynı özelliği vermek istersek * kullanmalıyız

Table Layout 2 Tek Sütun

Şimdi tek satır tek sutun örneği yapalım

android-table-layout2

<TableLayout 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”
android:shrinkColumns=”*”
android:stretchColumns=”*” >
<TableRow>
<TextView
android:text=”Tek Satır”
android:background=”#aa0000″
android:textColor=”#FFFFFF”
android:layout_width=”match_parent”
android:padding=”18dip”
android:textSize=”18dp”
android:layout_height=”wrap_content”/>
</TableRow>
</TableLayout>

Table Layout 3 Birden Fazla Sütun

android-table-layout3

<TableLayout 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"
 android:shrinkColumns="*"
 android:stretchColumns="*" >
 <TableRow>
 <TextView
 android:text="Kırmızı"
 android:background="#aa0000"
 android:textColor="#FFFFFF"
 android:layout_width="match_parent"
 android:padding="18dip"
 android:textSize="18dp" 
 android:layout_weight="1" 
 android:gravity="center" 
 android:layout_height="wrap_content"/> 
 <TextView
 android:text="Mavi"
 android:background="#0000aa"
 android:textColor="#FFFFFF"
 android:layout_width="match_parent"
 android:padding="18dip"
 android:textSize="18dp" 
 android:layout_weight="1" 
 android:gravity="center" 
 android:layout_height="wrap_content"/> 
 <TextView
 android:text="Yeşil"
 android:background="#00aa00"
 android:textColor="#FFFFFF"
 android:layout_width="match_parent"
 android:padding="18dip"
 android:textSize="18dp" 
 android:layout_weight="1"
 android:gravity="center" 
 android:layout_height="wrap_content"/> 
 </TableRow> 
</TableLayout>

 Android Layout 4 

İki satırlık bir text yapalım birinci satırda bir TextView nesnesi ikinci satırda 3 adet TextView nesnesi atayalım

android-table-layout4

<TableLayout 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"
 android:shrinkColumns="*"
 android:stretchColumns="*" >
 
 <TableRow>
 <TextView
 android:text="Tek Satır"
 android:background="#000000"
 android:textColor="#FFFFFF"
 android:layout_width="match_parent"
 android:padding="18dip"
 android:textSize="18dp" 
 android:layout_span="3" 
 android:layout_height="wrap_content"/> 
 </TableRow>
 <TableRow>
 <TextView
 android:text="Kırmızı"
 android:background="#aa0000"
 android:textColor="#FFFFFF"
 android:layout_width="match_parent"
 android:padding="18dip"
 android:textSize="18dp" 
 android:layout_weight="1" 
 android:gravity="center" 
 android:layout_height="wrap_content"/> 
 <TextView
 android:text="Mavi"
 android:background="#0000aa"
 android:textColor="#FFFFFF"
 android:layout_width="match_parent"
 android:padding="18dip"
 android:textSize="18dp" 
 android:layout_weight="1" 
 android:gravity="center" 
 android:layout_height="wrap_content"/> 
 <TextView
 android:text="Yeşil"
 android:background="#00aa00"
 android:textColor="#FFFFFF"
 android:layout_width="match_parent"
 android:padding="18dip"
 android:textSize="18dp" 
 android:layout_weight="1"
 android:gravity="center" 
 android:layout_height="wrap_content"/> 
 </TableRow> 
</TableLayout>

 

Resimde siyah textin tüm alanı kapladığını görüyoruz. Burada android:layout_span=”3″ özelliğini kullandık buda genişliği Kırmızı Mavi ve Yeşil sutunları kadar Siyah TextView nesnesini genişletti.

Şimdi table layout ile Bir Login Sayfası arayüzü yapalım

android-table-layout-4

<TableLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TableRow
        android:paddingTop="10px"
        android:gravity="center"> 
        <TextView
            
            android:layout_width="wrap_content"
            android:layout_gravity="center"
            android:layout_span="2"
            android:text="@string/status"
            android:textColor="#000000"
            android:textSize="20sp"
            android:textStyle="bold" />
    </TableRow>   
    
    <TableRow 
        android:layout_marginTop="20dip"   > 
        <TextView
            
            android:layout_width="wrap_content"
            android:layout_marginLeft="20dip"
            android:layout_marginStart="20dip"
            android:text="@string/textName"
            android:textColor="#000000"
            android:textSize="20sp" >           
        </TextView>        

        <EditText
            android:id="@+id/editName"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"
            android:layout_marginRight="20dip"
            android:layout_weight="1"
            android:hint=""
            android:background="@android:drawable/edit_text"
            />
    </TableRow>   
     
    <TableRow
        android:layout_marginTop="20dip">        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"
            android:layout_marginStart="20dip"
            android:text="@string/textPass"
            android:textColor="#000000"
            android:textSize="20sp" />        
        <EditText 
            android:hint=""
            android:id="@+id/editPass"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"
            android:layout_marginRight="20dip"
            android:layout_weight="1"
            android:background="@android:drawable/edit_text"            
            />               
    </TableRow>  
      
    <TableRow 
        android:gravity="center"
        android:layout_marginTop="20dip"  >
        <Button  
            android:text="@string/login"           
            android:clickable="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/login"
            android:layout_span="2">
        </Button>
        
    </TableRow>
</TableLayout>

asdsada

<TableRow
        android:paddingTop=”10dp”
        android:gravity=”center”>

sütün yukarısına 10 dp lik bir boşluk atandı

android:layout_marginLeft=”20dip”

android:layout_marginStart=”20dip”

TextView nesneleri için sağ dan ve soldan 20dip margin atandı

android:background=”@android:drawable/edit_text”

TextView nesnelerinin backgrounu android görüntüsüne göre ayarlandı

Table Layout 6

Basit bir ürün giriş tablosu hazırlayalım

android-table-layout-5

 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:stretchColumns="1">
    <TableRow android:padding="5dip">        
        <TextView
            android:layout_height="wrap_content"
            android:text="@string/textAddProduct"
            android:gravity="center_horizontal"
            android:layout_span="2"
            android:textSize="20sp"/>
    </TableRow>
    
    <TableRow>
        <TextView
            android:text="@string/textProductCode"
            android:layout_column="0"
            android:layout_height="wrap_content" />
        <EditText
            android:hint=""
            android:id="@+id/productCode"
            android:layout_height="wrap_content"
            android:layout_column="1"                  
            android:background="@android:drawable/edit_text"
            />        
    </TableRow>
    
    <TableRow>
        <TextView
            android:text="@string/textProductName"
            android:layout_column="0"
            android:layout_height="wrap_content"/>
        <EditText 
            android:hint=""
            android:id="@+id/editProductName"
            android:layout_height="wrap_content"
            android:background="@android:drawable/edit_text"            
            android:scrollHorizontally="true"/>        
    </TableRow>
    
    <TableRow>
        <TextView
            android:text="@string/textProductPrice"           
            android:layout_height="wrap_content"/>
        <EditText
            android:hint=""           
            android:background="@android:drawable/edit_text"
            android:id="@+id/editProductPrice"
            android:layout_height="wrap_content"/> 
    </TableRow>
    
    <TableRow>
       <Button
           android:id="@+id/buttonAdd"
           android:text="@string/textButtonAdd"
           android:layout_height="wrap_content"/>       
       <Button 
           android:id="@+id/buttonCancel"
           android:text="@string/textButtonCancel"
           android:layout_height="wrap_content"
           />        
    </TableRow>   
    
</TableLayout>

Layouta daha farklı özellikler vererek (padding margin) daha düzgün şekilde görselleştirebilirsiniz

String değerleri res/values/styles.xml dosyasından tanımlamalıyız.

Table Layout 6

Table satır ve sütunları daha iyi anlamanız için 3 satır 3 sutundan oluşan bu örneği inceleyebilirsiniz

<?xml version="1.0" encoding="utf-8"?>

<?xml version="1.0" encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:tools="http://schemas.android.com/tools"
    tools:ignore="HardcodedText"    
    android:shrinkColumns="0,2">

    <TableRow>
        <EditText android:text="[0,0]" android:background="@android:drawable/edit_text"/>
        <EditText android:text="[0,1]" android:background="@android:drawable/edit_text"/>
        <EditText android:text="[0,2]" android:background="@android:drawable/edit_text"/>        
    </TableRow>
    
    <TableRow>
        <EditText android:text="[1,0]" android:background="@android:drawable/edit_text"/>
        <EditText android:text="[1,1]"  android:background="@android:drawable/edit_text"/>
        <EditText android:text="[1,2]" android:background="@android:drawable/edit_text"/>        
    </TableRow>
    
    <TableRow>
        
        <EditText android:text="[2,0]" android:background="@android:drawable/edit_text"/>
        <EditText android:text="[2,1]" android:background="@android:drawable/edit_text"/>
        <EditText android:text="[2,2]" android:background="@android:drawable/edit_text"/>  
    </TableRow>
    
</TableLayout>


Layout Span ile satır birleştirme yapalım

Table Layout 7

1,0, 2,1 ve 3,0 satırlarda birleştirilme yapıldı Eski Hali
android-table-layout-6

Resimde görüldüğü gibi

birinci satır sıfırıncı sütun [1,1] için layout span 2 verildi yukarıdaki iki sütün kadar genişledi,

İkinci satır birinci sütun [2,1],  layout span 2 verildi  [1,1] kadar genişledi yani 2 sütun genişledi

üçüncü satır sıfırıncı sütun [3,0] için layout span3 verildi 3 sütün kadar genişledi

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TableRow>
        <EditText android:text="[0,0]" android:background="@android:drawable/edit_text"/>
        <EditText android:text="[0,1]" android:background="@android:drawable/edit_text"/>
        <EditText android:text="[0,2]" android:background="@android:drawable/edit_text"/>       
    </TableRow>
    
    <TableRow>
       <EditText android:text="[1,0]" android:layout_span="2" android:background="@android:drawable/edit_text"/>
       <EditText android:text="[1,1]" android:background="@android:drawable/edit_text"/>         
    </TableRow>
    
    <TableRow>
       <EditText android:text="[2,0]"  android:background="@android:drawable/edit_text"/>
       <EditText android:text="[2,1]" android:layout_span="2" android:background="@android:drawable/edit_text"/> 
    </TableRow>
    
    <TableRow>
        <EditText android:text="[3,0]" android:layout_span="3" android:background="@android:drawable/edit_text"/>          
    </TableRow>
</TableLayout>

 Android Table Layout 8

android-table-layout-8 [0,0] [0,1] [0,2] alanları TableRow içerisinde tanımlandı

[1,0] [1,1] alanları LinearLayout içerisinde horizontal olarak tanımlandı

[1,0] için 150dp genişlik verildi [1,1] kalan alan genişliğine göre genişledi

 

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent">
    <TableRow>
        <EditText android:text="[0,0]" android:background="@android:drawable/edit_text"/>
        <EditText android:text="[0,1]" android:background="@android:drawable/edit_text"/>
        <EditText android:text="[0,2]" android:background="@android:drawable/edit_text"/>       
    </TableRow>
    
    <LinearLayout android:orientation="horizontal">
        <EditText android:text="[1,0]" android:background="@android:drawable/edit_text"
            android:layout_width="150px"
            android:layout_height="wrap_content"/>
        <EditText android:text="[1,1]" android:background="@android:drawable/edit_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>       
    </LinearLayout>
    <TableRow>
        <EditText android:text="[2,0]" android:background="@android:drawable/edit_text"/>
        <EditText android:text="[2,1]" android:background="@android:drawable/edit_text"/>
        <EditText android:text="[2,2]" android:background="@android:drawable/edit_text"/>
        
    </TableRow>
    
</TableLayout>

 Table Layout 9

android-table-layout-9 [0,0] [0,1] [0,2] editText nesneleri TableRow içerisinde tanımlandı

[1,0] [2,0] editText nesneleri LinearLayout içerisinde vertical olarak tanımlandı

[1,1] nesnelesi Layout olmadan editText olarak eklendi

[1,2] [2,2] editText nesneleri LinearLayout içerisinde vertical olarak tanımlandı

 

 

Cevapla

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

*


yedi × = 21

Ş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>