Add subview that's docked to the bottom of superview (custom keyboard) - ios

Question

I'm attempting to create a custom view that appears exactly like the keyboard, but I can't figure out how to use frame manipulation and/or programmatic auto layout to solve my problem.
Some context: I have a messaging app style view controller with a textview and button docked at the bottom of the screen. All views are wrapped into a nice single content view with autolayout set such that when the keyboard appears, it pushes the entire view up, and when it disappears it pushes the entire view back down. This is the behavior I'm trying to reproduce.
I messed around with trying to manually resize frames similar to my keyboard code but ended up throwing that away in favor of a auto-layout based solution. Here's what I have so far:
StickersCollectionViewController *stickerController = [self.storyboard instantiateViewControllerWithIdentifier:#"StickersCollectionViewController"];
[self addChildViewController:stickerController];
[self.view addSubview:stickerController.view];
[stickerController didMoveToParentViewController:self];
NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:stickerController.view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:self.view.bounds.size.height];
[self.view addConstraint:constraint];
NSLayoutConstraint *width = [NSLayoutConstraint constraintWithItem:stickerController.view attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual toItem:self.view
attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0.0];
NSLayoutConstraint *height = [NSLayoutConstraint constraintWithItem:stickerController.view
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1.0
constant:240.0];
[self.view addConstraint:width];
[self.view addConstraint:height];
double delayInSeconds = 0.0;
dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delayInSeconds * NSEC_PER_SEC));
dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
constraint.constant = 240.0;
[UIView animateWithDuration:0.3
animations:^{
[self.view layoutIfNeeded];
}];
});
So far, this looks great: the view is instantiated and added just off screen, then animates into view. However, I'd also like my superview (mentioned above) to also animate with this view. This is the piece I need help with.
Can anyone offer help in this direction? Or offer a suggestion as to a different route I could go? Thanks.

Answer 1

Try this instead, the difference is using "[self.view layoutIfNeeded];" both before the animation and after the animation, and then placing this "constraint.constant = 240.0;" in the animation.
double delayInSeconds = 0.0;
dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delayInSeconds * NSEC_PER_SEC));
dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
[self.view layoutIfNeeded];
[UIView animateWithDuration:0.3
animations:^{
constraint.constant = 240.0;
[self.view layoutIfNeeded];
}];
});
So, try this as well:
this:
NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:stickerController.view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:self.view.bounds.size.height];
shoud probably be this:
NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:stickerController.view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:0];
because you are constraining to the top of the view and not constraining to the top of the view + self.view.bounds.size.height, not sure if this helps, but this is one idea.
A second possible solution is this, wrap up all UI elements into a UIView and set this UIView as the view of stickerController.view, this isn't so straight forward because technically you should assign this view as the view of stickerController.view in a load view method in the stickerController impelemntation file and then type cast the stickerController.view as this for example
Typcasting inside implementation file of stickerController
- (void)loadView
{
[self setView:[ContainerViewThatHasSubViews new]];
}
- (ContainerViewThatHasSubViews*)contentView
{
return (id)[self view];
}
then, create a subclass of ContainerViewThatHasSubViews like so
ContainerViewThatHasSubViews.h
#interface ContainerViewThatHasSubViews : UIView
#property (nonatomic) UIView *subContainerOfContainerViewThatHasSubViews;
#property (nonatomic) NSLayoutConstraint *tester;
#end
ContainerViewThatHasSubViews.m
#interface ContainerViewThatHasSubViews ()
#end
#implementation ContainerViewThatHasSubViews {
}
self = [super initWithFrame:frame];
if (self) {
_subContainerOfContainerViewThatHasSubViews = [UIView new];
[_subContainerOfContainerViewThatHasSubViews setTranslatesAutoresizingMaskIntoConstraints:false];
[self addSubview:subContainerOfContainerViewThatHasSubViews];
/// PSUEDO CODE HERE NOW
ALL OTHER UI ELEMENTS ARE ADDED TO THE UIVIEW "subContainerOfContainerViewThatHasSubViews"
like this *** [subContainerOfContainerViewThatHasSubViews addSubView:**another ui element***];***
etc. etc. etc.
then use layout constraints like this:
NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:stickerController.view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:self.view.bounds.size.height];
[subContainerOfContainerViewThatHasSubViews.view addConstraint:constraint];
etc. etc., so the layout constraints are added to "subContainerOfContainerViewThatHasSubViews"
add separate constraints to this UIView for the items inside this view, and you can then animate these cosntraitns as well by declaring the constraints in your header file as propertyies like i did with the _tester constraint, you can animate these when you press a button in your UIViewController impelmentation file by addding a gesture recognizer or whatever you have to show the keyboard
then end with this:
NSDictionary* views = NSDictionaryOfVariableBindings(subContainerOfContainerViewThatHasSubViews);
NSDictionary* metrics = #{#"sp" : #(heightResizer(10)), #"sh" : #40}; //include sizing metrics here
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[_subContainerOfContainerViewThatHasSubViews]|" options:0 metrics:metrics views:views]];
and this:
_tester =[NSLayoutConstraint constraintWithItem:_subContainerOfContainerViewThatHasSubViews attribute:NSLayoutAttributeCenterTop relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterTop multiplier:1.0f constant:0.0f];
[self addConstraint:_tester];
}
return self;
}
#end
Gist:
https://gist.github.com/anonymous/c601481d24ad1b98b219
https://gist.github.com/anonymous/b22b68d4bf8d7fa51d66
https://gist.github.com/anonymous/a9aaf922e0f5383256b6
https://gist.github.com/anonymous/fc6655ea8200cda9c0dd
There's a lot to this one, but it's just how programatic views work. I've never use storyboard because I feel like I have more control doing everything programatically, if you can handle how much code you'll need to write to make this happen then you are good to go, I know this because I'm building an app just like you that does the same thing that you want yours to do, and this works for me because I'm digging deep into the views. This is complete control, just make sure you make your other NSLayoutContraints as properities of the subclassed UIView, and then you can place methods in your subclassed UIView's header file that point to he implementation file of the UIView subclass and these methods can be the animation methods that you can call from your view controller like this:
[[self contentView] CALLYOURFUNCTION];
to access the other layout constraints and ui elements from the subclassed UIView in your View controller do this to call them:
[[self contentView] tester]; //this is the constraint from9 the header file of tbhe custom UIView
to set the constant in your UIViewController do this:
[[[self contentView] tester] setConstant:A_NUMBER];
The point is this, you are encapsulating all your views into a UIView subclass rather than accessing the view of your view controller itself and trying to animate it's view. I've not ever seen someone try to animate the "view" property of a UIViewController itself, I've only seen the animation of a UIView that is a subview of the UIViewController's view. The Point also is that you are forcing this UIView to be the view of the UIViewControllers view and then you are using another UIView within the subClassed UIView to animate the entire Contents of the view, so it's like this:
-UIViewController's view
Sub Class of UIView
UIView <=== this is the view that contains ALL THE OTHER UIElements of the View controller
Add a constraint to the UIView that contains all other UI elements, this contraint is the tester constraint I added to the header of the custom Sub class UIView.
You can then add additional constraints to the subViews of the the UIView that I've mentioned which contains all other UI elements of the UIViewController
When you add constraints on these sub items, you can animate them as well. This method is advanced so ask questions if you have them, my answer is a little messy.

Answer 2

daddy warbucks answer did indeed get me close to the solution I was looking for. For those of you who have built most of your UI skeleton with the storyboard, I ended up adding a container view to the bottom of my view controller and modifying the center values of the main content view and container view on button press.
Layout content view as you normally would. Set Leading, Trailing, and Top constraints to the content view, and a Bottom constraint to the container view (described in step 2).
Create a container view and dock it below the content view. Set equal width to the content view, Top constraint to the Bottom of the content view, and a height of 240 (or whatever you wish). Note: the view will be positioned OFF the view controller. If you're slightly OCD like me, this will bother you for a little bit until you realize that it's k.
Here's what I used to move the container view into place and have the content view follow with it. Note that I probably will clean this up more, but this is the general idea:
if (_isStickersViewOpen) {
self.tableView.contentInset = UIEdgeInsetsZero;
self.tableView.scrollIndicatorInsets = UIEdgeInsetsZero;
[UIView animateWithDuration:0.3
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
self.contentView.center = CGPointMake(self.scrollView.center.x, self.scrollView.center.y);
self.containerView.center = CGPointMake(self.scrollView.center.x, self.scrollView.bounds.size.height + self.containerView.bounds.size.height / 2);
}
completion:^(BOOL finished){
_isStickersViewOpen = NO;
}];
} else {
UIEdgeInsets contentInsets = UIEdgeInsetsMake(self.containerView.frame.size.height, 0.0, 0.0, 0.0);
self.tableView.contentInset = contentInsets;
self.tableView.scrollIndicatorInsets = contentInsets;
[UIView animateWithDuration:0.3
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
self.contentView.center = CGPointMake(self.scrollView.center.x, self.scrollView.bounds.size.height / 2 - self.containerView.bounds.size.height);
self.containerView.center = CGPointMake(self.scrollView.center.x, self.scrollView.bounds.size.height - self.containerView.bounds.size.height / 2);
}
completion:^(BOOL finished){
_isStickersViewOpen = YES;
}];
}
I'm not claiming this is the most effective or clean solution available, but it works for my purpose.