دوره تکمیلی آموزش iOS : سفارشی سازی Navigation Bar

در جلسه قبل از دوره تکمیلی آموزش برنامه نویسی iOS ، ما به شما ، نحوه سفارشی سازی ظاهر Tab Bar را نشان دادیم. در این جلسه ، صحبت در مورد نحوه سفارشی سازی UI و استفاده از Appearance API را برای ساخت Navigation Bar جذاب تر ، ادامه خواهیم داد.

در این جلسه ، موارد ذیل را آموزش خواهیم داد:

1. سفارشی سازی View با تصویر پس زمینه.
2. سفارشی سازی UINavigationBar از جمله تصویر پس زمینه و style متن مربوط به tittle.
3. سفارشی سازی ظاهر UIBarButtonItem.

طبق روال ، قصد داریم مفاهیم را با تبدیل یک navigation bar ساده به یک گراف سفارشی شده ، نشان دهیم. از این رو ، برای کمک به شما جهت تمرکز بر یادگیری مبحث سفارشی سازی ، ما پروژه Xcode را برای شما ، آماده کرده ایم.  قبل از ادامه کار ، ابتدا پروژه Xcode را از اینجا Xcode project دانلود نمایید (نکته: پروژه با استفاده از Xcode 4.5 ایجاد شده است).

اگر پروژه ساخته شده را اجرا نمایید ، خواهید دید که navigation UI اپ ساده است. اکنون ، با هم کار خواهیم کرد تا navigation bar سبک بندی شده ، bar button سفارشی سازی شده و تصویر پس زمینه خودمان را به view اختصاص دهیم.

سفارشی سازی View Background

ابتدا ، می خواهیم که پس زمینه view controller را با تصویر موردنظر خود ، تغییر دهیم. اگر شما ، پروژه Xcode را باز نمایید ، خواهید دید که تصاویری را ما برای شما ، اضافه کرده ایم. برای تنظیم تصویر پس زمینه ، فایل “RecipeViewController.m” را باز کرده و کد زیر را به انتهای متد “viewDidLoad” اضافه می کنیم:

self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"common_bg"]];

می توانیم از خصیصه “backgroundColor” مربوط به view ، برای تغییر رنگ پس زمینه استفاده نماییم. ممکن است ندانید که از همین خصیصه می توانیم برای تنظیم تصویر پس زمینه نیز استفاده نماییم. ترفند این است که یک شی UIColor با استفاده از “colorWithPatternImage” ایجاد می کنیم. در طول انجام عملیات طراحی ، تصویر موجود در pattern color به عنوان کاور ، به صورت کاشی کاری ، View area را پوشش می دهد.

بعد از این تغییر ، اپ را کامپایل کرده و اجرا می نماییم. اپ ، باید شبیه تصویر زیر باشد:

سبک بندی UINavigationBar

پیش از iOS 5 ، توسعه دهندگان تنها می توانستند سبک navigation bar را از طریق تعدادی از خصیصه ها تغییر دهند. اما ، مشکل این است که تغییر ات، تنها در navigation bar مربوط به یک view خاص اعمال می شود. در iOS 5 و بعد از آن ، SDK به توسعه دهندگان اجازه می دهد ، سبک بندی navigation bar را با استفاده از Appearance API انجام دهند. به راحتی می توانیم ظاهر navigation bar ها را در سراسر اپ ، با استفاده از appearance proxy ، یعنی ([UINavigationBar appearance]) سفارشی سازی نماییم.

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

فایل “AppDelegate.m” را باز کرده و کد زیر را در متد “application:didFinishLaunchingWithOptions” اضافه می کنیم:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    UIImage *navBackgroundImage = [UIImage imageNamed:@"navbar_bg"];
    [[UINavigationBar appearance] setBackgroundImage:navBackgroundImage forBarMetrics:UIBarMetricsDefault];
 
return YES;
}

اولین خط از کد فوق ، شیء UIImage  را برای تصویر پس زمینه ما که مربوط به navigation bar است ، ایجاد می کند. سپس ، ما از appearance proxy برای تخصیص تصویر استفاده می کنیم.

سفارشی سازی متن عنوان Navigation Bar

در ادامه ، ما سبک فونت مربوط به متن tittle را تغییر خواهیم داد. می توانیم سبک متن را با استفاده از خصیصه های “titleTextAttributes” مربوط به navigation bar ، سفارشی سازی نماییم. می توانیم فونت ، رنگ متن ، رنگ سایه متن و آفست متن سایه (text shadow offset) مربوط به tittle را در text attributes dictionary ، با استفاده از کلیدهای صفت text ، زیر تعیین نماییم:

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

در متد “application:didFinishLaunchingWithOptions” از فایل AppDelegate.m ، کد زیر را اضافه می کنیم:

    [[UINavigationBar appearance] setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys:
                                                           [UIColor colorWithRed:245.0/255.0 green:245.0/255.0 blue:245.0/255.0 alpha:1.0], UITextAttributeTextColor,
                                                           [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8],UITextAttributeTextShadowColor,
                                                           [NSValue valueWithUIOffset:UIOffsetMake(0, 1)],
                                                           UITextAttributeTextShadowOffset,
                                                           [UIFont fontWithName:@"HelveticaNeue-CondensedBlack" size:21.0], UITextAttributeFont, nil]];

کد فوق ، یک سبک متن را برای عنوان navigation bar ارائه می دهد. ما از HelveticaNeue-CondensedBlack   به عنوان نوع فونت استفاده کردیم و رنگ متن را به سفید تنظیم نموده و یک سایه به متن اضافه کردیم.

اکنون ، اپ را دوباره کامپایل و اجرا می کنیم. چیزی که در Navigation bar سفارشی شده ، مشاهده می کنیم ، مطابق تصویر زیر می باشد:

سفارشی سازی ظاهر UIBarButtonItem

در اخر ، قصد داریم که ظاهر کلید back و هم چنین سایر کلیدهای Navigation bar (یعنی UIBarButtonItem) را تغییر دهیم. دوباره ، فایل “AppDelegate.m” را باز کرده و کد زیر را در متد “application:didFinishLaunchingWithOptions” اضافه می کنیم:

    // Change the appearance of back button
    UIImage *backButtonImage = [[UIImage imageNamed:@"button_back"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 13, 0, 6)];
    [[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
 
    // Change the appearance of other navigation button
    UIImage *barButtonImage = [[UIImage imageNamed:@"button_normal"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 6, 0, 6)];
    [[UIBarButtonItem appearance] setBackgroundImage:barButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

ما ابتدا ، اشیاء UIImage را با استفاده از تصاویر خودمان (یعنی button_back.png و button_normal.png) ایجاد می کنیم و سپس ، شی image را به عنوان تصویر پس زمینه مربوط UIBarButtonItem ، تنظیم می کنیم. اما ، متد resizableImageWithCapInsets: چه کاربردی دارد؟ کلیدها در Navigation bar اندازه ثابتی ندارند.. اندازه ها بر اساس طول متن کلید ، به طور خودکار تغییر می یابند. برای داشتن کلید مستطیلی لبه گرد ، احتمالاً شما نمی خواهید که کلید را در تمام جهات بکشید. از این رو ، ما از متد resizableImageWithCapInsets: استفاده می کنیم تا cap inset را به تصویر اضافه نماییم. در حین تغییر اندازه تصویر ، در نواحی تحت پوشش یک cap ، اندازه ها تغییر داده نمی شوند. شکل زیر درک بهتری درباره cap inset به شما می دهد:

با استفاده از ساختار UIEdgeInset ، الگوی cap inset را تعریف می نماییم. UIEdgeInsets ، ساختاری است که مقادیر شناور برای هر cap inset ، بالا ، چپ ، پایین و راست از یک تصویر را مشخص می کند. برای مثال ، خط 1 از کد بالا ، به iOS دستور می دهد که 13 پیکسل سمت چپ و 6 پیکسل سمت راست مربوط به تصویر کلید back ، قابل تغییر اندازه نیستند.

بعد از تغییر کد ، دوباره اپ را کامپایل کرده و اجرا می کنیم. اکنون ، کلیدهای back و edit سفارشی شده اند.

امیدواریم که از آموزش این جلسه ، لذت برده باشید. برای داشتن مرجع ، می توانید کد پروژه را از اینجا  download the final Xcode project  دانلود نمایید. Appearance proxy  ، برای توسعه دهندگان iOS ، روش بسیار ساده تری را برای سفارشی سازی کنترل های UI فراهم می نماید. شما می توانید از این قابلیت برای جذابیت بیشتر اپ خود استفاده نمایید. در جلسه بعد ، به شما نحوه سبک بندی سایر مؤلفه های UI مانند UITableView  در اپ iOS را نشان خواهیم داد.