Monotouch ile MultiScreen Iphone Uygulaması

Mart 2012 | Barış Arslan, Sap Abap Danışmanı

Bu makalede UINavigationController nasıl kullanılır? Bize ne gibi imkanlar sunuyor bunu anlatacağım ve MultiScreen kullandığımız basit bir uygulama yazacağız. Bu uygulamayı yazarken aynı zamanda MVC (Model, View, Controller) görüp çoklu ekran kullanımını inceleyeceğiz.

Iphone uygulamaların da bizim sahip olduğumuz tek bir ana pencere mevcuttur, fakat biz bu pencereye birden fazla görüntü ekranı ekleyip, sayfalar arası geçişi veya yönlendirmeyi sağlayabiliyoruz.Aslında MVC yeni bir model değil, uzun süredir var olan ve kullanılan bir modeldir.

Model: Ekranda gösterilecek olan verilerin gösterilmesini sağlayan ve onların temsili olan bir olgudur.

View: Ekranda ki verilerin nasıl gösterileceği konusunda görevli olan kısımdır. Örneğin, ASP.NET platformu için düşünecek olursa, ASPX’in içinde bulunan HTML bir View olarak düşünülebilir ve WPF uygulamalarında ki XAML View olarak düşünülebilir. iOS uygulamalarında ise View XML kullanılarak tanımlanır ve dosya ise “.xib” uzantılıdır.

Controller: Controller aslında MVC modelinde tüm hepsini birbirine bağlayan kısımdır. Kullanıcının yaptığı istekleri ve işleri alır ve daha sonra işlemlerin sonuçlarını View’e geri döndürür.


MVC ve Navigation hakkında biraz ön bilgiyi edindiğimize göre uygulamamızı yazmaya geçelim, öncelikle boş bir iphone uygulaması oluşturuyoruz (Empty Iphone Project). Ben uygulamanın ismine “MultiScreen_Iphone” koydum, sizde dilediğiniz gibi bir isim verebilirsiniz.

Projemizi oluşturduktan sonra Solution Explorer kısmına bakarsak herhangi bir .xib dosyasının olmadığını farkediyoruz bunun sebebi Empty Iphone Application açmış olmamızdan kaynaklanıyor. Boş bir uygulama açtık çünkü çok ekranlı(Multi Screen) bir uygulama yazacağız ve kendi ekranlarımızı kendimiz ekleyeceğiz. Bunun için; Projemize sağ tıklıyoruz ve resimde ki gibi yapıyoruz;
Add > New Folder

Makale

Eklediğim klasörümün adına ben “Screens” diye isim verdim. Bundan sonra ise, eklediğimiz klasöre sağ tıklıyoruz;

Add > New File

Dedikten sonra karşımıza resimde ki gibi bir pencere çıkacak ve buradan Iphone View Controller seçtikten sonra tamam diyoruz. View Controller adına “HomeScreen” ismini veriyoruz.

Makale

HomeScreen ekledikten sonra, bu işlemi iki kere daha aynı şekilde yapıyoruz ve eklediğimiz iki sayfanın isimlerinede “FirstScreen” ve “SecondScreen” diyoruz.

Şimdi, HomeScreen.xib dosyamızı çift tıklayarak açalım veya sağ tıklayıp;

Open with > XCode seçelim. Xcode programı resimde ki gibi açılması gerekiyor,

Makale

Programın sağ üst kısımda bulunan Simulated Metrics alanından Top Bar kısmı “None” olarak seçili, biz onu “Navigation Bar” olarak değiştiriyoruz;

Makale

ve Navigation Bar uygulamamızın üst kısmında resimde ki gibi görünmesi lazım;

Makale

Ekranımıza iki tane de outlet buton atıyoruz ve resimde ki gibi düzenliyoruz. (Outlet butonu ve nasıl eklendiği hakkında detaylı bilgi bir önce ki makalede mevcut.)

Makale

      @interface HomeScreen : UIViewController {

                UIButton *btnSayfa1;

                UIButton *btnSayfa2;

            }

            @property (retain, nonatomic) IBOutlet UIButton *btnSayfa1;

            @property (retain, nonatomic) IBOutlet UIButton *btnSayfa2;

      @end

Şimdi, FirstScreen ve SecondScreen ekranlarımızı da ayrı ayrı Xcode üzerinde sırayla açıp ikisine de sadece birer Label atıyoruz ve şekilde ki gibi yazıyoruz. Aynı zamanda Navigation Bar seçeneğini bu sayfalar içinde seçiyoruz.

Makale

Makale

böylece Xcode tarafında ki işlerimizi bitirmiş olduk, ve şimdi biraz kod yazalım. Öncelikle uygulamamıza UINavigationController’ı tanıtmamız gerekiyor bunu yapmak içinuygulamamızın AppDelegate.cs dosyasını açıyoruz ve buraya aşağıda ki kodları ekliyoruz,

      public partial class AppDelegate : UIApplicationDelegate

      {

            UIWindow window;

            // Tanımlıyoruz...

            UINavigationController rootNavigationController;
        }

Daha sonra, gene AppDelegate.cs içinde FinishedLaunching methodu içine aşağıda ki şekilde düzenliyoruz.


public override bool FinishedLaunching (UIApplication app, NSDictionary options)

{

// create a new window instance based on the screen size

      window = new UIWindow (UIScreen.MainScreen.Bounds);

      this.rootNavigationController = new UINavigationController();

      HomeScreen homeScreen = new HomeScreen();                           this.rootNavigationController.PushViewController(homeScreen, false);

      this.window.RootViewController = this.rootNavigationController;                    

      // If you have defined a view, add it here:

      // window.AddSubview (navigationController.View);

      // make the window visible

      window.MakeKeyAndVisible ();

      return true;

}

Bu işlemlerden sonra, ihtiyacımız olan şey HomeScreen ekranına, açılacak olan alt ekranları tanıtmak. Bunun içinse HomeScreen.cs dosyasını açıyoruz ve HomeScreen class’ına şunları ekliyoruz;

Sayfa1 sayfa1;

       Sayfa2 sayfa2;

HomeScreen class’ında bu şekilde tanımlamamızı yaptıktan sonra gene HomeScreen.cs içinde ki ViewDidLoad() methoduna geliyoruz ve aşağıda ki kodları ekliyoruz.

this.btnSayfa1.TouchUpInside += (sender, e) =>

      {

                  if (this.sayfa1 == null

                  {

                        this.sayfa1 = new Sayfa1 ();                     

                  }                                                          this.NavigationController.PushViewController (this.sayfa1, true);

      };

Bu kodları aynı şekilde btnSayfa2 içinde yapıyoruz ve;

this.btnSayfa2.TouchUpInside += (sender, e) =>

      {

            if (this.sayfa2 == null

            {

                  this.sayfa2 = new Sayfa2 ();

            }                            this.NavigationController.PushViewController (this.sayfa2, true);

      };

Uygulamamızın temel bölümünü bitirdik ve son bir kaç düzenleme yaptıktan sonra tamamen hazır olacak, ilk olarak navigationBar için sayfalarımızda Title verelim. Title eklemek için Sayfa1.cs yi açıyoruz ve;

      public Sayfa1 () : base ('Sayfa1', null)

      {

            this.Title = 'Sayfa 1';

      }

Aynı işlemi Sayfa2 içinde bu şekilde yapıyoruz ve Title kısmını istediğim gibi adlandırıyoruz.

Buna ek olarak, navigationBar çalışıyor fakat, HomeScreen açıldığı zaman NavigationBar’ın ekranda görünmesinin bir anlamı yok,

Makale

o yüzden HomeScreen açıldığı zaman NavigationBar’ın görünmemesi için HomeScreen.cs yi açıyoruz ve aşağıda ki methodları ekliyoruz;

      public override void ViewWillAppear (bool animated)

      {

            base.ViewWillAppear (animated);                        this.NavigationController.SetNavigationBarHidden (true, animated);

      }

      public override void ViewWillDisappear (bool animated)

      {

            base.ViewWillDisappear (animated);

this.NavigationController.SetNavigationBarHidden (false, animated);

      }

ve uygulamamızı tamamlamış bulunuyoruz, çalıştırdığımız zaman şu şekilde bir sonuç elde ediyoruz;

MakaleMakale