سفارشی سازی Tab Bar در iOS با مثال

دوره تکمیلی : نحوه سفارشی سازی پس زمینه و ظاهر Tab Bar

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

زمانی که یک اپ معروف را بررسی می کنید ، مطمئناً ، به طراحی سفارشی tab bar آن ، توجه خواهید کرد. سؤالی که در بین خوانندگان به وجود می آید ، چگونگی ایجاد تغییر در ظاهر tab bar اپ می باشد. در این آموزش ، ما به شما نحوه انجام این کار را نشان خواهیم داد. با معرفی API مربوط به Appearance در iOS 5 ،  سفارشی سازی کنترل های UI بسیار ساده تر شده و جلوه های منحصر به فردی ،  به اپ ها می دهد.

Appearance proxy یک شیء است که از آن برای تغییر appearance پیش فرض اشیاء بصری مانند view ها و آیتم های bar ، استفاده می کنیم. کلاس هایی که با پروتکل UIAppearance مطابقت دارند ، استفاده از appearance را پشتیبانی می کنند. برای تغییر دادن appearance پیش فرض چنین کلاسی ، با استفاده از متد کلاس appearance ، شیء proxy آن را بازیابی می کنیم و متدهای شیء را برای تنظیم مقادیر پیش فرض جدید ، فراخوانی می کنیم. یک proxy object ، متدها و خصیصه های مربوط به کلاس proxy خود را اجرا می کند ، که با ماکرو UI_APPEARANCE_SELECTOR برچسب گذاری شده اند. برای مثال ، می توانیم با استفاده از شیء proxy ، برای تغییر رنگ tint (از طریق خواص progressTintColor یا trackTintColor ) از کلاس UIProgressView استفاده کنیم.

طبق روال ، اپ نمونه ایی را برای درک بهتر مفاهیم سفارشی سازی ، خواهیم ساخت. این اپ قابلیت اجرایی ندارد ، اما ، تمرکز اصلی ما این است که به شما نشان دهیم که چگونه Appearance API به کار برده می شود و ظاهر tab bar را که شامل رنگ تصویر پس زمینه و رنگ عنوان می باشد ، چگونه تغییر می یابد. هم چنین ، تصاویر UITabBarItem را نیز تغییر خواهیم داد.  بیایید ، ابتدا ، یک نگاهی به نسخه نهایی اپ ، بیاندازیم.

درک UITabBar  و UITabBarItem

قبل از این که در مورد API کنکاش کنیم ، ابتدا نگاهی به نحوه طراحی UITabBar و UITabBarItem می اندازیم:

تصویر فوق ، باید درک بهتری از این که چگونه می توانیم کنترل های UI را سفارشی سازی نماییم ، به شما بدهد. اکنون ، بیایید کار را شروع کنیم و یک اپ نمونه را با هم بسازیم.

ایجاد یک اپ Tab Bar نمونه

ابتدا ، پروژه Xcode را با استفاده از تمپلت “Tabbed Application” ایجاد می کنیم. اجازه دهید نام پروژه را “CustomTabApp” قرار دهیم و پارامترهای پروژه را مطابق تصویر زیر ، تنظیم نماییم:

بعد از این که Xcode ، پروژه را ساخت ، مجموعه تصاویر را از اینجا  download this image set دانلود کرده و فایل تصاویر را پروژه Xcode  خود ، اضافه می کنیم.

افزودن Tab های بیشتر به Tab Bar Controller

به Storyboard رفته و رابط کاربری را طراحی می نماییم. از آن جایی ، این پروژه برای اولین بار تولید می شود ، تنها با دو آیتم tab bar ، همراه است. بیایید دو مورد دیگر نیز به آن اضافه کنیم (نکته : اگر با مفاهیم tab bar آشنایی ندارید ، آموزش های قبلی ما درباره نحوه ایجاد یک tab bar controller با استفاده از Storuyboard ، را مطالعه نمایید. )

به سادگی دو View controller را اضافه کرده و آنها را با Tab Bar Controller ، مرتبط می سازیم. کلید کنترل صفحه کلید را فشار داده و نگه می داریم ، روی Tab Bar Controller کلیک کرده و آن را به داخل view controller جدید ، درگ می کنیم. “view controllers” را برای گزینه Relationship Segue ، انتخاب می کنیم.

پس از انجام این کار ، باید یک Tab Bar Controller با چهار tab داشته باشیم. اپ را اجرا کرده و ظاهر آن را تست می نماییم:

تغییر عنوان و آیکون مربوط به آیتم های Tab Bar

در ادامه ، فایل “CustomTabAppAppDelegate.m” را انتخاب کرده و متد “didFinishLaunchingWithOptions” را مطابق کدهای زیر ، ویرایش می کنیم:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Assign tab bar item with titles
    UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;
    UITabBar *tabBar = tabBarController.tabBar;
    UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];
    UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:1];
    UITabBarItem *tabBarItem3 = [tabBar.items objectAtIndex:2];
    UITabBarItem *tabBarItem4 = [tabBar.items objectAtIndex:3];
    
    tabBarItem1.title = @"Home";
    tabBarItem2.title = @"Maps";
    tabBarItem3.title = @"My Plan";
    tabBarItem4.title = @"Settings";
    
    [tabBarItem1 setFinishedSelectedImage:[UIImage imageNamed:@"home_selected.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"home.png"]];
    [tabBarItem2 setFinishedSelectedImage:[UIImage imageNamed:@"maps_selected.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"maps.png"]];
    [tabBarItem3 setFinishedSelectedImage:[UIImage imageNamed:@"myplan_selected.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"myplan.png"]];
    [tabBarItem4 setFinishedSelectedImage:[UIImage imageNamed:@"settings_selected.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"settings.png"]];
 
    return YES;
}

کدهای فوق بسیار ساده هستند ، اما اجازه دهید خط به خط کدها را شرح دهیم:

خط 4-9 : از آنجایی که از تمپلت Tabbed Application  مربوط به Xcode را استفاده می کنیم ، UITabBarController به عنوان root view controller ، تعیین شده است. از طریق tabBarController ، نیز می توانیم هر آیتم tab جداگانه را بازیابی کنیم.

خط 11- 14 : تخصیص عنوان به هر کدام از آیتم های tab bar.

خط 16- 19 : تنظیم تصویر مربوط به هر کدام از آیتم های tab bar. دو نوع تصویر وجود دارند: تصاویر FinishedSelectedImage  و تصاویر FinishedUnselectedImage. وقتی که کاربر یک آیتم tab را انتخاب می کند ، آیتم tab انتخاب شده ، با “FinishedSelectedImage” ، برجسته خواهد شد ، در حالی که مابقی آیتم های tab ، “FinishedUnselectedImage” را نمایش خواهند داد.

وقتی که اپ را دوباره اجرا کنیم ، نحوه عملکرد آن ، شبیه تصویر زیر است:

سبک بندی Tab Bar

در ادامه ، تصویر پس زمینه کل tab bar و selection indicator را تغییر خواهیم داد. همان طور که قبلاً گفتیم ، Appearance API ، باعث می شود که سفارشی سازی پس زمینه ، بسیار ساده تر انجام شود. کد زیر را به متد “didFinishLaunchingWithOptions” اضافه می کنیم:

    UIImage* tabBarBackground = [UIImage imageNamed:@"tabbar.png"];
    [[UITabBar appearance] setBackgroundImage:tabBarBackground];
    [[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"tabbar_selected.png"]];

این کد ، به اپ می گوید که از “tabbar.png” ، به عنوان تصویر پس زمینه tab bar (به ابعاد 320 در 49 پیکسل ) استفاده نماید. هم چنین ، تصویر selection indicator را که تناسب بهتری با پس زمینه جدید دارد ، به روز رسانی می کنیم.

اپ را دوباره اجرا می کنیم. اکنون باید tab bar بهتر به نظر بیایید:

تغییر رنگ متن آیتم Tab Bar

به طور پیش فرض ، رنگ عنوان Tab  های انتخاب نشده ، خاکستری می باشد ، در حالی که رنگ tab انتخاب شده ، سفید می باشد. برای تغییر رنگ ، از دیکشنری صفات (dictionary of attributes) با کلید UITextAttributeTextColor استفاده می کنیم:

    [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                                   [UIColor whiteColor], UITextAttributeTextColor,
                                                   nil] forState:UIControlStateNormal];
    UIColor *titleHighlightedColor = [UIColor colorWithRed:153/255.0 green:192/255.0 blue:48/255.0 alpha:1.0];
    [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                                       titleHighlightedColor, UITextAttributeTextColor,
                                                       nil] forState:UIControlStateHighlighted];

کد فوق را به متد “didFinishLaunchingWithOptions” اضافه می کنیم. برای tab های انتخاب نشده (یعنی با وضعیت “UIControlStateNormal”) ، رنگ متن را به سفید تغییر می دهیم. برای tab انتخاب شده ، می خواهیم که یک رنگ سبز خاصی داشته باشیم که در کلاس UIColor ، نمی توانیم آن را پیدا کنیم. بنابراین ، یک شیء color جدید را با کد رنگ خاص (یعنی red:153 و green:192 و blue: 48 ) ، مقداردهی اولیه می کنیم.

گام آخر ، اجرای اپ و بررسی نتیجه کار می باشد. اکنون باید یک tab bar کاملاً سفارشی شده ، داشته باشیم.

کد کامل

برای راحتی شما و داشتن مرجع ، در ادامه می توانید به کد کامل سفارشی سازی tab bar ،  دسترسی داشته باشید:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Assign tab bar item with titles
    UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;
    UITabBar *tabBar = tabBarController.tabBar;
    UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];
    UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:1];
    UITabBarItem *tabBarItem3 = [tabBar.items objectAtIndex:2];
    UITabBarItem *tabBarItem4 = [tabBar.items objectAtIndex:3];
    
    tabBarItem1.title = @"Home";
    tabBarItem2.title = @"Maps";
    tabBarItem3.title = @"My Plan";
    tabBarItem4.title = @"Settings";
    
    [tabBarItem1 setFinishedSelectedImage:[UIImage imageNamed:@"home_selected.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"home.png"]];
    [tabBarItem2 setFinishedSelectedImage:[UIImage imageNamed:@"maps_selected.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"maps.png"]];
    [tabBarItem3 setFinishedSelectedImage:[UIImage imageNamed:@"myplan_selected.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"myplan.png"]];
    [tabBarItem4 setFinishedSelectedImage:[UIImage imageNamed:@"settings_selected.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"settings.png"]];
 
    
    // Change the tab bar background
    UIImage* tabBarBackground = [UIImage imageNamed:@"tabbar.png"];
    [[UITabBar appearance] setBackgroundImage:tabBarBackground];
    [[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"tabbar_selected.png"]];
    
    // Change the title color of tab bar items
    [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                                       [UIColor whiteColor], UITextAttributeTextColor,
                                                       nil] forState:UIControlStateNormal];
    UIColor *titleHighlightedColor = [UIColor colorWithRed:153/255.0 green:192/255.0 blue:48/255.0 alpha:1.0];
    [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                                       titleHighlightedColor, UITextAttributeTextColor,
                                                       nil] forState:UIControlStateHighlighted];
 
 
    return YES;
}

خلاصه

در این آموزش ، ما به شما نشان دادیم که چگونه در ظاهر tab bar با استفاده از Appearance API ، تغییر ایجاد نماییم. اگر یک اپ را برای خودتان توسعه داده اید و یا اپ کامل شده ای مانند Restaurant App tutorial را دارید ، می توانید با اعمال تغییرات اندکی ، tab bar آن را سفارشی سازید.