خبرنامه
 
پست الکترونیکی خود را وارد نمایید
شماره خبر : 887
تاریخ انتشار :
استفاده از قابلیت view debugging تحت بستر Xcode 6

استفاده از قابلیت view debugging تحت بستر Xcode 6

اگر از نسخه ششم نرم افزار Xcode استفاده کرده باشید حتماً تا العان به تغییرات و بهبودات عملکردی‌ و مهمی که سازندگان اپلی تحت این نرم افزار اعمال کرده اند پی برده اید. یکی از قابل توجه ترین پیشرفت های ایجاد شده تحت این نرم افزار در واقع ویژگی View Debugging است. اغلب اوقات رابط کاربری یک برنامه انتظار عملکردی‍‌‌‌ ای که کاربران از آن دارند را برآورده نمی کند. به عنوان مثال بخش های مختلف(Viewها) ممکن است نمایش داده نشوند و یا حتی ممکن است در صورت نمایان شدن، به درستی نتوان از آنها به علت نقص در نمایش استفاده کرد. در این مقاله آموزشی بررسی خواهیم کرد که چگونه از ویژگی های جدید view debugging  تحت نرم افزار Xcode بهره برده تا به آسانی بتوانیم مسائل و مشکلات موجود را شناسایی کرده و در یک رابط کاربری نسبت به رفع آنها اقدام کنیم. با ما همراه باشید.
Demo Project :
برای شروع کار ابتدا پروژه مربوطه را از طریق لینک زیر دانلود کرده و فایل ViewDebugging.xcodeproj را باز کنید.
download the sample project from GitHub
این پروژه شامل یک برنامه چندزبانه (Tabbed) همراه با چند View Controller،یک application delegate و از یک  storyboardنیز برخوردار است. این برنامه در اصل برای پلتفرم آیفون طراحی شده است لیکن روی هر دستگاهی به خوبی قابلیت اجرا دارد چرا که از لیوت adaptiveی استفاده می کند که در iOS 8 معرفی شده است.
هدف کلی این برنامه این است که یک لیست ساده وظایف را ایجاد کند. این برنامه شامل یک صفحه خلاصه برای نمایش اطلاعاتی همچون تعداد ایتم ها در لیست وظایف، آواتار کاربر و حساب توییتر آنها می باشد. حال برنامه را در شبیه ساز iOS ابتدا با کلیک بر روی گزینه build و run در سمت چپ و بالای صفحه نمایش اجرا کنید.

بلافاصه با انجام این کار شاید شما با یک مشکل در رابط کاربری مواجه شوید. در واقع گویی table view هیچ داده ای را در خود نمایش نمی دهد. اکنون فایل FirstViewController.swift را باز کرده و چند خط کد زیر را در این فایل پیدا کنید :

 

var mockNotesDataSource: [String] = ["Do some laundry", "Finish homework", "Walk the dog", "Learn about view debugging"]
{
    didSet
    {
        self.tableView.reloadData()
    }
}

 

متغیر mockNotesDataSource  در واقع به عنوان منبع داده table view  مورد استفاده قرار می گیرد. ما در این مکان از قابلیت های نظارتی مشخصه Swift بهره می بریم. به ازای این کار table view نیز به صورت خودکار هر زمان که منبع داده تغییری بکند از نو بارگذاری خواهد شد.  با بررسی چند خط کد بالا، در می یابیم که 4 آیتم باید در لیست وظایف نمایش داده شوند. که البته به نظر می رسد چیزی اشتباه صورت گرفته است.
2-فعال سازی قابلیت View Debugging :
در حال حاضر به نظر می رسد مشکلی در رابطه با رابط کاربری وجود داشته باشد. در حالی که برنامه در حین اجرا می باشد روی گزینه Debug View Hierarchy که در بخش پایین رابط قرار گرفته کلیک کنید. راه دیگر فعال سازی این بخش این است که مسیر Debug > View Debugging > Capture View Hierarchy را در نرم افزار طی کرده تا view debugging را فعال کنید.

زمانی که view debugging در حالت فعال قرار گرفت، نرم افزار Xcode یک عکس از view hierarchy متعلق به برنامه گرفته و آن را تحت حالت سه بعدی نمایش نمایش می دهد. در واقع این حالت یک نمای تکه پاره شده از رابط کاربری را به ما نشان می دهد. این تصویر مواردی همچون view hierarchy متعلق به برنامه، مکان، حاشیه، و اندازه هر یک از نماها را مشخص کرده، به اضافه اینکه نشان می دهد نماها چگونه با یکدیگر ارتباط برقرار می کنند.
با نگاه به بخش رندر سه بعدی، ما می توانیم همان لیست وظایفی را ببینیم که به خوبی در حالی بارگذاری بوده، لیکن، سلول های table view خیلی عریض به نظر می رسند.

حال خطایابی را تحت این برنامه متوقف کرده و به بخش Main.Storyboard مراجعه کنید تا مشکل مربوطه را حل و فصل نماییم. اکنون روی table view کلیک کرده و از طریق مسیر Editor > Resolve Auto Layout Issues > گزینه Reset to Suggested Constraints را برگزینید.

سپس برنامه را یک بار دیگر build و اجرا کرده تا ببینیم رابط کاربری به درستی نمایش داده می شود یا خیر. حال روی گزینه  Debug View Hierarchy کلیک کرده تا نگاه دقیقتری به چند ویژگی دیگر view debugging داشته باشیم. با ما همراه باشید.
3-ویژگی های View Debugging :
شما می توانید روی هر بخشی در داخل نمای سه بعدی کلیک کرده و درگ کنید تا رابط کاربری را مطابق میل خود به نمایش درآورید. اکنون نمای سه بعدی را به سمت چپ یا راست چرخانده تا بتوانید table view را انتخاب کنید.
بعد از اینکه یک نمای مورد انتخاب قرار گرفت، نرم افزار Xcode آن نما را برجسته کرده و بخش های Size و Object را در سمت راست محیط نمایان می کند. برای اینکه مطمئن شویم که Table View در حالت انتخاب قرار گرفته است،  نوار پرش یا همان jump barای که در بخش بالا قرار گرفته را مورد بررسی قرار داده تا ببینید UITableView به عنوان آخرین آیتم در سمت راست انتخاب شده است یا خیر.

بخش های نظارتی Size و Object دربردارنده اطلاعات مفیدی و کاربردی‌ای بوده که کاربر می تواند از آنها برای پیشبرد بهتر و سریعتر کار خود بهره بگیرد. در گذشته، برنامه نویسان مجبور بودند روی دستورات وقایع (log statement) یا نقاط شکست(breakpoints) تکیه کرده تا پیکربندی نما را مورد بررسی و بازبینی قرار دهند.
اکنون بخش Size را در سمت راست باز کرده و در بخش Auto Layout، می بینید که در حال حاضر محدودیت های درست تحت این نما به کار گرفته شده اند.
در بخش نظارتی Object، شما می توانید مشخصات نمای انتخاب شده را مورد بررسی و بازبینی کامل قرار دهید.

درست در بالای بخش debugging در نرم افزار Xcode، 9 گزینه و نوار لغزنده وجود دارد که برای انجام کارهای مربوطه در view debugging مورد استفاده قرار می گیرند.

در بخش زیر به هر یکی از کارهایی که کنترل های مربوطه مسئول انجام آن هستند از سمت چپ به راست اشاره شده است :
adjust spacing between views : با استفاده از این گزینه می توان تعیین کرد که چه مقدار فضا باید بین نماها، نمایش داده شود.
show clipped content : محتویات مشخصی را روی نمایی که در حال نمایش است مشخص می کند.
show constraints : تنها محدودیت های نمای انتخاب شده را نشان می دهد.
reset the viewing area : حالت نمایش سه بعدی را به وضعیت اولیه خود بر می گرداند.
adjust the view mode :  با استفاده از این گزینه می توانید تعیین کنید که نمایش سه بعدی تنها با محتوا، به صورت Wireframe و یا ترکیبی از هر دو مورد باشد.
zoom out : از این گزینه می توانید به منظور کوچک نمایی نمای سه بعدی بهره ببرید.
zoom in : به منظور بزرگنمایی محیط سه بعدی مورد استفاده قرار می گیرد.
adjust the range of visible views : این گزینه نماها را پنهان کرده و و از نمای پشتی محیط سه بعدی، محیط را نشان داده و تنظیم مقدار لغزنده نیز از سمت راست به چپ نیز اثر معکوس دارد.
برای درک بیشتر نحوه کارکرد هر یک از گزینه ها، پیشنهاد می کنم چند دقیقه ای را با  آنها کار کرده تا با نحوه کارشان به صورت دقیق آشنا شوید. با ما همراه باشید.

4-مرتب سازی به واسطه View Layers :
اکنون برنامه را دوباره Build کرده و اجرا نمایید. سپس زبانه More در بخش پایین رابط کاربری برنامه را تپ کنید. در نگاه اول شاید در رابط کاربری مشکل خاصی دیده نشود، اما واقعاً رفتار دقیقی که مورد انتظار بوده را انجام نمی دهد.  افکت بلوری در بخش بالای تصویر دیده نمی شود. حال برای شناسایی و درک بهتر مشکل view hierarchy را خطایابی کنید.
برای این منظور کار خود را با Pan کردن به سمت چپ یا راست شروع کنید به صورتی که هر چیزی را بتوانید در یک زاویه دیده و مورد بررسی قرار دهید.
سپس نوار لغزان view spacing slider را به مانند تصویر زیر به سمت راست بکشید :

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

حال Main.storyboard را باز کرده و به Second View Controller Scene مراجعه کنید. در بخش document outline که در سمت چپ واقع شده، شیء Second View Controller's View را باز کرده تا ملاحظه کنید  چگونه زیرنماهای آن به ترتیب قرار گرفته اند.
لایه های Xcode به صورت صعودی در داخل document outline قرار گرفته اند. به عبارت دیگر، لایه هایی که در بخش بالای لیست قرار گرفته اند، به عنوان لایه های بنیادین view hierarchy محسوب می شوند.
حل مشکل حال حاضر ساده است. Blur Effect View در واقع زیر Sky Image در زمان اجرای برنامه نمایان خواهد شد چرا که آن اولین نمایی است که در view hierarchy قرار گرفته است. حال روی Blur Effect View  کلیک کرده و آنرا به زیر Sky Image در document outline بکشید. نتیجه حاصله باید به مانند تصویر زیر باشد :

اگر شما برنامه را دوباره اجرا کنید، افکت بلور اینبار باید نمایان شود. حال رابط کاربری برنامه همانطور که طراحی شده بود به نظر می رسد. اکنون اجازه دهید تا نگاهی به برخی ویژگی های debugging متعلق به شبیه ساز iOS بپردازیم تا ببینیم چه کار دیگری می توانیم برای بهبود روند کار انجام دهیم. با ما همراه باشید.
5-بررسی ویژگی های debugging متعلق به شبیه ساز iOS :
ابتدا برنامه را Build کرده و آن را در شبیه ساز iOS اجرا کنید. سپس در حالی که شبیه ساز iOS در حالت انتخاب قرار گرفته است گزینه Color Blended Layers را از منوی Debug تحت بستر Xcode باز نمایید.

همانطور که در تصویر زیر می بینید، رابط کاربری برنامه ترکیبی از رنگ های سبز و قرمز به خود گرفته است. در واقع این الگویی است که به ما نشان می دهد بلندینگ کدام لایه ها فعال شده و کدامین نیز در حالت مات قرار گرفته اند. از نظر بار پردازشی لایه های که blending می شوند زحمت زیادی را به پردازند وارد می کنند بنابراین توصیه من این است که هر جایی که ممکن بود از لایه های مات در برنامه های خود استفاده کنید.

توصیه خود شرکت اپل نیز در مستندات خود این است که سعی کنید به هنگام کار با table viewها، همیشه از لایه های مات بهره ببرید. در واقع یکی از علت های اصلی کارایی ضعیف به هنگام اسکرول کردن در واقع به خاطر وجود محتوای blended است. زمانی که پس زمینه محتوا مات باشد، اسکرول کردن به صورت کلی نرم تر و روان تر خواهد بود.
به عنوان مثال اگر یک کاربر در چنین برنامه ای  صدها آیتم در لیست وظایف داشته باشد ممکن است به علت وجود آیتم های زیاد، نتوان کارایی مطلوبی را به دست آورد. سلول های table view در حال حاضر از لایه های blended استفاده می کنند. چون پس زمینه View متعلق به view controller به صورت پیشفرض سفید تنظیم شده است، چه سلول های table view در حالت مات باشند و چه blended با پس زمینه سفید قرار گرفته باشند کاربر نهایی هیچ تفاوتی را مشاهده نخواهد کرد.
اکنون  Main.storyboard را باز کرده و table view cell prototype را در بخش To Do list Scene در حالت انتخاب قرار دهید. سپس در بخش Attributes Inspector، نوار اسکرول را به بخش Drawing کشیده و Opaque را مورد بررسی قرار دهید.

حال برنامه را build کرده و در حالتی که coloring blended layers در حالت انتخاب قرار گرفته است، برنامه را اجرا کنید. چون اینجا سلول های این table view مات هستند، تحت رنگ سبز پوشیده شده اند که این حالت مشخص می کند آنها به کلی مات هستند.
صرف نظر از این نوع لایه ها، چند ویژگی دیگر نیز وجود دارد که می تواند به شما در انجام خطایابی تحت شبیه ساز iOS کمک کند. در ادامه چند نمونه از این ویژگی های که کارایی بیشتری نسبت به سایرین دارند معرفی شده است :
Toggle Slow Animations in Frontmost App : این ویژگی سبب می شود تمامی انیمیشن ها در برنامه کندتر اجرا شوند. این گزینه زمانی مفید است که در حال خطایابی انیمیشن های پیچیده ای هستیم که آنجور که باید باشند، نیستند. ناگفته نماند شما همچنین می توانید این تنظیمات را با فشار کلید میانبر Command-T فعال کنید.
Color Copied Images : این گزینه سبب می شود یک انعکاس آبی تحت هر تصویر کپی شده ای که از Core Animation استفاده می کند اعمال شود.
Color Misaligned Images : این گزینه تصاویر رنگی ای را ارائه می دهد که از یک انعکاس قرمز رنگ برخوردار هستند. البته این در حالتی است که محدودیت ها به صورت کامل با پیسکل های مقصد هم تراز نشده باشند. همچنین در صورتی که تصویر با استفاده از یک scale factor ترسیم شده باشد، نیز یک انعکاس زردرنگ به آنها اضافه خواهد شد.
Color Off Screen Rendered : این گزینه یک انعکاس زرد را به محتویاتی اضافه می کند که به صورت نامرئی رندر شده باشند.
موردی که نگاه خیلی از برنامه نویسان را به خود بیشتر جلب کرده است در واقع تاثیر نوار وضعیت یا همان status bar به هنگامی است که یک فراخوانی در برنامه شما در حال پیشرفت باشد.
شما می توانید به راحتی این مورد را با تغییر دادن نوار وضعیت در حالی که فراخوانی صورت می گیرد بررسی کنید. البته روش دقیقتر این است که از منوی hardware موجود در شبیه ساز iOS، گزینه Toggle In-Call Status Bar را انتخاب کنید.
برای اینکه ببینید چگونه برنامه شما به چنین رویدادی واکنش نشان می دهد کافی است کلید میانبر Command-T روی صفحه کلید خود را فشار دهید تا slow animations را فعال کنید. هچنین فشار کلید میانبر Command-Y نیز سبب نمایش نوار وضعیت دورن فراخوانی یا in-call خواهد شد. اگر برنامه شما از یک نوار کاوشگر یا همان navigation bar استفاده می کند، سیستم عامل به صورت خودکار مراقب این حالت خواهد بود.

صرف نظر از این نماهای رنگی، شما همیشه باید توجه داشته باشید که شبیه ساز iOS، همچنین می تواند مشکلات مربوط به Core Location را نیز مورد خطایابی و بررسی قرار دهد. شما می توانید یک دستگاه را در یک طول و عرض جغرافیایی مشخص شبیه سازی کنید. ناگفته نماند در این بین مکان های نمونه ای نیز در نرم افزار گنجانده شده که می توانید تحت آن مکان ها دستگاه را شبیه سازی کنید. اگر برنامه شما از سرویس iCloud به منظور مدیریت داده استفاده می کند، شما قادر هستید که به صورت دستی، یک رویداد همسان سازی را تنظیم کنید.
نتیجه گیری :
جدا از اینکه برنامه دمویی که مورد بررسی قرار دادیم خیلی ساده است، اما به هر حال استفاده از تکنیک هایی که در این مقاله به آنها اشاره شد می تواند در ساعت ها وقت شما در پروژه های دیگر صرفه جویی به عمل آورد. به طور کلی شما با استفاده از قابلیت View debugging می توانید نسبت به رفع مشکلات زیادی که در رابط کاربری با آنها روبرو می شوید اقدام کنید.
به جزء interface builder و Xcode، استفاده از ویژگی های خطایابی شبیه سازی iOS می تواند به شما در افزایش سرعت روند کار و همچنین شناسایی تنگناها کمک شایانی بکند.
در نهایت باید عرض کنم که با تغییرات و بهبوداتی که تحت interface builder اعمال شده ما کارهایی را می توانیم انجام دهیم که پیش از این به این سادگی ها قابل انجام نبود. در پایان امیدوارم از این مقاله آموزشی نهایت استفاده را برده باشید.

منبع:code.tutsplus.com

مترجم:هادی نجار

 




تعداد بازدید : 1023

ارسال نظر

سوال امنیتی : مجموع دو عدد 8 و 3 =