CODEWITHSUNDEEP
iosobjective-cuiimageviewuiimageavatar
Grambo
Grambo

Reputation: 949

iOS - How to layer images for avatar creation

I'm working on an app that allows users to create their own 2D avatars (similar to Bitmoji) by selecting various body/hair/clothing/eyes/etc styles from a supplied list of images. So far I'm doing this by layering several UIImageViews on top of each other, with each one representing a certain customizable element. The user can choose what image to assign to each UIImageView by first choosing the element type, and then the element image, from two collection views. For example, if the user clicks on the hair type category in one collection view they can then pick from a list of numbers in another collection view to change the hairTypeImageView's photo.

I think the problem with this approach is obvious: it requires having a ton of UIImageViews which seems to slow down the app a lot. Also, on top of this we require that the user be able to change the base color of each element, without changing its shading or border. The only way I've been able to do this so far is by having the app store two images for each element, one for the bottom layer fill color and another for the top layer shading and border, and then using 

fillColorImageView.image = [fillColorImageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
[fillColorImageView setTintColor:color];

to change the fill color. This solution works, but it makes the app even less efficient because it means I now have to have double the amount of UIImageViews (two for each customizable element), plus I have to create double the artwork and the app has to store double the images.

Is there a better way to do this that I'm missing?

Upvotes: 1

Views: 1315

Answers (1)

Shackleford
Shackleford

Reputation: 620

I'd take a look at making a UIImageView subclass that overrides the drawRect: call to draw the various layers of the avatar. This will allow to have a single UIImageView instance that is capable of drawing the entire avatar.

The second option is to use Core Graphics to render your avatar. This is a good option if you need greater control of the output, since the Core Graphics framework offers a rich suite of rendering tools and capabilities.

For me, the decision will likely come down to how much image manipulation you need to do. If it's just a matter of "stacking" various images on top of each other and changing a few colors I'd probably go with a UIImageView subclass.

For either of these approaches, take a look at https://developer.apple.com/library/content/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/HandlingImages/Images.html

Upvotes: 1

Related Questions