Solution to the iOS software keyboard cover part of the UI

Problem 1

Often in develop iOS app we need to build a form that contain text input (sign up, contact detail, address detail). Sometimes the software keyboards will get in the way and cover part of the UI.

The simple solution is UITableView, UITableView will nicely handle this problem by reduce the table view size or more technical set the content inset to allocate space for keyboard. It also will scroll to the selected text field.

But at times we want to use a lot of custom layout which need to embed UIs in a scroll view or have a text view covers the entire screen.

Solution 1

Use notification center to capture keyboard show and hide event and allocate space accordingly. This is a solved problem, there are tons of solution in The gist of the solution look similar to this:

First Observe keyboard will show and hide notification, and don’t forget to remove notification in dealloc

for keyboardWillShow

The code will be similar for key board will hide method, simply set the insert to all zero

While we added a content inset we also added the same inset to scroll indicator inset or the scroll bar will end above the keyboard.

You can also animate layout constraints or frame change

Problem 2

What if the view is in a Popover or Form sheet?

Solution 2

It turned out that the solution is pretty simple. We need to figure out the view frame in respect to the app window and deduct the bottom space from the keyboard height.

This also works for the iPhone as well as the multi window mode in iPad, since the view frame and the application window frame will have the same maximum y value.

j j j

UIButton adjust image size.

The Problem

I’ve been working with a few buttons that requires an image icon at work lately. Some of the icons are used in different places where the actual image are smaller then the recommended minimum touch area size. So you either get a Larger icon for the button or a smaller button.

Simple Solution

My first work around was to create a new assets for the icon with padding added. This result in multiple images are required to represent the same icon. If an icon need to be replace then multiple assets need to be created and replace in code or interface builder. Not so nice right.

Better Solution

The better way to handle this is to use


or in interface builder

Both the code block and interface builder setting will add 10 point margin on all side of the image. So the button touch area can be bigger then the image.

j j j