Android - Kullanıcı Arayüzü Tasarımı

Bu bölümde android ekranının farklı UI bileşenlerine bakacağız. Bu bölüm aynı zamanda daha iyi bir kullanıcı arayüzü tasarımı yapmak için ipuçlarını ve ayrıca bir kullanıcı arayüzünün nasıl tasarlanacağını açıklar.

UI ekran bileşenleri

Bir android uygulamasının tipik bir kullanıcı arayüzü, işlem çubuğu ve uygulama içerik alanından oluşur.

Ana Eylem Çubuğu
Kontrolü Görüntüle
İçerik alanı
Eylem Çubuğunu Böl

Bu bileşenler aşağıdaki resimde de gösterilmiştir -

Ekran Bileşenlerini Anlamak

Android uygulamasının temel birimi etkinliktir. Bir UI, bir xml dosyasında tanımlanır. Derleme sırasında, XML'deki her öğe, yöntemlerle temsil edilen özniteliklere sahip eşdeğer Android GUI sınıfına derlenir.

Grupları Görüntüle ve Görüntüle

Bir etkinlik, görünümlerden oluşur. Görünüm, yalnızca ekranda görünen bir widget'tır. Düğme vb. Olabilir Bir veya daha fazla görünüm tek bir GroupView olarak gruplanabilir. ViewGroup örneği, düzenleri içerir.

Düzen türleri

Pek çok düzen türü vardır. Bazıları aşağıda listelenmiştir -

Doğrusal Düzen
Mutlak Düzen
Masa Düzeni
Çerçeve Düzeni
Bağıl Düzen

Doğrusal Düzen

Doğrusal düzen ayrıca yatay ve dikey düzene ayrılmıştır. Bu, görünümleri tek bir sütunda veya tek bir satırda düzenleyebileceği anlamına gelir. İşte bir metin görünümü içeren doğrusal düzen (dikey) kodu.

<?xml version=”1.0” encoding=”utf-8”?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   android:orientation=”vertical” >
   
   <TextView
      android:layout_width=”fill_parent”
      android:layout_height=”wrap_content”
      android:text=”@string/hello” />
</LinearLayout>

AbsoluteLayout

AbsoluteLayout, alt öğelerinin tam konumunu belirlemenizi sağlar. Bu şekilde ilan edilebilir.

<AbsoluteLayout
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
   
   <Button
      android:layout_width=”188dp”
      android:layout_height=”wrap_content”
      android:text=”Button”
      android:layout_x=”126px”
      android:layout_y=”361px” />
</AbsoluteLayout>

Tablo Düzeni

TableLayout, görünümleri satırlar ve sütunlar halinde gruplandırır. Bu şekilde ilan edilebilir.

<TableLayout
   xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_height=”fill_parent”
   android:layout_width=”fill_parent” >
   
   <TableRow>
      <TextView
         android:text=”User Name:”
         android:width =”120dp”
         />
      
      <EditText
         android:id=”@+id/txtUserName”
         android:width=”200dp” />
   </TableRow>
   
</TableLayout>

Göreli Düzen

RelativeLayout, alt görünümlerin birbirine göre nasıl konumlandırılacağını belirlemenizi sağlar.

<RelativeLayout
   android:id=”@+id/RLayout”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
</RelativeLayout>

Çerçeve Düzeni

FrameLayout, tek bir görünümü görüntülemek için kullanabileceğiniz ekran üzerinde bir yer tutucudur. Bu şekilde ilan edilebilir.

<?xml version=”1.0” encoding=”utf-8”?>
<FrameLayout
   android:layout_width=”wrap_content”
   android:layout_height=”wrap_content”
   android:layout_alignLeft=”@+id/lblComments”
   android:layout_below=”@+id/lblComments”
   android:layout_centerHorizontal=”true” >
   
   <ImageView
      android:src = “@drawable/droid”
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content” />
</FrameLayout>

Bu özniteliklerin dışında, tüm görünümlerde ve Görünüm Gruplarında ortak olan başka öznitelikler de vardır. Aşağıda listelenmiştir -

Sr.No	Görüntüle ve açıklama
1	layout_width View veya ViewGroup'un genişliğini belirtir
2	layout_height View veya ViewGroup'un yüksekliğini belirtir
3	layout_marginTop View veya ViewGroup'un üst tarafında fazladan boşluk belirtir
4	layout_marginBottom View veya ViewGroup'un alt tarafında fazladan boşluk belirtir
5	layout_marginLeft View veya ViewGroup'un sol tarafında fazladan boşluk belirtir
6	layout_marginRight View veya ViewGroup'un sağ tarafında fazladan boşluk belirtir
7	layout_gravity Alt Görünümlerin nasıl konumlandırıldığını belirtir
8	layout_weight Düzendeki fazladan alanın ne kadarının Görünüme tahsis edilmesi gerektiğini belirtir.

Ölçü birimleri

Android kullanıcı arayüzünde bir öğenin boyutunu belirlerken aşağıdaki ölçü birimlerini hatırlamanız gerekir.

Sr.No	Birim ve açıklama
1	dp Yoğunluktan bağımsız piksel. 1 dp, 160 dpi ekranda bir piksele eşdeğerdir.
2	sp Ölçekten bağımsız piksel. Bu dp'ye benzer ve yazı tipi boyutlarını belirlemek için önerilir
3	pt Nokta. Bir nokta, fiziksel ekran boyutuna bağlı olarak bir inçin 1 / 72'si olarak tanımlanır.
4	px Piksel. Ekrandaki gerçek piksellere karşılık gelir

Ekran Yoğunlukları

Sr.No	Yoğunluk ve DPI
1	Low density (ldpi) 120 dpi
2	Medium density (mdpi) 160 dpi
3	High density (hdpi) 240 dpi
4	Extra High density (xhdpi) 320 dpi

Düzenleri optimize etme

Etkili düzenler oluşturmaya yönelik bazı yönergeler.

Gereksiz yuvalama yapmaktan kaçının
Çok fazla Görünüm kullanmaktan kaçının
Derin iç içe geçmekten kaçının