iOS11 UIToolBar Contentview

Question

In iOS 11 buttons and text field are unresponsive being subviews of UIToolBar. Comparing view hierarchy to iOS 10 we see there is a _UIToolBarContentView over all subview of UIToolBar.

For instance, this new layout of the UIToolBar breaks slacktextviewcontroller https://github.com/slackhq/SlackTextViewController/issues/604

Need a solution working in iOS 10/11.

Answer 1

To solve the problem for iOS11 (compatible with lower versions) you only need to make layoutSubview right after UIToolBar was added as a subview to UI hierarchy.

In this case _UIToolbarContentView lowers to the first subview of UIToolBar, and you can add all your subviews higher as before.

For example in ObjC,

    UIToolbar *toolbar = [UIToolbar new];
    [self addSubview: toolbar];
    [toolbar layoutIfNeeded];

    <here one can add all subviews needed>

The same problem happens with slacktextviewcontroller

Answer 2

I have solved this problem in my case. I rewrite the layoutSubviews method in subclass of UIToobar and change the userInteractionEnable of _UIToolbarContentView into NO.

- (void)layoutSubviews {
    [super layoutSubviews];


    NSArray *subViewArray = [self subviews];

    for (id view in subViewArray) {
        if ([view isKindOfClass:(NSClassFromString(@"_UIToolbarContentView"))]) {
            UIView *testView = view;
            testView.userInteractionEnabled = NO;
         }
     }

}

Answer 3

You can just use the hitTest(_:with:) method.

1. First, create a property contentView in UIToolbar:

   open private(set) var contentView: UIView = UIView()
   

2. Then, make the contentView's frame the same as the UIToolbar's. For example:

   contentView.frame = bounds
   contentView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
   addSubview(contentView)
   

3. Finally, override the hitTest(_:with:) method:

   open override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
       if self.point(inside: point, with: event) {
           if let hitTestView = contentView.hitTest(point, with: event) {
               return hitTestView
           } else {
               return self
           }
       } else {
           return nil
       }
   }
   

In this situation, if you want to customize a toolbar by simply adding additional views, you should add them to the contentView so they will be positioned appropriately.