[纪录]仿IOS滚轮效果(竖直滑动选择器)

今天想做一个类似这样的一个效果,可是UI的模板是参考IOS做的,于是就各种百度各种搜,最后让我找到了一个仿IOS滚轮的一个Demo,稍微研究了一下,发上来,大家一起学习,以后也方便我查看,就不用再去百度了,嘿嘿!

仿IOS滚轮效果

首先是一个类,继承了ScrollView

public class WheelView extends ScrollView {

public static final String TAG = WheelView.class.getSimpleName();

public static class OnWheelViewListener {
    public void onSelected(int selectedIndex, String item) {
    }
}


private Context context;

private LinearLayout views;

public WheelView(Context context) {
    super(context);
    init(context);
}

public WheelView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init(context);
}

public WheelView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init(context);
}

//    String[] items;
List<String> items;

private List<String> getItems() {
    return items;
}

public void setItems(List<String> list) {
    if (null == items) {
        items = new ArrayList<String>();
    }
    items.clear();
    items.addAll(list);

    // 前面和后面补全
    for (int i = 0; i < offset; i++) {
        items.add(0, "");
        items.add("");
    }

    initData();

}


public static final int OFF_SET_DEFAULT = 1;
int offset = OFF_SET_DEFAULT; // 偏移量（需要在最前面和最后面补全）

public int getOffset() {
    return offset;
}

public void setOffset(int offset) {
    this.offset = offset;
}

int displayItemCount; // 每页显示的数量

int selectedIndex = 1;


private void init(Context context) {
    this.context = context;
    Log.d(TAG, "parent: " + this.getParent());
    this.setVerticalScrollBarEnabled(false);

    views = new LinearLayout(context);
    views.setOrientation(LinearLayout.VERTICAL);
    this.addView(views);

    scrollerTask = new Runnable() {

        public void run() {

            int newY = getScrollY();
            if (initialY - newY == 0) { // stopped
                final int remainder = initialY % itemHeight;
                final int divided = initialY / itemHeight;
                if (remainder == 0) {
                    selectedIndex = divided + offset;

                    onSeletedCallBack();
                } else {
                    if (remainder > itemHeight / 2) {
                        WheelView.this.post(new Runnable() {
                            @Override
                            public void run() {
                                WheelView.this.smoothScrollTo(0, initialY - remainder + itemHeight);
                                selectedIndex = divided + offset + 1;
                                onSeletedCallBack();
                            }
                        });
                    } else {
                        WheelView.this.post(new Runnable() {
                            @Override
                            public void run() {
                                WheelView.this.smoothScrollTo(0, initialY - remainder);
                                selectedIndex = divided + offset;
                                onSeletedCallBack();
                            }
                        });
                    }


                }


            } else {
                initialY = getScrollY();
                WheelView.this.postDelayed(scrollerTask, newCheck);
            }
        }
    };


}

int initialY;

Runnable scrollerTask;
int newCheck = 50;

public void startScrollerTask() {

    initialY = getScrollY();
    this.postDelayed(scrollerTask, newCheck);
}

private void initData() {
    displayItemCount = offset * 2 + 1;

    for (String item : items) {
        views.addView(createView(item));
    }

    refreshItemView(0);
}

int itemHeight = 0;
/**
 * 这里可以设置字体的属性 大小啦,边距啦,什么东西都可以在这里设置;
 */
private TextView createView(String item) {
    TextView tv = new TextView(context);
    tv.setLayoutParams(new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
    tv.setSingleLine(true);
    // 设置字体大小为20sp
    tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 20);
    // 设置文字内容
    tv.setText(item);
    // 设置文字居中
    tv.setGravity(Gravity.CENTER);
    // 设置内边距
    int padding = dip2px(15);
    tv.setPadding(padding, padding, padding, padding);
    if (0 == itemHeight) {
        itemHeight = getViewMeasuredHeight(tv);
        Log.d(TAG, "itemHeight: " + itemHeight);
        views.setLayoutParams(new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, itemHeight * displayItemCount));
        LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) this.getLayoutParams();
        this.setLayoutParams(new LinearLayout.LayoutParams(lp.width, itemHeight * displayItemCount));
    }
    return tv;
}


@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
    super.onScrollChanged(l, t, oldl, oldt);

    refreshItemView(t);

    if (t > oldt) {
        Log.d(TAG, "向下滚动");
        scrollDirection = SCROLL_DIRECTION_DOWN;
    } else {
       Log.d(TAG, "向上滚动");
        scrollDirection = SCROLL_DIRECTION_UP;

    }


}

private void refreshItemView(int y) {
    int position = y / itemHeight + offset;
    int remainder = y % itemHeight;
    int divided = y / itemHeight;

    if (remainder == 0) {
        position = divided + offset;
    } else {
        if (remainder > itemHeight / 2) {
            position = divided + offset + 1;
        }

    }

    int childSize = views.getChildCount();
    for (int i = 0; i < childSize; i++) {
        TextView itemView = (TextView) views.getChildAt(i);
        if (null == itemView) {
            return;
        }
        if (position == i) {
            itemView.setTextColor(Color.parseColor("#0288ce"));
        } else {
            itemView.setTextColor(Color.parseColor("#bbbbbb"));
        }
    }
}

/**
 * 获取选中区域的边界
 */
int[] selectedAreaBorder;

private int[] obtainSelectedAreaBorder() {
    if (null == selectedAreaBorder) {
        selectedAreaBorder = new int[2];
        selectedAreaBorder[0] = itemHeight * offset;
        selectedAreaBorder[1] = itemHeight * (offset + 1);
    }
    return selectedAreaBorder;
}


private int scrollDirection = -1;
private static final int SCROLL_DIRECTION_UP = 0;
private static final int SCROLL_DIRECTION_DOWN = 1;

Paint paint;
int viewWidth;

@Override
public void setBackgroundDrawable(Drawable background) {

    if (viewWidth == 0) {
        viewWidth = ((Activity) context).getWindowManager().getDefaultDisplay().getWidth();
        Log.d(TAG, "viewWidth: " + viewWidth);
    }

    if (null == paint) {
        paint = new Paint();
        paint.setColor(Color.parseColor("#83cde6"));
        paint.setStrokeWidth(dip2px(1f));
    }

    background = new Drawable() {
        @Override
        public void draw(Canvas canvas) {
            canvas.drawLine(viewWidth * 1 / 6, obtainSelectedAreaBorder()[0], viewWidth * 5 / 6, obtainSelectedAreaBorder()[0], paint);
            canvas.drawLine(viewWidth * 1 / 6, obtainSelectedAreaBorder()[1], viewWidth * 5 / 6, obtainSelectedAreaBorder()[1], paint);
        }

        @Override
        public void setAlpha(int alpha) {

        }

        @Override
        public void setColorFilter(ColorFilter cf) {

        }

        @Override
        public int getOpacity() {
            return 0;
        }
    };


    super.setBackgroundDrawable(background);

}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    Log.d(TAG, "w: " + w + ", h: " + h + ", oldw: " + oldw + ", oldh: " + oldh);
    viewWidth = w;
    setBackgroundDrawable(null);
}

/**
 * 选中回调
 */
private void onSeletedCallBack() {
    if (null != onWheelViewListener) {
        onWheelViewListener.onSelected(selectedIndex, items.get(selectedIndex));
    }

}

public void setSeletion(int position) {
    final int p = position;
    selectedIndex = p + offset;
    this.post(new Runnable() {
        @Override
        public void run() {
            WheelView.this.smoothScrollTo(0, p * itemHeight);
        }
    });

}

public String getSeletedItem() {
    return items.get(selectedIndex);
}

public int getSeletedIndex() {
    return selectedIndex - offset;
}


@Override
public void fling(int velocityY) {
    super.fling(velocityY / 3);
}

@Override
public boolean onTouchEvent(MotionEvent ev) {
    if (ev.getAction() == MotionEvent.ACTION_UP) {

        startScrollerTask();
    }
    return super.onTouchEvent(ev);
}

private OnWheelViewListener onWheelViewListener;

public OnWheelViewListener getOnWheelViewListener() {
    return onWheelViewListener;
}

public void setOnWheelViewListener(OnWheelViewListener onWheelViewListener) {
    this.onWheelViewListener = onWheelViewListener;
}

private int dip2px(float dpValue) {
    final float scale = context.getResources().getDisplayMetrics().density;
    return (int) (dpValue * scale + 0.5f);
}

private int getViewMeasuredHeight(View view) {
    int width = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
    int expandSpec = View.MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, View.MeasureSpec.AT_MOST);
    view.measure(width, expandSpec);
    return view.getMeasuredHeight();
}
    }

好的 类的源码就是这些,对于这个类 我并没有看懂,但是还是会使用的,大家什么地方也不用关注,只需要关注那个createView方法即可

之后就是我们的需要在你的xml中配置这么一段语句,就是调用这个View啦

<你的包名+WheelView
        android:id="@+id/wv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

之后在关联着这个布局的java文件中findViewByID得到它

 // 初始化仿IOS滚轮效果的数据
        // 在这里可以设置滚轮的偏移量 
        mWheelView.setOffset(2);
        //设置每一个Item中的数据 mArrayList中装着的是一堆String字符串
        mWheelView.setItems(mArrayList);
        mWheelView.setOnWheelViewListener(new WheelView.OnWheelViewListener() {
        @Override
        public void onSelected(int selectedIndex, String item) {
           //selectedIndex当前高亮的位置
           //item当前高亮的位置的内容
        }
    });

然后 这样 这个仿IOS的滚轮效果就实现了...最后附上我查阅到这个仿IOS滚轮效果的原地址

http://www.cnblogs.com/tiantianbyconan/p/3819304.html