Harun Özer


Proje veya dijital katalog yaptırmak için
iletişim formu doldurabilirsiniz..

<< Android Uygulaması Yaşam Döngüsü | Android Menü Oluşturma>>

Android arayüz geliştirme

Yazar harunozer 30 November 2014

Android arayüz geliştirme Bu yazıda Android uygulaması geliştirirken kullanacağımız temel arayüz elemanlarını ve android uygulamalarında ki arayüz kavramlarını inceleyeceğiz.

Bu yazıda Android uygulaması geliştirirken kullanacağımız temel arayüz elemanlarını ve android uygulamalarında ki arayüz kavramlarını inceleyeceğiz.

Android uygulamalarında her ekran bir activity dir. Bu activityler birer xml dosyası olarak tutulurlar. (Tabiki diğer programlama dillerinde olduğu gibi kod ile de elemanlar oluşturulup gösterilebilir.) Activity içinde kullandığımız elemanlar da bu xml dosyasında belirtilirler. Eclipse ADT sayesinde bu xml dosyası ile activity tasarımı yapma zorunluluğu ortadan kalkar, görsel olarak activity tasarımı yapabiliriz ve istenilen durumlarda xml dosyasında da müdahalede bulunabiliriz. İlk olarak arayüz geliştirirken kullanacağımız temel kavramları öğrenelim.

View: Arayüz elemanlarıdır. Button, text, radio gibi.

ViewGroup / Container: içinde View barındırır. View sınıfından türemiştir. İçinde başka ViewGrouplarda barındırabilir.

Layout: İçinde bir veya birden fazla View, ViewGroup veya Layout bulundurabilir. ViewGroup sınıfından türemiştir. İçindeki elemlanların nasıl görüntüleneceğini belirtir. Yatay olarak veya dikey olarak yayılmış veya üst layoutunun tamamını kaplamış gibi.

Activity içindeki elemanların yapısı Outline penceresinden de görülebilir (Window => ShowView => Outline).

android outline window

View elemanları “palette” penceresinden ekrana (Activity) veya “Outline” penceresine sürüklenerek avticity içine eklenebilir. Seçili olan elemanın özellikleri “Properties” penceresinden veya Xml dosyasından değiştirilebilir.

LAYOUT TİPLERİ

Linear Layout: İçindeki kontrolleri “orientation” özelliğinde göre yatay veya dikey olarak konumlandırır.

Table Layout: İçindeki kontrolleri satır-sütun şeklinde tablo düzeni ile sıralar. Activity üzerine eklediğinizde içinde birkaç satırı(tableRow) kendisi oluşturur. Bu layoutda iki özellik önemlidir. “shrinkColumns” ve “stretchColumns”. Bu özellikler değer olarak kolon id leri alır. shrinkColumns da belirttiğimiz kolonlar içeriğin sığdığı kadar genişlikte olur. stretchColumns da belirttiğimiz kolonlar genişletilebileceği anlamına gelir.

Relative Layout: İçindeki kontrollerin konumları birbirlerinin konumlarına göre verilir.

Frame Layout: İçindeki kontrollerin birbirleri üzerine konumlandırır.

 

VİEW SINIFI KONUMLANDIRMA ÖZELLİKLERİ

layout_width ve layout_height: layout_width yatay olarak, layout_height de dikey olarak kaplayacağı alandır. wrap_content ihtiyaç duyulan kadar alana yayılmasını, fill_parent ve match_parent değerleri üst layoutun tamamına yayılmasını sağlar.

layout_gravity: layout’un içinde ki view’lerin, layout’un neresinde konumlanacağını belirtir. top, bottom, right vs.. değerler alır.

gravity: view’ın layout içindeki konumunu belirtir.

margin: view’ın diğer viewlar ile arasında ki boşluğu belirtir.

Şimdi basit bir ekran tasarımını hem ADT ile hem de java kodu ile oluşturalım. Örnek olarak bir giriş ekranı tasarlayalım ve giriş butonun click olayında ekrana bir mesaj yazdıralım. Tasarlayacağımız ekran görüntüsü aşağıdadır.

android ekran tasarımı

Örneğimiz için yeni bir android uygulaması oluşturalım. Varsayılan olarak activity içinde gelen textView kontrolünü silelim. Outline penceresinden activityde varsayılan olarak oluşturulan layout da  “Change Layout” ekranını açalım ve listeden “Linear Layout (Vertical)“ ile değiştirelim ve properties panelinden layout_width ve layout_height değerlerini fill_parent verelim. Şimdi E-Posta ve Şifre alanları için “palette” den 2 “Layout Horizontal” ekleyelim. Şimdi de eklediğimiz iki layoutun içine birer tane textView ve editText, layoutların altına da button ekleyelim. Eklediğimiz viewlerin id lerini “Properties” penceresinden değiştirelim. Kodlama yaparken daha kolay olması için viewlerin idlerini belirli bir şablonda vermek iyi olur. Örneğin textViewler için tv_Eposta, tv_Sifre, editTextler için et_Eposta, et_Sifre ve button için de btnGirisYap id lerini verelim.

Eklediğimiz layoutların, yatay olarak üst layoutun tamamına yayılması için “layout_width” değerini “fill_parent” ve yükseklik olarak da ihtiyaç duyulan kadar olması için “layout_height” değerini “wrap_content” verelim. Outline da activity elemanları aşağıdaki gibi görünecektir. Giriş Yap butonunun da yatay olarak yayılması için “layout_width” değerine “fill_parent” değerini verelim.

Şimdi de eklediğimiz viewlerin textleri için res/values/strings.xml dosyasına gerekli itemları ekleyelim ve ilgili viewların text değerlerini “properties” penceresinden düzenleyelim. Activity ekranının bağlığı için de strings.xml de “app_name” elemanının değerini Giriş Ekranı olarak düzenleyelim.

Son olarak Giriş Yap butonu tıklandığında ekrana Hoş geldiniz mesajı vermek için butona click event tanımlayalım. Src altında MainActivity.java dosyasının düzenlenmiş şekli aşağıdaki gibidir.

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.EditText;

import android.widget.Toast;

 

public class MainActivity extendsActivity {

 

@Override

       protected void onCreate(Bundle savedInstanceState) {

             super.onCreate(savedInstanceState);

             setContentView(R.layout.activity_main);

            

             Button btnGirisYap = (Button) findViewById(R.id.btnGirisYap);

             btnGirisYap.setOnClickListener(new View.OnClickListener() {

                   

                    @Override

                    public void onClick(View v) {

                           EditText txtEMail = (EditText) findViewById(R.id.etEposta);

                           String mesaj = "Hoşgeldin "+ txtEMail.getText().toString();

                           Toast.makeText(MainActivity.this, mesaj, Toast.LENGTH_LONG).show();

                    }

             });

       }

}

Activitymizin onCreate metodunda butonu alıp bir Button nesnesine atıyoruz ve setOnClickListener ile click eventını tanımlıyoruz. Click metodunda eMail değerini ilgili EditText ten okuyoruz ve “Toast” ile ekrana uyarı veriyoruz.

Bu tasarımı java kodları ile MainActivity sınıfı içinde de aşağıdaki gibi oluşturabiliriz. Kodlar ile ilgili açıklamalar kod bloklarının arasında yazılmıştır.

 

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.ViewGroup.LayoutParams;

import android.widget.Button;

import android.widget.EditText;

import android.widget.LinearLayout;

import android.widget.TextView;

import android.widget.Toast;

 

public class KodActivity extends Activity {

 

       /*Activity içinde kullanacağımız view nesnelerini tanımlıyoruz.*/

       public LinearLayout layoutActivity;

       public LinearLayout layoutEposta;

       public LinearLayout layoutSifre;

       public TextView tv_eposta;

       public TextView tv_sifre;

       public EditText et_eposta;

       public EditText et_sifre;

       public Button btnGirisYap;

      

       public void CreateActivityViews() {

             /*view nesnelerini oluşturuyoruz*/

             layoutActivity = new LinearLayout(this);

             layoutEposta = new LinearLayout(this);

             layoutSifre = new LinearLayout(this);

             tv_eposta = new TextView(this);

             tv_sifre = new TextView(this);

             et_eposta = new EditText(this);

             et_sifre = new EditText(this);

             btnGirisYap = new Button(this);

            

             /*Layoutların oriantation değerini setliyoruz*/

             layoutActivity.setOrientation(LinearLayout.VERTICAL);

             layoutEposta.setOrientation(LinearLayout.HORIZONTAL);

             layoutSifre.setOrientation(LinearLayout.HORIZONTAL);

            

             /*Layoutların layout_width ve layout_height değerlerini setliyoruz*/

             layoutActivity.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));

            

             LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT);

             layoutEposta.setLayoutParams(params);

             layoutSifre.setLayoutParams(params);

            

             /*TextViewların layout_width ve layout_height değerlerini setliyoruz*/

             LayoutParams TextViewsparams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);

             tv_eposta.setLayoutParams(TextViewsparams);

             tv_sifre.setLayoutParams(TextViewsparams);

            

             /*EditViewların layout_width ve layout_height değerlerini setliyoruz*/

             LayoutParams EditViewsparams = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT);

             et_eposta.setLayoutParams(EditViewsparams);

             et_sifre.setLayoutParams(EditViewsparams);

            

             /*TextViewların ve buttonun textlerini setliyoruz*/

             tv_eposta.setText(getResources().getText(R.string.str_eposta));

             tv_sifre.setText(getResources().getText(R.string.str_sifre));

             btnGirisYap.setText(getResources().getText(R.string.str_girisyap));

            

             /*butonun click eventını tanımlıyoruz*/

             btnGirisYap.setOnClickListener(new View.OnClickListener() {

                   

                    @Override

                    publicvoidonClick(View v) {

                           // TODOAuto-generated method stub

                           String mesaj = "Hoşgeldin "+ et_eposta.getText().toString();

                           Toast.makeText(KodActivity.this, mesaj, Toast.LENGTH_LONG).show();

                    }

             });

            

             /*layoutEposta layoutuna ilgili view nesnelerini ekliyoruz*/

             layoutEposta.addView(tv_eposta);

             layoutEposta.addView(et_eposta);

            

             /*layoutSifre layoutuna ilgili view nesnelerini ekliyoruz*/

             layoutSifre.addView(tv_sifre);

             layoutSifre.addView(et_sifre);

            

             /*layoutActivity ye diğer layoutları ve buttonu ekliyoruz*/

             layoutActivity.addView(layoutEposta);

             layoutActivity.addView(layoutSifre);

             layoutActivity.addView(btnGirisYap);

            

       }

      

       @Override

       protected void onCreate(Bundle savedInstanceState) {

             super.onCreate(savedInstanceState);

             CreateActivityViews();

             /*Activity de gösterilecek contenti setliyoruz*/

             setContentView(layoutActivity);           

       }

}

Tam Sayfa
Tags Android,
Kategoriler Android
İşlemler
Bu Makale 4  Kez Beğenildi.
İsim :    
e-Mail :    
Web Site :  
İmage :  
Güvenlik Kodu :  

Güvenlik Resmi
Resmi Yenile
    
Yorum :  
Tasarım Desenleri ve Mimarileri