【iOS开发技术】将iOS6 原生Navigtaion和Tab 修改的接近iOS7的样式

本文提供了一套详细的iOS6导航栏和工具栏定制指南,包括背景色、字体、图标颜色等调整方法,以及如何使界面风格接近iOS7。同时,介绍了TabBar的样式修改,如选中框透明化、背景图设置和TabBarItem的文字颜色调整。最后,展示了如何自定义NavigationBarButtonItem,以改善按钮外观。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先上效果图我的项目在iOS6中的效果
111.png

Navigtaion修改篇

iOS6的Navigtaion上面有高光,并且字是白色的,所以我们需要将iOS6的Navigtaion的背景修改一下

PS:[UINavigtaionBar apperance] 是获取全局的Navigtaion实例

修改NavigtaionBar的主色调

/*这里设置颜色是为了Navigtaion上面的颜色ButtonItem的颜色可以和Navigtaion的主色调更接近*/
[[UINavigationBar appearance] setTintColor:color];

修改NavigtaionBar背景图片

/*这里我有个自己的方法,我讲blankImage 着色成我要的颜色,blankImage其实就是一个白色的小方块,我把它改编成我要的颜色,然后作为Navigtaion的背景图*/
[[UINavigationBar appearance] setBackgroundImage:[[UIImage imageNamed:@"blankImage"] imageWithTintColor:color ] forBarMetrics:UIBarMetricsDefault];

修改NavigtaionBar的字体

/*这个比较特殊,这里我加入了几个属性应该一下就可以看懂 一个是修改标题的颜色 ,一个是字体大小。当然还有其他属性可以自行翻阅API*/
[[UINavigationBar appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys: [UIColor blackColor], UITextAttributeTextColor,[UIFont systemFontOfSize:17.0f],UITextAttributeFont, nil]];

到这里NavigtaionBar修改的有点像iOS7的了

Tabbar修改篇

iOS6的Tabbar的样式和iOS7的相差很大。主要是图标选中样式,图标的高光,Tabbar的选中图片

下面看代码

修改选中的时候Tabbar的那个白色框

/*这里我找到当前的tabBar 然后设置他的选中的时候图片为透明,酱紫选中也不会有白色的框了*/
[mainTabs.tabBar setSelectionIndicatorImage:[[UIImage imageNamed:@"blankImage"] imageWithTintColor:[UIColor clearColor]]];

修改Tabbar的背景图

/*然后设置背景图,颜色就是iOS7tabbar默认的那种白色 #21262d*/
[mainTabs.tabBar setBackgroundImage:[[[UIImage imageNamed:@"blankImage"] imageWithTintColor:[Util GetColorWithHexString:@"#21262d"]] stretchableImageWithLeftCapWidth:10 topCapHeight:10]];

修改TabBarItem未选中的文字的颜色

[items.tabBarItem setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys: [Util GetColorWithHexString:@"#929292"], UITextAttributeTextColor,[UIFont boldSystemFontOfSize:11.f],UITextAttributeFont, nil] forState:UIControlStateNormal];

修改TabBarItem未选中的图标的颜色

[items.tabBarItem setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[Global GetDarkMainColor], UITextAttributeTextColor,[UIFont boldSystemFontOfSize:11.f],UITextAttributeFont, nil] forState:UIControlStateSelected];

修改TabBarItem的选中和未选中状态的图片

PS:这里我将图片的颜色修改成了我自己要的颜色
UIImage *selectedImage   = [[UIImage imageNamed:tabImgArr[i]] imageWithTintColor:[Global GetDarkMainColor]];
UIImage *unselectedImage = [[UIImage imageNamed:tabImgArr[i]] imageWithTintColor:[Util GetColorWithHexString:@"#929292"]];
[items.tabBarItem setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];

ToolBar修改篇

修改ToolBar的背景图片

[[UIToolbar appearance] setBackgroundImage:[[UIImage imageNamed:@"blankImage"] imageWithTintColor:color ] forToolbarPosition:0 barMetrics:0];

NavigationBar ButtonItem修改篇

PS:我们修改了NavigationBar之后发现按钮还是原来的样子略丑

我刚开始对于这个也纠结了很久,最后我还是想了个这种的方案,不使用原来的按钮了,我自定义一下。
可以参照我的代码:

我封装了3个方法 ,大家可以按照自己的需要去封装
/**
 *  利用个一个UIButton对象生成一个UIBarButtonItem
 *  @param rect 这个按钮的大小
 *  @param btn  要放到这个UIBarButtonItem里面的UIButton
 *  @return 一个UIBarButtonItem对象
 */
+(UIBarButtonItem*)getNavBarButtonItem:(CGRect)rect Btn:(UIButton*)btn;
/**
 *  通过 title、执行的SEL、选中颜色、未选中颜色生成一个UIBarButtonItem
 *  @param title       UIBarButtonItem显示的ttitle文字
 *  @param target      调用的目标 可以为nil
 *  @param sel         执行事件
 *  @param selectColor 选中颜色
 *  @param normalColor 未选中颜色
 *
 *  @return 一个UIBarButtonItem对象
 */
+(UIBarButtonItem*)getNavBarButtonItemWithTitle:(NSString *)title Target:(id)target Selector:(SEL)sel SelectColor:(UIColor *)selectColor NormalColor:(UIColor*)normalColor;

/**
 *  通过 img、执行的SEL、选中颜色、未选中颜色生成一个UIBarButtonItem
 *  @param img         图片
 *  @param target      执行sel的目标类
 *  @param sel         需要执行的方法
 *  @param selectColor 选中颜色,默认是IOS7的蓝色
 *  @param normalColor 普通状态下颜色 默认是白色
 *  @param leftOrRight 该参数只有在IOS7中起效 @"left" @"right"
 *
 *  @return 返回一个UIBarButtonItem按钮
 */
+(UIBarButtonItem*)getNavBarButtonItemWithImage:(UIImage *)img Target:(id)target Selector:(SEL)sel SelectColor:(UIColor *)selectColor NormalColor:(UIColor*)normalColor;
接下来看下实现
+(UIBarButtonItem*)getNavBarButtonItem:(CGRect)rect Btn:(UIButton*)btn
{
    UIView * v= [[UIView alloc]initWithFrame:rect];
    [v addSubview:btn];
    UIBarButtonItem *btnItem=[[UIBarButtonItem alloc]initWithCustomView:btn];
    return btnItem;
}
+(UIBarButtonItem*)getNavBarButtonItemWithImage:(UIImage *)img Target:(id)target Selector:(SEL)sel SelectColor:(UIColor *)selectColor NormalColor:(UIColor*)normalColor
{
    UIButton * btn ;
    if(selectColor==nil)
        selectColor=[Global getIOS7TextColor];
    if(normalColor==nil)
        normalColor=[UIColor whiteColor];
    btn= [[UIButton alloc]initWithFrame:CGRectMake(0, 0, 40, 40)]; 

    [btn setBackgroundImage:[img imageWithTintColor:normalColor] forState:UIControlStateNormal];
    [btn setBackgroundImage:[img imageWithTintColor:selectColor] forState:UIControlStateHighlighted];
    [btn addTarget:target action:sel forControlEvents:UIControlEventTouchDown];
    return  [self getNavBarButtonItem:CGRectMake(0, 0, 45, 45) Btn:btn];
}
+(UIBarButtonItem*)getNavBarButtonItemWithTitle:(NSString *)title Target:(id)target Selector:(SEL)sel SelectColor:(UIColor *)selectColor NormalColor:(UIColor*)normalColor
{
    if(selectColor==nil)
        selectColor=[Global getIOS7TextColor];
    if(normalColor==nil)
        normalColor=[UIColor whiteColor];

    if(ISIOS7)
    {
        UIButton * btn = [[UIButton alloc]initWithFrame:CGRectMake(0, 5, 50, 35)];
        [btn setTitle:title  forState:UIControlStateNormal];
        [btn setTitle:title forState:UIControlStateHighlighted];
        [btn setTitleColor:normalColor forState:UIControlStateNormal];
        [btn setTitleColor:selectColor forState:UIControlStateHighlighted];
        [btn addTarget:target action:sel forControlEvents:UIControlEventTouchDown];
         return  [self getNavBarButtonItem:CGRectMake(0, 0, 50, 45) Btn:btn];
    }
    else
    {
        return [[UIBarButtonItem alloc] initWithTitle:title style:UIBarButtonItemStyleBordered target:target action:sel];
    }
}

XD 大家可以选择自己写这几个类,我这里只是给大家做参考的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值