Alternative Button

There must be a time when every iOS developer wanted to place the image of `UIButton` above the title. Alternative Button is here for that!

TL;DR

Alternative Button is available as a pod. You can easily add it to your project just by adding `pod ‘AlternativeButton’` to your ‘Podfile’ and running `pod install` in your project directory.

Also you can find both Alternative Button and the example project here.

Structure

Alternative Button is a subclass of `UIButton` and just by overriding a few methods and a few additions, it presents its image above the title. And thanks to a new feature of Xcode 6, it can be previewed in Interface Builder. Also corner radius of its image view can be set from Attributes Inspector too.

Layout

By overriding `-layoutSubviews` method of `UIView`, we can interfere with the view hierarchy and layout of any subview of a view. So we did:

`imageViewWidth` is a constant defined in the class and its value is `64.0`

Here we just adjust the frames of both image view and the title label. We place them vertically in line and horizontally centered.

Size

`-intrinsicContentSize` method of `UIView` returns a `CGSize` indicating the desired size of itself. So we must override this too, like so:

Here we first adjust the size of title label, because it can be any size depending on the title set for the button. Then we get the width of both image view and the title label adding margins to them from both sides. Again, we calculate the height of the button, adding margins from both top and bottom.

`margin` is a constant too, defined in the class and its value is `6.0`

We return a `CGSize` created with the width of either image view or title label, which of them is greater, and the calculated height.

`-intrinsicContentSize` provides a size value to be used in Interface Builder, so that whenever ‘Size to Fit Content’ is selected from the ‘Editor’ menu, it adjusts the button’s size according to this value.

Radius

We also have a public property named `imageViewRadius`. This is used to round the corners of the image view. By default corner radius is set to be half of the image view’s width, so that it will be a perfect circle.

IB_DESIGNABLE & IBInspectable

These are the new keywords Xcode 6 introduced. Thanks to these we can see a preview of our custom coded view in Interface Builder!

`IB_DESIGNABLE` tells Interface Builder that this is a custom view and needs a preview. We add this keyword just before class declaration in our header file.

`IBInspectable` tells Interface Builder that the property with this keyword can be adjusted from the Attributes Inspector. We add this keyword just before the type of our property.

Result

Here is a screen shot of the example project:

I used this button as a profile button in my current project and wanted to open it to the world! So that, other developers in need of a control like this can benefit.

Feel free to contribute and let me know what you think in the comments!