Harun Özer


Proje veya dijital katalog yaptırmak için
iletişim formu doldurabilirsiniz..

<< Android Activity Açmak | Xamarin Tasarım Yapıları>>

Xamarin Nedir ve Xamarin Sayfa Yapıları

Yazar harunozer 27 November 2016

Xamarin Nedir ve Xamarin Sayfa Yapıları Microsoft’un ürünü olan Xamarin özellikle ios, android, Windows phone, gibi farklı işletim sistemleri için uygulama geliştirmesini sağlar. Native ve Cross platform kod üretir. C# ile android ios gibi ortamlara uygulama geliştirmemizi sağlar.

Xamarin ile 2 şekilde kod geliştirilebilir.

1. Traditional Xamarin: C# ile platforma özel ios, android gibi proje geliştirilmesine sağlar. Yani android için traditional proje açarsanız sadece android için geliştirme yapmış olursunuz.

2. Xamarin Forms: Tek katman kod ile tüm platformlara uygulama geliştirmeyi sağlar. Yani bir kez kod yazarsınız projenizde ki bütün platformlar için uygulama geliştirmiş olursunuz.

Xamarin Forms projesi için de iki seçenek vardır.

Shared: Referans ağacı yoktur. Başka projeler eklenemez. Fakat platforma özel durumlar daha kolay yönetilebilir.

Portable Class Library: Projenin referanslarına dll eklenebilir. Bu proje türünde platform özel durumlar handle edilebilir fakat shared tipine göre daha zordur.

IOS koduna dönüştürmek için Apple’nin AOT (Ahead Of Time) derleyicisini kullanır. APK için JustInTime derleyicisini kullanır.

Android için 4.0 ve üzeri, ios için 6.1 ve üzeri, Windows phone 8 ve üzeri sürümleri destekler. Yeni sürümler çıktığında xamarin aynı gün destek paketi çıkarır.

Tasarım yüzü için xaml veya code behind kullanır.

Sayfa Yapıları:

1-    Content Page

2-    Master Detail Page

3-    Navigation Page

4-    Tabbed Page

5-    Carousel Page

6-    Templated Page

Xamarin ve sanal makine kurulumu için aşağıdaki videoyu izleyebilirsiniz.

https://www.youtube.com/watch?v=4cqSacdqmaY&feature=youtu.be

İlk olarak proje yapısına göz atalım.

Visual Studio dan yeni proje oluşturalım. New Project => Cross Platform => Blank App (Xamarin.Forms Portable)

Solution Explorer penceresinde 5 katman oluşturulduğunu görüyoruz. İsimlerinden de anlaşılacağı gibi droid android projesi ios ios projesi vs. Bizim kod geliştireceğimiz katman “Portable” katmanıdır. Biz bu katmanda kod yazacağız ve diğer katmanlar bu kodu kullanmış olacak. Droid katmanına baktığımızda MainActivity.cs sınıfı olduğunu görüyoruz. Android Uygulaması Yaşam Döngüsümakalemizde ki yaşam döngüsünü hatırlarsak ilk olarak OnCreate metodu çalışıyordu. Burada ki metotta çalıştırılan LoadApplication metodunun Portable katmanında ki App sınıfı türünden parametre olarak verildiğini görüyoruz. Diğer proje türlerinin ilgili metotları için de bu durum geçerlidir. Yani birden fazla app oluşturup her katman için başka başlangıçlar oluşturabiliriz. Portable katmanında ki App.cs instance metoduna baktığımızda burada Page türünde ki MainPage değişkenine ContentPage nesnesi ataması yapıldığını görüyoruz. Bu da bizim açılacak ilk sayfamızı belirtiyor.

Sayfa Yapıları

Content Page: Tek bir ekran gösteren sayfa yapısıdır. Bu sayfanın içinde button, entry gibi kontroller bulunabilir. Portable katmanında New => Item => Cross Platform => Forms Content Page ile MyContentPage isminde yeni bir content page ekleyelim. Eklediğimiz content page de otomatik olarak bir label eklenmiş olduğunu görüyoruz. Bu labelin text özelliğini MyContentPage Xamarin olarak değiştirelim.

Örneğimizi çalıştırmadan önce App.cs içinde ki instance de otomatik olarak eklenen MainPage atamasını aşağıdaki gibi MyContentPage olarak belirleyelim.

MainPage = newMyContentPage();

Böylece uygulamamızın ContentPage ile başlatılacağını belirtmiş olduk.

Sayfalarımızı sınıf olarak da ekleyebiliriz. Örneğin yukarıda oluşturduğumuz sayfayı class ile de oluşturalım. Portable katmanında Add => New => Class ile MyContentPageCls adında bir class ekleyelim. Oluşturduğumuz sınıfı ContentPage nesnesinden türetelim ve initilize metodunda bir label oluşturup sayfamızın contenti olarak belirtelim. MyContentPageCls.cs aşağıdaki gibi olur.

    publicclassMyContentPageCls: ContentPage

    {

        publicMyContentPageCls()

        {

            Labell = newLabel();

            l.Text = "Xamarin Content Page Class";

            l.VerticalOptions = LayoutOptions.Center;

            l.HorizontalOptions = LayoutOptions.Center;

            Content = l;

        }

    }

Portable katmanında ki App.cs de başlangıç olarak bu sınıfı verip projemizi çalıştıralım. Gördüğümüz gibi iki şekilde de sayfalar oluşturabiliriz.

Tabbed Page: Alt sayfalar arasında geçiş yapılmasını sağlar. Xaml tasarımı yoktur. ChildrenAdd ile içine eklenen page nesnelerini gösterir. Class ile eklenebilir. Oluşturulan class TabbedPage nesnesinden türetilir.

Projemizde MyTabbedPage isminde yeni bir class ekleyelim ve bu sınıfı TabbedPage nesnesinden türetelim. Projemize TabbedPage1 ve TabbedPage2 adında 2 adet “Forms Xaml Page” ekleyelim. Bu eklediğimiz sayfalardaki label text özelliklerini Tabbed Page 1 ve Tabbed Page 2 yapalım. Tab title görünmesi için de ContentPage nodesine Title = “Tab1” ve Title = “Tab2” yazalım. Oluşturduğumuz MyTabbedPage sınıfı aşağıdaki gibi kodlayalım ve App.cs imizi MyTabbedPage i çalıştıracak şekilde düzenleyip projemizi çalıştıralım.

    publicclassMyTabbedPage: TabbedPage

    {

        publicMyTabbedPage()

        {

            Children.Add(newTabbedPage1());

            Children.Add(newTabbedPage2());

        }

    }

CarouselPage: TabbedPage gibi alt sayfalar arasında geçiş yapılmasını sağlar. Tab yapısı olarak değil de sürükleme ile geçiş yapılır. Class ile eklenebilir. Oluşturulan page CarouselPage nesnesinden türetilir.

Projemize MyCarouselPage adında yeni bir sınıf ekleyelim ve CarouselPage nesnesinden türetelim. İç sayfalar olarak önceki örnekte oluşturduğumuz TabbedPage1 ve TabbedPage2 sayfalarını ekleyelim ve App.cs de başlangıç olarak MyCarouselPage i belirtelim. MyCarouselPage sınıfı aşağıdaki gibi olacaktır.

    publicclassMyCarouselPage:CarouselPage

    {

        publicMyCarouselPage()

        {

            Children.Add(newTabbedPage1());

            Children.Add(newTabbedPage2());

        }

 

    }

MasterDetailPage: Uygulamadaki sayfaları 2 bölmeli şekilde yöneten yapıdır. Genellikle menü yapımında kullanılır. Xaml tarafı yoktur. MasterDetailPage nesnesinden türetilen sınıflar ile kullanılır.

Örnekolarak menu ve iç sayfa yapısı olan bir sayfa ekleyelim. Projemize MyMasterDetailPage adında yeni bir sınıf ekleyelim ve MasterDetailPage nesnesinden türetelim. Sonra da MyMasterPage ve MyDetailPage isminde 2 adet Forms Xaml Page ekleyelim. MyMasterPage sayfasına title vermemiz gerekiyor. Aksi halde örneğimiz çalışmayacaktır. Menü kısmı bütün sayfalarda görüneceği için MasterPage olarak belirtmemiz gerekiyor. DetailPage de iç sayfamız olacak. Sayfa ayrımlarını görsel olarak fark etmek için MyMasterPage sayfamızda ki ContentPage nodesinde BackgroundColor=”Yellow”, MyDetailPage sayfasında ise BackgroundColor=”Greeen” olarak belirtelim. Master ve Detail sayfalarımızı MyMasterDetailPage de initilize metodunda belirtmemiz gerekiyor. MyMasterDetailPage sınıfı aşağıdaki gibi olacak.

    publicclassMyMasterDetailPage:MasterDetailPage

    {

        publicMyMasterDetailPage()

        {

            Master = newMyMasterPage();

            Detail = newMyDetailPage();

        }

    }

MyMasterPage ve MyDetailPage sayfalarımızda otomatik olarak eklenen Label nesnelerinin Text özelliklerini MyMasterPage de Menü, MyDetailPage de içerik olarak belirtelim. Ve örneğimizi çalıştıralım. Mouse ile soldan sayfamızı çektiğimizde menü kısmının açıldığını göreceğiz.

Örnekleri aşağıdaki adresten indirebilirsiniz.

https://github.com/harunozer/XamarinSamples/tree/master/SayfaYapilari

 

Kaynak: https://www.youtube.com/watch?v=EbLqaf-5ey0

Tam Sayfa
Tags Xamarin,
Kategoriler Xamarin
İşlemler
Bu Makale 1  Kez Beğenildi.
İsim :    
e-Mail :    
Web Site :  
İmage :  
Güvenlik Kodu :  

Güvenlik Resmi
Resmi Yenile
    
Yorum :  
Tasarım Desenleri ve Mimarileri