Android Studioda ekran tasarimi

[Mikro Step]

Android Studio ile ugrasmaya yakin zaman oncesinde basladim. En zorlandigim konulardan birisi ekran tasarimi.

Sorunum buton, textbox vs yi ekranda gorunmesini istedigim yerlere oturtamiyorum.

Istiyorum ki ekran boyutlarinda olcekli bir kagida yada grafik programindaki cizim alanina mili milimine yerlestirip, yaptigim tasarimin aynisini telefon ekrani icinde olusturayim.

Bu is iskence oluyor. Bu isin yolu yontemi nedir?

 

[Haze]

table row denedin mi, ekrani satir ve sutunlara bolerek yerlesim yapabilirsin.

 

[Mikro Step]

Hepsini denedim. Bir sure sonra bir hata yapiyorum hersey corbaya donuyor. Konuya hakim olmadigim icin boyle oluyor.

Nesneleri biraktigim yerde dursa durmuyor illa bir sey oluyor bir yere yapisip kaliyor. daha once koyduklarimin yerini de bozuyor.

 

[Mikro Step]

Mesela ekran tasarimim asagidaki gibi olsun.

Renkli nesneleri asagidaki gibi dizmek isterseniz nasil bir yol izliyorsunuz?

 

[devreci]

Buttonun yeri genişliği vs programlama olarak yazabilirsin. Ekran genişliği alıp orantılarsın bu sayede her ekrana oturur.

 

[ex_machina]

Eğer daha önce visual studio veya delphi gibi windows form tabanlı masaüstü uygulamalar geliştirdiyseniz zorlanmanız normal. Çünkü windows form tabanlı arayüz geliştirirken her şey mutlak ölçülere göre yapılıyor.

Mobil tarafta ise arayüz tasarlarken mutlak ölçüleden mümkün olduğunca kaçınılır. Çünkü mobil uygulamanın çalışağı ekranların çözünürlük, boyut, en-boy oranı gibi özelliklerinin hiçbir standardı yoktur.

Bu yüzden mobil uygulama geliştirirken bakış açınızı tamamen değiştirmeniz gerekiyor. Mobil uygulamada arayüz nesnelerinin boyları ve yerleşimleri dinamiktir. Mutlak ve kesin ölçülere göre değil, oran-orantı ve referansa göre düşünmeniz gerekiyor. Ekranı parçalara bölerek çalışmalısınız. Herhangi bir nesne eklediğinizde o nesnenin neyi referans alarak ve nasıl yerleşeceğini ayrıntılı bir şekilde belirtmeniz gerekiyor. Aksi takdirde her şeyin g*tü başı ayrı oynar zapt edemezsiniz.

Mesela verdiğiniz örnek için konuşalım;
- Ekran üç adet yatay bölmeye ayrılır.
- İlk bölmeye gelen textbox tam ortalanır
- İkinci bölme kendi içerisinde iki farklı yatay bölmeye ayrılır, ilk satıra gelen butonlardan biri sağa diğeri sola yaslanır. İkinci satıra gelen üç buton ortalanır, ara boşluklar padding ve margin özellikleri ile ayarlanır.
- En alt bölümdeki koca çerçeve bölüm içerisinde yatay ve dikey olarak ortalanır.


Şimdi bu yukarda yazdığım mantık react, flutter, kotlin, swift vs. hepsinde aynı. Sadece yazım dili farklı.