Android-based wheelview

We all know that in iOS, there is a kind of control ------ roller view, which is usually used to set the time/date, which is very convenient, but the android SDK does not provide similar controls. Here we will introduce how to implement wheelview in Android.

Let's take a look at the following items in the wheelview in IOS:

How can we achieve this?

What should we do if we want to achieve this effect in Android?

1. Android wheelview is the running of my demo.

2. Open source code on the Internet

We found an open-source code from the Internet, which also achieves this effect, and the effect is good. You can use SVN to checkout:

Http://android-wheel.googlecode.com/svn/trunk

Its demo is essentially a self-written layout. It seems that a linearlayout is used to layout the child, and then the linearlayout. Draw (canvas) method is called to draw the child on the specified canvas. It also provides access methods similar to adapterview. You can set the adapter to provide data. I am not here to explain the structure of this demo. If you are interested, you can download the code for research.

3. implementation idea because the Online Demo also provides an access method similar to adapterview, so I am wondering if we can implement it in another way. Imagine if this roller is horizontal, then we can use gallery to implement gallery. The features of gallery are similar to those of wheelview. For example, the selected items are always in the middle of the view, but they are horizontally arranged.

Since I have modified the source code of gallery before, it can be cyclically rolled, and the first child can be arranged on the leftmost end, so I am thinking, if I can change gallery to vertical (vertical arrangement), isn't it OK? Based on this idea, I am ready to modify the code.

Here we need to copy the gallery source code to our project, and then modify it to ensure that it can be compiled.

The following are some gallery-related files, which are placed under the widget folder and the Res/value folder.

• Absspinner. Java
• Adapterview. Java
• Gallery. Java
• ATTR. xml

The modification process is troublesome. I will not describe it in detail here (too much content to elaborate on). After the modification, our gallery provides a method:Setorientation (INT)You can move this gallery horizontally or vertically.

We should also provide the following core methods:

• Setonendflinglistener ------ call back when gallery stops sliding, so that the caller can get the currently selected item when it stops sliding.
• Setorientation (INT) ------ supports layout direction: horizontal and vertical.
• Setscrollcycle (Boolean) ------ whether circular sliding is supported.
• Setslotincenter (Boolean) ------ whether to center the items selected by Gallery.

4. after the extended gallery is modified, we can use it. We also need to do something, that is, to extend the gallery and implement a wheelview. In this class, we need to draw the selected rectangle, background image, and upper and lower shadows in the middle. This wheelview extends the gallery. It also provides functions such as setting the background image, selecting the image of the rectangle and the image of the upper and lower shadows. The complete implementation code of the wheelview is as follows:

package com.nj1s.lib.widget;import android.content.Context;import android.graphics.Canvas;import android.graphics.Rect;import android.graphics.drawable.Drawable;import android.graphics.drawable.GradientDrawable;import android.graphics.drawable.GradientDrawable.Orientation;import android.util.AttributeSet;import android.view.Gravity;import android.view.View;import com.nj1s.lib.R;public class WheelView extends TosGallery{    private Drawable mSelectorDrawable      = null;    private Rect mSelectorBound             = new Rect();    private GradientDrawable mTopShadow     = null;    private GradientDrawable mBottomShadow  = null;    private static final int[] SHADOWS_COLORS =    {        0xFF111111,        0x00AAAAAA,        0x00AAAAAA    };    public WheelView(Context context)    {        super(context);        initialize(context);    }    public WheelView(Context context, AttributeSet attrs)    {        super(context, attrs);        initialize(context);    }    public WheelView(Context context, AttributeSet attrs, int defStyle)    {        super(context, attrs, defStyle);        initialize(context);    }    private void initialize(Context context)    {        this.setVerticalScrollBarEnabled(false);        this.setSlotInCenter(true);        this.setOrientation(TosGallery.VERTICAL);        this.setGravity(Gravity.CENTER_HORIZONTAL);        this.setUnselectedAlpha(1.0f);        // This lead the onDraw() will be called.        this.setWillNotDraw(false);        // The selector rectangle drawable.        this.mSelectorDrawable =             getContext().getResources().getDrawable(R.drawable.wheel_val);        this.mTopShadow    =             new GradientDrawable(Orientation.TOP_BOTTOM, SHADOWS_COLORS);        this.mBottomShadow =             new GradientDrawable(Orientation.BOTTOM_TOP, SHADOWS_COLORS);        // The default background.        this.setBackgroundResource(R.drawable.wheel_bg);    }    @Override    protected void dispatchDraw(Canvas canvas)    {        super.dispatchDraw(canvas);        // After draw child, we do the following things:        // +1, Draw the center rectangle.        // +2, Draw the shadows on the top and bottom.        drawCenterRect(canvas);        drawShadows(canvas);    }    /**     * setOrientation     */    @Override    public void setOrientation(int orientation)    {        if (TosGallery.HORIZONTAL == orientation)        {            throw new IllegalArgumentException("The orientation must be VERTICAL");        }        super.setOrientation(orientation);    }    @Override    protected void onLayout(boolean changed, int l, int t, int r, int b)    {        super.onLayout(changed, l, t, r, b);        int galleryCenter = getCenterOfGallery();        View v = this.getChildAt(0);        int height = (null != v) ? v.getMeasuredHeight() : 50;        int top = galleryCenter - height / 2;        int bottom = top + height;        mSelectorBound.set(                getPaddingLeft(),                top,                getWidth() - getPaddingRight(),                bottom);    }    private void drawCenterRect(Canvas canvas)    {        if (null != mSelectorDrawable)        {            mSelectorDrawable.setBounds(mSelectorBound);            mSelectorDrawable.draw(canvas);        }    }    private void drawShadows(Canvas canvas)    {        int height = (int)(2.0 * mSelectorBound.height());        mTopShadow.setBounds(0, 0, getWidth(), height);        mTopShadow.draw(canvas);        mBottomShadow.setBounds(0, getHeight() - height, getWidth(), getHeight());        mBottomShadow.draw(canvas);    }}

The above Code does not have anything special, but there are several points to note: [1] Don't rewrite ondraw (). Why? Because ondraw () is used to draw a shadow, if you draw a shadow in ondraw (), the final effect may be that the child is above and the shadow is below. Therefore, we should draw a shadow after drawing the child. How can we do this? See step 2. [2] rewrite dispatchdraw (). If you do not understand this method, read the document by yourself. I will not explain it here. In short, this method is used to draw the child. Therefore, override this method and call super first. dispatchdraw () method, and then draw the shadow, OK, everything is fine. [3] You can call # setscrollcycle (Boolean) to specify whether the wheelview can slide cyclically. 5. How to use it is actually very simple, just like using the gridview/listview, using the adapter to provide the view.

// Set listenermdatewheel. setonendflinglistener (mlistener); // you can specify the mdatewheel sound when sliding. setsoundeffectsenabled (true); // set adaptermdatewheel. setadapter (New wheeltextadapter (this); // The Implementation of the adapter protected class wheeltextadapter extends baseadapter {arraylist <textinfo> mdata = NULL; int mwidth = viewgroup. layoutparams. match_parent; int mheight = 50; Context mcontext = NULL; Public wheeltextadapter (context Conte XT) {mcontext = context;} public void setdata (arraylist <textinfo> data) {mdata = data; this. notifydatasetchanged ();} public void setitemsize (INT width, int height) {mwidth = width; mheight = height;} @ override public int getcount () {return (null! = Mdata )? Mdata. size (): 0 ;}@ override public object getitem (INT position) {return NULL ;}@ override public long getitemid (INT position) {return 0 ;} @ override public view getview (INT position, view convertview, viewgroup parent) {textview = NULL; If (null = convertview) {convertview = new textview (mcontext); convertview. setlayoutparams (New tosgallery. layoutparams (mwidth, mheight); textview = (textview) convertview; textview. setgravity (gravity. center); textview. settextsize (26); textview. settextcolor (color. black);} If (null = textview) {textview = (textview) convertview;} textinfo info = mdata. get (position); textview. settext (info. mtext); textview. settextcolor (info. mcolor); Return convertview ;}}

If you are interested, you can send me an email with the source code. my email address is: Leehong2005@163.com
This is the uefa.com news client. Please pay attention to it. Thank you. Http://apk.hiapk.com/html/2013/06/1511803.html