Konuyu Paylaş : facebook gplus twitter

Konuyu Oyla:
  • Derecelendirme: 5/5 - 1 oy
  • 1
  • 2
  • 3
  • 4
  • 5
Mobil Platform için Kayan (Slide) Menü ve Açılır (Overflow=Popup) Menü Oluşturmak
#1
Merhaba,
Bu makalemde, Mobil Platformların (Multi-Device Application ) olmazsa olmazı açılır menü yapılarını anlatmaya çalışacağım. 
Mobil uygulamalarda, yandan (sağ veya sol ) açılır (Slide) ve üsten açılır (Overflow=Popup)  menü olmak üzere iki tip menü yapısı daha sık kullanılmaktadır. Bu iki tip menü yapısını tek bir uygulamada örneklendirerek nasıl yapıldığını öğrenmeye çalışalım.

Yeni bir Multi-Device uygulama oluşturalım.
Ana form üzerine bir adet ToolBar yerleştirelim ve üzerine de 2 adet SpeedButton yerleştirelim.
SpeedButton1'in Align özelliğini Left, diğerinin Align özelliğini Right yapalım.
SpeedButton1'in StyleLookUp özelliğini drawertoolbutton, diğer butonun StyleLookUp özelliğini de detailstoolbutton yapalım.

fnqz5s.jpg

Form üzerine 2 adet MultiView nesnesi yerleştirelim. Bunlardan MultiView1'i Slide Menü, MultiView2'yi ise Popup menü olarak kullanacağız.
MultiView1 nesnesini Slide menü olarak kullanmak için özelliklerinde herhangi bir değişiklik yapmaya gerek yok. 
MultiView2'yi Popup menü olarak kullanabilmek için Object Inspector'dan Mode özelliğini Popover seçelim.

289c311.jpg

Her iki menü yapısının açılması ve kapanmasını sağlayacak buton seçimlerini yapalım. Bunun için MultiView1'in MasterButton özelliğinde SpeedButton1, MultiView2'nin MasterButton özelliğinde SpeedButton2 olarak seçelim. Böylece SpeedButton1 tıklanınca MultiView1 (Slide menümüz),  SpeedButton2 tıklanınca MultiView2 (Popup menümüz) açılacaktır. Butonlara 2. kez tıklanınca da menüler otomatik olarak kapanacaktır.

2jfdi83.jpg

Popup menü için MultiView2'nin üzerine bir adet ListBox yerleştirelim ve 3 adet ListBoxItem ekleyelim. ListBoxItem'lar popup menü elemanlarımız olacaktır. Item'ların her birinin text'ini belirleyelim. Örneğin, Yardım, Ayarlar, Hakkında vb.
ListBox'ın Align özelliğini Client yaparak  MultiView2 içerisine tam olarak yerleşmesini sağlayalım.
MultiView2 ile ListBox elemanlarının kapladığı yüksekliği eşitlemek için MultiView2'nin PopoverOptions.PopupHeight özelliğini 132 yapalım. Neden 132 derseniz; 3 Item yüksekliğinde açılmasını istediğim için. Elaman sayısına göre bu yüksekliği kendi uygulamanıza göre değiştirebilirsiniz.

2dvo4qv.jpg

Structure Penceresinde nesne yerleşimleri aşağıdaki resimdeki gibi olacaktır.

ztyo1v.jpg

Örnek uygulamamızın tasarım anı ekran görüntüsünün son şekli aşağıdaki gibidir.

10p22w4.jpg

Tek satır kod yazmadan iki menü yapısını da tamamlamış olduk. Uygulamayı çalıştırarak test edebilirsiniz.

Popup menüde, menü elemanını seçtiğiniz halde menü otomatik olarak kapanmayacaktır. Bunun sebebi MultiView2 üzerinde yer alan ListBox'un Align özelliğinin Client olmasıdır. Bu durumda MultiView2 (Popup menü )'in manuel olarak hide durumuna geçirmek gerekiyor. Bunun için MultiView2'nin HideMaster prosedürünü çalıştıracağız.

Son olarak hem popup menünün seçimden sonra gizlenebilmesi ve seçim olayında belirlediğimiz işlemlerin gerçekleşmesi için aşağıdaki kodları yazalım.

procedure TForm1.ListBox1ItemClick(const Sender: TCustomListBox;
 const Item: TListBoxItem);
begin
 case Item.Index of
   0:
     begin
       { Yardım menüsü }
     end;
   1:
     begin
       { Ayarlar menüsü }
     end;
   2:
     begin
       { Hakkında menüsü }
     end;
 end;
 ShowMessage('"' + Item.Text + '" menüsü seçildi');
 MultiView2.HideMaster;
end;

Uygulamanın çalışma anı ekran görüntüsü

345ilnk.jpg

İyi çalışmalar...
While true do; Hayat döngüsü, kısır değildir! Yapılan bir yanlış, o döngünün dışına çıkmanızı sağlayacaktır.
WWW
Cevapla
#2
Fesih Hocam ne kadar teşekkür etsem azdır. Çok teşekkür ederim.
Cevapla
#3
Rica ederim.
Kitabı bir an önce bitirmem lazım yoksa bu gidişle, anlatacak konu kalmayacak. :s
While true do; Hayat döngüsü, kısır değildir! Yapılan bir yanlış, o döngünün dışına çıkmanızı sağlayacaktır.
WWW
Cevapla
#4
Hocam kitabınız baskı mı olacak yoksa PDF mi olacak?

+ Fesih Hocam Drawer menü için kastettiğim olay halâ daha mevcut:
ezgif_4197733305.gif
Drawer menü dikeyken açık değil kapalı tutuyorum, ardından cihazı yan çeviriyorum ve resimde olduğu gibi Drawer menü otomatik açık oluyor. Bunu nasıl düzeltebiliriz?
Cevapla
#5
(18-09-2016, Saat: 03:26)İbrahim Adlı Kullanıcıdan Alıntı: Linkleri Görebilmeniz İçin Giriş yap veya Üye OlHocam kitabınız baskı mı olacak yoksa PDF mi olacak?

Nasib olursa KodLab Yayınevinden baskı olarak çıkarmayı hedefliyorum. Ön görüşmemiz olumlu oldu.
Yıl sonunda doğru tamamlanır İnşallah.

Çok ilginç bir durum. Tabiri caiz ise uğraşan yapamazsın.  Sad 
Bu arada kendi telefonumda (Asus Zenfone 5) test ediyorum. Belirtmiş olduğun sorun, bende olmuyor. Farkı bir cihazda test etme imkânınız var mı?
While true do; Hayat döngüsü, kısır değildir! Yapılan bir yanlış, o döngünün dışına çıkmanızı sağlayacaktır.
WWW
Cevapla
#6
Fesih Hocam, başka bir Android cihazda (Samsung Galaxy J2) deneme yaptım ve dediğiniz gibi onda düzgün bir biçimde çalıştı.
Cevapla
#7
(18-09-2016, Saat: 15:19)İbrahim Adlı Kullanıcıdan Alıntı: Linkleri Görebilmeniz İçin Giriş yap veya Üye OlFesih Hocam, başka bir Android cihazda (Samsung Galaxy J2) deneme yaptım ve dediğiniz gibi onda düzgün bir biçimde çalıştı.

Sorunun çözümü adına, hızlı geri dönüşünüzden dolayı teşekkür ederim.
While true do; Hayat döngüsü, kısır değildir! Yapılan bir yanlış, o döngünün dışına çıkmanızı sağlayacaktır.
WWW
Cevapla

Konuyu Paylaş : facebook gplus twitter



Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  Mobil Uygulama ve RSS Fesih ARSLAN 4 269 09-11-2017, Saat: 21:34
Son Yorum: Fesih ARSLAN
  SQL Server : Tablolar için parametrik sıralı alan listesi uparlayan 3 437 01-07-2017, Saat: 19:12
Son Yorum: uparlayan
  Tüm platformlar (Android, iOS vb.)  için telefon çağrı durumunu yakalamak Fesih ARSLAN 18 4.151 14-04-2017, Saat: 21:17
Son Yorum: Paranoyaq
  Tüm Platformlar için (cross-platform) HTML Dosyası Oluşturma Fesih ARSLAN 0 979 21-10-2016, Saat: 11:53
Son Yorum: Fesih ARSLAN
  ListBox (Yeni Başlayanlar İçin) yhackup 0 1.371 09-08-2016, Saat: 14:17
Son Yorum: yhackup



Konuyu Okuyanlar: 1 Ziyaretçi