怎么导航栏背景居中html,iOS - 设置导航栏之标题栏居中、标题栏的背景颜色

朱雀 2022-10-06 11:59 278阅读 0赞

本章实现效果:

![04b7f078c6b8][]

Untitled.gif

前言:

项目中很多需求是要求自定义标题栏居中的,本人最近就遇到这中需求,如果用系统自带的titleView设置的话,不会居中,经过尝试，发现titleview的起点位置和尺寸依赖于leftBarButtonItem和rightBarButtonItem的位置。下面给出我的解决方案

首先自定义一个标题View

\#import

@interface CustomTitleView : UIView

@property (nonatomic, copy) NSString \*title;

@end

\#import "CustomTitleView.h"

\#import "Masonry.h"

@interface CustomTitleView ()

@property(nonatomic,strong)UILabel \* titleLabel;//标题label

@property (nonatomic,strong) UIView \*contentView;

@end

@implementation CustomTitleView

\- (instancetype)init

\{

self = \[super init\];

if (self) \{

\[self addSubview:self.contentView\];

\[self.contentView mas\_makeConstraints:^(MASConstraintMaker \*make) \{

make.left.greaterThanOrEqualTo(self);

make.right.lessThanOrEqualTo(self);

make.center.equalTo(self);

make.bottom.top.equalTo(self);

\}\];

\[self.contentView addSubview:self.titleLabel\];

\[self.titleLabel mas\_makeConstraints:^(MASConstraintMaker \*make) \{

make.centerY.equalTo(self.contentView);

make.centerX.equalTo(self.contentView);

\}\];

\}

return self;

\}

\- (void)setFrame:(CGRect)frame

\{

\[super setFrame:frame\];

\[self layoutIfNeeded\];

\}

\- (UIView \*)contentView

\{

if (!\_contentView) \{

\_contentView = \[UIView new\];

\}

return \_contentView;

\}

\-(UILabel \*)titleLabel

\{

if (!\_titleLabel) \{

\_titleLabel = \[\[UILabel alloc\] init\];

\_titleLabel.textColor = \[UIColor whiteColor\];

\_titleLabel.font = \[UIFont boldSystemFontOfSize:17\];

\_titleLabel.lineBreakMode = NSLineBreakByTruncatingTail;

\_titleLabel.textAlignment = NSTextAlignmentCenter;

\[\_titleLabel setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal\];

\_titleLabel.backgroundColor = \[UIColor redColor\];

\}

return \_titleLabel;

\}

\- (void)setTitle:(NSString \*)title

\{

self.titleLabel.text = title;

\}

具体用法如下:

在当前页面的控制中只要写,即可实现上图的效果

CustomTitleView \*titleView = \[\[CustomTitleView alloc\] init\];

titleView.backgroundColor = \[UIColor greenColor\];

titleView.frame = CGRectMake(0, 0, PDScreeenW, 44);

titleView.title = @"我是标题";

self.navigationItem.titleView = titleView;

self.titleView = titleView;

UIBarButtonItem \*rightBarButtonItem = \[\[UIBarButtonItem alloc\] initWithTitle:@"" style:UIBarButtonItemStylePlain target:self action:nil\];

self.navigationItem.rightBarButtonItem = rightBarButtonItem;

[04b7f078c6b8]: /images/20221005/a2aadd8c861240de9c14aa3006f98db7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，278人围观）

还没有评论，来说两句吧...

相关阅读

相关【CSS】导航栏中的文字居中

设置导航栏时，比如下面的图片 ![c9f46dab23bd4f088b02b9228522292a.png][] 在一个导航栏中，如果可以把文字居中显示，那肯定比原来的好看

谁借莪１个温暖的怀抱￠/ 2023年09月25日 20:25/ 0 赞/ 64 阅读

相关 uni-app 顶部标题导航栏

![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20210119101820292.png\pic\_center][https_im

本是古典何须时尚/ 2023年01月08日 05:22/ 0 赞/ 243 阅读

相关怎么导航栏背景居中html,iOS - 设置导航栏之标题栏居中、标题栏的背景颜色

本章实现效果: ![04b7f078c6b8][] Untitled.gif 前言: 项目中很多需求是要求自定义标题栏居中的,本人最近就遇到这中需求,如果用系统自带的t

朱雀/ 2022年10月06日 11:59/ 0 赞/ 279 阅读

相关自定义iOS7导航栏背景,标题和返回按钮文字颜色

在iOS7下，默认导航栏背景，颜色是这样的，接下来我们就进行自定义，如果你仅仅是更改一下背景和颜色，代码会很简单，不需要很复杂的自定义View来替代leftBarItem !

叁歲伎倆/ 2022年09月21日 04:52/ 0 赞/ 271 阅读

相关知识片段---导航栏设置背景

//字体颜色 \[ self . navigationController . navigationBar setTitleTextAttributes :

冷不防/ 2022年08月20日 02:27/ 0 赞/ 195 阅读

相关 iOS 导航栏Title不居中

国外得一个链接: http://situee.blogspot.com/2014/10/[iOS][]\-set-navigation-bar-back-button-titl

浅浅的花香味﹌/ 2022年07月14日 09:23/ 0 赞/ 195 阅读

相关 swift设置导航栏(navigationBar)背景颜色,标题颜色和字体大小,item颜色

swift 4 func application(_ application: UIApplication, didFinishLaunchingWithOption

梦里梦外;/ 2022年05月16日 15:48/ 0 赞/ 1830 阅读

相关 Android实现沉浸式通知栏通知栏背景颜色跟随app导航栏背景颜色而改变

最近好多app都已经满足了沉浸式通知栏，所谓沉浸式通知栏：就是把用来导航的各种界面操作空间隐藏在以程序内容为主的情景中，通过相对“隐形”的界面来达到把用户可视范围最大化地用到

「爱情、让人受尽委屈。」/ 2022年04月16日 02:38/ 0 赞/ 716 阅读

相关 uniapp如何动态修改导航栏标题

在开发中我们往往会遇到一个页面有好多种支付状态的 , 这个时候头部的标题也要跟着动态变化的 , 一段代码搞定. 只需要这个段代码就可以搞定 uni.setNavig

朴灿烈づ我的快乐病毒、/ 2021年07月25日 13:09/ 0 赞/ 852 阅读

相关 taro 动态设置标题栏、标题栏动画

导航栏文字旁显示加载菊花图 Taro.showNavigationBarLoading() Taro.hideNavigationBarLoadin

电玩女神/ 2021年07月24日 16:03/ 0 赞/ 1530 阅读