Microsoft Xamarin Türkiye Meetup – Xamarin Forms Shell
Selamlar,
Dün Microsoft Türkiye’de gerçekleştirmiş olduğumuz etkinlikte katılımcılara yeni gelen Xamarin Forms Shell den bahsetmişim. Bu yazımda buna değinmek istedim.
Öncelikle şunu belirtmek isterim ki Xamarin.Forms Shell şuan production da kullanılmaya hazır değil diye düşünüyorum. Geliştirmeler halen devam ediyor, üzerinde daha birçok değişiklik olacaktır. Ama tanımaktan denemekten zarar gelmez. Değişiklikleride hepberaber takip ederiz.
Xamarin Forms Shell i eğer VisualStudio 2019 kurduysanız bir extension paketi kurarak File-> NewProject dediğinizde Template olarak görebilirsiniz.
Template i şuradan indirebilirsiniz.
Bu visual studio extension paketini kurduğunuz da Yeni bir xamarin forms projesi açtığınızda aşağıdaki gibi karşınıza Shell Template i gelecektir.
Bunu seçip devam ettiğiniz deki kısma geleceğiz. Ama önce hali hazırda Visual Studio 2019 kurmamış olanların Shell i nasıl deneyeceklerine gelelim.
Visual Studio 2017 de yine bir xamarin forms projesi açıp başlayın.
Sonrasında yapmanız gereken ilk şey platform spesifik projelere gidip Xamarin.Forms.Forms.Init.. den önce
- global::Xamarin.Forms.Forms.SetFlags(“Shell_Experimental”, “Visual_Experimental”, “CollectionView_Experimental”, “FastRenderers_Experimental”);
kodunu eklemeniz. Bu kod sayesinde şuan experimental olarak geçen tüm diğer özellikleri de test etmeye başlayabilirsiniz. Örneğin CollectionView uzun zamandır beklenen bir Layout idi, FlexLayout ile kısmen sorunlarımız çözüyorduk ama bunu da denemekte fayda olacaktır şimdiden.
Bundan sonra projesine bir Xaml sayfası ekleyip onu Shell sınıfından türetmeniz yeterli olacaktır. Artık sizde bu Shell dosyası üzerinde oynayabilir, çıktıları gözlemleyebilirsiniz.
Gelelim Shell in özelliklerine;
Shell in başlıca amacı şu;
- Tüm uygulama genelindeki navigasyonları tek bir çatı altında toplayıp, sanki bir storyboard hazırlar gibi hazırlayabilmeniz.
Shell ile beraber web e yakın bir routing mekanizması da geldi. Ama varolan tüm navigaston mekanizması yani Navigaion.Push..Pop.. vs hepsi halen geçerli tabi
Şuanda temel 4 farklı tag imiz var.
Bunlar şunlar;
- ShellItem
- ShellSection
- ShellContent
- MenuItem
Bınların uygulamaya etkileri şöyle oluyor.
Temel menülerin dizilimi yukarıda kullanacağınız tag lara göre 3 e ayrılıyor.
- Her bir ShellItem Sol menüde ki bir Link e karşılık geliyor.
- Bunların içinde tanımlanmış Herbir Shell Section bottombar olarak karşımıza çıkıyor.
- Bunun da içerisinde bir yada birden çok Shell Content tanımlarsak bunlar da topbar olarak karşımıza geliyor.
Yani aşağıdaki gibi bir xaml ın menü hiyerarşisi şu şekilde oluyor.
<Shell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:TailwindTraders.Mobile.Features.Shell" x:Class="TailwindTraders.Mobile.Features.Shell.TheShell" Title="TailwindTraders"> <ShellItem Title="Home“ Route=“Home”> <ShellSection Route=“Section1“> <ShellContent Route=“index”> <local:HomePage1 /> </ShellContent> <ShellContent Route=“index”> <local:HomePage2 /> </ShellContent> </ShellSection> <ShellSection Route=“Section2“> <ShellContent Route=“index”> <local:HomePage3 /> </ShellContent> </ShellSection> </ShellItem> </Shell>
Sol tarafta tek bir menü linki. Buna tıkladığımızda, bu sayfada altta iki tab ı olan bir bottom tab. çünkü iki adet ShellSection konulmuş. İlk taba tıkladığımızda da yukarıda 2 tane tab ı olan topbar göreceğiz çünkü bunun içerisine de iki tane shell content konulmuş.
Bunun yanı sıra Flyout dediğimiz tag in Header ve Footer ile istediğimiz gibi oynayıp sol menünün görünümünü düzenleyebiliyoruz.
Routing mekanizması şu şekilde değişiyor.
▪RouteScheme: Url scheme such as “http” or “app”
▪RouteHost: The Domain portion of the URI
▪Route: The base segment of your application’s URI
▪Exp: “app://microsoft.com/myapp/home/section/index”
▪(App.Current.MainPage as Shell).GoToAsync(“app:///newapp/greeting?msg=Hello”);
İstersek sayfalar arasında data taşımak için querystring bile kullanabiliyoruz 🙂
[QueryProperty("Message", "msg"] public partial class GreetingPage : ContentPage { public GreetingPage() { InitializeComponent(); } string _message; public string Message { get { return _message; } set { _message = value; } } }
Dediğim gibi şuan için yeni başlayan projelerinizde asla başlamamanızla birlikte deneysel olarak alışmanızda fayda olduğunu düşündüğümden çok fazla detaylarına girmeden Shell den bahsetmek istedim.
Daha fazla detaylara şuradan ulaşabilirsiniz.
Bir sonraki yazımda görüşmek üzere.
Xamarin Forms 3.0, 3.1, 3.2, 3.3 Yeni Gelen Özellikler
Selamlar
Geçen haftalarda Microsoft Türkiyede yapmış olduğumuz etkinliğin ikinci oturumunda anlatıığım ve göstermiş olduğum Xamarin.Forms a 3.0 – 3.3 arası yeni gelen ve hayatı çok daha kolaylaştıran özelliklerden bahsetmek istiyorum.
Xamarin.Forms 3.0 Özellikleri
Bu major versiyonla ile beraber hayatımıza yepyeni bir layout ve küçük ölçekte de olsa yeni güzellikler geldi. En temel yenilikleri aşağıdaki gibi inceleyebiliriz.
- Visual State Manager
- FlexLayout
- StyleSheets
- Right-To-Left Localization
Detaylı örneklere bakmadan önce diğer versiyonlarda hayatımıza neler girmiş bunlara bakalım. Ve hepsinin kullanıldığı bir uygulama ile örneklendirelim.
Xamarin.Forms 3.1 Özellikleri
Hayatımıza 3.1 versiyonu ile küçük gibi gözükse de birçok custom renderer dan bizi kurtaracak özellikler girdi Bunlar şöyle;
- Android Bottom Tabs
- Hide ScrollView scroll Bars
- Bindable Span
- Autoresizable Editor
- Add SelectionMode Property To ListView
bunların dışında diğer detyalara buradan ulaşabilirsiniz.
Xamarin.Forms 3.2 Özellikleri
Burada en göe çarpan 2 özellik var bence. Birincisi Page Title View ını artık istediğimiz gibi edign edebiliyor olmamız. Diğeri SwipeGestureRecognizer.
- SwipeGestureRecognizer
- Rounded Corners on BoxView
- Padding on Buttons
- Page TitleView
yine çoğu zaman custom rendererlar ile yazmak durumunda kaldığımız birçok şeyden kurtulmuş durumdayız.
Son olarak da 3.3 ile hayatımıza neler girdi buna bakalım.
Xamarin.Forms 3.3 Özellikleri
Bu versiyonda, birçok etkinlikte duyduğum, xamarine başlarken garip bir şekilde insanların uzaklaşmasına sebep olan Label ve özelliklerine abanmışlar gibi. Aşağıda yeni özellikleri listeliyorum.
- Max Lines on Label
- Label with Wrap/LineNumber and Truncation
- Label underline/strikethrough support
- Use WKWebView on iOS
Bu özelliklerin çoğunu kullandığımı bir demo örneği ve kodları üzerinden gidelim istiyorum. Meetupda göstermiş olduğum ve insanların oldukça hoşuna gitmiş olan çok yaratıcı örneğimin adı Confinsta(bir instagram çakması arayüz) idi. Instagramın arayüzünün birçok ekranını xamarin.Forms ve yeni gelen özellikleri ile nasıl oluşturduğumu göstermek için bu örneği hazırlamıştım.
ÖRneği hazırlamak yaklaşık olarak 1 iş günümü aldı.
Arayüz ler şu şekilde.
5 temel sayfa üzerinde uğraştım. Kodların neler olduğunu bakacağız zaten ama özetlemem gerekirse, bu sayfalar ve yeni gelen xamarin forms özelliklerinden, yardımcı olacak pluginler den kullandıklarım şunlar;
- Ana Sayfa: Burada şimdiye kadar kullandıklarınızdan farklı özel bir şey yok. Sadece yardımcı birkaç plugin var. Bunlar;
- ImageCircle
- MediaManager
- CarouselView
- Page TitleView
- Explore Sayfası: Burada zaman kazandıran en güzel yeni özelliğimiz FlexLayout
- Rg.Plugins.Popup
- FlexLayout
- SwipeGestureRecognizer
- Like Sayfası: Burada tab geçişlerinin yukarıda ve swipe lı olabilmesi için syncfusion ın TabView ını kullandım.
- Syncfusion.XForms.TabView
- ImageCircle
- FlexLayout
- Bindable Span
- Follow Sayfası: Basit bir listview. Sycnffusion TabView ının ikinci tabı oluyor zaten bu sayfa.
- Bindable Span
- Profile: Bu sayfanın da tasarımında çok sağdan açılan hamburger menu dışında bir özellik olmadığından sadece o kısmı ekledim.
- SlideOverKit
Tüm resimlerin yanında yukarı birde uygulamanın akışını görebilmeniz için kısa bir video koydum. Unutmayın yalnızca 1 iş günü ayrılmış bu ekran prototipleri bence gayet güzel gözüküyor. Xamarin.Forms ile yapabileceklerinizin gücünü anlamamız için yeterli bence.
Bir sonraki yazımda her bir sayfanın kod taraflarında detaylarına girip, hem xamarin in yeni özelliklerini göreceğiz hem de varolan özelliklerinden nasıl faydalanmışız bunlara bakacağız.
Görüşmek üzere.