Xamarin ile Fotoğraf Çekme ve Dahili Resimleri Listeleme

Bu yazımızda fotoğraf çekme, çekilen fotoğrafı dahili hafızaya kaydetme ve dahili hafızadaki resimleri listeleme konularına değineceğiz.

1.Adım: Projenin Oluşturulması

2.Adım:Uygulama Arayüzünün Hazırlanması

MainPage.xaml dosyası uygulamızın arayüzünü oluşturacak kodları içerecektir.

Aşağıda ki seçili olan kodları seçip siliyoruz.

MainPage.xaml dosyası aşağıdaki gibi sadece üst kısımda bir frame içerisinde bir adet label olacak şekilde hazırlanmıştır.

2.Adım: Uygulama Arayüzünün Oluşturulması

Sadece MainPage.xaml dosyasından oluşan uygulama arayüzü oldukça sade olacaktır. Oluşturulan arayüz aşağıda görülmektedir.

Yukarıdaki arayüzü oluşturan MainPage.xaml dosyasına ait kodlar aşağıdadır.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XFFotograf.MainPage">

    <StackLayout>
        <Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
            <Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
        </Frame>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="100" />
                <RowDefinition Height="50" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Image x:Name="resimImg" Source="" Grid.Column="0" Grid.Row="0" />
            <Button x:Name="fotocekBtn" Text="Fotoğraf Çek" Grid.Column="0" Grid.Row="1" Clicked="fotocekBtn_Clicked" />
            <ScrollView Grid.Column="0" Grid.Row="2">
                <FlexLayout x:Name="flexLayout" JustifyContent="Center" Wrap="Wrap" />
            </ScrollView>
        </Grid>
    </StackLayout>

</ContentPage>

3.Adım: Uygulamayı Oluşturan C# Kodları

MainPage.xaml.cs Dosyası Kodları

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace XFFotograf
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
        private async void fotocekBtn_Clicked(object sender, EventArgs e)
        {
            var photo = await Plugin.Media.CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions() { SaveToAlbum = true });

            if (photo != null)
            {
                resimImg.Source = ImageSource.FromStream(() => { return photo.GetStream(); });
            }
            fotografListele();
        }

        public void fotografListele()
        {
            var dizin = DependencyService.Get<dosyaErisim>().dosyaGetir();          
            flexLayout.Children.Clear();
            for (int i = 0; i < dizin.Length; i++)
            {
                var dosya = dizin[i];
                Image img = new Image
                {
                    Source = ImageSource.FromFile(dosya)
                };
                flexLayout.Children.Add(img);
            }
        }
    }
}

4.Adım: Media Plugin in Yüklenmesi

Media Pluginini yüklemek için aşağıdaki menüden Nuget paket yöneticisi açılır.

Nuget Paket yöneticisinde gözat sekmesine tıklanarak arama çubuğuna media yazıldıktan sonra aşağıda görünen Xam.Plugin.Media isimli plugin yüklenir.

5.Adım: 3. Adımda Görülen dosyaErisim İsimli Interface in Oluşturulması

Sağ taraftaki çözüm gezgininden ana projede sağ tıkladıktan sonra Ekle->Yeni Öğe menüleri izlenir.

Açılan menüden sınıf seçeneği seçilerek dosyaErisim ismi verildikten sonra Ekle denilerek pencere kapatılır.

Yeni eklenmiş olan dosyaErisim.cs dosyası açılarak içeriği aşağıdaki gibi düzenlenir.

6.Adım: Android Projesine Dosyaların Listesini Oluşturup Ana Projeye Gönderecek Olan Sınıfın Oluşturulması

Çözüm gezginin den Android projesi üzerine gelinir ve sağ tıklanır.

Yukarıdaki menüden Ekle->Yeni Öğe kısayolu ile açılan pencerede Sınıf seçeneği seçilir ve dosyaIslem.cs ismi verilerek Ekle seçeneği ile pencere kapatılır.

dosyaIslem.cs dosyası açılır ve içeriği aşağıdaki şekilde düzenlenir.

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using XFFotograf.Droid;

[assembly: Xamarin.Forms.Dependency(typeof(dosyaIslem))]
namespace XFFotograf.Droid
{
    class dosyaIslem:dosyaErisim
    {
        [Obsolete]
        public String[] dosyaGetir()
        {
            var dizi = Directory.GetFiles(Android.OS.Environment.GetExternalStoragePublicDirectory(Android.OS.Environment.DirectoryPictures).AbsolutePath, "*.jpg", SearchOption.AllDirectories);
            return dizi;
        }
    }
}

7.Adım: file_path Değişkeninin Yapılandırılması

6.adıma kadar her şey yapıldığın uygulama çalıştırılırsa aşağıdaki hatayı verecektir.

 System.ArgumentException: 'Unable to get file location. This most likely means that the file provider information is not set in your Android Manifest file. Please check documentation on how to set this up in your project.'

Bu hatanın çözümü için öncelikle AndroidManifest.xml dosyasının aşağıdaki gibi yapılandırılması gerekir.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="com.companyname.xffotograf">
    <uses-sdk android:minSdkVersion="21" android:targetSdkVersion="30" />
    <application android:label="XFFotograf.Android" android:theme="@style/MainTheme">
		<provider android:name="androidx.core.content.FileProvider" android:authorities="com.companyname.xffotograf.fileprovider" android:exported="false" android:grantUriPermissions="true">
			<meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths"></meta-data>
		</provider>
	</application>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
</manifest>

Bu adımdan sonra Android projesinde Resources klasörü içerisine xml isimli bir klasör oluşturulur

Oluşturulan xml isimli klasöre sağ tıklanarak Ekle->Yeni Öğe kısayolu ile file_paths.xml isimli bir dosya oluşturulur.

file_paths.xml isimli dosya açılarak aşağıdaki şekilde düzenlenir.

<?xml version="1.0" encoding="utf-8" ?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
	<external-files-path name="my_images" path="Pictures" />
	<external-files-path name="my_movies" path="Movies" />
</paths>

Uygulama Kodları

https://github.com/omerozcann/XamarinDosyaResim

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir