Configuring view autosizing in Apple’s Interface Builder is greatly aided by an animated view that shows how the currently selected element will resize with respect to it’s parent. In the yet to be released version of SunFlower I am planning on using a similar animation to make the anchor corner property of exclusion filters more intuitive. This article is about copying that Interface Builder UI element.

Attempt 1

My first attempt was unsuccessful. I attempted to use two layers and constraints. When I automated the bounds of the parent layer the sublayer only moved on the Y axis and did not move on the X axis.

Download the kode.

Attempt 2

After must chagrin I solved the problem. Instead of using two layers and constraints the kode was changed to use one layer. The resizing white rectangle is still a core animation layer but the red square was is now image content. The red square is anchored to the corner using the contentsgravity property.

Download the kode. (If you click on the view the red square will cycle the corner it is anchored to.)

I am still curious to know if it is possible to solve this problem with the two layer constraint method; if you know how, then please drop me a line.

In my previous post I published some sample code on how to use a mask on a core animation layer. Here is a practical example of a mask, creating a scroll control almost identical to the one displayed in iTunes.

When developing SunFlower 0.8 I changed one of the custom views to use core animation. Faced with the choice to either hook up the new view to a standard cocoa scrollbar or create a custom core animation one I chose the latter, and completely plagiarized the scrollbar in iTunes. Many people use iTunes so this component provides a flashier scrollbar interface that is still familiar to users.

The anatomy of our scrollbar

A scrollbar is made up of a couple of different parts and it is useful to define what those parts are called. You may find these defined differently elsewhere, however these are the terms that were chosen for the source.

The scroll arrows and the slider are drawn and then masks are applied to them to create the rounded effects. The image below shows the layer hierarchy used to create this component.

Because the slider can grow in size depending on the amount of content being shown it is broken up into three layers (left, middle and right). Masks are applied to the left and the right layers and their size remains constant, the middle layer grows as needed.

Protocols

If you decide to use this code as a basis for an application, the first thing you most likely will want to do is to replace the content view. To make this as easy as possible I have defined protocols in the file SFScrollerProtocols.h

@protocol SFScrollerContentController
 
- (BOOL)isRepositioning;
- (void)scrollPositionChanged:(CGFloat)position;
- (void)scrollContentResized;
 
@end
 
 
@protocol SFScrollerContent
 
- (CGFloat)contentWidth;
- (CGFloat)visibleWidth;
- (CGFloat)stepSize;
 
- (void)moveScrollView:(CGFloat)dx;
 
// where position is a number between 0.0 and 1.0 representing the 
// posible positions the visible rect can be at
- (void)scrollToPosition:(CGFloat)position;
 
@end

Although the protocols aren’t documented very well, a little peeking and poking at the kode should get you what you want.

You can grab the kode here.

Using a mask on a core animation layer is quite easy. This example does the following:

• Creates an NSImage by filling an NSBezierPath.
• Converts the NSImage into a CGImageRef
• Creates three CALayers
  • one to show what the mask looks like
  • one for the layer that will have
  • one for our our mask

Voila!

You can grab the kode here.