2

I'm trying to take the android-wheel from http://code.google.com/p/android-wheel/ and make it display horizontally. My first attempt to make this happen came from a suggestion by the author himself http://android-devblog.blogspot.com/2010/05/wheel-ui-contol-backgrounds.html at the bottom of the comments section.

kankan: "The easy way: use the vertical wheel, but rotate the canvas before drawing. In this case it needs also to change the onTouch and swap x and y touch coordinates for scrolling."

My implementation is very simple where I extend WheelView and just rotate the canvas by 90 degrees in the onDraw method (I'm not concerned with the touch portion, the wheel is not for interaction). Unfortunately all it does is turn the numbers themselves on their side, the wheel window stays vertical.

Does anyone have any experience with horizontalizing the wheelview?

Matt
  • 187
  • 1
  • 2
  • 10

3 Answers3

3

I've managed to get the horizontal wheel displaying. I dislike the method I used, but it works.

All I do is start an animation on the wheel view. Here's the rotate element I put in /res/anim with the relevant attributes.

<rotate android:fromDegrees="-90"
        android:toDegrees="-90"
        android:fillAfter="true" />

As I said, I dislike the implementation, but it worked for what I needed it for. I don't know how the scrolling works as it's disabled in my program, nor do I know if there's a performance hit of any kind from applying an animation in this way.

Matt
  • 187
  • 1
  • 2
  • 10
  • I pulled up the wrong project with my earlier comment, sorry! As per my original answer, it looks like res/drawable/wheel_bg.xml isn't rotated because it's a background resource. Glad you got it fixed but if you have problems with performance on the animation route then you could add the rotation xml flag to the wheel_bg.xml file. (I also don't know if starting an animation that only rotates the view will affect performance.. so if you don't see a hit maybe just leave it as is) – BoredAndroidDeveloper Mar 14 '12 at 13:07
1

Did you rotate the appropriate layouts xmls as well? This code sets the background Resources and some of the drawables using xml. I'm betting they're not rotated.

    private void initResourcesIfNecessary() {
    if (centerDrawable == null) {
        centerDrawable = getContext().getResources().getDrawable(R.drawable.wheel_val);
    }

    if (topShadow == null) {
        topShadow = new GradientDrawable(Orientation.TOP_BOTTOM, SHADOWS_COLORS);
    }

    if (bottomShadow == null) {
        bottomShadow = new GradientDrawable(Orientation.BOTTOM_TOP, SHADOWS_COLORS);
    }

    setBackgroundResource(R.drawable.wheel_bg);
}
BoredAndroidDeveloper
  • 1,251
  • 1
  • 11
  • 26
  • Thanks for the quick reply. I'm having trouble understanding exactly what you mean by "rotating the layouts xml". Is this to be done programmatically by overriding initResourcesIfNecessary(), or somehow in the xml where the horizontal wheel is defined? – Matt Mar 09 '12 at 20:00
  • Hmm, looking at it again those are actually images it's loading. Can't believe I missed that last time. It's possible the background resource isn't rotated with the canvas? Can you just rotate that image in an image editor? – BoredAndroidDeveloper Mar 09 '12 at 20:35
  • Sorry, you lost me. Where are the images? I didn't notice any images within the wheelview project. – Matt Mar 13 '12 at 23:25
1

I think the question is pretty clear and can only guess why some respondents are confused. You asked how to make the Vertical Wheel component at http://code.google.com/p/android-wheel/ behave with horizontal gestures and scrolling, as described by the author (and restated in your question).

I've recently done this in my own project.

First of all, the author's assertions merely provide a conceptual framework. In practice significantly more work is involved to realize. To make the HorizontalWheel I extended WheelView AND WheelScroller and wrote code to override ALL of the logic in both classes based on height. To do this some fields in WheelView and WheelScroller needed getters/setters; as well some constants and methods needed to be accessible and set as protected or public instead of private so they could be overridden. For example, WheelView does not provide a way to inject a WheelScroller or set a custom ScrollingListener.

Finally, there's a fundamental problem in the design of the component that I've been struggling with throughout the customization. I'm struggling with the problem now. The component fundamentally treats the list of Views it contains as having a "current item" == the View in the middle of the widget. It measures scrolling and justification based on the midpoint of the View that is closest to the center of the widget. This gives the widget the snap-to-middle effect. The snap effect is nice if there are shadows that only permit one element to show. However, deviate from that use-case, say you want more than one item to be visible between the shadows or want a different snap behavior and you'll run into problems. The Component's view-recycler also doesn't support multiple View types.

I've fixed most of these things and will publish soon. If given a chance I'd rebuild this component to call the first fully-visible item == first_item. Then I'd do away with the concept of "current item" because it only makes sense for the use-case in the screenshots and makes extending and customizing the component needlessly more difficult. Undoutedly snap-to-middle, left, and right seem like required features too, and should be configurable.

Tenacious
  • 594
  • 4
  • 6