آموزش کار با view controller ها
در این مبحث همچنان بر روی scene و UI مربوطه ی آن در برنامه ی ثبت و مشاهده ی اطلاعات غذا،FoodTracker، کار خواهید کرد. ترتیب المان های جاری UI را تغییر داده و با استفاده از image picker یک عکس به رابط کاربری برنامه ی خود اضافه خواهید نمود.
در پایان برنامه ظاهری مشابه زیر خواهد داشت:
آنچه خواهید آموخت
1. با چرخه ی حیات view controller و مفهوم آن آشنا شده، بدانید توابع بازفراخوان/callback های آن، viewDidLoad، viewWillAppear و viewDidAppear چه زمانی صدا خورده و اجرا می شوند.
2. بتوانید بین view controller ها داده رد و بدل نمایید.
3. یک view controller را از صفحه حذف یا پنهان کنید.
4. با الحاق کردن آبجکت های gesture recognizer به view، قابلیت تعامل با کاربر و واکنش نشان دادن به رخداد/event ها را به آن اعطا نمایید.
5. بر اساس سلسله مراتب و زنجیره ی ارث بری (class hierarchy) UIView/UIControl، رفتار یک آبجکت را پیش بینی کنید.
6. با استفاده از ابزار asset catalog، محتوا و منابعی همچون عکس را به پروژه اضافه نمایید.
آشنایی با life cycle/چرخه ی حیات View Controller و مفهوم آن
در حال حاضر، برنامه ی FoodTracker از تنها یک scene یا صفحه ی محتوا برخوردار است که UI آن توسط فقط یک view controller مدیریت می شود. با ساخت اپلیکیشن های پیچیده تر، نا گزیر با scene های بیشتری سر و کار داشته و علاوه بر آن می بایست بارگذاری و حذف view ها از حافظه را همین که بر روی صفحه نمایش داده و سپس از آن حذف می شوند، اداره نمایید.
آبجکتی که از روی کلاس UIViewController (و کلاس های فرزند آن) ساخته می شود، تعدادی متد پیش فرض دارد که توسط آن ها view hierarchy (نمای سلسله مراتبی از آبجکت ها/view های یک scene همچون دکمه، لیبل) خود را مدیریت می کند. زمانی که یک view controller تغییر وضعیت می دهد (برای مثال در صفحه نمایش داده می شود و سپس از آن حذف می گردد)، IOS خود این متدها را در زمان مناسب فراخوانی می کند.
کلاس فرزندی که از UIViewController ایجاد می کنید، مانند کلاس ViewController که در برنامه ی جاری با آن کار می کنید، تمامی متدهای کلاس والد (UIViewController) را به ارث برده و در این حین به شما امکان می دهد تا کد خود را جهت پیاده سازی عملیات و رفتار دلخواه به بدنه ی این متدها اضافه نمایید. به منظور تنظیم و آماده سازی view ها جهت نمایش در صفحه یا حذف آن ها در زمان مناسب (یا گام مربوطه در فرایند مزبور)، آگاهی از ترتیب و زمان دقیق فراخوانی متدهای نام برده ضروری است. البته این عملیات کمی پیچیده بوده و در مباحث آینده به پیاده سازی آن خواهید پرداخت.
متدهای کلاس UIViewController به ترتیب شرح داده شده در زیر صدا خورده و اجرا می شوند:
· viewDidLoad() – زمانی فراخوانی می شود که content view (view ای که در بالای سلسله مراتب قرار گرفته و چندین view دیگر را دربرمی گیرد) کلاس view controller ایجاد شده و از storyboard بارگذاری می شود. این متد ویژه ی تنظیم اولیه تعبیه شده است. لازم به ذکر است که view ها، گاهی به دلیل عدم وجود منابع کافی، از برنامه حذف می شوند و از اینرو هیچ تضمینی وجود ندارد که متد مذکور تنها یکبار فراخوانده شود (ممکن است به دلیل منابع محدود و حذف view ها از صفحه، لازم باشد چندین بار فراخوانی شود).
· viewWillAppear() – ویژه ی عملیاتی طراحی شده که می خواهید حتما پیش از به نمایش گذاشتن view برای کاربر، انجام شوند. از آنجایی که امکان دارد قابلیت رویت یک view به دلیل وجود دیگر view ها، بین دو حالت تغییر کند (نمایش داده شده/پنهان شود) یا کلا تحت الشعاع قرار گیرد، این متد همیشه بلافاصله قبل از نمایان شدن content view بر روی صفحه صدا زده می شود.
· viewDidAppear() – عملیاتی که می خواهید بلافاصله پس از نمایان شدن view بر روی صفحه، انجام شوند از جمله واکشی داده ها و به اجرا گذاشتن یک انیمیشن و غیره ... در بدنه ی این متد تعریف می شوند. از آنجایی که امکان دارد قابلیت رویت یک view به دلیل وجود دیگر view ها، بین دو حالت تغییر کند (نمایش داده شده/پنهان شود) یا کلا تحت الشعاع قرار گیرد، این متد همیشه بلافاصله پس از نمایان شدن content view بر روی صفحه صدا زده می شود.
همان طور که در نمودار فوق مشاهده می کنید، تعدادی متد مکمل نیز جهت teardown یا حذف view از صفحه وجود دارد.
برخی از متدهای ذکر شده را جهت بارگذاری و نمایش داده های view در زمان مناسب، در برنامه ی FoodTracker مورد استفاده قرار خواهید داد. در واقع، اگر بخاطر داشته باشید، داخل بدنه ی یکی از این متدها (تابع viewDidLoad() از کلاس ViewController) کدنویسی کردید:
override func viewDidLoad() {
super.viewDidLoad()
// Handle the text field’s user input through delegate callbacks.
nameTextField.delegate = self
}
این سبک طراحی برنامه که در آن view controller ها به عنوان پل های ارتباطی (pipeline) بین view ها و data model ایفای نقش کرده و زمینه ی تعامل بین آن ها را فراهم می نمایند، در اصطلاح معماری MVC ( الگو توسعه ی مدل-نما-کنترلگر) خوانده می شود. در این الگوی توسعه، model وظیفه ی کار با داده ها (ارتباط با پایگاه داده/هر منبع داده ای همچون آرایه و واکشی اطلاعات از آنها، ذخیره ی موقت یا تبدیل آن ها به یک شی و همچنین بررسی صحت داده ها) را بر عهده دارد، بخش view ظاهر برنامه/UI را در صفحه به نمایش گذاشته، محتوای قابل مشاهده برای کاربر را ارائه می دهد و در نهایت لایه ی controller اداره ی view ها، مدیریت تعامل با کاربر را عهده دار بوده و در حقیقت واسطی میان model و view محسوب می شود. با واکنش نشان دادن به اعمال یا ورودی کاربر، پر کردن view ها با داده از data model، بخش controller به مثابه ی یک درگاه یا پل ارتباطی بین لایه ی model و view ایفای نقش می کند. در حال حاضر تمامی برنامه های کارامد و پربازده ی IOS مبتنی بر این الگوی توسعه طراحی می شوند و برنامه ی FoodTracker نیز از این امر مستثنی نیست.
در بخش بعدی UI ساده برنامه را گسترش داده و قالب یا طرح نهایی (layout) آن را مشخص می کنید.
افزودن یک عکس به UI برنامه
مرحله بعدی که آخرین گام در تکمیل ظاهر برنامه ی Foodtracker است، تعریف مکانیزمی جهت نمایش یک عکس، ویژه ی غذای مورد نظر در UI می باشد. برای این منظور از یک image view (کلاس UIImageView) بهره می گیرد. Image view یک المان UI است که تصویری را برای کاربر بر روی صفحه به نمایش می گذارد.
به منظور افزودن image view به scene فعلی مراحل زیر را گام به گام دنبال نمایید:
1. فایل storyboard خود، Main.storyboard را از project navigator انتخاب کرده و باز نمایید.
2. Object library را از utility area باز نمایید (یا این مراحل را دنبال نمایید: View > Utilities > Show Object Library).
3. داخل فیلد جستجوی Object library، عبارت image view را وارد نمایید تا Xcode به سرعت آبجکت Image View را یافته و در اختیار شما قرار دهد.
4. آبجکت نام برده را از Object library کشیده و در سطح scene جاری، زیر کنترل دکمه جایگذاری کنید.
5. پس از کلیک بر روی المان image view و انتخاب آن، کادر Size inspector را در utility area باز کنید. اگر بخاطر داشته باشید، Size inspector با کلیک بر روی دکمه ی پنجم از سمت چپ در inspector selector bar، به نمایش در می آید. این کادر به شما اجازه ی تنظیم اندازه و مکان قرار گیری آبجکت مورد نظر در storyboard را می دهد.
6. از فیلد Intrinsic Size در پایین کادر، گزینه ی Placeholder را انتخاب نمایید.
7. داخل فیلدهای Width و Height، مقدار 320 را وارد کنید. کلید Return را فشار دهید.
به دلیل اینکه در image view حاضر عکسی برای نمایش وجود ندارد، از intrinsic content size آن (حداقل فضای لازم برای نمایش کامل و بی نقص محتوای view) اطلاع کافی نداریم. بنابراین فیلد Intrinsic Size را بر روی گزینه ی placeholder تنظیم می کنیم تا بعده ها بتوانیم اندازه ی صحیح و constraint های مناسب را در interface builder مشخص کنیم.
8. در زیر canvas (پس زمینه ی storyboard)، گوشه ی سمت راست محیط، منوی Pin را با کلیک بر روی سومین دکمه از سمت چپ باز نمایید.
9. در کادر جاری، چک باکس Aspect Ratio را تیک دار نمایید. هم اکنون منوی Pin باید مشابه زیر باشد:
10. در منوی Pin، بر روی دکمه ی Add 1 Constraint کلیک نمایید.
Image view در حال حاضر دارای aspect ratio/نسبت پهنا به ارتفاع 1:1 می باشد. بنابراین یک مربع را برای کاربر به نمایش می گذارد.
11. پس از کلیک بر روی المان image view و انتخاب آن، کادر Attribute inspector را باز کنید.
اگر بخاطر داشته باشید، کادر Attribute inspector با کلیک بر روی دکمه ی چهارم از سمت چپ در inspector selector bar باز می شود. در این کادر شما می توانید property های یک آبجکت را در storyboard خود ویرایش کنید.
12. در کادر Attribute inspector، فیلدی که Interaction نام دارد را پیدا کرده و سپس چک باکس User Interaction Enabled را تیک دار نمایید. این امکان به کاربران اجازه می دهد تا با المان image view تعامل داشته باشند.
اپلیکیشن شما اکنون باید ظاهری مشابه زیر داشته باشد:
به نمایش گذاشتن یک عکس مکان نگهدار در image view
شما باید به طریقی به کاربر اعلان کنید که اجازه دارد با المان image view تعامل داشته و از آن یک عکس را انتخاب و مشاهده نماید. برای نیل به این هدف، یک عکس به عنوان مکان نگهدار در این المان به نمایش می گذارید که کاربر با مشاهده ی آن متوجه می شود که می تواند با آن تعامل داشته و تصویری را برای مشاهده انتخاب کند.
می توانید این تصویر را در پوشه ی Images/ از پروژه ی حاضر (پس از دانلود آن) انتخاب کنید یا عکس دلخواه خود را انتخاب نمایید.
به منظور افزودن یک عکس به پروژه ی خود مراحل زیر را دنبال نمایید:
1. در project navigator، با کلیک بر روی فایل Assets.xcassets، ابزار asset catalog را باز کنید. asset catalog بستری است که در آن asset های پروژه (محتوای برنامه ی خود همچون عکس ها، فایل های تصویری و متنی) را ذخیره و سازمان دهی می کنید.
2. در پایین محیط کاری Xcode، گوشه ی سمت چپ بر روی دکمه ی (+) کلیک کرده و سپس گزینه ی New Image Set را از منوی pop-up انتخاب نمایید.
3. بر روی اسم image set دوبار کلیک کرده و آن را به defaultPhoto تغییر دهید.
4. عکس دلخواه را از حافظه ی کامپیوتر خود انتخاب کنید.
5. حال عکس را کشیده و آن را در فضای خالی 2x در image set جایگذاری کنید.
2x ، وضوح تصویر نرم افزار شبیه ساز/simulator iPhone 6 در محیط Xcode است. از اینرو عکس مورد نظر باید با بهترین کیفیت به نمایش گذاشته شود.
پس از افزودن عکس مکان نگهدار به پروژه، بایستی تنظیمات image view را انجام دهید تا این المان بتواند عکس مورد نظر را در UI برای کاربر به نمایش بگذارد.
جهت نمایش عکس مکان نگهدار در المان image view، مراحل زیر را گام به گام دنبال نمایید:
1. فایل storyboard را باز کنید.
2. در storyboard، المان image view را انتخاب نمایید.
3. پس از کلیک بر روی المان مورد نظر، کادر Attributes inspector را از utility area باز کنید.
4. در Attribute inspector، فیلدی که Image نام دارد را پیدا کرده و سپس گزینه ی defaultPhoto را از آن انتخاب نمایید.
تست کنید: برنامه را در شبیه ساز اجرا کنید. می بینید که عکس مکان نگهدار در المان image view به نمایش در می آید.
متصل کردن المان image view به کد مربوطه در فایل ViewController.swift
در این بخش بایستی با کدنویسی قابلیتی به المان image view اضافه کنید که به شما اجازه می دهد محتوای آن را در زمان اجرای برنامه (runtime)، تغییر دهید. شما باید بتوانید تصویر را از داخل کد (با کدنویسی) تغییر دهید. برای این منظور ابتدا لازم است المان image view را به کد مربوطه در فایل ViewController.swift متصل کنید.
جهت متصل کردن المان image view به کد مرتبط در فایل ViewController.swift، مراحل زیر را گام به گام دنبال نمایید:
1. بر روی دکمه ی Assistant در نوار ابزار Xcode، بالای محیط گوشه ی سمت راست کلیک نموده و ویرایشگر کمکی (assistant editor) را باز کنید.
2. در صورت نیاز به فضای کاری بیشتر، با کلیک بر روی دکمه های navigator toggle و utility toggle در نوار ابزار Xcode، می توانید project navigator و utility area را ببندید.
در صورت تمایل، می توانید کادر outline view را نیز ببندید.
3. در storyboard، المان image view را انتخاب نمایید.
4. حال المان نام برده را از سطح scene جاری کشیده و در ناحیه ی ویرایش کد (سمت راست محیط، داخل فایل ViewController.swift) در زیر outlet جاری (متغیر mealNameLabel) جایگذاری نمایید.
5. در پنجره ی محاوره ای که به نمایش در می آید، واژه ی photoImageView را وارد فیلد Name نمایید. لازم نیست سایر تنظیمات را دستکاری کنید. پنجره ی محاوره ای هم اکنون می بایست به صورت زیر باشد:
6. حال بر روی دکمه ی Connect کلیک نمایید.
Xcode یک اشاره گر در قالب متغیری با نام photoImageView به المان مزبور در فایل ViewController.swift ایجاد می کند. سپس storyboard را جهت برقراری اتصال بین کد و المان مربوطه در UI تنظیم می نماید.
@IBOutlet weak var photoImageView: UIImageView!
حال می توانید از کد به المان image view در UI دسترسی داشته و محتوای آن را تغییر دهید. اما اینجا یک سوال جالب مطرح می شود! از کجا بفهمیم چه زمانی باید عکس یا محتوای المان مزبور را تغییر دهیم؟ شما می بایست روشی تعریف کنید که کاربران از طریق آن بتوانند تمایل خود مبنی بر تغییر محتوای image view را به نحوی بیان کنند، برای مثال با کلیک (قرار دادن انگشت) بر روی image view.
پس از آن یک action method تعریف می کنید که به مجرد رخداد tap (کلیک کاربر بر روی المان)، صدا خورده شده و محتوای المان را تغییر می دهد.
گفتنی است که بین view و control یک تفاوت جزئی وجود دارد. همان طور که می دانید control ها نسخه های ویژه از view ها هستند که به شیوه ای خاص به ورودی یا اعمال کاربر واکنش نشان می دهند. در واقع view صرفا محتوای ساده ای را برای کاربر به نمایش می گذارد، در حالی که یک control امکان ویرایش محتوا (به نحوی خاص) را نیز در اختیار کاربر قرار می دهد.
control (کلاس UIControl) در حقیقت از کلاس UIView ارث بری می کند (یک کلاس فرزند از UIView است). از نمونه های view می توان به label و image view اشاره کرده و از control ها می توان از text field و button نام برد که اگر بخاطر داشته باشید قبلا با تمامی آن ها در UI برنامه ی خود کار کرده اید.
تعریف یک Gesture Recognizer (اعطای قابلیت های یک control به view)
همان طور که در بالا گفته شد، المان image view از نوع control نیست، بنابراین واکنشی که در پاسخ به ورودی کاربر نشان می دهد با یک control –همچون دکمه – یکسان نیست (در اصل طوری طراحی نشده که به عمل کاربر مانند یک کنترل واکنش نشان دهد). به عنوان مثال، نمی توانید به راحتی و بدون هیچ گونه واسطی یک action method تعریف کرده، آن را به image view متصل کنید که به مجرد کلیک کاربر بر روی المان مذکور مستقیما فراخوانی/اجرا می شود (اگر بر روی المان در interface builder کلیک کرده و آن را به ناحیه ی ویرایش کد بکشید، می بینید که داخل کادر محاوره ای امکان انتخاب گزینه ی Action از فیلد connection وجود ندارد).
خوشبختانه، به راحتی می توانید قابلیت های یک control را به view مورد نظر اعطا کنید. برای این منظور کافی است از gesture recognizer استفاده نمایید. gesture recognizer ها آبجکت هایی هستند که با الصاق آن ها به view، به آن ها این امکان داده می شود تا درست مانند یک control به action یا فعل کاربر واکنش نشان دهند.
Gesture recognizer ها حالات مختلف لمس را شناسایی کرده و هر یک را به فعل خاصی تفسیر می کنند. در واقع زمانی که کاربر نمایشگر را با حالت خاصی لمس می کند، IOS آن را مورد بررسی و تحلیل قرار می دهد. سپس آن حالت خاص لمس را معادل یکی از حالات تعریف شده برای سیستم عامل مورد نظر همچون pinch، swipe یا rotation در نظر می گیرد. در پی آن، متناسب با حالت لمس تفسیر شده، (پس از فراخوانی متد متصل به آن gesture recognizer) عملیات معینی نظیر کوچک/بزرگ کردن صفحه یا چرخاندن تصویر را ترتیب می دهد.
جهت اعطا کردن قابلیت های یک control به view (واکنش نشان دادن به عمل کاربر)، کافی است یک آبجکت gesture recognizer به آن view متصل کنید. سپس یک action method تعریف کنید که به مجرد اینکه gesture recognizer حالت لمس کاربر را شناسایی و تفسیر کرد، آن متد فراخوانی شود.
در این بخش با الصاق یک gesture recognizer به المان image view، قابلیت تعامل با کاربر را به این المان اعطا می کنیم.
ابتدا یک tap gesture recognizer (از کلاس UITapGestureRecognizer) به المان image view الحاق کنید. با این کارِ شما، زمانی که کاربر با انگشت خود به سطح نمایشگر ضربه می زند، gesture recognizer آن را شناسایی کرده و پس از تفسیر آن (و فراخوانیaction method مربوطه) زمینه ی تعامل کاربر با المان مزبور را فراهم می آورد.
جهت افزودن یک tap gesture recognizer به المان image view در storyboard، مراحل زیر را گام به گام دنبال نمایید:
1. در مرحله ی اول، Object library را باز کنید. (روش سریع برای باز کردن آن: View > Utilities > Show Object Library.)
2. داخل فیلد جستجوی Object library، واژه ی tap gesture را وارد کنید تا محیط Xcode آبجکت مد نظر را یافته و به سرعت در اختیار شما قرار دهد.
3. آبجکت Tap Gesture Recognizer را از Object library کشیده و آن را بر روی المان image view در scene کنونی جایگذاری نمایید.
Attach a tap gesture recognizer (UITapGestureRecognizer) to the image view, which will recognize when a user has tapped the image view. You can do this easily in your storyboard.
می بینید که آیکون Tap Gesture Recognizer در scene dock نمایان می شود (نواری در بالای scene که اطلاعاتی را درباره ی آن به نمایش می گذارد).
متصل کردن gesture recognizer به کد مربوطه در فایل ViewController.swift
اکنون زمان آن فرا رسیده که gesture recognizer را به action method در کد متصل کنید.
به منظور متصل کردن gesture recognizer به کد مربوطه در فایل ViewController.swift، مراحل زیر را دنبال نمایید:
1. بر روی آیکون gesture recognizer در scene dock کلیک کنید، آن را به ناحیه ی ویرایش کد در سمت راست scene جاری کشیده و در زیر خط // MARK: (خط توضیحات مربوط به action ها در فایل ViewController.swift) جایگذاری نمایید:
2. در کادر محاوره ای که نمایان می شود، گزینه ی Action را از فیلد Connection انتخاب کنید.
3. در فیلد Name، واژه ی selectImageFromPhotoLibrary را به عنوان اسم متد وارد کنید.
4. از فیلد Type، گزینه ی UITapGestureRecognizer را انتخاب نمایید. پس از تنظیمات ذکر شده، کادر محاوره ای می بایست به صورت زیر باشد:
5. حال بر روی دکمه ی Connect کلیک نمایید.
Xcode خود کد مورد نیاز جهت (ایجاد و تنظیم) action method را به فایل ViewController.swift اضافه می کند.
@IBAction func selectImageFromPhotoLibrary(sender: UITapGestureRecognizer) {
}
افزودن یک image picker به پروژه جهت تعامل با کاربر و فراهم آوردن امکان انتخاب عکس
زمانی که کاربر بر روی المان image view در نمایشگر دستگاه ضربه می زند، طبیعتا باید بتواند یک عکس از مجموعه عکس های آماده در حافظه ی دستگاه انتخاب کند یا عکس دلخواه خود را بگیرد. خوشبختانه، کلاس UIImagePickerController تمامی این رفتارها را به صورت درون ساخته در اختیار دارد.
image picker controller رابط کاربری مورد نیاز جهت گرفتن عکس جدید یا انتخاب از میان عکس های ذخیره شده در حافظه ی دستگاه و استفاده از آن ها در برنامه ی جاری را مدیریت می کند. همان طور که به هنگام کار با المان text field به یک delegate احتیاج دارید، برای کار با image picker نیز، ناگزیر به یک delegate image picker controller نیاز دارید. protocol (الگوی پیاده سازی) ویژه ی این delegate عبارت است از UIImagePickerControllerDelegate. همچنین، آبجکتی که به عنوان delegate آبجکت image picker منصوب می کنید (آبجکتی که با همکاری و هماهنگی آن )، مانند نمونه ی قبلی، ViewController است.
اما پیش از هر چیزی، ViewController می بایست protocol نام برده (UIImagePickerControllerDelegate) را پیاده سازی کند. از آنجایی که ViewController وظیفه ی ارائه ی image picker controller را نیز بر عهده دارد، ناگزیر می بایست پروتکل UINavigationControllerDelegate را هم پیاده سازی کند. این protocol برخی از مسئولیت های پیمایش (navigation) را به view controller واگذار می کند.
به منظور افزودن protocol های نام برده به ViewController، مراحل زیر را دنبال نمایید:
1. با کلیک بر روی دکمه ی Standard در سمت چپ نوار ابزار Xcode، ویرایشگر اصلی محیط (standard editor) را باز کنید.
حال project navigator و utility area را با کلیک بر روی دکمه های مربوطه ی آن ها (اشاره شده در تصویر فوق) باز نمایید.
2. از کادر project navigator، فایل ViewController.swift را انتخاب نمایید.
3. داخل فایل ViewController.swift، خط حامل تعریف کلاس را پیدا کنید:
class ViewController: UIViewController, UITextFieldDelegate {
4. بعد از UITextFieldDelegate، یک ویرگول اضافه کرده و سپس UINavigationControllerDelegate را درج کنید.
class ViewController: UIViewController, UITextFieldDelegate, UIImagePickerControllerDelegate {
5. اکنون پس از UIImagePickerControllerDelegate، یک ویرگول اضافه کرده و سپس UINavigationControllerDelegate را تایپ کنید. با این کار کلاس ViewController را ملزم به پیاده سازی متدهای تعریف شده در این دو protocol می کنید:
class ViewController: UIViewController, UITextFieldDelegate, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
پس از اضافه کردن این دو protocol به خط تعریف کلاس، می توانید به تکمیل پیاده سازی متد selectImageFromPhotoLibrary(_:) بپردازید.
جهت پیاده سازی متد selectImageFromPhotoLibrary(_:)، مراحل زیر را دنبال کنید:
1. در فایل ViewController.swift، متد selectImageFromPhotoLibrary(_:) را پیدا کنید. بایستی ظاهری مشابه زیر داشته باشد:
@IBAction func selectImageFromPhotoLibrary(sender: UITapGestureRecognizer) {
}
در بدنه ی متد، بین ({}) کد زیر را اضافه کنید:
// Hide the keyboard.
nameTextField.resignFirstResponder()
این کد سبب می شود اگر کاربر حین نمایان بودن صفحه کلید در نمایشگر، بر روی المان image view کلیک کرد، صفحه کلید به طور کامل از صفحه حذف شود.
2. حال کد زیر را جهت ایجاد یک image picker controller، به بدنه ی متد اضافه نمایید:
// UIImagePickerController is a view controller that lets a user pick media from their photo library.
let imagePickerController = UIImagePickerController()
3. سپس کد زیر را به بدنه ی متد اضافه کنید:
// Only allow photos to be picked, not taken.
imagePickerController.sourceType = .PhotoLibrary
این خط کد، محلی که image picker controller فایل های تصویری خود را از آن وارد المان می کند را مشخص می نماید. پارامتر .PhotoLibrary به image picker اعلان می کند که باید عکس های خود را فقط از مجموعه تصاویر محیط شبیه ساز (simulator camera roll) وارد کند. می دانیم که imagePickerController.sourceType از جنس UIImagePickerControllerSourceType است که نوع داده ای آن enumeration می باشد. بنابراین می توانید بجای اینکه مقدار را به طور کامل UIImagePickerControllerSourceType.PhotoLibrary تایپ کنید، آن را به صورت مختصر .PhotoLibrary مورد اشاره قرار دهید. یادآور می شویم که هرگاه نوع مقدار enumeration از قبل مشخص است، می توانید از صورت مختصر آن استفاده نمایید.
4. با افزودن کد زیر، کلاس حاضر (ViewController) را به عنوان delegate کنترلرimage picker انتخاب نمایید:
// Make sure ViewController is notified when the user picks an image.
imagePickerController.delegate = self
5. حال این کد را در زیر کد فوق، به بدنه ی متد اضافه کنید:
presentViewController(imagePickerController, animated: true, completion: nil)
presentViewController(_:animated:completion:) یک متد است که در سطح کلاس ViewController فراخوانی می شود. اگرچه این متد صریحا به آبجکت self الحاق نشده، اما از شرایط جاری مشخص است که بر روی آن فراخوانی می شود. متد مذکور به کلاس ViewController اعلان می کند که باید view controller را نمایش دهد.
ارسال مقدار true به پارامتر animated، سبب می شود image picker controller به صورت پویا (با انیمیشن) ارائه شود.پارامتر completion به یک completion handler اشاره دارد. Completion handler یک تابع closure است که با اتمام اجرای متد جاری، صدا زده می شود. از آنجایی که پس از اجرای کامل متد، نیاز به انجام عملیات دیگری نیست، مقدار nil را به این پارامتر پاس می دهیم.
در حال حاضر بدنه ی متدselectImageFromPhotoLibrary(_:) بایستی مشابه نمونه ی زیر باشد:
@IBAction func selectImageFromPhotoLibrary(sender: UITapGestureRecognizer) {
// Hide the keyboard.
nameTextField.resignFirstResponder()
// UIImagePickerController is a view controller that lets a user pick media from their photo library.
let imagePickerController = UIImagePickerController()
// Only allow photos to be picked, not taken.
imagePickerController.sourceType = .PhotoLibrary
// Make sure ViewController is notified when the user picks an image.
imagePickerController.delegate = self
presentViewController(imagePickerController, animated: true, completion: nil)
}
پس از اینکه image picker controller به نمایش گذاشته شد، رفتارش (عملیاتی که قادر به اجرای آن ها است) به آبجکت delegate محول می شود.
برای این که به کاربران این امکان را بدهید تا پس از کلیک بر روی المان، یک عکس را انتخاب کنند، لازم است دو متد زیر از پروتکل UIImagePickerControllerDelegate را پیاده سازی نمایید:
func imagePickerControllerDidCancel(picker: UIImagePickerController)
func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : AnyObject])
متد اول، imagePickerControllerDidCancel(_:)، زمانی صدا خورده می شود که کاربر بر روی دکمه ی Cancel از image picker کلیک می کند. این متد در واقع به شما اجازه می دهد تا UIImagePickerController را از صفحه حذف/محو کنید (و در صورت تمایل، کدی اضافه کنید که عملیات cleanup و پاک سازی داده های غیرضروری از حافظه را انجام می دهد).
جهت پیاده سازی متد imagePickerControllerDidCancel(_:)، مراحل زیر را به ترتیب دنبال نمایید:
1. داخل فایل ViewController.swift، درست در بالای // MARK: Actions ، خط زیر را درج نمایید:
1. // MARK: UIImagePickerControllerDelegate
این کد صرفا یک comment است که شما یا هر شخص دیگری که کد برنامه ی شما را می خواند را در پیمایش در پروژه و فهم کاربرد بخش های مختلف آن یاری می کند. این comment اعلان می کند که این بخش از کد مربوط به پیاده سازی متدهای image picker می باشد.
2. حال در زیر comment، متد زیر را وارد نمایید:
func imagePickerControllerDidCancel(picker: UIImagePickerController) {
}
3. داخل بدنه ی متد دستور زیر را تایپ کنید:
// Dismiss the picker if the user canceled.
dismissViewControllerAnimated(true, completion: nil)
این کد، فرایند حذف شدن image picker controller از نمایشگر را پویانمایی می کند (با انیمیشن آن را نظر کاربر پنهان می کند).
بدنه ی متد imagePickerControllerDidCancel(_:) هم اکنون بایستی مشابه نمونه ی زیر باشد:
func imagePickerControllerDidCancel(picker: UIImagePickerController) {
// Dismiss the picker if the user canceled.
dismissViewControllerAnimated(true, completion: nil)
}
دومین متدی که باید از پروتکل UIImagePickerControllerDelegate پیاده سازی کنید، imagePickerController(_:didFinishPickingMediaWithInfo:) می باشد. این متد زمانی فرخوانی می شود که کاربر عکس دلخواه خود را انتخاب می نماید.
با اجرا شدن متد نام برده، این فرصت در اختیار شما قرار می گیرد تا بر روی عکس یا عکس هایی که کاربر انتخاب کرده، عملیات مورد نظر را انجام دهید. در مثال جاری، شما عکس مورد انتخاب کاربر را گرفته و در UI به نمایش می گذارید.
جهت پیاده سازی متد imagePickerController(_:didFinishPickingMediaWithInfo:)، مراحل زیر را به ترتیب دنبال نمایید:
1. در زیر متد imagePickerControllerDidCancel(_:)، این کد را درج نمایید:
func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : AnyObject]) {
}
2. در بدنه ی متد، کد زیر را وارد نمایید:
// The info dictionary contains multiple representations of the image, and this uses the original.
let selectedImage = info[UIImagePickerControllerOriginalImage] as! UIImage
info در کد فوق، یک dictionary است که علاوه بر عکس اولیه و انتخاب شده در image picker، نسخه ی ویرایش شده ی آن را نیز دربر می گیرد. در اینجا از نسخه ی ساده و ویرایش نشده ی عکس برای غذای مورد نظر استفاده می کنیم. کد حاضر نیز همین عکس (نسخه ی ویرایش نشده) را داخل ثابت selectedImage ذخیره می کند.
3. این کد را به بدنه ی متد اضافه کنید تا عکس مورد نظر در متغیر photoImageView (یک outlet که قبلا به فایل اضافه کردید) قرار داده شده و برای کاربر به نمایش درآید.
// Set photoImageView to display the selected image.
photoImageView.image = selectedImage
4. حال با افزودن کد زیر به متد، image picker را از حالت نمایش خارج کنید:
// Dismiss the picker.
dismissViewControllerAnimated(true, completion: nil)
در حال حاضر بدنه ی متد imagePickerController(_:didFinishPickingMediaWithInfo) شما بایستی مشابه زیر باشد:
func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : AnyObject]) {
// The info dictionary contains multiple representations of the image, and this uses the original.
let selectedImage = info[UIImagePickerControllerOriginalImage] as! UIImage
// Set photoImageView to display the selected image.
photoImageView.image = selectedImage
// Dismiss the picker.
dismissViewControllerAnimated(true, completion: nil)
}
تست کنید: برنامه را اجرا کنید. بایستی پس از کلیک بر روی image view، یک image picker به نمایش درآمده و به شما اجازه ی انتخاب عکس دلخواه را بدهد. برای اینکه برنامه FoodTracker بتواند به بخش Photos دسترسی داشته و به کاربر اجازه ی انتخاب عکس را بدهد، باید بر روی دکمه ی OK در کادر محاوره ای کلیک نمایید. پس از آن، با توجه به کدی که برای برنامه نوشته شده، باید بتوانید با کلیک بر روی Cancel، انتخابگر عکس (image picker) را ببندید یا Camera Roll را باز کرده، عکس دلخواه را از آن انتخاب نمایید و متعاقبا در image view به نمایش بگذارید.
اگر به عکس های موجود در محیط شبیه ساز (Simulator) نگاه کنید، متوجه می شوید که عکسی در رابطه با غذا در آن وجود ندارد. می توانید عکس های مد نظر خود را مستقیما وارد محیط شبیه ساز نموده و در image view نمایش دهید یا پس از دانلود پروژه ی این آموزش، به پوشه ی Images/ مراجعه نموده و از عکس نمونه ی داخل این فولدر استفاده کنید.
جهت افزودن عکس جدید به شبیه ساز، مراحل زیر را دنبال نمایید:
1. ابتدا برنامه را در محیط شبیه ساز اجرا کنید.
2. عکس دلخواه را انتخاب نمایید.
3. عکس مورد نظر را با اشاره گر موس کشیده و در محیط شبیه ساز جایگذاری کنید.