1. 程式人生 > >Android 無限滑盤控制元件 WheelView實現

Android 無限滑盤控制元件 WheelView實現

先看下效果
這裡寫圖片描述
先說下實現思路,這裡,我打算使用ListView來實現。
第一步:無限滑動,這個比較簡單,類似於Banner圖的無限滑動原理,在Adapter中處理一下count即可,程式碼如下

// 為Count設定一個較大的值
@Override
public int getCount() {
    return Integer.MAX_VALUE;
}
// 在getView中,在根據position取值的時候,根據資料來源的大小進行取餘操作
int newpos = position;
if (position >= listDatas.size()) {
    newpos = position % listDatas.size();
}

通過以上兩步操作,就簡單實現的ListView的無限滑動
第二步:獲取焦點Item
第二部稍微麻煩一點,我們需要定位ListView中間的Item,並改變中間這個Item的樣式,使它和其他的Item有所區別,這裡我們首先為ListView新增一個OnScrollListener,實現onScroll方法,先看下方法體

public void onScroll(AbsListView view, int firstVisibleItem,int visibleItemCount, int totalItemCount)

firstVisibleItem:listView中第一個顯示的View的位置
visibleItemCount:listView中可見的Item的個數
totalItemCount:listVIew中Item的總個數
我們可以直接使用 firstVisibleItem+visibleItemCount/2 即可獲得中間Item的Position,這就讓問題變的簡單了,我只需要把獲取到的中間Position傳遞到Adapter,然後重繪一次即可,最後再新增一個回撥介面把Item的Content傳遞到外部即可。

@Override
    public void onScroll(AbsListView view, int firstVisibleItem,
            int visibleItemCount, int totalItemCount) {
        mMiddlePosition = firstVisibleItem + visibleItemCount / 2;
        // lastPosition 為了防止同一重複回撥
        if (mAdapter != null && mMiddlePosition != lastPosition) {
            mAdapter.setMiddlePos(mMiddlePosition);
            mAdapter.notifyDataSetChanged();
            listener.onItemSelect(mAdapter.getItem(mMiddlePosition));
        }
        lastPosition = mMiddlePosition;
    }

每當我們Item位置發生改變,重新獲取到新的中間Item的Position的位置,把這個值傳遞給Adapter,然後呼叫一下notifyDataSetChanged重繪即可。

adapter中程式碼

@Override
    public View getView(int position, View convertView, ViewGroup parent) {
        TextView tv = new TextView(mContext);
        tv.setPadding(0, 10, 0, 10);
        int newpos = position;
        if (position >= listDatas.size()) {
            newpos = position % listDatas.size();
        }
        if (newpos == (mMiddlePosition) % listDatas.size()) {
            tv.setTextColor(Color.RED);
        }
        tv.setText(listDatas.get(newpos));
        tv.setGravity(Gravity.CENTER);
        return tv;
    }

整個流程核心程式碼不足百行,我們就簡單實現了一個簡單的WheelView,連動起來實現也很簡單,這裡就不再贅述,如果有小夥伴需要,請在下方留言。大家也可以根據UI效果圖,自己新增相應的UI效果

原始碼地址