Quick Demo
Background
Customising ios application are quiet challenging when there is no apple provided user interface or api to do that. Showing multiple border alongside the shown image is one of that. Like following:
To achieve that we have to put UIImageView inside an UIView as a sub-view and changing the container view's background color. Another way to achive is to subclass the UIImageView and implement the drawRect: method to draw whatever we need. But apple discourages to implement the drawRect:, and even they didn't executes your drawRect: implementation.
Directly from the appledoc
Do not use image views for custom drawing.
TheUIImageView class does not draw its content using the drawRect: method. Use image views only to present images. To do custom drawing involving images, subclass UIView directly and draw your image there.
So here it is, UIView is subclassed and the UIImage is drawn inside with proper content mode specified, maintaining specified number of border.
Installation
Copy the class named RSUIImageViewMultiborder, a category file and RSCotentModeHandler . In interface builder take an UIView and set the custom class as RSUIImageViewMultiborder.
RSUIImageViewCustomBadge will be available through cocoapod soon.
Customizing
Adding a new border is the most easiest part. To add a new border in RSUIImageViewCustomBadge.h add two property of the following format
@property IBInspectable UIColor *border_color_xxx;
@property IBInspectable CGFloat border_width_xxx;which represents a border.
Things we needed to take into account, is that, the border declaration preceedes the other border are rendered in the outer section from other border. For example
@property IBInspectable UIColor *border_color_1; //first border - the outmost border
@property IBInspectable CGFloat border_width_1;
@property IBInspectable UIColor *border_color_2; //second border
@property IBInspectable CGFloat border_width_2;
@property IBInspectable UIColor *border_color_3; //third border from the outmost border
@property IBInspectable CGFloat border_width_3;
@property IBInspectable UIColor *border_color_4; //fourth border
@property IBInspectable CGFloat border_width_4;so find the appropriate position of the border, where to add it and feel free to delete any unnecessary border you are not using. Deleting a border requires to delete two property indicating a border.
Properties
RSUIImageViewMultiborder has following properties
| Property | Type | Denotes |
|---|---|---|
| isRounded | BOOL | set the corner radius to it's half of it's width |
| border_color_xxx | UIColor | designate the color of a border |
| border_width_xxx | CGFloat | the width of the border |
| image | UIImage | image to be rendered |
| contentMode | UIViewContentMode | actually the property contentMode is shared from UIView, which determine the render mode of the image property |
Features
There are several features which are not ready yet. Features completed are marked.
- CI-integration.
- Support rounded and non-rounded regular border.
- Support IBDesignable to be customized from interface builder.
- Adding a border just adding necessary properties.
- Handle image drawing for all content mode.
- Available in cocoapod.
- Finding a cleaner way to add border while installed via cocoapod.
- Supporting line drawing style in interface builder (i.e dotted line, rounded dotted line etc).
License
RSUIImageViewMultiborder is available under the MIT license. See the LICENSE file for more info.
Please feel free to file an issue, on any inconsistency found or new feature needed.