iOS之自定义导航按钮UIBarButtonItem的样式

在一个APP中导航的重要性和方便性自然不需要多说了,由于系统的导航用起来实在不怎么友好,一直想抽个时间把导航学习下

由于投入到工作的时间多些,懒懒散散的一直都是用的时候才去找度娘,一直没来个总结,前段时间在群里和别人讨论的

时候我说自定义导航不就是隐藏系统的,自己添加一个UIView不就可以了,当时就被人家鄙视了,后来想想确实是自己太菜了,

隐藏了系统的之后好多效果我也肯定是用不了,刚好上周看到刚哥写的文章关于导航栏的六个小技巧对我的启发很大,原来导航还可以这么用,后来在刚哥的耐心指导下,终于算是整的有点明白了。扯得远了,下面写下我的实现思路,算是和大家一块进步吧。

先说下我想达到的效果吧,大家看微信

iOS之自定义导航按钮UIBarButtonItem的样式_第1张图片

这个是微信的返回按钮,他的返回图片明显比系统的要窄些,由于导航栈的机制,如果父页面没有标题,返回按钮标题默认是"返回",我现在想要的就是即能修改返回按钮的图片,又可以改变返回按钮的标题,我尝试用了

 self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"back"] style:UIBarButtonItemStylePlain target:self action:@selector(back)];


这个方法的好处是可以直接自定义 leftBarButtonItem 的图片,并且绑定了一个点击方法,非常方便,但是问题是返回按钮旁边的文字消失不见了,和系统的效果还是差了一点



和这个方法相似的是

self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc]initWithTitle:@"Text" style:UIBarButtonItemStylePlain target:self action:@selector(back)];

两个方法其实都挺实用的,但是这里不符合我的需求,只有找另外一个方法了

- (instancetype)initWithCustomView:(UIView *)customView;


打算自定义一个UIView 在上面放UIImageView和UIlabel,分别放图片和返回的标题,标题在上个页面做push操作的时候传过来,这样即可修改图片又可以自己改变标题内容


具体实现代码如下:

UIView *lefetCustomView = [[UIView alloc]initWithFrame:CGRectMake(0, 0,80, 44)];
    UIImageView *backImage = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0,30, 30)];
    [backImage setImage:[UIImage imageNamed:@"back"]];
    UILabel *lab = [[UILabel alloc]initWithFrame:CGRectMake(35, 0, 40, 30)];
    lab.textAlignment = NSTextAlignmentCenter;
    lab.numberOfLines = 0;
    lab.textColor = [UIColor whiteColor];
    lab.font = [UIFont systemFontOfSize:18];
    lab.text = _backText;
    UIButton *btn = [[UIButton alloc]initWithFrame:CGRectMake(0, 0,80, 44)];
    [btn addTarget:self action:@selector(backTo) forControlEvents:UIControlEventTouchUpInside];
    [lefetCustomView addSubview:lab];
    [lefetCustomView addSubview:backImage];
    [lefetCustomView addSubview:btn];
    self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc]initWithCustomView:lefetCustomView];

这样之后基本实现了,图片和标题都可以根据自己的需要改变了


后来感觉控件太多,干脆一个UIButton搞定

 UIButton *btn = [[UIButton alloc]initWithFrame:CGRectMake(0, 0,80, 44)];
    [btn setTitle:_backText forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [btn setImage:[UIImage imageNamed:@"back"] forState:UIControlStateNormal];
  btn.contentEdgeInsets = UIEdgeInsetsMake(0, -35, 0, 0);
    btn.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 10);
    [btn addTarget:self action:@selector(backTo) forControlEvents:UIControlEventTouchUpInside];
    self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc]initWithCustomView:btn];

这样之后代码简单多了,但是一个问题就是点击按钮图片会出现很重的阴影,并且在点击返回的时候并没有像系统那样按钮颜色会变暗一些的效果,


后来加了下面代码基本算是解决

[btn setImage:[UIImage imageNamed:@"bbc"] forState:UIControlStateHighlighted];

[btn setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted];



现在如果想点击返回按钮之后像系统那样按钮颜色会变暗一些的效果的话只有让美工帮忙切个点击时的图标了,暂时还没有想到好的办法,希望大家帮我解决!

你可能感兴趣的:(UI)