views:

385

answers:

1

For an application I'm working on, I'd like to implement sort of a gauge-like control. The gauge should be of vertical orientation and I'd like to get the effect of a dial with the values printed on it to move vertically so that the current value appears at the center of the gauge. While the part of the dial that is not currently visible gets clipped.

I thought a good approach would be to have one UIView that acts as the top visible part (the gauge's window if you will) and a subview that just draws the dial with the values and markers. The top view would receive a message indicating the value to display and move the subview around so that the current value is centered while the part of the dial that is not currently visible gets clipped. I tried to do a little illustration of this (the part of the dial that is grayed-out should be clipped):

Gauge

I'm am unsure how to set up the views so that I can actually get this to work. I tried around with two UIView subclasses but the view rendering the dial would just paint at some unexpected location on the screen and wouldn't be clipped by the parent view.

I'm really just looking for general advice on the parts needed to implement a control like this. Does it make sense to use two views as I tried to describe or should I implement this as one single UIView subclass that just figures out which part of the dial to draw whenever the value is changed? Or maybe something completely different?

+1  A: 

Look into the UIScrollView class.

From what I read in your question, this should give you what you need.

The scroll view acts as a kind of 'window' on top of a content view. The content view is clipped by the scroll view if it is larger.

So you could have a content view is that is say, for arguments sake, 50x320, and the scroll view be only 50 x 50. The area of the content view will be clipped to the 50x50 size, and you will be able to move the content view by scrolling with your finger, like other native iPhone controls.

Many, if not all, iPhone apps use a scroll view in some way. UITableViews are subclasses of scroll views, as are UITextViews.

Apple has a decent example app that shows how to use a scroll view, so check that out too.

Jasarien
Is the content of the UIScrollView whatever is added as a subView?
VoidPointer
Yes, set the subview for the scroll view, and then set the scroll view's contentSize, contentInsets etc.
Jasarien
You don't need to use a scrollview to do this. Any view will work.Just set the mask flat to true and set the frame of the child view to a negative x coordinate.
schwa
Yep, it's working this way... Where would I do the rendering of the semi-transparent gradient I showed in the illustration. I first thought I would do that in the parent view - however, that way it gets composited under the subview. Do I just add another view on top or is there another way?
VoidPointer
Yes, just add it as another view on top.
rpetrich