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

朱雀 2022-10-06 11:59 317阅读 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 条评论，317人围观）

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

相关阅读

相关圆角背景导航栏

圆角背景导航栏说明 html框架 css js 源代码说明 ![在这里插入图片描述][20

客官°小女子只卖身不卖艺/ 2023年05月29日 02:52/ 0 赞/ 31 阅读

相关小程序的状态栏、导航条、标题、窗口背景色的设置

小程序的状态栏、导航条、标题、窗口背景色的设置关于小程序导航顶部配置都写在.json文件中。相关属性及属性值 <table> <thead> <tr

谁践踏了优雅/ 2023年02月25日 11:25/ 0 赞/ 4 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 iOS 导航栏Title不居中

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

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

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

swift 4 func application(_ application: UIApplication, didFinishLaunchingWithOption

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

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

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

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

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

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

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