Graphics Reference
In-Depth Information
LISTING 10-5
Continued
// Create the reflection layer; this image is displayed beneath
// the top layer
CALayer
*reflectionLayer = [[
CALayer alloc
]
init
];
[reflectionLayer
setBounds
:
CGRectMake
(0.0f, 0.0f, 320.0, 240.0)];
[reflectionLayer
setPosition
:
CGPointMake
(158.0f, 362.0f)];
// Use a copy of the image contents from the top layer
// for the reflection layer
[reflectionLayer
setContents
:[topLayer
contents
]];
// Rotate the image 180 degrees over the x axis to flip the image
[reflectionLayer
setValue
:DegreesToNumber(180.0f)
forKeyPath
:
@”transform.rotation.x”
];
// Create a gradient layer to use as a mask for the
// reflection layer
CAGradientLayer
*gradientLayer = [[
CAGradientLayer alloc
]
init
];
[gradientLayer
setBounds
:[reflectionLayer
bounds
]];
[gradientLayer
setPosition
:
CGPointMake
([reflectionLayer
bounds
].
size
.
width
/2,
[reflectionLayer
bounds
].
size
.
height
/2)];
[gradientLayer
setColors
:[
NSArray arrayWithObjects
:
(
id
)[[
UIColor clearColor
] CGColor],
(
id
)[[
UIColor blackColor
] CGColor],
nil
]];
// Override the default start and end points to give the gradient
// the right look
[gradientLayer
setStartPoint
:
CGPointMake
(0.5,0.35)];
[gradientLayer
setEndPoint
:
CGPointMake
(0.5,1.0)];
// Set the reflection layer's mask to the gradient layer
[reflectionLayer
setMask
:gradientLayer];
// Add the reflection layer to the view
[[[
self
view
]
layer
]
addSublayer
:reflectionLayer];
}
This application uses three layers to achieve the desired effect. The top layer takes up the
upper half of the screen and displays the original image. The bottom, or reflection, layer
takes up the bottom half of the screen and shows a copy of the top layer's contents
flipped on the
x
-axis. The image is flipped using key-value coding with the following call:
