ساخت اپلیکیشن های iOS با Xamarin و Visual Studio — از صفر تا صد

در این نوشته با روش ساخت ابتدایی یک اپلیکیشن iOS با استفاده از Xamarin و ویژوال استودیو (Visual Studio) آشنا خواهیم شد آن هم از طریق کدنویسی یک برنامه مشاهده گالری عکس. توسعه دهنگان هنگام برنامه نویسی iOS معمولاً تمایل دارند از زبان‌ها و IDE ارائه شده از سوی اپل استفاده کنند که شامل Objective-C / Swift و Xcode می‌شود. با این وجود، این تنها گزینه نیست و می‌توان اپلیکیشن‌های iOS را با استفاده از انواع زبان‌ها و فریمورک‌های دیگر نیز ایجاد کرد.

یکی از محبوب‌ترین گزینه‌ها زامارین (Xamarin) است. زامارین یک فریمورک چند پلتفرمی است که امکان توسعه اپلیکیشن‌های iOS، اندروید، OS X و ویندوز را با بهره‌گیری از سی شارپ (#C) و ویژوال استودیو فراهم ساخته است. مزیت اصلی زامارین این است که به فرد امکان اشتراک کد بین اپلیکیشن‌های iOS و اندروید را می‌دهد.

زامارین نسبت به فریمورک‌های چند پلتفرمیِ دیگر مزیت‌هایی دارد. با بهره‌گیری از زامارین پروژه‌ها به صورت کد بومی (native) کامپایل می‌شوند و می‌توانند در پس‌زمینه از API-های بومی استفاده کنند. این بدان معنی است که اپلیکیشن‌های زامارین که به خوبی نوشته شده باشند، قابل تمیز از اپلیکیشن‌هایی که با XCode نوشته شده باشند، نیستند.

زامارین یک عیب از گذشته داشته است و آن قیمت بالا است. هزینه مجوز سالانه زامارین برای هر پلتفرم به صورت سالانه برابر با 1000 دلار بود و به دلیل همین بهای بالا تا سال‌های اخیر تنها پروژه‌های سازمانی که بودجه بالا داشتند از آن استفاده می‌کردند.

با این وجود، این وضعیت اخیراً و زمانی که مایکروسافت Xamarin را خریداری و اعلام کرد در همه نسخه‌های ویژوال استودیو از جمله نسخه کامیونیتی آن را می‌گنجاند، تغییر یافته است. بدین ترتیب زامارین در اختیار توسعه‌دهنده‌های فردی و سازمان‌های کوچک نیز قرار گرفت.

به علاوه زامارین امکان‌های زیر را در اختیار برنامه‌نویسان قرار می‌دهد:

• بهره‌گیری از کتابخانه‌ها و ابزارهای موجود سی شارپ برای ایجاد اپلیکیشن‌های موبایل
• استفاده مجدد از کد بین اپلیکیشن‌های مختلف روی پلتفرم‌های متفاوت
• اشتراک کد بین بک‌اند ASP.Net و اپلیکیشن‌های با ظاهر زیبا

زامارین امکان انتخاب از میان ابزارهای گوناگون بر اساس نیازهای مختلف را هم فراهم ساخته است. برای بیشینه‌سازی قابلیت استفاده مجدد کد در بین پلتفرم‌های مختلف می‌توان از Xamarin Forms استفاده کرد. این مسئله به طور خاص برای اپلیکیشن‌هایی که نیازی به کارکرد خاص پلتفرم ندارند، یا به طور خاص به اینترفیس سفارشی نیاز دارند، مناسب خواهد بود.

اگر یک اپلیکیشن نیازمند امکانات یا طراحی‌های چند پلتفرمی باشد، می‌توان از Xamarin.iOS ،Xamarin.Android یا دیگر ماژول‌های خاص پلتفرم استفاده کرد. این ماژول‌ها انعطاف‌پذیری مورد نیاز برای ایجاد اینترفیس‌های کاربری کاملاً سفارشی را فراهم می‌سازند و همچنان امکان اشتراک کد مشترک میان پلتفرم‌ها نیز وجود دارد.

در این راهنما، ما از Xamarin.iOS برای ایجاد یک اپلیکیشن iPhone استفاده می‌کنیم که به نمایش گالری عکس کاربر می‌پردازد. این راهنما نیازمند هیچ تجربه توسعه قبلی از iOS یا Xaramin نیست؛ اما برای این که بیشترین بهره را از آن بگیرید، بهتر است درکی مقدماتی از C# داشته باشید.

سرآغاز

برای توسعه یک اپلیکیشن iOS با زامارین و ویژوال استودیو به طور معمول به دو رایانه نیاز داریم:

1. یک رایانه ویندوزی برای اجرای ویژوال استودیو و نوشتن کد پروژه.
2. یک رایانه مک که Xcode روی آن نصب شده است و برای میزبانی build استفاده می‌شود. البته لزومی نیست این رایانه صرفاً به منظور build مناسب‌سازی شده باشد؛ بلکه می‌تواند رایانه‌ای باشد که روی شبکه و در طی توسعه و تست اپلیکیشن از روی رایانه ویندوزی در دسترس باشد.

فیلم آموزش ساخت اپلیکیشن اندروید برای وب سایت ها با زامارین Xamarin Forms در فرادرس

کلیک کنید

همچنین نزدیک بودن دو رایانه از نظر فیزیکی یک خصوصیت مثبت محسوب می‌شود، زیرا زمانی که اپلیکیشن خود را build و روی ویندوز اجرا می‌کنید، شبیه‌ساز iOS روی مک شما بارگذاری خواهد شد.

البته شاید فکر کنید که بدون وجود دو رایانه نیز می‌توان این پروژه را اجرا کرد و حق با شما است. سناریوهای زیر ممکن هستند:

برای کاربرانی که فقط از مک استفاده می‌کنند

زامارین یک IDE برای OS X ارائه کرده است؛ اما ما در این راهنما روی پشتیبانی جدیدی که ویژوال استودیو عرضه کرده متمرکز شده‌ایم. بنابراین اگر دوست دارید این راهنما را مطالعه کنید، می‌توانید ویندوز را به عنوان یک ماشین مجازی روی سیستم مک خود نصب کنید. ابزارهایی مانند VMWare Fusion یا نرم‌افزار متن باز و رایگانی مانند VirtualBox یک روش مؤثر برای استفاده از یک رایانه منفرد محسوب می‌شوند.

اگر از ویندوز به عنوان ماشین مجازی استفاده می‌کنید، باید مطمئن شوید که ویندوز دسترسی شبکه به مک دارد. به طور کلی اگر بتوانید آدرس آی‌پی سیستم مک خود را از درون ویندوز ping بکنید می‌توانید از درستی این مسیر مطمئن باشید.

برای کاربرانی که فقط از ویندوز استفاده می‌کنند

شما می‌توانید همین حالا رفته و یک سیستم مک بخرید؛ اما اگر فکر می‌کنید این مورد اصولاً جزو گزینه‌ها محسوب نمی‌شود، می‌توانید از سرویس‌های میزبانی‌شده‌ای مانند MacinCloud یا Macminicolo دسترسی ریموت به Mac برای build کردن اپلیکیشن را در اختیار شما قرار می‌دهند.

ما در این راهنما فرض می‌کنیم که شما از دو رایانه مجزای ویندوزی و Mac استفاده می‌کنید؛ اما جای نگرانی نیست، چون دستورالعمل‌ها در هر حالت مشابه هم هستند و در صورتی که از ماشین مجازی یا هر گزینه دیگری استفاده کنید تفاوت زیادی ایجاد نمی‌کند.

نصب Xcode و Xamarin

اگر نرم‌افزار Xcode را روی سیستم مک خود ندارید، می‌توانید آن را از این آدرس (+) دانلود و نصب کنید.

فیلم آموزش ساخت اپلیکیشن اندروید برای وب سایت ها با زامارین Xamarin Forms در فرادرس

کلیک کنید

این فرایند کاملاً شبیه به نصب هر گونه نرم‌افزار دیگر از App Store است؛ اما از آنجا که شامل چند گیگابایت داده است، ممکن است اندکی طول بکشد.

زمانی که Xcode نصب شد، باید اقدام به دانلود Xamarin Studio روی سیستم مک خود بکنید. بدین منظور باید یک ایمیل ارائه شود؛ اما دانلود آن کاملاً رایگان است. زمانی که دانلود پایان یافت، بسته نصب کننده را باز کنید و روی Install Xamarin.app کلیک کنید. شرایط و مقررات اپلیکیشن را قبول کنید و به نصب آن ادامه دهید.

نرم‌افزار نصاب به دنبال ابزارهایی که از قبل نصب شده‌اند می‌گردد و نسخه کنونی پلتفرم را بررسی می‌کند. همچنین فهرستی از محیط‌های توسعه را به شما نشان می‌دهد. شما باید Xamarin.iOS را انتخاب کنید و سپس روی Continue کلیک کنید.

سپس یک فهرست تأیید مشاهده می‌کنید که در آن آیتم‌هایی که باید نصب شوند ارائه شده است. با کلیک روی Continue به کار خود ادامه بدهید. در ادامه خلاصه‌ای از موارد نصبی نمایش یافته و گزینه باز کردن زامارین استودیو را مشاهده می‌کنید. برای پایان یافتن فرایند نصب می‌توانید روی گزینه Quit کلیک کنید.

نصب ویژوال استودیو و زامارین

در این راهنما شما می‌توانید از هر نسخه‌ای از ویژوال استودیو استفاده کنید که شامل نسخه رایگان کامیونیتی آن نیز می‌شود. برخی ویژگی‌های آن در نسخه کامیونیتی وجود ندارند؛ اما این مسئله نمی‌تواند مانع توسعه اپلیکیشن‌های پیچیده از سوی شما بشود.

فیلم آموزش ویژوال استودیو – افزونه های کاربردی Visual Studio در فرادرس

کلیک کنید

رایانه ویندوزی شما باید الزامات کمینه سیستم مورد نیاز ویژوال استودیو (+) را نیز داشته باشد. برای این که تجربه توسعه مناسبی داشته باشید، باید این سیستم دست‌کم 3 گیگابایت رم داشته باشد.

اگر از قبل ویژوال استودیو را روی سیستم نصب ندارید، می‌توانید نسخه نصب کننده کامیونیتی را با کلیک روی دکمه Download VS Community 2017 در این صفحه (+) دانلود کنید.

نصاب را اجرا کنید تا فرایند نصب آغاز شود و گزینه نصب سفارشی (Custom) را انتخاب کنید. در فهرست ویژگی‌ها بخش Cross Platform Mobile Development را باز کنید و گزینه (C#/.NET (Xamarin v4.0.3 را انتخاب کنید. دقت کنید که در زمان مطالعه این راهنما احتمالاً نسخه زامارین تغییر یافته است.

روی Next کلیک کنید و منتظر بمانید تا نصب پایان یابد. این امر ممکن است مدتی طول بکشد.

اگر از قبل ویژوال استودیو را روی سیستم خود نصب داشتید؛ اما ابزارهای زامارین روی آن نصب نشده بود؛ می‌تواند به بخش Programs and Features ویندوز بروید و گزینه Visual Studio 2015 را بیابید. آن را انتخاب کرده و روی change کیک کنید تا به بخش تنظیمات آن دسترسی پیدا کنید و در آنجا گزینه Modify را انتخاب کنید.

زامارین را زیر بخش Cross Platform Mobile Development به صورت (C#/.NET (Xamarin v4.0.3 مشاهده می‌کنید. آن را انتخاب کرده و Update را بزنید تا نصب شود. شاید فرایند نصب به نظرتان کمی طولانی باشد؛ اما در هر حال اینک مطمئن هستیم که همه ابزارهای مورد نیاز را در اختیار داریم.

ایجاد یک اپلیکیشن

ویژوال استودیو را باز کنید و گزینه File\New\Project را انتخاب کنید. زیر عنوان #Visual C گزینه iOS را انتخاب کرده و سپس iPhone را انتخاب کنید و روی قالب Single View App کلیک کنید. این فایل یک اپلیکیشن با کنترلر ویوی منفرد ایجاد می‌کند. در واقع این صرفاً یک کلاس است که یک ویو را در اپلیکیشن iOS مدیریت می‌کند.

در هر دو گزینه Name و Solution Name مقدار ImageLocation را وارد کنید. یک مکان برای اپلیکیشن روی رایانه خود انتخاب کرده و OK را بزنید تا پروژه ایجاد شود.

ویژوال استودیو از شما می‌خواهد که Mac خود را آماده‌سازی کنید تا یک میزبان برای build زامارین باشد.

1. روی سیستم مک، بخش System Preferences را باز کرده و Sharing را انتخاب کنید.
2. Remote Login را فعال کنید.
3. گزینه Allow access را به صورت Only these users تغییر دهید و یک کاربر را تعیین کنید که به زامارین و Xcode روی Mac دسترسی داشته باشد.
   
4. دستورالعمل‌ها را ببندید و به رایانه ویندوزی بازگردید.

زمانی که به ویژوال استودیو بازگردید، از شما خواسته می‌شود که Mac را به عنوان میزبان build انتخاب کنید. رایانه مک خود را انتخاب کرده و گزینه Connect را کلیک کنید. نام کاربری و رمز عبور را وارد کنید و سپس روی Login کلیک کنید.

برقراری اتصال خود را با بررسی نوار ابزار به صورت تصویر زیر می‌توانید متوجه شوید:

iPhone Simulator را از منوی بازشدنی Solution Platform انتخاب کنید. بدین ترتیب یک شبیه‌ساز از میزبان build به صورت خودکار انتخاب می‌شود. شما می‌توانید شبیه‌ساز دستگاه را نیز با کلیک کردن روی فلش کنار دستگاه شبیه‌ساز کنونی تغییر دهید.

با کلیک روی فلش سبز رنگ Debug یا استفاده از کلید میانبر F5 می‌توانید برنامه خود را Build و اجرا کنید.

به این ترتیب اپلیکیشن شما کامپایل و اجرا می‌شود؛ اما نمی‌توانید اجرای آن را روی ویندوز ببینید. در عوض باید به میزبان Mac خود نگاه کنید. به همین دلیل است که قبلاً توصیه کردیم بهتر است این دو سیستم کنار هم باشند.

دقت کنید که در نسخه‌های جدیدتر ویژوال استودیو و زامارین این مشکل رفع شده است و شما می‌توانید از شبیه‌ساز iOS روی ویندوز استفاده کنید. روی شبیه‌ساز یک صفحه splash ظاهر می‌شود که شامل یکی ویوی خالی است. به این ترتیب می‌بینید که پیکربندی زامارین درست کار می‌کند.

با زدن دکمه قرمز رنگ توقف در نوارابزار ویو یا کلیدهای میانبر Shift + F5 می‌توانید اجرای این اپلیکیشن را متوقف کنید.

ایجاد ویوی Collection

اپلیکیشن ما تصاویر کوچکی از عکس‌های کاربر را در یک ویوی کالکشن نمایش می‌دهد که یک کنترل iOS برای نمایش چندین آیتم در حالت شبکه‌ای است. برای ویرایش استوری بورد اپلیکیشن که شامل صفحه‌هایی برای اپلیکیشن است، می‌توانید Main.storyboard را از Solution Explorer باز کنید.

Toolbox را باز کرده و عبارت collection را در کادر متنی وارد کنید تا فهرستی از آیتم‌های فیلتر شده نمایش یابند. زیر بخش Data Views روی شیء Collection View کلیک کرده و آن از کادر ابزار کشیده و در میانه ویوی خالی رها کنید.

ویوی کالکشن را انتخاب کنید تا دایره‌های انتخاب را در طرفین ویوی بینید. اگر به جای این دایره‌ها شکل‌های T مانند را مشاهده کردید باید دوباره روی آن کیک کنید تا تبدیل به دایره‌هایی شوند.

روی هر دایره کیک کرده و بکشید تا به لبه ویوی برسند و خطوط آبی رنگ ظاهر شوند. لبه باید به این مکان بچسبد و سپس کلیک ماوس را رها کنید.

اکنون Auto Layout Constraints را برای ویوی کالکشن خود تنظیم می‌کنیم. این مقادیر به اپلیکیشن اعلام می‌کنند که ویو هنگام چرخش دستگاه چگونه باید تغییر اندازه پیدا کند. در نوارابزار در بالای استوری بورد روی گزینه بعلاوه سبز رنگ در کنار عنوان CONSTRAINTS کلیک کنید. بدین ترتیب به طور خودکار قیدهایی برای ویوی کالکشن ایجاد می‌شود.

این قیدهای ایجاد شده تقریباً صحیح هستند؛ اما باید آن‌ها را کمی اصلاح کنیم. در پنجره Properties به برگه Layout بروید و تا بخش Constraints اسکرول کنید.

دو قیدی که از روی لبه تعریف شده‌اند صحیح هستند؛ اما قیدهای ارتفاع و عرض درست نیستند. قیدهای Width و Height را با کلیک روی علامت × کنار هر یک حذف کنید.

دقت کنید که ویوی کالکشن اینک به رنگ نارنجی درمی‌آید. این امر نشان می‌دهد که قیدها باید اصلاح شوند.

روی ویوی کالکشن کلیک کرده و آن را انتخاب کنید. اگر دایره‌های قبلی را همچنان می‌بینید روی آن دوباره کلیک کنید تا آیکون‌ها به شکل T سبز درآیند. روی آیکون T لبه فوقانی ویوی کالکشن نزدیک مستطیل سبز رنگ با نام Top Layout Guide کلیک کرده و آن را بکشید. آن را رها کنید تا قید مرتبط با بخش فوقانی ویو ایجاد شود.

در نهایت روی T در سمت چپ ویوی کالکشن کلیک کرده و به سمت چپ بکشید تا این که به خط نقطه چین آبی رنگ برسید. ماوس را رها کنید تا قید مرتبط با سمت چپ ویوی کالکشن ایجاد شود.

در این مرحله قیدها باید به صورت زیر در آمده باشند:

پیکربندی سلول ویوی کالکشن

ممکن است متوجه یک مربع مشخص شده در ویوی کالکشن شده باشید که درون آن یک دایره قرمز با علامت تعجب وجود دارد. این یک ویوی کالکشن است که نماینده یک آیتم منفرد در ویوی کالکشن است.

فیلم آموزش ساخت اپلیکیشن اندروید برای وب سایت ها با زامارین Xamarin Forms در فرادرس

کلیک کنید

برای پیکربندی اندازه این سلول که در ویوی کالکشن صورت می‌گیرد باید ویوی کالکشن را انتخاب کرده و به برگه Layout بروید. زیر Cell Size گزینه Width و Height را برابر با 100 تنظیم کنید.

سپس روی دایره قرمز روی سلول ویوی کالکشن کلیک کنید. یک صفحه باز می‌شود که به شما اطلاع می‌دهد یک شناسه استفاده مجدد برای سلول ندارید و از این رو باید سلول را انتخاب کرده و به برگه Widget بروید. در آنجا به سمت پایین اسکرول کنید تا به بخش Collection Reusable View برسید و مقدار ImageCellIdentifier را برای گزینه Identifier وارد کنید. اینک علامت هشدار باید رفع شود.

به اسکرول کردن در این صفحه ادامه دهید تا به Interaction Section برسید. مقدار رنگ پس‌زمینه (Background Color) را با انتخاب Predefined و blue تنظیم کنید.

اینک صحنه ما باید مانند زیر باشد:

به سمت بالای بخش Widget اسکرول کنید تا Class را به صورت PhotoCollectionImageCell تنظیم کنید.

ویژوال استودیو به طور خودکار یک کلاس با این نام ایجاد می‌کند که از UICollectionViewCell ارث‌بری می‌کند و PhotoCollectionImageCell را برای شما ایجاد می‌کند. این فرایند بسیار ساده و سرراست است.

ایجاد منبع داده ویوی کالکشن

ما باید به صورت دستی کلاس‌هایی ایجاد کنیم که به عنوان UICollectionViewDataSource برای ما عمل کرده و داده‌هایی برای ویوی کالکشن تأمین کنند.

به این منظور روی ImageLocation در Solution Explorer کلیک کنید. Add \ Class را انتخاب کرده و پس از تعیین نام کلاس PhotoCollectionDataSource.cs، روی Add کلیک کنید. اینک کلاس جدیداً ایجاد شده PhotoCollectionDataSource.cs را باز کنید و کد زیر را به ابتدای فایل اضافه کنید:

using UIKit;

این وضعیت باعث می‌شود که به فریمورک UIKit در iOS دسترسی داشته باشید. تعریف کلاس را به صورت زیر تغییر دهید:

public class PhotoCollectionDataSource: UICollectionViewDataSource
{
}

به خاطر داشته باشید که باید از شناسه استفاده مجدد که در سلول ویوی کالکشن ایجاد کردیم در این کلاس بهره بگیریم. کد زیر را درست درون تعریف کلاس وارد کنید:

private static readonly string photoCellIdentifier = "ImageCellIdentifier";

کلاس UICollectionViewDataSource شامل دو عضو مجرد است که باید پیاده‌سازی کنید. کد زیر را درون کلاس وارد کنید:

public override UICollectionViewCell GetCell(UICollectionView collectionView, 
    NSIndexPath indexPath)
{
    var imageCell = collectionView.DequeueReusableCell(photoCellIdentifier, indexPath)
       as PhotoCollectionImageCell;

    return imageCell;
}

public override nint GetItemsCount(UICollectionView collectionView, nint section)
{
    return 7;
}

در کد فوق ()GetCell مسئول تأمین یک سلول برای نمایش درون ویوی کالکشن است.

DequeueReusableCell از سلول‌هایی که دیگر مورد نیاز نیستند، مثلاً آن‌هایی که از صفحه خارج شده‌اند، مجدداً استفاده می‌کند. اگر هیچ سلول با استفاده مجدد، موجود نباشد، یک سلول جدید به طور خودکار ایجاد می‌شود.

GetItemsCount به ویوی کالکشن اعلام می‌کند که هفت آیتم را نمایش دهد. سپس یک ارجاع به ویوی کالکشن و به کلاس ViewController اضافه می‌کنیم که کنترلر ویو است و صحنه‌ی شامل ویوی کالکشن را مدیریت می‌کند. اگر به Main.storyboard بازگردیم، می‌توانیم ویوی کالکشن را انتخاب کرده و سپس به برگه Widget برویم. در این بخش برای مقدار Name عبارت collectionView را وارد کنید.

ویژوال استودیو به طور خودکار، یک متغیر وهله‌ای با این نام روی کلاس ViewController ایجاد می‌کند. دقت کنید که شما نمی‌توانید متغیر وهله‌ای را مستقیماً درون کلاس ViewController.cs مشاهده کنید. برای دیدن متغیر وهله‌ای باید روی نشانگر disclosure در سمت چپ ViewController.cs کلیک کنید تا ViewController.designer.cs درون آن مشخص شود. این کلاس شامل متغیر وهله‌ای collectionView است که به طور خودکار از سوی ویژوال استودیو ایجاد شده است. کلاس ViewController.cs را از Solution Explorer انتخاب کرده و فیلد زیر را مستقیماً درون کلاس وارد کنید:

private PhotoCollectionDataSource photoDataSource;

در انتهای ()ViewDidLoad، خط‌های زیر را وارد کنید تا منبع داده، مقداردهی اولیه شده و به ویوی کالکشن وصل شود.

photoDataSource = new PhotoCollectionDataSource();
collectionView.DataSource = photoDataSource;

بدین ترتیب photoDataSource داده‌های مورد نیاز برای ویوی کالکشن را تأمین می‌کند. اپلیکیشن را build و سپس اجرا کنید. اینک باید ویوی کالکشن را با هفت مربع آبی رنگ ببینید:

در این مرحله اپلیکیشن ما سر و شکل بهتری یافته است.

نمایش عکس‌ها

با این که مربع‌های آبی جذاب هستند؛ اما باید منبع داده خود را به‌روزرسانی کنیم تا عکس‌های واقعی را از دستگاه بازیابی کرده و آن‌ها را در ویوی کالکشن نمایش دهد. بدین منظور از فریمورک Photos برای دسترسی به موجودیت‌های عکس و ویدیو که از سوی اپلیکیشن Photos گوشی مدیریت می‌شوند استفاده می‌کنیم.

در آغاز باید یک ویو برای نمایش تصاویر روی سلول ویوی کالکشن اضافه کنیم. بدین منظور بار دیگر Main.storyboard را باز کنید و گزینه سلول ویوی کالکشن را انتخاب کنید. در برگه Widget به سمت پایین اسکرول کنید و رنگ پس‌زمینه Background را به صورت پیش‌فرض (default) تغییر دهید.

سپس کادر ابزار را باز کرده و به دنبال Image View بگردید و آن را روی سلول ویوی کالکشن بکشید.

این ویوی تصویر در ابتدا بسیار بزرگ‌تر از سلول است. برای تغییر دادن اندازه آن، ویوی تصویر را انتخاب کرده و به برگه Properties \ Layout بروید. زیر بخش View هر دو مقدار X و Y را به مقدار 0 تنظیم کنید و مقادیر Width و Height را نیز برابر با 100 تنظیم کنید.

به برگه Widget در ویوی تصویر بروید و نام آن را به صورت cellImageView تعیین کنید. ویژوال استودیو به طور خودکار یک فیلد با نام cellImageView برای شما ایجاد می‌کند.

به بخش View اسکرول کنید تا Mode را به صورت Aspect Fill تعیین کنید. بدین ترتیب از کشیده شدن تصویرها اجتناب می‌شود.

دقت کنید که اگر PhotoCollectionImageCell.cs را باز کنید نمی‌توانید فیلد جدید را ببینید. به جای آن کلاس به صورت partial اعلان شده است که نشان می‌دهد فیلد در یک فایل دیگر است. در Solution Explorer فلش سمت چپ PhotoCollectionImageCell.cs را انتخاب کنید تا فایل‌ها را نمایش دهد. PhotoCollectionImageCell.designer.cs را انتخاب کنید تا ببینید که cellImageView در آنجا اعلان شده است.

این فایل به صورت خودکار ایجاد شده است و نباید تغییری در آن ایجاد کنید. اگر چنین بکنید ممکن است بدون هشدار بازنویسی شود، یا پیوندهای بین کلاس و استوری بورد قطع شود که موجب خطاهای زمان اجرا می‌شود. از آنجا که این فیلد عمومی نیست، کلاس‌های دیگر نمی‌توانند به آن دسترسی داشته باشند. به جای آن باید یک متد برای ایجاد امکان تغییر عکس تعریف کنید. کلاس PhotoCollectionImageCell.cs را باز کرده و متد زیر را در آن وارد کنید:

public void SetImage(UIImage image)
{
    cellImageView.Image = image;
}

اینک PhotoCollectionDataSource را به‌روزرسانی کنید تا بتواند عملاً تصاویر را بازیابی کند. کد زیر را در ابتدای PhotoCollectionDataSource.cs اضافه کنید:

using Photos;

فیلدهای زیر را نیز به PhotoCollectionDataSource اضافه کنید:

private PHFetchResult imageFetchResult;
private PHImageManager imageManager;

فیلد imageFetchResult یک فهرست مرتب از شیءهای موجودیت عکس را نگه‌داری می‌کند که این عکس‌ها از imageManager دریافت خواهند شد. درست بالاتر از ()GetCell سازنده (constructor) زیر را اضافه کنید:

public PhotoCollectionDataSource()
{
    imageFetchResult = PHAsset.FetchAssets(PHAssetMediaType.Image, null);
    imageManager = new PHImageManager();
}

این سازنده فهرستی از همه موجودیت‌های عکس در اپلیکیشن Photos را می‌گیرد و نتیجه را در فیلد imageFetchResult ذخیره می‌کند. سپس مقدار imageFetchResult را تنظیم می‌کند که باعث می‌شود، اپلیکیشن بتواند برای کسب اطلاعات بیشتر در مورد هر تصویر کوئری بزند. شیء imageManager را هنگام خاتمه یافتن کلاس با افزودن تخریب‌کننده زیر متد سازنده حذف کنید:

~PhotoCollectionDataSource()
{
    imageManager.Dispose();
}

برای این که متدهای GetItemsCount و GetCell از این منابع استفاده کنند و نتایجی به جای سلول‌های خالی بازگردانند باید ()GetItemsCount را به صورت زیر تغییر دهیم:

public override nint GetItemsCount(UICollectionView collectionView, nint section)
{
    return imageFetchResult.Count;
}

سپس متد GetCell را با کد زیر عوض کنید:

public override UICollectionViewCell GetCell(UICollectionView collectionView, 
    NSIndexPath indexPath)
{
    var imageCell = collectionView.DequeueReusableCell(photoCellIdentifier, indexPath) 
        as PhotoCollectionImageCell;

    // 1
    var imageAsset = imageFetchResult[indexPath.Item] as PHAsset;
    
    // 2
    imageManager.RequestImageForAsset(imageAsset, 
        new CoreGraphics.CGSize(100.0, 100.0), PHImageContentMode.AspectFill,
        new PHImageRequestOptions(),
         // 3
         (UIImage image, NSDictionary info) =>
        {
           // 4
           imageCell.SetImage(image);
        });

    return imageCell;
}

تغییراتی که در کد فوق رخ می‌دهد را به شرح زیر می‌توان جمع‌بندی نمود:

1. indexPath شامل یک ارجاع به آن آیتمی است که در ویوی کالکشن باید بازگشت یابد. خصوصیت Item صرفاً یک اندیس محسوب می‌شود. در این جا موجودیت در آن اندیس دریافت می‌شود و آن را به صورت یک PHAsset در می‌آورد.
2. از imageManager برای درخواست تصویر موجودیت با اندازه و محتوای مطلوب استفاده می‌کنیم.
3. بسیاری از متدهای فریمورک iOS از اجرای با تأخیر برای درخواست‌هایی مانند RequestImageForAsset استفاده می‌کنند که ممکن است تکمیلشان زمان‌گیر باشد و از یک واسط (Delegate) بهره می‌گیرند که در زمان تکمیل درخواست باید فراخوانی شود. زمانی که درخواست کامل می‌شود، این واسط با تصویر و اطلاعات مرتبط با آن فراخوانی می‌شود.
4. در نهایت تصویر روی سلول تعیین می‌شود.

اپلیکیشن را بیلد و اجرا کنید. در این مسیر با صفحه‌ای مواجه می‌شوید که از شما مجوزهای دسترسی می‌خواهد.

با این وجود با کلیک روی OK نیز برنامه هیچ کاری نمی‌کند و این وضعیت ناامیدکننده است. iOS دسترسی به عکس‌های کاربران را یک اطلاعات حساس می‌داند و از کاربر می‌خواهد که مجوز این کار را بدهد. با این وجود اپلیکیشن ما باید قبلاً طوری تنظیم شده باشد که وقتی کاربر این مجوز را به آن می‌دهد مطلع شود و ویوهای خود را مجدداً بارگذاری کند. این کار را در ادامه انجام خواهیم داد.

ثبت تغییرات مجوز دسترسی به عکس‌ها

ابتدا یک متد به کلاس PhotoCollectionDataSource اضافه می‌کنیم تا به آن اطلاع دهیم که تغییرات عکس‌ها را مجدداً کوئری کند. کد زیر را به انتهای فایل اضافه کنید:

public void ReloadPhotos()
{
    imageFetchResult = PHAsset.FetchAssets(PHAssetMediaType.Image, null);
}

سپس کلاس ViewController.cs را باز کنید و فریمورک زیر را به ابتدای فایل اضافه کنید:

using Photos;

پس از آن کد زیر را به انتهای ()ViewDidLoad اضافه کنید:

// 1
PHPhotoLibrary.SharedPhotoLibrary.RegisterChangeObserver((changeObserver) =>
{
    //2
    InvokeOnMainThread(() =>
    {
        // 3
        photoDataSource.ReloadPhotos();
        collectionView.ReloadData();
    });
});

کد فوق کارهای زیر را انجام می‌دهد:

1. اپلیکیشن یک واسط (delegate) روی کتابخانه عکس‌های اشتراکی تعریف می‌کند که هر زمان تغییراتی در کتابخانه ایجاد شود، فراخوانی می‌شود.
2. ()InvokeOnMainThread تضمین می‌کند که تغییرات UI همواره روی نخ اصلی (main thread) پردازش می‌شوند، چون در غیر این صورت ممکن است اپلیکیشن از کار بیفتد.
3. ()photoDataSource.ReloadPhotos را برای بارگذاری مجدد عکس‌ها و ()collectionView.ReloadData را برای اعلام ترسیم مجدد به ویوی کالکشن فراخوانی می‌کنیم.

در نهایت حالت اولیه را مدیریت می‌کنیم که در آن هنوز مجوزهای دسترسی عکس‌ها به اپلیکیشن داده نشده و مجوز درخواست می‌شود.

در ()ViewDidLoad کد زیر را درست پیش از تنظیم photoDataSource وارد می‌کنیم:

if (PHPhotoLibrary.AuthorizationStatus == PHAuthorizationStatus.NotDetermined)
{
    PHPhotoLibrary.RequestAuthorization((PHAuthorizationStatus newStatus) =>
    { });
}

این کد وضعت احراز هویت جاری را بررسی می‌کند و اگر به صورت تعیین نشده (NotDetermined) باشد، صراحتاً درخواست مجوز برای دسترسی به عکس‌ها می‌کند. جهت این که مجدداً درخواست دسترسی به عکس‌ها را بتوانیم فعال کنیم، باید شبیه‌ساز آیفون را با مراجعه به مسیر Simulator \ Reset Content and Settings ریست کنیم. اپلیکیشن را بیلد و اجرا کنید. از شما خواسته می‌شود که مجوز دسترسی به عکس‌ها را بدهید و پس از آن که روی OK کلیک کنید، ویوی کالکشن با تصاویر کوچکی از عکس‌های دستگاه بارگذاری می‌شود.

سخن پایانی

نسخه کامل شده این اپلیکیشن را می‌توانید از این آدرس (+) دانلود کنید. در این راهنما تا حدودی با شیوه کار زامارین و استفاده از آن برای ایجاد اپلیکیشن‌های iOS آشنا شدیم. مایکروسافت با خرید زامارین نوید تغییرات زیادی داده است، که بسیاری از آن‌ها تا به اینک پیاده‌سازی شده‌اند.

فیلم مجموعه آموزش توسعه اپلیکیشن موبایل – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش برنامه نویسی Swift (سوئیفت) برای برنامه نویسی iOS
• مجموعه آموزش های پروژه محور برنامه نویسی
• آموزش ‌آرایه در برنامه نویسی Swift (سوئیفت)
• مقایسه Swift و React-Native از فریم‌ورک‌های ساخت اپلیکیشن در iOS
• آموزش برنامه نویسی iOS در ویندوز | راهنمای رایگان و جامع شروع به کار

==