Delphi Can

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.

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.

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.

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.

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

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

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;

İyi çalışmalar...

Fesih Hocam ne kadar teşekkür etsem azdır. Çok teşekkür ederim.

Rica ederim.
Kitabı bir an önce bitirmem lazım yoksa bu gidişle, anlatacak konu kalmayacak. :s

Hocam kitabınız baskı mı olacak yoksa PDF mi olacak?

---

+ Fesih Hocam Drawer menü için kastettiğim olay halâ daha mevcut:

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?

(18-09-2016, Saat: 03:26)İbrahim Adlı Kullanıcıdan Alıntı: [ -> ]Hocam 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.   
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ı?

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ı.

(18-09-2016, Saat: 15:19)İbrahim Adlı Kullanıcıdan Alıntı: [ -> ]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ı.

Sorunun çözümü adına, hızlı geri dönüşünüzden dolayı teşekkür ederim.

Fesih hocam merhaba. Details menuyu çalıştırdığımda invalid argument hatasına düşüyor? Denilenlerin hepsini yaptım ama neyi atlamış olabilirim? Draw da sıkıntı yok

---

hata mesajı :

(22-04-2020, Saat: 13:06)cihankoca Adlı Kullanıcıdan Alıntı: [ -> ]Fesih hocam merhaba. Details menuyu çalıştırdığımda invalid argument hatasına düşüyor? Denilenlerin hepsini yaptım ama neyi atlamış olabilirim? Draw da sıkıntı yok

---

hata mesajı :

Merhaba,
EInvalidArgument hatasının bu konu ile ilgisi olmadığını düşünüyorum. 
Daha detaylı açıklama ile yeni bir konu başlığında çözüm aramayı deneyin.

Merhaba,

Hocam onu da multiview1 gibi çalıştırınca sorun vermiyor. Popover yapınca bu hatayı alıyorum