Xamarin Forms Gif Loading İkonu

Merhaba arkadaşlar bu yazımızda mobil uygulamamıza gif nasıl eklenir bundan bahsedeceğiz. Uygulamalarımız açısından tasarım çok önemlidir. Eğer ki activity indicator kullanmaktan sıkıldıysanız bir gif ile bunu aşabilirsiniz. Sadece loading ikonu değil, tasarım olarak da çok güzel ekranlar elde edebilirsiniz. Kullanımı gerçekten çok kolay. Öncelikle bir gif bulmamız lazım. Burada ki siteden bir çok ücretsiz loading gif’i bulabilirsiniz. Ben örnek olması açıından aşağıda ki gif’i kullanacağım.

Bunun için projemize bir paket yüklememiz gerekiyor. Bu paket : FFImageLoading. Data detaylı bilgi ve kaynak kodlarına buradan ulaşabilirsiniz. Ben her projemde bu paketi muhakkak kullanırım. Fotoğrafları cachlemesi ve plache holder gibi çok kullanışlı özellikleri var. Nuget Package Manager ile paketi yükledikten sonra bu paketleri çalıştırmalısınız. Bunun için Android tarafında MainActivity class’ına iOS içn için AppDelegate içerisinde initialize etmelisiniz. Daha detaylı dökümantasyon için Github’da kaynak kodlarına bakabilirsiniz.

Paketi yükledikten sonra ekranda basit bir tasarım yapacağım. Siyah ekran üzerine sadece gif oynatacağım. Bunun için StackLayout içerisine bir FFCache Image kontrolünü kullanıyorum ve gif dosyamın adını vermem yeterli.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="Xam.LoadingGif.Views.MainPage"
             xmlns:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms">
    <ContentPage.Content>
        <StackLayout HorizontalOptions="FillAndExpand"
                     VerticalOptions="FillAndExpand"
                     BackgroundColor="Black">
            <ff:CachedImage HorizontalOptions="CenterAndExpand"
                            VerticalOptions="CenterAndExpand"
                            WidthRequest="120"
                            HeightRequest="80"
                            Source="loading" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Bunun çıktısında ki sonuç aşağıdaki gibidir.

Sorularınız olursa mail veya yorum atarak ulaşabilirsiniz. Herkese iyi çalışmalar.