android 自定義實現滾動View：WheelView
阿新 • • 發佈：2019-01-08
專案中用到一個比較覺得不錯的控制元件：WheelView，即上下滾動View。它是繼承ScrollView實現，在Android各版本上的效果都是如下：也許在git上有許多這樣功能的控制元件，但個人認為這個控制元件實現的方式簡單，比較讓人容易理解，對自定義控制元件的實現有借鑑意義，故在此做個記錄。
下面我先把把xml，Activity檔案給上：
<pre name="code" class="java">public class MainActivity extends AppCompatActivity { @BindView(R.id.wheelView) WheelView wheelView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this); after(); } void after(){ List<String> list=new ArrayList(); for (int i = 0; i < 100; i++) { list.add("str"+i); } wheelView.setItems(list); }
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:gravity="center" android:layout_height="match_parent" android:orientation="vertical" tools:context="hai.com.android_test.ui.MainActivity"> <hai.com.android_test.widget.WheelView android:id="@+id/wheelView" android:layout_width="wrap_content" android:layout_marginTop="70dp" android:layout_height="wrap_content" /> </LinearLayout>
就這麼簡單設定下，就可以看到上面的效果。
覺得還是先上WheelView程式碼：
package hai.com.android_test.widget; import android.app.Activity; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.ColorFilter; import android.graphics.Paint; import android.graphics.PixelFormat;import android.graphics.drawable.Drawable; import android.util.AttributeSet; import android.util.Log; import android.util.TypedValue; import android.view.Gravity; import android.view.MotionEvent; import android.view.View; import android.view.ViewGroup; import android.widget.LinearLayout; import android.widget.ScrollView; import android.widget.TextView; import java.util.ArrayList; import java.util.List; public class WheelView extends ScrollView { private static final String TAG = "hhp"; private Context context; private LinearLayout views; List<String> items; public static final int OFF_SET_DEFAULT = 1; int offset = OFF_SET_DEFAULT; // 偏移量（需要在最前面和最後面補全） int displayItemCount; // 每頁顯示的數量 int initialY; Runnable scrollerTask; int newCheck = 50; int selectedIndex = 1; int itemHeight = 0; 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); } private List<String> getItems() { return items; } public void setItems(List<String> list) { Log.d(TAG, "setItems() called with: list = [" + list + "]"); if (null == items) { items = new ArrayList<String>(); } items.clear(); if (list != null) { items.addAll(list); } // 前面和後面補全 for (int i = 0; i < offset; i++) { items.add(0, ""); items.add(""); } initData(); } public int getOffset() { return offset; } public void setOffset(int offset) { this.offset = offset; } private void init(Context context) { this.context = context; 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); } } }; } private void initData() { displayItemCount = offset * 2 + 1; views.removeAllViews(); for (String item : items) { views.addView(createView(item)); } refreshItemView(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); 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); 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; } /** * 更改Item字型顏色 * @param y */ private void refreshItemView(int y) { int position = y / itemHeight + offset; int remainder = y % itemHeight;//相對於一個item移動的距離 int divided = y / itemHeight; if (remainder == 0) { // 移動距離不到1個item 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(); } 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 PixelFormat.UNKNOWN; } }; super.setBackgroundDrawable(background); } @Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { super.onScrollChanged(l, t, oldl, oldt); Log.d(TAG, "onScrollChanged() called with: l = [" + l + "], t = [" + t + "], oldl = [" + oldl + "], oldt = [" + oldt + "]"); refreshItemView(t); if (t > oldt) { // Log.d(TAG, "向下滾動"); scrollDirection = SCROLL_DIRECTION_DOWN; } else { // Log.d(TAG, "向上滾動"); scrollDirection = SCROLL_DIRECTION_UP; } } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); Log.d(TAG, "onSizeChanged() called with: w = [" + w + "], h = [" + h + "], oldw = [" + oldw + "], oldh = [" + oldh + "]"); viewWidth = w; setBackgroundDrawable(null); } @Override public void fling(int velocityY) { //加快停下的速度 super.fling(velocityY / 2); } @Override public boolean onTouchEvent(MotionEvent ev) { Log.d(TAG, "onTouchEvent() called with: ev = [" + ev + "]"); if (ev.getAction() == MotionEvent.ACTION_UP) { initialY = getScrollY(); this.postDelayed(scrollerTask, newCheck); } return super.onTouchEvent(ev); } /** * 選中回撥 */ 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; } 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(); } public static interface OnWheelViewListener { public void onSelected(int selectedIndex, String item); } }
- 首先WheelView繼承ScrollView，這樣就很好的解決了上下滾動的問題。
- WheelView裡面add了一個 LinearLayout作為它的唯一子View。LinearLayout豎向排列，當呼叫
- setItems(List<String> list) 的時候就是給Linearlayout新增一個個的子view，豎向排列，並設定Linearlayout和WheelView的高度為3個Item的高度。
- 當所有的Item都新增完後，會觸發protected void onSizeChanged(int w, int h, int oldw, int oldh)，在這裡設定WheelView的背景，也就是夾著中間Item的上下兩根藍色線。
- 在onTouchEvent(MotionEvent ev)方法中，當手指擡起的時候處理移動的距離不是一個Item高度的整數倍的情況，讓Linearlayout緩慢滾動的位置上。
- 最後onScrollChanged(int l, int t, int oldl, int oldt)方法處理每個Item的字型的顏色。