سفارشی سازی Navigation Bar و Status Bar در iOS 7

سفارشی سازی Navigation Bar و Status Bar در iOS 7

در آخرین نسخه iOS ، تغییرات بصری چشم گیری ارائه شده است. از منظر توسعه دهنده ، navigation bar و status bar دو تغییر قابل توجهی هستند که نیاز است این تغییرات در اپ ها نیز اعمال شوند. status bar جدید شفاف است ، به این معنی که navigation bar پشت آن قابل نمایش است. در برخی موارد ، می توان یک تصویر پس زمینه را برای navigation bar اعمال نمود ، این تصویر از پشت status bar قابل مشاهده است.

برخی از مواردی که در این آموزش آنها را پیگیری خواهیم نمود ، عبارتند از:

• تنظیم رنگ پس زمینه navigation bar
• استفاده از تصویر پس زمینه در navigation bar
• سفارشی سازی رنگ پشت کلید
• تغییر فونت عنوان navigation bar
• افزودن آیتم ها چندگانه مربوط به کلیدهای bar
• تغییر دادن سبک status bar
• مخفی کردن status bar

برای انجام این پروژه ، نیاز است که از Xcode 5 استفاده شود تا کدها همان طور که در این آموزش نشان داده شده اند ، اجرا شوند. بنابراین ، اگر هنوز از ورژن های قدیمی استفاده می نمایید ، قبل از اجرای پروژه Xcode نمونه ، مطمئن شوید که Xcode خود را به ورژن 5 ارتقاء داده باشید.

Navigation Bar پیش فرض در iOS 7

قبل از این که وارد بخش سفارشی سازی شویم ، بیایید ابتدا ، نگاهی به navigation bar پیش فرض iOS 7 که توسط Xcode 5 تولید شده است ، بیاندازیم. به سادگی پروژه Xcode را با استفاده از تمپلت Single View Controller  ایجاد می کنیم.  view controller در یک navigation controller تعبیه شده است. اگر نمی خواهید که کار را از ابتدا شروع نمایید ، می توانید تمپلت پروژه را از اینجا download this sample Xcode project دانلود نمایید.

Xcode 5 در شبیه سازهای iOS 6 و iOS 7 همراه است. سعی می کنیم پروژه نمونه را با استفاده از هر دو ورژن شبیه ساز اجرا نماییم.

همان طور که در تصویر فوق دیده می شود ، navigation bar در iOS 7 به طور پیش فرض با status bar در هم آمیخته است. رنگ پیش فرض نیز به خاکستری روشن تغییر یافته است.

تغییر دادن رنگ پس زمینه Navigation Bar

در iOS 7 ، خصیصه tintColor دیگر برای تنظیم رنگ نوار استفاده نمی شود. به جای آن ، از خصیصه barTintColor  برای تغییر دادن رنگ پس زمینه استفاده می شود. می توانیم کد زیر را در متد didFinishLaunchingWithOptions:  از فایل AppDelegate.m وارد می کنیم:

[[UINavigationBar appearance] setBarTintColor:[UIColor yellowColor]];

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

به طور معمول ، می خواهیم که از رنگ موردنظر خود استفاده نماییم ، زیرا رنگ سیستم جذاب به نظر نمی آید. در اینجا ، استفاده از ماکرو RGB color برای انجام تنظیمات بسیار مفید است:

#define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

به سادگی ، کد فوق را در ابتدای فایل  AppDelegate.m قرار می دهیم و از آن برای ایجاد شیء UIColor با هر رنگ BGB که می خواهیم ، ایجاد می نماییم. در ادامه یک مثال آورده شده است:

[[UINavigationBar appearance] setBarTintColor:UIColorFromRGB(0x067AB5)];

به طور پیش فرض ، خصیصه translucent  از navigation bar به مقدار YES تنظیم شده است. علاوه بر این ، یک سیستم blur (خنثی) برای تمام navigation bar ها اجرا شده است. بر اساس این تنظیم ، iOS 7 رنگ نوار را به خنثی تغییر می دهد. در اینجا ، navigation bar های نمونه با تنظیمات شفاف مختلف آورده شده است:

برای فعال نمودن خصیصه translucent  ، می توانیم به سادگی navigation bar را در Storyboard در بخش Attribute Inspectors انتخاب نماییم. چک باکس translucent  را انتخاب نمی کنیم.

استفاده از تصویر پس زمینه در Navigation Bar

اگر اپ ما از تصویر سفارشی برای پس زمینه نوار استفاده نماید ، نیاز داریم که یک تصویر “بلندتر” فراهم نمایید تا در پشت status bar گسترش یابد. ارتفاع navigation bar از ، 44 points  معادل با (88 پیکسل) به 64 points  معادل با (128 پیکسل) تغییر می یابد.

می توانیم از متد setBackgroundImage:  برای تخصیص یک تصویر سفارشی برای Navigation bar استفاده نماییم. در اینجا یک خط کد برای تنظیم تصویر پس زمینه داریم:

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"nav_bg.png"] forBarMetrics:UIBarMetricsDefault]; 

پروژه Xcode نمونه با دو تصویر پس زمینه همراه است: nav_bg.png و nav_bg_ios7.png . سعی می کنیم آنها را تست نماییم.

تغییر دادن فونت عنوان Navigation Bar

همانند iOS 6 ، می توانیم سبک متن را با استفاده از خصیصه های “titleTextAttributes” از navigaton bar سفارشی سازی نماییم. می توانیم فونت ، رنگ متن ، رنگ سایه متن و آفست سایه متن را برای title در دیکشنری صفات متن با استفاده از کلیدهای صفات متن زیر تعیین نماییم:

• UITextAttributeFont  - کلید فونت متن.
• UITextAttributeTextColor  - کلید رنگ متن.
• UITextAttributeTextShadowColor  - کلید رنگ سایه متن.
• UITextAttributeTextShadowOffset  - کلید آفست استفاده شده برای سایه متن.

در اینجا ، قطعه کد نمونه برای تغییر سبک فونت عنوان navigation bar آورده شده است:

    NSShadow *shadow = [[NSShadow alloc] init];
    shadow.shadowColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8];
    shadow.shadowOffset = CGSizeMake(0, 1);
    [[UINavigationBar appearance] setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys:
                                                           [UIColor colorWithRed:245.0/255.0 green:245.0/255.0 blue:245.0/255.0 alpha:1.0], NSForegroundColorAttributeName,
                                                           shadow, NSShadowAttributeName,
                                                           [UIFont fontWithName:@"HelveticaNeue-CondensedBlack" size:21.0], NSFontAttributeName, nil]];

اگر تغییرات فوق را در اپ نمونه اعمال نماییم ، عنوان navigation bar باید شبیه تصویر زیر باشد:

سفارشی سازی رنگ کلید back

در iOS 7 ، تمام کلیدها بدون حاشیه هستند. کلید back در حال حاضر ، به صورت یک V خوابیده با عنوان صفحه قبلی است (یا اگر صفحه قبلی nil باشد ، عنوان کلید فقط به صورت ‘back’ نمایان می شود). برای رنگ کردن کلید back ، می توانیم خصیصه tintColor را تغییر دهیم ، که یک روش سریع و ساده برای رنگ کردن اپ با رنگ سفارشی می باشد. قطعه کد زیر یک نمونه می باشد:

[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];

لطفاً توجه شود که خصیصه tintColor  علاوه بر کلید back ، بر روی تمام عناوین کلیدها و تصاویر کلیدها تآثیرگذار است.

اگر بخواهیم که یک تصویر سفارشی را با تصویر پیش فرض  chevronجایگزین نماییم ، می توانیم مقادیر backIndicatorImage  و backIndicatorTransitionMaskImage  را برای تصویر خود تنظیم نماییم.

    [[UINavigationBar appearance] setBackIndicatorImage:[UIImage imageNamed:@"back_btn.png"]];
    [[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:[UIImage imageNamed:@"back_btn.png"]];

رنگ تصویر توسط خصیصه tintColor  کنترل شده است:

استفاده از تصویر برای عنوان Navigation Bar

آیا نمی خواهید که عنوان navigation bar به صورت یک متن ساده نمایش داده شود؟ در این صورت ، می توانیم عنوان را با یک تصویر یا یک لوگو با استفاده از کد زیر جایگزین نماییم:

self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"appcoda-logo.png"]];

به سادگی خصیصه titleView را تغییر می دهیم و آن را با یک تصویر سفارشی مرتبط می کنیم. این یک قابلیت جدید در iOS 7 نیست. این قابلیت برای ورژن های پایین تر iOS نیز قایل اجرا می باشد.

افزودن آیتم های چندگانه کلیدهای Bar

ممکن است که بخواهیم بیش از یک آیتم کلید نوار در یک سمت navigation bar داشته باشیم. خصیصه های leftBarButtonItems و rightBarButtonItems به ما این امکان را می دهند که آیتم های کلید سفارشی نوار را در سمت راست/چپ navigation bar اختصاص دهیم. ممکن است که بخواهیم یک دوربین ، و یک کلید share در سمت راست نوار قرار دهیم. می توانیم از کد زیر برای این منظور استفاده نماییم:

    UIBarButtonItem *shareItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:nil];
    UIBarButtonItem *cameraItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCamera target:self action:nil];
    
    NSArray *actionButtonItems = @[shareItem, cameraItem];
    self.navigationItem.rightBarButtonItems = actionButtonItems;

نتیجه زیر از تغییرات فوق حاصل می شود:

تغییر دادن سبک Status Bar

در ورژن های قدیمی تر iOS ، نوار status همیشه در سبکی با رنگ سیاه بود که امکان اعمال تغییرات زیادی در آن وجود نداشت. با انتشار iOS 7 ، به ما این امکان داده شد که بتوانیم ظاهر status bar را در هر view controller تغییر دهیم. می توانیم از ثابت UIStatusBarStyle برای تعیین این که آیا محتوای نوار status باید محتوای تیره باشد یا روشن ، استفاده نماییم. به طور پیش فرض ، نوار status با محتوای تیره نمایش داده می شود. به عبارت دیگر ، آیتم هایی مانند time ، شاخص باتری و سیگنال Wi-Fi به رنگ تیره نمایش داده می شوند. اگر از یک navigation bar با پس زمینه تیره استفاده نماییم ، در پایان کار ، با چیزی شبیه به تصویر زیر مواجه می شویم:

در این مورد ، احتمالاً نیاز به تغییر سبک نوار status از تیره به روشن داریم. دو روش برای انجام این کار وجود دارد. در iOS 7 ، می توانیم سبک نوار status را از طریق یک view controller تکی توسط preferredStatusBarStyle کنترل نماییم:

-(UIStatusBarStyle)preferredStatusBarStyle 
{ 
    return UIStatusBarStyleLightContent; 
}

در اپ نمونه ، به سادگی کد بالا را در فایل RecipeNavigationController.m می گذاریم و نوار status با محتوای روشن نمایش داده خواهد شد.

متد معرفی شده در کد فوق روش ارجح برای تغییر دادن سبک status bar در iOS 7 می باشد. به طور جایگزین ، می توانیم سبک status bar را با استفاده از متد UIApplication statusBarStyle  نیز تنظیم نماییم. اما ، ابتدا نیاز خواهیم داشت که یک “View controller-based status bar appearance” انتخاب نماییم و در بخش Info tab مربوط به target پروژه ، یک کلید جدید به نام “View controller-based status bar appearance” وارد کرده و مقدار آن را به NO تنظیم می کنیم.

از طریق غیر فعال کردن “View controller-based status bar appearance” ، می توانیم سبک نوار status را با کد زیر تغییر دهیم:

[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];

مخفی کردن Status Bar

در مواردی ممکن است که بخواهیم نوار status را مخفی نماییم ، در این صورت متد prefersStatusBarHidden: در view controller را نادیده می گیریم:

- (BOOL)prefersStatusBarHidden
{
 return YES;
}

خلاصه

در iOS 7 ، به توسعه دهندگان آزادی عمل بیشتری در سفارشی سازی ظاهر navigation bar و status bar ارائه شده است. اگر بخواهید که اپ خود را از iOS 6 به iOS 7 انتقال دهید ، یا در حال توسعه یک اپ جدید هستید ، امیدواریم که این آموزش برای شما مفید واقع شود.