IOS导航栏颜色渐变与常用属性

  1. 导航栏背景色设置:

    self.navigationController.navigationBar.barTintColor = [UIColor greenColor];

  2. 导航栏标题颜色字体大小

        NSMutableDictionary *attrs = [NSMutableDictionary dictionary];

        attrs[NSForegroundColorAttributeName] = [UIColor whiteColor];

        attrs[NSFontAttributeName] = [UIFont systemFontOfSize:17];

        [self.navigationController.navigationBar setTitleTextAttributes:attrs];

  3. 导航栏左右item

     UIBarButtonItem *leftItem = [[UIBarButtonItem alloc] initWithTitle:@"left" style:UIBarButtonItemStylePlain target:self action:@selector(left)];

      self.navigationItem.leftBarButtonItem = leftItem;

      UIBarButtonItem *rightItem = [[UIBarButtonItem alloc] initWithTitle:@"right" style:UIBarButtonItemStylePlain target:self action:@selector(right)];   

        self.navigationItem.rightBarButtonItem = rightItem;

  4. 导航栏item字体颜色

     self.navigationController.navigationBar.tintColor = [UIColor redColor];如果要不同item不同颜色,那么item要带一个自定义按钮,在设置按钮属性

  5. 当前控制器的下一个控制器的返回item去掉文字只保留箭头

        UIBarButtonItem *backItem = [[UIBarButtonItem alloc] initWithTitle:@"" style:UIBarButtonItemStylePlain target:self action:@selector(back)];

     self.navigationItem.backBarButtonItem = backItem;

  6. 导航栏透明与导航栏底部分割线,如果有图片高为64的话,直接设置图片就可以了,除此之外还可以用代码,这边的例子全部用代码背景色转图片来设置,先设置整个view的背景色为

     self.view.backgroundColor = [UIColor greenColor];如果透明看到的就是绿色。然后在分别设置

     [self.navigationController.navigationBar setBackgroundImage:[self imageWithBgColor:[UIColor colorWithRed:1 green:1 blue:1 alpha:0]] forBarMetrics:UIBarMetricsDefault];

       [self.navigationController.navigationBar setShadowImage:[self imageWithBgColor:[UIColor colorWithRed:1 green:1 blue:1 alpha:0]]];这样就是透明的了

  7. 如果要监听滚动而使导航栏颜色渐变,那么可以在scrollView的代理方法中添加这样的代码

    -(void)scrollViewDidScroll:(UIScrollView *)scrollView

    {

         [self.navigationController.navigationBar setBackgroundImage:[self imageWithBgColor:[UIColor colorWithRed:1 green:0 blue:0 alpha:self.tableView.contentOffset.y / 100]] forBarMetrics:UIBarMetricsDefault];

    }
    这边用的imageWithBgColor方法

    -(UIImage *)imageWithBgColor:(UIColor *)color {

        CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);

        UIGraphicsBeginImageContext(rect.size);

        CGContextRef context = UIGraphicsGetCurrentContext();    

        CGContextSetFillColorWithColor(context, [color CGColor]);

        CGContextFillRect(context, rect);

         UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

        UIGraphicsEndImageContext();

         return image;

    }
    最后大致的效果点左边是默认颜色,点右边透明,滚动渐变,就在这记下这些了,希望有可以帮助到的地方~~



转载于:https://www.cnblogs.com/Lingchen-start/p/4904361.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序首页导航栏颜色渐变可以通过以下步骤实现: 1. 在 app.json 文件中设置 navigationBarBackgroundColor 字段为渐变色,如下所示: ```json { "navigationBarBackgroundColor": { "startColor": "#FF5B5B", "endColor": "#FFC371", "gradientDirection": "vertical" } } ``` 2. 在页面的 onShow 生命周期函数中获取导航栏组件,并设置背景颜色渐变色,如下所示: ```js onShow: function () { const systemInfo = wx.getSystemInfoSync(); const { statusBarHeight, system } = systemInfo; const navBarHeight = system.indexOf('iOS') > -1 ? 44 : 48; const navBar = this.selectComponent('#nav-bar'); navBar.setNavigationBarStyle({ backgroundColor: { startColor: '#FF5B5B', endColor: '#FFC371', gradientDirection: 'vertical' }, height: navBarHeight + statusBarHeight }); } ``` 3. 在导航栏组件中添加 setNavigationBarStyle 方法,用于设置导航栏样式,如下所示: ```js Component({ methods: { setNavigationBarStyle(options) { const { backgroundColor, height } = options; const { startColor, endColor, gradientDirection } = backgroundColor; const linearGradient = `linear-gradient(${gradientDirection}, ${startColor}, ${endColor})`; wx.setNavigationBarColor({ frontColor: '#ffffff', backgroundColor: 'transparent', animation: { duration: 0, timingFunc: 'easeIn' } }); wx.setTopBarText({ text: '' }); wx.setNavigationBarStyle({ backgroundColor: 'transparent', height, success: () => { wx.createSelectorQuery().select('.custom-nav-bar').boundingClientRect(rect => { const { top } = rect; wx.createSelectorQuery().selectViewport().scrollOffset(scroll => { const { scrollTop } = scroll; const opacity = Math.max(0, Math.min(1, top / (height + statusBarHeight))); const color = `rgba(255, 255, 255, ${opacity})`; const gradient = `${linearGradient}, ${color}`; wx.setNavigationBarColor({ frontColor: '#ffffff', backgroundColor: gradient, animation: { duration: 0, timingFunc: 'easeIn' } }); }).exec(); }).exec(); } }); } } }) ``` 4. 在 wxml 文件中添加导航栏组件,如下所示: ```html <custom-nav-bar id="nav-bar" title="首页"></custom-nav-bar> ``` 通过以上步骤可以实现小程序首页导航栏颜色渐变

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值