iOS 11 navigationItem.titleView宽度未设置


67

在iOS11上看到带有NavigationItem.titleView的行为,其中titleView的宽度不是屏幕的整个宽度。

我有一个自定义视图,我将其设置为titleView。在iOS11之前,该视图将填充导航栏区域。但是iOS 11并没有调整大小以填充屏幕宽度。

我试过在设置titleView之前设置视图的框架,但是没有运气。我试图将titleViews超级视图也强制设置为布局约束,但是没有运气。

随附的屏幕截图:

iOS10:

在此处输入图片说明

iOS11:

在此处输入图片说明

还有其他人遇到吗?

Answers:


124

我想到了。我必须重写视图和文本字段的internalContentSize getter。

我将宽度设置为CGFloat.greatestFiniteMagnitude,使其始终与屏幕一样宽。

更新:

由于我已经在这个问题上花费了几个小时,希望其他人可以通过将所有事情放在一起来更快地赶上

我创建了一个TitleView名为的自定义子类,下面CustomTitleView是代码:

import UIKit

class CustomTitleView: UIView {

  override var intrinsicContentSize: CGSize {
    return UIView.layoutFittingExpandedSize
  }
}

我从一开始就错过的最重要的部分是:

在此处输入图片说明


4
作为说明:titleView现在使用“自动布局”进行布局。由于它查找的是internalContentSize,因此可以正常工作。
mangerlahn

标题视图可以显示在大标题视图的下方吗?我为标题视图分配了segmentedControl,它始终显示在大标题上。
阿科

@Arco:您解决了问题吗?我在UISegmentedControl内部放置有相同的问题,TitleView并且触摸没有响应,重新附加并细分了其UIView类,该类TitleView覆盖了以下答案中提到的intrinsicContentSize 属性João Nunes
el.severo

@ el.severo我没有解决我的问题,因为我认为没有公共api可供我们在大标题视图位置上分配自定义视图。也许您可以看到导航栏子视图的结构,并尝试使用Objective-C运行时来解决您的问题。
阿科

2
问题是它还会从屏幕上的左右导航按钮
推开

43

使用@falkon的答案,这里是代码:

将此代码添加到用作titleView的视图中

override var intrinsicContentSize: CGSize {
    return UILayoutFittingExpandedSize
} 

固定,但有时标题视图在使用动画后会在状态栏下移动。
Lumialxk

2
我还必须添加translatesAutoresizingMaskIntoConstraints = false到该视图。
rafalkitta

15

通过创建UIView的子类并将其分配给UINavigationController的标题视图来修复此问题

目标C:

#import "FLWCustomTitleView.h"

@implementation FLWCustomTitleView

- (CGSize )intrinsicContentSize {
  return UILayoutFittingExpandedSize;
}

@end

在此处输入图片说明 在此处输入图片说明


1
您如何在此处添加自定义视图?
Maksim Kniazev '18 -10-6

12

设置intrinsicContentSizeUILayoutFittingExpandedSize工作正常,以及


6

我必须将UIImageView设置为navigationItem.titleView。宽高比确实合适,但是internalContentSize使它变大。缩放图像导致较差的图像质量。设置布局锚对我有用:

UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 80, 30)];
[imageView setImage:image];
[imageView.widthAnchor constraintEqualToConstant:80].active = YES;
[imageView.heightAnchor constraintEqualToConstant:30].active = YES;
[imageView setContentMode:UIViewContentModeScaleAspectFit];
self.navigationItem.titleView = imageView;

4

Swift 4.2版本的Yedy的答案

let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 80, height: 30))
imageView.image = image
imageView.widthAnchor.constraint(equalToConstant: 80).isActive = true
imageView.heightAnchor.constraint(equalToConstant: 30).isActive = true
imageView.contentMode = .scaleAspectFit
navigationItem.titleView = imageView

Swiftify的帮助下进行了转换


3

除了现有的答案:

如果您的自定义标题视图是默认情况下具有固有内容大小(而不是.zero)的视图例如a UILabel,aUITextView或a UIButton,则只需设置

yourCustomTitleView.translatesAutoresizingMaskIntoConstraints = false

它将自动调整为仅包含其内容,但不会与左右项目视图重叠。


例如,您可以将一个按钮拖到Interface Builder中导航栏的标题视图区域中titleButton,在视图控制器中为其创建出口,然后执行

override func viewDidLoad() {
    super.viewDidLoad()
    titleButton.translatesAutoresizingMaskIntoConstraints = false
}

2

最重要的是,您需要覆盖customTitleView作为titleView:

self.navigationItem.titleView = [self titleView];

#pragma mark - getter

- (UIView *)titleView {
    UIView *navTitleView = [HFCalenderTitleView new];
    navTitleView.frame = CGRectMake(0.0, 0.0, HorizontalFrom750(200.0), 44.0);

    [navTitleView addSubview:self.titleLabel];
    [self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(navTitleView);
    }];

    CGFloat btnWidth = 30.0;
    [navTitleView addSubview:self.previousButton];
    self.previousButton.imageEdgeInsets = UIEdgeInsetsMake(0.0, 0.0, 0.0, 15.0);
    [self.previousButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(navTitleView);
        make.top.bottom.equalTo(navTitleView);
        make.width.equalTo(@(btnWidth));
    }];
    [navTitleView addSubview:self.nextBtn];
    self.nextBtn.imageEdgeInsets = UIEdgeInsetsMake(0.0, 15.0, 0.0, 0.0);
    [self.nextBtn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(navTitleView);
        make.top.bottom.equalTo(navTitleView);
        make.width.equalTo(@(btnWidth));
    }];

    return navTitleView;
}
#pragma mark - customTitleView

#import "HFCalenderTitleView.h"
@implementation HFCalenderTitleView
- (CGSize)intrinsicContentSize{
    return CGSizeMake(HorizontalFrom750(200.0), 40); // the target size
}

在此处输入图片说明

在此处输入图片说明


2

当您将UIView作为CustomTitleView内的子视图时,internalContentSize解决方案不起作用,仅对我而言,仅在iOS 11的XCODE 9中。所以我在下面确实喜欢,对我来说很好,这可能会对某人有所帮助。

@interface CustomTitleView : UIView
@property (weak, nonatomic) IBOutlet UIView *doubleTitleView;
@end

@implementation CustomTitleView
- (void)awakeFromNib {
    [super awakeFromNib];
    int width = _doubleTitleView.frame.size.width;
    int height = _doubleTitleView.frame.size.height;
    if (width != 0 && height != 0) {

        NSLayoutConstraint *widthConstraint =  [_doubleTitleView.widthAnchor constraintEqualToConstant:width];
        NSLayoutConstraint *heightConstraint = [_doubleTitleView.heightAnchor constraintEqualToConstant:height];

        [_doubleTitleView addConstraint:heightConstraint];
        [_doubleTitleView addConstraint:widthConstraint];
        [heightConstraint setActive:TRUE];
        [widthConstraint setActive:TRUE];
    }
}

1

如果您不想覆盖,也可以使用约束intrinsicContentSize。这是SnapKit的演示

self.navigationItem.titleView = titleView
if #available(iOS 11, *) {
    titleView.snp.makeConstraints({ (make) in
        make.width.equalTo(250) // fixed width
        make.height.equalTo(30) // less than 44(height of naviagtion bar)
    })
}else {
    titleView.frame = ...
}

但是,如果任一侧(左侧或右侧)导航栏上有多个导航栏项目,则应使用internalContentSize;


您知道为什么需要少于44吗?我尝试更大而没有成功。
Paulo Sigales

0

我遇到了同样的问题,但设置UIImagenavigationItem titleView

我所做的是使用以下方法将图像缩放到所需的大小:

-(UIImage *)imageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize {

    UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
    [image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return newImage;
}

并如下调用:

-(void)setHeaderImage{
    UIImage * image = [self imageWithImage:[UIImage imageNamed:@"headerImage"] scaledToSize:CGSizeMake(150, 27)];
    UIImageView *  imageView = [[UIImageView alloc]initWithImage:image];
    imageView.frame = CGRectMake(0, 0, 150, 27);
    imageView.contentMode = UIViewContentModeScaleAspectFit;
    self.navigationItem.titleView = imageView;
}

imageView.frame = CGRectMake(0,100,150,27); 是否可以在其框架中更改Y?
Naman Vaishnav

您可以将UIImageView放在UIView内并更改UIImageView框架
Mutawe

0

return UILayoutFittingExpandedSize 对我没有帮助,因为垂直添加了几次视图以填充布局。

解决方案是intrinsicContentSize在自定义视图中将设置宽度覆盖为最大屏幕宽度:

 - (CGSize)intrinsicContentSize {
    //fills empty space. View will be resized to be smaller, but if it is too small - then it stays too small
    CGRect frame = self.frame;
    frame.size.width = MAX(SCREEN_WIDTH, SCREEN_HEIGHT);
    return frame.size;
}

0

尝试使用标准的UISearchBar / UISearchController

实际上,您需要做的是-如果可以使用标准的UISearchBar / UISearchController,则将以以下方式显示搜索栏,该方式尊重安全区域,因此在iPhone X和每个设备方向上看起来都很完美:

func presentSearchController() {
    let searchController = UISearchController(searchResultsController: nil)
    searchController.searchResultsUpdater = self
    searchController.obscuresBackgroundDuringPresentation = false
    searchController.searchBar.text = "any text"

    if #available(iOS 11.0, *) {
        self.navigationItem.searchController = searchController
        searchController.isActive = true
    } else {
        present(searchController, animated: true, completion: nil)
    }
}

参考文献

https://developer.apple.com/videos/play/fall2017/201/ https://medium.com/@PavelGnatyuk/large-title-and-search-in-ios-11-514d5e020cee


0

此类将解决问题。确保将自定义视图的类设置为此:

import UIKit

class TitleView: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
        translatesAutoresizingMaskIntoConstraints = false
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        translatesAutoresizingMaskIntoConstraints = false
    }

    override var intrinsicContentSize: CGSize {
        CGSize(width: UIView.layoutFittingExpandedSize.width, height: self.bounds.height)
    }

}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.