Friday, May 28, 2010

Wheel UI contol: Scrolling

The main feature of the Wheel control is a scrolling (rotation). And I'd like to describe a simple wheel scrolling, without animation.

The wheel control should be scrolled on touch motion event. So, it needs to override onTouchEvent() method to rotate the wheel. Each time it needs to update the wheel according to motion distance that can be calculated as the difference between the last and current Y motion position.
In our case we will update the wheel control by setting the current number. If motion distance is less than zero (the movement from bottom to top) we have to increment it, and decrement otherwise. Note that we have to skip that if the movement is so small (is less than one item height).
@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
        lastYTouch = event.getY();
        break;

    case MotionEvent.ACTION_MOVE:
        float delta = event.getY() - lastYTouch;
        int count = (int) (visibleItems * delta / getHeight());
        int pos = currentValue - count;
        pos = Math.max(pos, minValue);
        pos = Math.min(pos, maxValue);
        if (pos != currentValue) {
            lastYTouch = event.getY();
            setValue(pos);
        }
        break;
    case MotionEvent.ACTION_UP:
        break;
    }
    return true;
}

/**
 * Sets current value
 * 
 * @param value the value to set
 */
public void setValue(int value) {
    if (value != currentValue && value >= minValue && value <= maxValue) {
        itemsLayout = null;
        valueLayout = null;
        currentValue = value;
        invalidate();
    }
}

Note that it is just a simple scrolling implementation, and it is not as good as expected. But there is nothing impossible, and I think it can be extended to have the behavior like original iPhone widget.

See also
    Introduction to the Wheel control
    The Wheel control layouts
    The Wheel control backgrounds
    Ideas for the future

Thursday, May 27, 2010

Wheel UI contol: Backgrounds

The NumericWheel widget has a simple design. It contains only text data (described in previous topic) and gradient backgrounds that are described in this post.

Backgrounds
There are used next backgrounds:
  • Main widget background
  • Center (current item) background
  • Top and bottom shadows

Wednesday, May 26, 2010

Wheel UI contol: Layouts

The NumericWheel widget has a simple design. It contains only text data and gradient backgrounds. In this post I'd like to write about text layouts.


Text layouts
Widget contains three text fields:
  • Current value - number on middle area  ("11" on image above)
  • Label - text on right area ("hour" on image above)
  • Items - all visible numbers excluding current value ("9", "10", "12", "13" on image above)
Next picture shows how all these items are "placed" on the widget.

About the Control area - it is just a space where defined above items are placed. It is the whole widget area excluding left and right padding. Note that there is also indent between Items and the Label areas.

Tuesday, May 25, 2010

Wheel UI contol

Have you ever seen the iPhone date time picker?

Next is the corresponding Android control

Poor design...

But, fortunately, there is an ability to create own UI controls. So I decided to implement this one.


Tuesday, May 18, 2010

Creating backgrounds: it's easy (part 3)

Here is the last topic about creating simple Android backgrounds.

I had some problems during investigating XML Android drawable because there were missed good docs about that. Definitions in Android API documentation are not full and clear.

Fortunately, I've found a great doc that describes all XML drawable :) Here it is.
As you can see Android provides a lot of useful things for defining XML drawable: rotating, animating, scaling, uniting a set of drawable etc.

Wednesday, May 12, 2010

Creating backgrounds: it's easy (part 2)

Here is the first topic about creating simple Android backgrounds.

What about gradients?


 It's easy - just use gradient XML tag:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
   
<gradient
       
android:startColor="#F000FFFF"
        android:centerColor
="#40004444"
        android:endColor
="#00000000"
        android:angle
="90" />
   
<corners android:radius="8dp" />
</shape>