{"id":5012,"date":"2021-02-03T10:38:19","date_gmt":"2021-02-03T10:38:19","guid":{"rendered":"https:\/\/serkanseker.com\/?p=5012"},"modified":"2021-02-03T10:38:19","modified_gmt":"2021-02-03T10:38:19","slug":"xamarin-forms-shell-gezinti-cubugu","status":"publish","type":"post","link":"https:\/\/serkanseker.com\/tr\/xamarin-forms-shell-gezinti-cubugu\/","title":{"rendered":"Xamarin.Forms Shell Yap\u0131s\u0131 \u0130le Alt Gezinti \u00c7ubu\u011fu"},"content":{"rendered":"
\n

Shell <\/strong>yap\u0131s\u0131 Xamarin.Forms uygulamalar\u0131nda gerekli olan bir\u00e7ok temel \u00f6zelli\u011fi sa\u011flayarak mobil uygulamalar\u0131n karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 azalt\u0131r. Shell sayfa yap\u0131s\u0131 Tabbar \u00f6zelli\u011fi ile uygulamada alt gezinti \u00e7ubu\u011fu olu\u015fturu ve g\u00f6rsel bir hiyerar\u015fi sa\u011flar.<\/p>\n

Bu yaz\u0131mda Xamarin.Forms uygulamalar\u0131nda Shell <\/strong>yap\u0131s\u0131n\u0131n nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 ve nas\u0131l \u00f6zelle\u015ftirilece\u011fini anlataca\u011f\u0131m. <\/p>\n

Xamarin.Forms Shell Yap\u0131s\u0131 Nedir?<\/span><\/h2>\n

Shell sayfa yap\u0131s\u0131 Xamarin.Forms\u2019a 4.0 versiyonu ile geldi. Shell yap\u0131s\u0131n\u0131 kullanarak a\u00e7\u0131l\u0131r pencereler, sekmeler, gezinme, arama, ya\u015fam d\u00f6ng\u00fcs\u00fc ve \u00f6zel olu\u015fturucular olu\u015fturabilirsiniz. B\u00f6ylece kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan daha kaliteli bir uygulama geli\u015ftirmi\u015f olursunuz. Ayr\u0131ca uygulaman\u0131z\u0131n karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 da azalt\u0131rs\u0131n\u0131z.<\/p>\n

\n
\n

Shell yap\u0131s\u0131n\u0131 sosyal medya uygulamalar\u0131nda s\u0131kl\u0131kla g\u00f6r\u00fcyoruz. Instagram, Twitter ve Tumblr, sekmeli sayfa yap\u0131s\u0131n\u0131 kullanan uygulamalara iyi birer \u00f6rnektir.<\/p>\n<\/div>\n

\n
\"xamarin.forms
Xamarin.Forms Shell sayfa yap\u0131s\u0131<\/figcaption><\/figure>\n<\/div>\n<\/div>\n

Fazla say\u0131da kullan\u0131c\u0131s\u0131 olan uygulamalar\u0131n genelde sekmeli sayfa yap\u0131s\u0131n\u0131 kullanmas\u0131n\u0131n bir nedeni var: Kullan\u0131c\u0131 deneyimini art\u0131rmak. Mobil uygulamalar\u0131n ba\u015far\u0131s\u0131n\u0131n s\u0131rr\u0131, kullan\u0131c\u0131 deneyimini art\u0131rmaktan ge\u00e7er. Bir uygulaman\u0131n back-end\u2019i \u00e7ok iyi \u00e7al\u0131\u015f\u0131yor ancak UI\/UX a\u00e7\u0131s\u0131ndan zay\u0131fsa, o uygulama \u00e7ok say\u0131da kullan\u0131c\u0131ya ula\u015famaz.<\/p>\n

Bu nedenle y\u00fcksek kullan\u0131c\u0131 hacmine sahip uygulamalar genellikle sekmeli sayfa yap\u0131s\u0131n\u0131 tercih eder. B\u00f6ylelikle uygulaman\u0131n karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 azalt\u0131r ve kullan\u0131c\u0131ya daha basit bir kullan\u0131m sunarlar. Sonu\u00e7 olarak kullan\u0131c\u0131 deneyimi artar ve daha fazla kullan\u0131c\u0131ya ula\u015f\u0131rlar.<\/p>\n

Shell Yap\u0131s\u0131 Kullan\u0131m\u0131<\/span><\/h2>\n

A\u015fa\u011f\u0131daki ad\u0131mlar\u0131 s\u0131ras\u0131yla takip ederek Xamarin.Forms uygulamalar\u0131n\u0131za Shell yap\u0131s\u0131n\u0131 uygulayabilirsiniz.<\/p>\n

1<\/span> Yapman\u0131z gereken ilk \u015fey, Shell sayfas\u0131n\u0131n sekmelerinde g\u00f6r\u00fcnmesi i\u00e7in uygun simgeler bulmakt\u0131r. Uygulaman\u0131zda ana sayfa, arama, profil gibi sayfalar olacaksa ona uygun ikonlar\u0131 indirin.<\/p>\n

Material Design<\/a>\u2018da bir\u00e7ok kategoride ikonlar vard\u0131r. Buradan diledi\u011finiz ikonlar\u0131 SVG ve PNG format\u0131nda indirebilirsiniz.<\/p>\n

\n
\n

2<\/span> Ard\u0131ndan ikonlar\u0131 projenizin Android\/Resources \/drawable<\/strong> klas\u00f6r\u00fcne at\u0131n. Android uygulamalar\u0131n\u0131n medya dosyalar\u0131 drawable klas\u00f6rde bulunur.<\/p>\n

3<\/span> \u015eimdi sekmelere t\u0131klay\u0131nca a\u00e7\u0131lacak olan sayfalar\u0131 olu\u015fturun. Her sayfa i\u00e7in bir yeni bir ContentPage olu\u015fturun. Ben bu \u00f6rnek proje i\u00e7in HomePage, SettingsPage, FavoritesPage ve UserPage sayfalar\u0131 olu\u015fturdum.<\/p>\n<\/div>\n

\n
\n
\"xamarin.forms
G\u00f6r\u00fcnt\u00fc dosyalar\u0131n\u0131 Android\/Resources \/drawable<\/strong> klas\u00f6r\u00fcne at\u0131n.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n

AppShell.xaml Sayfas\u0131 Ekleyin<\/span><\/h3>\n

4<\/span> Ard\u0131ndan projeye sa\u011f t\u0131klay\u0131n ve AppShell.xaml<\/strong> adl\u0131 yeni bir ContentPage ekleyin. Xamarin.Forms\u2019daki kabuk sayfas\u0131 genellikle AppShell olarak adland\u0131r\u0131l\u0131r.<\/p>\n

5<\/span> Daha sonra AppShell.xaml.cs<\/strong> s\u0131n\u0131f\u0131n\u0131n ContentPage s\u0131n\u0131f\u0131ndan de\u011fil Shell s\u0131n\u0131f\u0131ndan miras almas\u0131n\u0131 sa\u011flay\u0131n. B\u00f6ylece, AppShell sayfas\u0131n\u0131n Shell yap\u0131s\u0131nda bir sayfa oldu\u011funu bildirmi\u015f olursunuz.<\/p>\n

public partial class AppShell : Shell\n{\n    public AppShell()\n    {\n        InitializeComponent();\n    }\n}<\/code><\/pre>\n
6<\/span> Yeni ekledi\u011finiz XAML sayfas\u0131 ContentPage yap\u0131s\u0131ndad\u0131r. Ancak, AppShell.xaml.xs s\u0131n\u0131f\u0131 Shell s\u0131n\u0131f\u0131ndan miras ald\u0131\u011f\u0131 i\u00e7in ContentPage\u2019i Shell ile de\u011fi\u015ftirmelisiniz. Aksi taktirde uygulamay\u0131 \u00e7al\u0131\u015ft\u0131r\u0131rken hata al\u0131rs\u0131n\u0131z.<\/p>\n
<Shell xmlns="http:\/\/xamarin.com\/schemas\/2014\/forms"\n             xmlns:x="http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml"\n             xmlns:d="http:\/\/xamarin.com\/schemas\/2014\/forms\/design"\n             xmlns:mc="http:\/\/schemas.openxmlformats.org\/markup-compatibility\/2006" xmlns:local1="clr-namespace:ShellDemo"\n             mc:Ignorable="d"\n             x:Class="ShellDemo.AppShell">\n<\/Shell><\/code><\/pre>\n
7<\/span> \u015eimdi uygulaman\u0131n alt gezinme \u00e7ubu\u011funun sekmelerini ekleyin. <Tabbar><\/strong> etiketleri aras\u0131na her sekme i\u00e7in bir <Tab><\/strong> ekleyin. Bu sekmelerin ba\u015fl\u0131\u011f\u0131n\u0131, simgesini ve i\u00e7erik sayfas\u0131n\u0131 a\u015fa\u011f\u0131daki gibi ekleyin.<\/p>\n
<TabBar >\n    <Tab Title="Home" Icon="home.png">\n        <ShellContent>\n            <local1:HomePage \/>\n        <\/ShellContent>\n    <\/Tab>\n    <Tab Title="Favourites" Icon="favourites.png">\n        <ShellContent>\n            <local1:FavouritesPage \/>\n        <\/ShellContent>\n    <\/Tab>\n    <Tab Title="Settings" Icon="settings.png">\n        <ShellContent>\n            <local1:SettingsPage \/>\n        <\/ShellContent>\n    <\/Tab>\n    <Tab Title="User" Icon="user.png">\n        <ShellContent>\n            <local1:UserPage \/>\n        <\/ShellContent>\n    <\/Tab>\n<\/TabBar><\/code><\/pre>\n
Shell Yap\u0131s\u0131n\u0131 \u00d6zelle\u015ftirin<\/span><\/h3>\n
8<\/span> \u015eimdi biraz tasar\u0131mla oynayal\u0131m. Shell yap\u0131s\u0131 i\u00e7inde <Shell.Resources> etiketleri aras\u0131nda <ResourceDictionary> tan\u0131mlayarak, BackgroundColor, TitleColor, TabBarBackgroundColor gibi sayfan\u0131n bir\u00e7ok kontrol\u00fcn\u00fc de\u011fi\u015ftirebiliriz.<\/p>\n