https://www.youtube.com/watch?v=P0WPlVoG0z8&t=1078s

Merhaba bu günkü blog yazımızda Abdullah ILGAZ ile yaptığımız webinar ın içerği hakkına  bilgiler paylaşacağız.

İÇERİK;

  • FMX ve VCL Farklılıkları
  • FMX Komponentleri
  • Yazılımcı için Tasarım Seti
  • Pratik Arayüz Analizi ve Tasarımı
  • Uygulamalı Arayüz Tasarımı

 FMX ve VCl Farklılıkları

 Özellik

FireMonkey (FMX)

Visual Component Library (VCL)

 Align

Bottom, Top, Client. Contents, Center Scale, MostBottom, MostTop, VertCenter, HorzCenter, diğerleri ...

alBottom, alTop, alNone, alClient diğerleri, ...

 Başlık, Yazı

Text

Caption

 Saydamlık

Opacity

-

 Padding

TBound, (Top, Left, Right, Bottom)

-

 Metin Ayarı

TextSettings> Font, FontColor, HorzAlign, Trimming, VertAlign, WordWrap

WordWrap

 Tıklanabilirlik 

HitTest

-

 Girdi komponentleri

KeyboardType (Default, NumberPad, NumbersAndPunctuation diğerleri, ... )

TextSettings> Font, FontColor, HorzAlign, Trimming, VertAlign, WordWrap

TextPrompt

Alignment (taLeftJustify, taCenter, taRightJustify),

Charcase

TextHint

FireMonkey içerisindeki kütüphaneleri VCL kütüphanelerinin üzerine geliştirme olarak derledi bunun yanında FireMonkeyin ek kütüphaneleri var. Bu içerikler sayesinde daha esnek özellikler kullanmamıza sağlıyor.

FMX Bileşenleri

  • ksComponents (TableView, SlideMenu, FormTransition, TileMenu)
  • KastriFree (Klavye aktifken odaklanılan kontrolü)
  • ALFmx Controls
  • FMXUI (TView, TToastManager, TProgressDialog, TAlertDialog ...)
  • FMX Components
  • ZMaterial Components
  • FMX- UI- Controls (Gesture Password Control)
  • Orange UI
  • FGX-FireMonkey

Yazılımcı için Tasarım Seti


Ücretsiz İkon Kütüphaneleri; 

  • material.io (Google)
  • thenounproject.com (2.000.000 + ikon)
  • iconfinder.com (3.800.000 + ikon)
  • flaticon.com (44.830 ikon paketi)
  • icons8.com

Spesifik İkonlar

  • streamlineicons.com
  • iconstore.co
  • free- icon-rainbow.com
  • icofont.com

Renk Seçimi

  • materialvi.co / renkler
  •                   / metrocolors
  •                  / flauticolors
  •                 / socialcolors
  • fluentcolors.com

 

Şimdi tasarım zamanı, ilk olarak analizimizi yapalım.

İnstagramın yeni arayüzü minimal olduğu için biz eski halini seçtik. Seçtiğimiz arayüz;

 

Analizimizi yaparken sabitleri değişkenleri gösterebilecek alanları belirlememiz gerekiyor. 

  • Alt kısım sekmeler arası geçişi sağlayan navigasyon Menüsü 
  • Üst kısım için Header menümüz olmalı. Farklı işlemler için farklı yerlere gitmek için, bulunduğumuz sayfanın neresi olduğunu bize gösterebilir.
  • Header menümüzün alt kısmına bilgi kutucuğu açıklamalar ve görselin bulunduğu bir alan var.
  • Tam orta kısımda  sayfanın nasıl gelmesini istediğimiz ile ilgili bir seçenek ve fotoğrafın konum bilgisi ile ilgili butonu var.
  • Ardından kutu kutu fotoğrafların bulunduğu alanımız var.

Delphide bu tasarımı kodlamaya başlayalım. Boş bir FireMonkey projesi oluşturduk. Paletteden bir adet TRectangle yerleştirdik. Dikdörtgen siyah çerçeveli olarak görüyoruz. Bu çerçevenin rengini kalınlığını var olup olmamasını ayarlayabiliyoruz. Bunun için Object inspector> strok (strok özelliği dıştaki border (çerçeve) işaret eder.) Stroke> hex kodu ile istediğimiz rengin atamasını yapabiliriz. Hex kodunu delphinin algılaması için kodun başına 2 tane 'f' koyuyoruz yani şu şekilde oluyor → #ffE749E. Stroke> Dash bu kısımdan borderın tipini belirliyebiliyoruz. Örneğin borderin nokta nokta olması ya da kesik çizgili şeklinde oluşması gibi. Stroke> Thickness ile borderı kalınlaştırıp inceltebiliyoruz. Kind seçeneğini none yaparak borderı yok edebiliyoruz. Cornertype ile kenarların keskinlik tipini ayarlayabiliyoruz. Radiustan değer girerek keskinliği istediğimiz seviyeye getirebiliyoruz.

Header menü için bir rectangle ekliyoruz. align> top yaptık. Height> 50 değerini girdik. Seçtiğimiz arayüz görselinden arka plan rengni alıp fill> color kısmına kodu yapıştırıyoruz (ff koymayı unutmuyoruz). Rengimizi header menümüzde görüyoruz.Ortadaki instagram yazısı için label kullanıyoruz. Bu yazıyı merkezi hizalamak için labeli structureda rectanglenin içine taşıyoruz. Rectangle> name→ Header. Label1> name → Header Text. Header text> Align> Client- HorzAlign> Center - FontColor> White - Text> INSTAGRAM - Font> Bold seçtik ve Instagram yazımızı tamamladık.

 Yeni bir rectangle ekliyoruz bununla da sol taraftaki explore yazımızı oluşturacağız. Arka plan rengini seçiyoruz fill> color > kodu ff ekleyerek yapıştırıyoruz. Explore yazısının dışındaki koyuluk için yine renk olarak seçip stroke > color> kodu yapıştırıyoruz. Thickness> 2 (Thickness float bir değerdir istersek 1,5 gibi bir değerde verebiliriz.) Corners> topleft ve bottomleft seçtik- Cornertype> bevel - Radius> 44 giriyoruz. Yeni bir label ekleyerek ekleyerek structuredan  rectangle’a taşıyoruz.. Label> Align> Client- FontColor> White - HorzAlign> center (Bu özellik sayesinde yazı ortalanıyor.) Rectangle’ın dikdörtgen halini değiştirdiğimiz ve explore butonunun olduğu şekli verdiğimiz için yazı tam ortada gözükmüyor çünkü HorzAlign center seçsek bile rectangle'ı dikdörtgen kabul ederek yazıyı orta kısım kabıl ettiği yere alıyor o yüzden tam ortalama için Margins kısmından Left'e 15 20 gibi bir değer vererek labelı istediğimiz gibi kaydırabiliriz. Yazıyı kaydırmanın bir diğer yolu rectangle'a padding bölümünden left ' ine 15, 20 girerek girdiğimiz değer sayısınca karakter kaydırmak. Rectangle1> name→ btnExplore - HitTest> true. Label'ın HitTesti false eğer true yaparsak ve label'a gelip onClick yazarsak doğrudan Label1in clickine gitmiş olacak clickine yazdığımız halde HitTestini false yaparsak hiç bir şekilde tıkladığımız zaman tepkime vermeyecektir. Label1> name → Explore Label – Text >Explore.Explore yazısının altındaki  gölgelemesi için Palette> Effects'in içinden> TShadowEffect ekliyoruz. Formun içerisine görsel olarak bir şey gelmiyor fakat structure’ın içine geldi bunu alıp btnExplore 'a taşıyoruz ve gölgeleme yapılıyor. Daha keskin bir gölgeleme için Shadow Effects’in özelliklerine gidiyoruz. Direction (Gölgenin hangi açısı belirtiyor.) 90 değerini giriyoruz. Distance (Gölgenin componente olan uzaklığı) 1 değerini giriyoruz. Softness(yumuşaklık değeri) 0,01 olarak ayarlıyoruz. Opacity (Saydamlık) 1 değerini giriyoruz. Instagram yazısında da gölgeleme olduğu için Shadow Effecti HeaderText kısmınada kopyalıyoruz ve instagram yazısında da gölgeleme oluşuyor.  Explore ‘u Header’a eklemek için structuredan  taşıyoruz. btnExplore> align> left – width > 80 - Margins> 8 (hepsine aynı değeri girdik) - Font> Size> 14 - Radius> 22 - Padding> Left= 15.

Sağ taraftaki paylaş  butonunu yapalım. Rectangle ekliyoruz.Varsayılan renk değerlerimizi aktarıyoruz. Köşelerdeki hafif kavis için Radius’u 4 yaptık. Rectangle’ı Header text’e yerleştirip Align’ını Right yaptık. Margins > Left 0, Right 8, Bottom 5, Top 5 – Width >40 – Height >40. Rectangle’a TImage ekliyoruz. Rectangle1 > name →btnShare. Image1 >name → ImgShare. ImgShare > MultiResBitmap biz önceden oluşturduğumuz bir ikonu seçerek devam ediyoruz. Align değerini Client yapınca ikon ImgShare’ın içine yerleşiyor.Padding hepsine 3 değerini veriyoruz. Header menümüzü tamamladık.

En alt kısımdaki navigasyon menümüzü yapmaya başlıyoruz. Rectangle ekledik. Align > Bottom – Color’a kodunu yapıştırıyoruz – Kind > none – Height >50. Buttonların ekran boyutuna göre eşit bölünmesi için GridPanelLayout kullanıyoruz. Bir grid üzerinde oluşturma yapabiliyor kolonları sayesinde her birine component bağlayabiliyoruz. GridPanelLayout’ ta Column Collection’a tıklıyoruz açılan ekranda Column’u 5 adet yapıyoruz. Sizetype’ı percent olarak bırakıyoruz, value >20 değerini giriyoruz. Row Collection’dan 2.Row’u siliyoruz. Yeni bir Rectangle ekledik. Rectangle>name → btnHome. TImage ekledik, Image’i btnHome’a yerleştirdik – Align> Client – MultiResBitmap ile ikonumuzu seçtik. Gradyan renk için kind>Gradient seçtik, tonlamasını ayarlamak için color’dan Gradientten açılan pencereye renk kodlarımızı giriyoruz. Image> name→ ImgHome. Kesip GridPanelLayout’un içindeki yerine yapıştırıyoruz. btnHome’un Align’ını >Client yaptık çünkü GridPanelLayout’un boyutuna göre şekil alması için. btnHome’u kopyalayıp GridPanelLayout’un içindeki button yerlerimize yapıştırıyoruz. GridPanelLayout’u Footer’a ekliyoruz. GridPanelLayout >name →gplFooter - Align >Client. 2. butonumuz için  btnHome’u kopyaladığımız alandaki ikonunu değiştirerek elde ediyoruz. 3-4-5 ‘inci buttonlarada gerekli ikonları ekliyoruz ve isimlendirmelerine geçiyoruz. Image1 > name→imgDiscover - Image2 > name→ imgPhoto – Image3 > name→imgLike – Image4 > name→ imgProfile. Structure’ı okunaklı bir hale getirdik. Değişiklik yapmak istediğimizde bu bize kolaylık sağlıyor. Structureda btnHomedan başlayarak 5 buttonumuzu seçiyoruz paddinglerini >5 yaparak butonlar arası minik boşluğu elde ediyoruz. 5’ide seçiliyken sides’tan bottomu devre dışı bırakıyoruz. Stroke’a geliyoruz aradaki boşluğun renk kodunu alıp yapıştırıyoruz. Thickness >1,5 yapıyoruz. btnDiscover’ın kind >solid - sides > left→false. btnProfile’ın sides > left ve rigt →false yaptık.

Buttonlar arası geçişi sabit formla sağlamak için TTabControl ekliyoruz, bu component bizim aktif sayfamızdaki birden fazla tab’ı yönetmemizi sağlar. TabControl1’in Align >Client  - TabControl’e sağ tuş ile > Add TTabItem(5tane ekliyoruz). Style kısmı android seçili olduğu için tablar üstte yer alıyor. Eğer Ios’u seçersek tabları aşağıya alır. Biz android seçiyoruz. Tabların görselleri için TabControle gelerek > TabPositiondan platformun varsayılanı mı top mı ya da dots ile noktalar arası geçiş olarak yapabileciğimizi seçebiliyoruz. TabControl burada sadece bir conteyner, birden fazla dosyayı tutacağımız sayfalara ayıracağımız bir olay. Biz TabPositionu none yapıyoruz bu bize ekranda noktacıklar halinde sadece designda bir görüntü olarak karşımıza çıkıyor. TabItem’larımızı isimlendirelim. TabItem1 > name→Home – TabItem2 > name→Discover – TabItem3 > name→Photo – TabItem4 > name→Like TabItem5 > name→Profile.

Şimdi alttaki butonların hangisine tıklarsak o butona bağlı olan TabControldeki TabPage’e gidecek şekilde ayarlayacğız. Bunu yapmanın birkaç yöntemi var, Biz en pratik yöntemi uygulayacağız. İlk olarak Imagelerin HitTestlerini false yapıyoruz çünkü etrafta bıraktığımız boşluklar sebebiyle bu boşluğun dışındaki bir yere dokunmasıyla butona tıklayıp işlem yapılabilsin. btnHome’a geliyoruz Tag özelliğine tıklıyotruz. Tag: Bir etikettir, herhangi bir şekilde componenti işaretleyip uygulama içerisinde ihtiyaç anında componentin değerini çağırabiliyoruz. TabControlün indexleriyle navigasyon menüsündeki butonların bağlantısını yapıyoruz TabControl’ün sıfırıncı indexi home Tag’ide sıfır, Discover’ın indexi 1 tag’i 1, Photo indexi 2 tag’i 2, Like indexi 3 tag’i 3, Profile indexi 4 tag’i 4.btnHome’a çift tıklıyoruz açılan procedure’e TabControlün görünen komutuna gitmesi komutunu yazıyoruz. Bu fonksiyonda 3 adet parametremiz mevcut İndex – Transition – Directions’dur. İndeximizi nasıl belirleyeceğimizi öğrenelim. Parametre olarak Sender hangisiyse onun değerini almalıyız.(Sender. Tag)→ bunu yapamıyoruz Sender’ın tipine bakarsak (Sender: TObject) o yüzden TObject’te Tag diye bir özellik yok. Bu yüzden göndericimiz TRectangle diyoruz. TRectangle’ın Sender’ı artık tipine göre işaretlemiş olduk.  TTabTransition: Nasıl geçiş yapacağı ile ilgili bir değer. TTabTransition.Slide diyerek kayarak geçiş yapmasını söylemiş oluyoruz. Eğer none yapsaydık ekrana direkt açılacak şekilde ayarlamış olacaktık. Son parametremizde TTabTransitionDirection. TTabTransitionDirection.Normal diyoruz eğer Reverse dersek gitmesi gereken ekranın aksi yönde gelecekti. Kod satırının düzenlemesi aşağıdaki halini aldı;


procedure TMainForm.btnHomeClick(Sender: TObject);
begin
TabControl.GotoVisibleTab(TRectangle(Sender).Tag.TTabTransition.Slide.TTabTransitionDirection.Normal);
end;
end.

btnHome’un Clickini diğer butonlarda da aynı işlevi yapmalı bunun için yapmamız gereken şey 4 butonuda structuredan seçip onClicklerini btnHome’a bağlamak. Bu şekilde hepsi btnHome’un fonksiyonunu kullanarak çalışmış olacak.

Bilgi kutucuğumuzun olduğu kısımı oluşturacağız. Bir rectangle ekliyoruz profile’ın olduğu kısma. Arka plan renginin kodunu giriyoruz. Uygulamamızın arka planı içinde bir rectangle ekliyoruz. Rectangle2 >name→ Background – renk kodunu giriyoruz - Kind >None –  Align >Client yaptık. Sonra TabControlü Background’ın için ekliyoruz. İlk eklediğimiz rectangle1’a geliyoruz border değerlerini alıp giriyoruz. Thickness >1,25 - Radius > 5 -  Align > 5 -  Margins >left, right, top→ 15 verdik. Bilgi kutucuğunu doldurmanın 2 yolu var GridPanelLayout ile içini doldurmak diğeri VertScrollbox ile yapmak. VertScrollbox’ın 6 farklı çeşidi var bunlarıda inceleyebilirsiniz. VertScrollbox ekliyoruz Align >Client  yaptık. VertScrollbox’ın içine rectangle1’i aldık . Rectangle1 >name → infobox yaptık.  VertScrollbox’ın içine GridPanelLayout ekledik. GridPanelLayout > Align > Client. Column Collectiondan 2’ye bölmek için tek Column olacak hale getiriyoruz. Üst taraf için yine bir GridPanelLayout ekliyoruz. 2 Column olacak şekilde ayarlıyoruz. Bu sefer sizetype’ı percent yapmıyoruz çünkü eşit dağılıma ihtiyacımız yok. Column0 →90 - Column1 → 100 yapıyoruz. Expanel Style’ın seçeneklerinden yeni bir Row Column ekleyebilir ve sabit ekranda tutabiliriz. Sabit ekranda tutmanın avantajı tasarımda kolaylık sağlaması ve gözden kaçacak hataları önlemesidir. GridPanelLayout’un instagram görselini koyacağımız kısıma TImage ekliyoruz. TImage >Align > Client  - Margins 5(hepsine) MultiResBimap’ten fotoğrafımızı ekliyoruz. Üst kısımdaki 3lü alan için GridPanel ile önce 2’ye sonra 3’e bölmeliyiz. GripPanelLayout ekliyorıuz, Align >Client yapıyoruz 2’ye bölüyoruz Column sayısı tektir. Tekrar GridPanelLayout ekliyoruz, Align > Client  - Column sayısını 3 yapıp valuesine >33 veriyoruz - Row Collection’a gelip tek satıra düşürüyoruz. Rectangle1’i MainForma ekliyoruz içerisinede Label ekliyoruz. Label > Align > Client - HorzAlign > Center - Text > Photos - remk kodumuzuda yapıştırıyoruz. Bir Label daha ekliyoruz , Align > Client - Margins > 3(hepsine) - HorzAlign > Center - Text >177 - Font>16 - Gelmesi gereken yere yerleştiriyoruz. Yerleştirdiğimiz yerde Align > Client yaparak bitirmiş oluyoruz. Bu kısmıyandaki 2 kutucuğa kopyala yapıştır yapıyoruz yazılarını değiştirerek bu kısmı hallediyoruz.

Follow(Takip et) butonunu yapmaya başlıyoruz. Rectangle ekliyoruz, name →btnFollow - Kind > Gradient→ renk kodlarını yapıştırıyoruz - Radius >4. Buttonun geleceği yere btnFollow’u yapıştırıyoruz, Align >Client - Margins > left 8, bottom 5, right 8, top 5. Label ekliyoruz, structure’da label’ı btnFollow’un içine ekliyoruz. Label > Align > Client - Text >Follow - Text Settigs > FontColor >White - HorzAlign >Center. Follow butonumuzda tamamlandı

Başlık ve hakkında kısmını yapmaya geçiyoruz. Bir Rectangle ekliyoruz. Rectangle > Align >Client - Kind >None . Yazılarını yazmak için bir tane Label ekliyoruz Rectanglenin içine taşiyoruz. Label > Align > Top - Margins > left 5, top 3- Text > Instagram. Hakkında kısmı için başlık Label’ını kopyalayıp yazı rengini ayarlayıp Textten düzenliyoruz ve bu kısımda tamamlanıyor.

Sayfanın nasıl gelmesini seçtiğimiz  ve fotoğrafın konum bilgisi bulunan butonu tasarlamaya başlıyoruz. Başılk ve hakkında kısmını aşağıya kopyalıyoruz içindeki yazıları siliyoruz, kenar boşluklarını ayarlıyoruz border oluşturuyoruz ve içreisine GridPanelLayout ekliyoruz. GridPanelLayout >Align >Client - artık öğrendik Row ve Columndan 3 Colmunlu bir ayarlama yapıyoruz - Kaplayacakları yerleri göz önünde bulundurarak sizetype’larının değerlerini giriyoruz. İçlerine TImage’leri ekliyoruz. MultiResBitmapten görsellerini yerleştiriyoruz. Kopyala yapıştır yaparak ve sadece görseli değiştirerek  zamandan kazanıyoruz. Konum bilgisi bulunan butondaki yazı ve Image için; Image > Align> Left yapıyoruz, bu sayede yanına Label ekleyerek aynı görüntüyü elde ediyoruz.

Son aşamaya geldik. Görselleri ve dışındaki beyaz çerçeveyi halledeceğiz.Bunun için Rectangle ve Image componentlerini kullanacağız. İlk Rectangle ekliyoruz ve Image’i Rectangle’ın içine ekliyoruz.  Image >Align >Client - Padding >3(Hepsine). Rectangle >Fill>Color >White - Kind >None.VertScrollbox’ ın içine Shadow Effects ekliyoruz gölgelendirmenin hepsine etki etmesi için. Shadow Effects > Softness > 0,01 - Opacity >0,3 - Distance > 0,5 -Direction >90. TImage’e görselimizi atıyoruz. Bu görseli nasıl yan yana ve alt alta yerleştireceğimizi öğreneceğiz. Bununda birkaç yöntemi var fakat biz en esnek olanını uygulayacağız . TFlowLayout ekliyoruz, içine görseli koyduğumuz Rectangle’ı alıp FlowLayout’a taşıyoruz. Shadow Effects’ide FlowLayout’ taşıyoruz. Rectangle > Margins >6(Hepsine), FlowLayout > Margins >4 (Hepsine) değerlerini giriyoruz. Toplamda kenar boşluğu 10 oluyor bu da üstte yaptığımız alanlarla aynı kenar boşluğunu elde etmemizi sağladı. Rectangle’ımızın kopyalarını oluşturuyoruz. VertScrollbox’ı structure üzerinde alıp tiProfile’ın içine alıyoruz. VertScrollbox’ın içindeki infobox’ı ve Rectangle5’i dışarı çıkarıyoruz. Rectangle5 > Align >Top yaptık. Sonra VertScrollbox’ı FlowLayout’a ekleyip FlowLayouttakş  tüm componentleri VertScrollbox’a taşıdık. Kopyaladığımız Rectangle’ları şimdilik siliyoruz. VertScrollbox >Align > Client yaparak  bırakıyoruz. Görselleri aşağıya doğruda yapacağız ama bunu FlowLayoutta kullandığımız bir component ile yapacağız. Bunun için ilk olarak içinde görsel bulunan Rectagle’ımızı structuredan FlowLayout’un üstüne taşıyoruz. VertScrollbox bunu override ettiği için onu şimdilik siliyoruz en sonda ekleyeceğiz. Artık içinde görselimiz bulunan Rectangle’ı kopyalayabiliriz. FlowLayoutta yatay ve dikey olarak hizalama yapmak için;

VerticalGap: Her satır için aralardaki boşluk değeri.

HorizontalGap: Soldan sağa olan aralığın değeridir.(Baştakinin uzaklığı değişmez.)

FlowDirection: Buradan görsellerin sağ merkezli mi sol merkezli mi yerleştirilmeye başlanacağı seçilir.

Justify > Center - JustifyLastLine >Center  seçersek ekran boyutu değişsede aralarındaki boşluk düzenini orantılı bir şekilde sağlar.

Ekrandaki düzen için son seçimleride tamamladık ve uygulamamızın tasarımı bitti artık çalıştırabiliriz. Burada unutmamamız gereken önemli bir nokta var. Uygulamanızı farklı çözünürlükte deneyin bu size işlevlerin sağlıklı çalışmasını ve her şekilde iyi gözüken bir tasarım sağlayacaktır.

 

Firma Bilgileri


Camart Araştırma Geliştirme Yazılım Otomasyon San. Tic.Ltd. Şti.

Mersis no : 3356 7133 6775 9746

info@camartarge.com

Vergi no : 196 074 62 30

Tel : +90 850 333 80 20

İban (TL): TR30 0020 5000 0085 3809 5000 03

Arge :

Paü teknoloji geliştirme bölgesi (Teknokent)

idari bina d blok no g05 Denizli

 

İban (USD):TR03 0020 5000 0085 3809 5001 01 


Barbaros Mah. Halk Cad. No 47 / 2 34746 Ataşehir İstanbul

İban (Euro):TR73 0020 5000 0085 3809 5001 02 

 
 
 
 
 
 
Harita verileri ©2015 Google

İletişim

Facebook Pinterest Twitter Google+ Dribbble