Android自定義可循環(huán)的滾動(dòng)選擇器CycleWheelView
更新時(shí)間：2021年01月02日 09:04:59 作者：勤勞的小蜜蜂啊
Android自定義可循環(huán)的滾動(dòng)選擇器CycleWheelView替代TimePicker/NumberPicker/WheelView，很實(shí)用的一篇文章分享給大家，感興趣的小伙伴們可以參考一下
最近碰到個(gè)項(xiàng)目要使用到滾動(dòng)選擇器，原生的NumberPicker可定制性太差，不大符合UI要求。
網(wǎng)上開源的WheelView是用ScrollView寫的，不能循環(huán)滾動(dòng)，而且當(dāng)數(shù)據(jù)量很大時(shí)要加載的Item太多，性能非常低。
然后，還是自己寫一個(gè)比較靠譜，用的是ListView實(shí)現(xiàn)的。寫完自己體驗(yàn)了一下，性能不錯(cuò)，再大的數(shù)據(jù)也不怕了。
感覺不錯(cuò)，重新封裝了一下，提供了一些接口可以直接按照自己的需求定制，調(diào)用方法在MainActivity中。
補(bǔ)個(gè)圖片：
不多說了，直接上代碼：
CycleWheelView.java:
/**
* Copyright (C) 2015
*
* CycleWheelView.java
*
* Description:
*
* Author: Liao Longhui
*
* Ver 1.0, 2015-07-15, Liao Longhui, Create file
*/
package com.example.wheelviewdemo;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AbsListView;
import android.widget.BaseAdapter;
import android.widget.ListView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
/**
* 可循環(huán)滾動(dòng)的選擇器
* @author Liao Longhui
*
*/
public class CycleWheelView extends ListView {
public static final String TAG = CycleWheelView.class.getSimpleName();
private static final int COLOR_DIVIDER_DEFALUT = Color.parseColor("#747474");
private static final int HEIGHT_DIVIDER_DEFAULT = 2;
private static final int COLOR_SOLID_DEFAULT = Color.parseColor("#3e4043");
private static final int COLOR_SOLID_SELET_DEFAULT = Color.parseColor("#323335");
private static final int WHEEL_SIZE_DEFAULT = 3;
private Handler mHandler;
private CycleWheelViewAdapter mAdapter;
/**
* Labels
*/
private List<String> mLabels;
/**
* Color Of Selected Label
*/
private int mLabelSelectColor = Color.WHITE;
/**
* Color Of Unselected Label
*/
private int mLabelColor = Color.GRAY;
/**
* Gradual Alph
*/
private float mAlphaGradual = 0.7f;
/**
* Color Of Divider
*/
private int dividerColor = COLOR_DIVIDER_DEFALUT;
/**
* Height Of Divider
*/
private int dividerHeight = HEIGHT_DIVIDER_DEFAULT;
/**
* Color of Selected Solid
*/
private int seletedSolidColor = COLOR_SOLID_SELET_DEFAULT;
/**
* Color of Unselected Solid
*/
private int solidColor = COLOR_SOLID_DEFAULT;
/**
* Size Of Wheel , it should be odd number like 3 or greater
*/
private int mWheelSize = WHEEL_SIZE_DEFAULT;
/**
* res Id of Wheel Item Layout
*/
private int mItemLayoutId;
/**
* res Id of Label TextView
*/
private int mItemLabelTvId;
/**
* Height of Wheel Item
*/
private int mItemHeight;
private boolean cylceEnable;
private int mCurrentPositon;
private WheelItemSelectedListener mItemSelectedListener;
public CycleWheelView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public CycleWheelView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CycleWheelView(Context context) {
super(context);
}
private void init() {
mHandler = new Handler();
mItemLayoutId = R.layout.item_cyclewheel;
mItemLabelTvId = R.id.tv_label_item_wheel;
mAdapter = new CycleWheelViewAdapter();
setVerticalScrollBarEnabled(false);
setScrollingCacheEnabled(false);
setCacheColorHint(Color.TRANSPARENT);
setFadingEdgeLength(0);
setOverScrollMode(OVER_SCROLL_NEVER);
setDividerHeight(0);
setAdapter(mAdapter);
setOnScrollListener(new OnScrollListener() {
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
if (scrollState == SCROLL_STATE_IDLE) {
View itemView = getChildAt(0);
if (itemView != null) {
float deltaY = itemView.getY();
if (deltaY == 0) {
return;
}
if (Math.abs(deltaY) < mItemHeight / 2) {
smoothScrollBy(getDistance(deltaY), 50);
} else {
smoothScrollBy(getDistance(mItemHeight + deltaY), 50);
}
}
}
}
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount,
int totalItemCount) {
refreshItems();
}
});
}
private int getDistance(float scrollDistance) {
if (Math.abs(scrollDistance) <= 2) {
return (int) scrollDistance;
} else if (Math.abs(scrollDistance) < 12) {
return scrollDistance > 0 ? 2 : -2;
} else {
return (int) (scrollDistance / 6);
}
}
private void refreshItems() {
int offset = mWheelSize / 2;
int firstPosition = getFirstVisiblePosition();
int position = 0;
if (getChildAt(0) == null) {
return;
}
if (Math.abs(getChildAt(0).getY()) <= mItemHeight / 2) {
position = firstPosition + offset;
} else {
position = firstPosition + offset + 1;
}
if (position == mCurrentPositon) {
return;
}
mCurrentPositon = position;
if (mItemSelectedListener != null) {
mItemSelectedListener.onItemSelected(getSelection(), getSelectLabel());
}
resetItems(firstPosition, position, offset);
}
private void resetItems(int firstPosition, int position, int offset){
for (int i = position - offset - 1; i < position + offset + 1; i++) {
View itemView = getChildAt(i - firstPosition);
if (itemView == null) {
continue;
}
TextView labelTv = (TextView) itemView.findViewById(mItemLabelTvId);
if (position == i) {
labelTv.setTextColor(mLabelSelectColor);
itemView.setAlpha(1f);
} else {
labelTv.setTextColor(mLabelColor);
int delta = Math.abs(i - position);
double alpha = Math.pow(mAlphaGradual, delta);
itemView.setAlpha((float) alpha);
}
}
}
/**
* 設(shè)置滾輪的刻度列表
*
* @param labels
*/
public void setLabels(List<String> labels) {
mLabels = labels;
mAdapter.setData(mLabels);
mAdapter.notifyDataSetChanged();
initView();
}
/**
* 設(shè)置滾輪滾動(dòng)監(jiān)聽
*
* @param mItemSelectedListener
*/
public void setOnWheelItemSelectedListener(WheelItemSelectedListener mItemSelectedListener) {
this.mItemSelectedListener = mItemSelectedListener;
}
/**
* 獲取滾輪的刻度列表
*
* @return
*/
public List<String> getLabels() {
return mLabels;
}
/**
* 設(shè)置滾輪是否為循環(huán)滾動(dòng)
*
* @param enable true-循環(huán) false-單程
*/
public void setCycleEnable(boolean enable) {
if (cylceEnable != enable) {
cylceEnable = enable;
mAdapter.notifyDataSetChanged();
setSelection(getSelection());
}
}
/*
* 滾動(dòng)到指定位置
*/
@Override
public void setSelection(final int position) {
mHandler.post(new Runnable() {
@Override
public void run() {
CycleWheelView.super.setSelection(getPosition(position));
}
});
}
private int getPosition(int positon) {
if (mLabels == null || mLabels.size() == 0) {
return 0;
}
if (cylceEnable) {
int d = Integer.MAX_VALUE / 2 / mLabels.size();
return positon + d * mLabels.size();
}
return positon;
}
/**
* 獲取當(dāng)前滾輪位置
*
* @return
*/
public int getSelection() {
if (mCurrentPositon == 0) {
mCurrentPositon = mWheelSize / 2;
}
return (mCurrentPositon - mWheelSize / 2) % mLabels.size();
}
/**
* 獲取當(dāng)前滾輪位置的刻度
*
* @return
*/
public String getSelectLabel() {
int position = getSelection();
position = position < 0 ? 0 : position;
try {
return mLabels.get(position);
} catch (Exception e) {
return "";
}
}
/**
* 如果需要自定義滾輪每個(gè)Item，調(diào)用此方法設(shè)置自定義Item布局，自定義布局中需要一個(gè)TextView來顯示滾輪刻度
*
* @param itemResId 布局文件Id
* @param labelTvId 刻度TextView的資源Id
*/
public void setWheelItemLayout(int itemResId, int labelTvId) {
mItemLayoutId = itemResId;
mItemLabelTvId = labelTvId;
mAdapter = new CycleWheelViewAdapter();
mAdapter.setData(mLabels);
setAdapter(mAdapter);
initView();
}
/**
* 設(shè)置未選中刻度文字顏色
*
* @param labelColor
*/
public void setLabelColor(int labelColor) {
this.mLabelColor = labelColor;
resetItems(getFirstVisiblePosition(), mCurrentPositon, mWheelSize/2);
}
/**
* 設(shè)置選中刻度文字顏色
*
* @param labelSelectColor
*/
public void setLabelSelectColor(int labelSelectColor) {
this.mLabelSelectColor = labelSelectColor;
resetItems(getFirstVisiblePosition(), mCurrentPositon, mWheelSize/2);
}
/**
* 設(shè)置滾輪刻度透明漸變值
*
* @param alphaGradual
*/
public void setAlphaGradual(float alphaGradual) {
this.mAlphaGradual = alphaGradual;
resetItems(getFirstVisiblePosition(), mCurrentPositon, mWheelSize/2);
}
/**
* 設(shè)置滾輪可顯示的刻度數(shù)量，必須為奇數(shù)，且大于等于3
*
* @param wheelSize
* @throws CycleWheelViewException 滾輪數(shù)量錯(cuò)誤
*/
public void setWheelSize(int wheelSize) throws CycleWheelViewException {
if (wheelSize < 3 || wheelSize % 2 != 1) {
throw new CycleWheelViewException("Wheel Size Error , Must Be 3,5,7,9...");
} else {
mWheelSize = wheelSize;
initView();
}
}
/**
* 設(shè)置塊的顏色
* @param unselectedSolidColor 未選中的塊的顏色
* @param selectedSolidColor 選中的塊的顏色
*/
public void setSolid(int unselectedSolidColor, int selectedSolidColor){
this.solidColor = unselectedSolidColor;
this.seletedSolidColor = selectedSolidColor;
initView();
}
/**
* 設(shè)置分割線樣式
* @param dividerColor 分割線顏色
* @param dividerHeight 分割線高度(px)
*/
public void setDivider(int dividerColor, int dividerHeight){
this.dividerColor = dividerColor;
this.dividerHeight = dividerHeight;
}
@SuppressWarnings("deprecation")
private void initView() {
mItemHeight = measureHeight();
ViewGroup.LayoutParams lp = getLayoutParams();
lp.height = mItemHeight * mWheelSize;
mAdapter.setData(mLabels);
mAdapter.notifyDataSetChanged();
Drawable backgroud = new Drawable() {
@Override
public void draw(Canvas canvas) {
int viewWidth = getWidth();
Paint dividerPaint = new Paint();
dividerPaint.setColor(dividerColor);
dividerPaint.setStrokeWidth(dividerHeight);
Paint seletedSolidPaint = new Paint();
seletedSolidPaint.setColor(seletedSolidColor);
Paint solidPaint = new Paint();
solidPaint.setColor(solidColor);
canvas.drawRect(0, 0, viewWidth, mItemHeight * (mWheelSize / 2), solidPaint);
canvas.drawRect(0, mItemHeight * (mWheelSize / 2 + 1), viewWidth, mItemHeight
* (mWheelSize), solidPaint);
canvas.drawRect(0, mItemHeight * (mWheelSize / 2), viewWidth, mItemHeight
* (mWheelSize / 2 + 1), seletedSolidPaint);
canvas.drawLine(0, mItemHeight * (mWheelSize / 2), viewWidth, mItemHeight
* (mWheelSize / 2), dividerPaint);
canvas.drawLine(0, mItemHeight * (mWheelSize / 2 + 1), viewWidth, mItemHeight
* (mWheelSize / 2 + 1), dividerPaint);
}
@Override
public void setAlpha(int alpha) {
}
@Override
public void setColorFilter(ColorFilter cf) {
}
@Override
public int getOpacity() {
return 0;
}
};
setBackgroundDrawable(backgroud);
}
private int measureHeight() {
View itemView = LayoutInflater.from(getContext()).inflate(mItemLayoutId, null);
itemView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.WRAP_CONTENT));
int w = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
int h = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
itemView.measure(w, h);
int height = itemView.getMeasuredHeight();
// int width = view.getMeasuredWidth();
return height;
}
public interface WheelItemSelectedListener {
public void onItemSelected(int position, String label);
}
public class CycleWheelViewException extends Exception {
private static final long serialVersionUID = 1L;
public CycleWheelViewException(String detailMessage) {
super(detailMessage);
}
}
public class CycleWheelViewAdapter extends BaseAdapter {
private List<String> mData = new ArrayList<String>();
public void setData(List<String> mWheelLabels) {
mData.clear();
mData.addAll(mWheelLabels);
}
@Override
public int getCount() {
if (cylceEnable) {
return Integer.MAX_VALUE;
}
return mData.size() + mWheelSize - 1;
}
@Override
public Object getItem(int position) {
return "";
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public boolean isEnabled(int position) {
return false;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = LayoutInflater.from(getContext()).inflate(mItemLayoutId, null);
}
TextView textView = (TextView) convertView.findViewById(mItemLabelTvId);
if (position < mWheelSize / 2
|| (!cylceEnable && position >= mData.size() + mWheelSize / 2)) {
textView.setText("");
convertView.setVisibility(View.INVISIBLE);
} else {
textView.setText(mData.get((position - mWheelSize / 2) % mData.size()));
convertView.setVisibility(View.VISIBLE);
}
return convertView;
}
}
}
MainActivity.java:
public class MainActivity extends Activity {
private CycleWheelView cycleWheelView0,cycleWheelView1, cycleWheelView2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
cycleWheelView0 = (CycleWheelView) findViewById(R.id.cycleWheelView);
List<String> labels = new ArrayList<>();
for (int i = 0; i < 12; i++) {
labels.add("" + i);
}
cycleWheelView0.setLabels(labels);
cycleWheelView0.setAlphaGradual(0.5f);
cycleWheelView0.setOnWheelItemSelectedListener(new WheelItemSelectedListener() {
@Override
public void onItemSelected(int position, String label) {
Log.d("test", label);
}
});
cycleWheelView1 = (CycleWheelView) findViewById(R.id.cycleWheelView1);
List<String> labels1 = new ArrayList<>();
for (int i = 0; i < 24; i++) {
labels1.add("" + i);
}
cycleWheelView1.setLabels(labels1);
try {
cycleWheelView1.setWheelSize(5);
} catch (CycleWheelViewException e) {
e.printStackTrace();
}
cycleWheelView1.setSelection(2);
cycleWheelView1.setWheelItemLayout(R.layout.item_cyclewheel_custom, R.id.tv_label_item_wheel_custom);
cycleWheelView1.setOnWheelItemSelectedListener(new WheelItemSelectedListener() {
@Override
public void onItemSelected(int position, String label) {
Log.d("test", label);
}
});
cycleWheelView2 = (CycleWheelView) findViewById(R.id.cycleWheelView2);
List<String> labels2 = new ArrayList<>();
for (int i = 0; i < 60; i++) {
labels2.add("" + i);
}
cycleWheelView2.setLabels(labels2);
try {
cycleWheelView2.setWheelSize(7);
} catch (CycleWheelViewException e) {
e.printStackTrace();
}
cycleWheelView2.setCycleEnable(true);
cycleWheelView2.setSelection(30);
cycleWheelView2.setAlphaGradual(0.6f);
cycleWheelView2.setDivider(Color.parseColor("#abcdef"), 2);
cycleWheelView2.setSolid(Color.WHITE,Color.WHITE);
cycleWheelView2.setLabelColor(Color.BLUE);
cycleWheelView2.setLabelSelectColor(Color.RED);
cycleWheelView2.setOnWheelItemSelectedListener(new WheelItemSelectedListener() {
@Override
public void onItemSelected(int position, String label) {
Log.d("test", label);
}
});
}
}
Item_cyclewheel.xml:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="16dp" android:background="@android:color/transparent" > <TextView android:id="@+id/tv_label_item_wheel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="20sp" android:singleLine="true" android:layout_centerHorizontal="true" android:layout_centerVertical="true" /> </RelativeLayout>
Item_cyclewheel_custom.xml:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="16dp" android:background="@android:color/transparent" > <TextView android:id="@+id/tv_label_item_wheel_custom" android:layout_width="wrap_content" android:layout_height="wrap_content" android:singleLine="true" android:layout_alignParentLeft="true" android:layout_centerVertical="true" /> <ImageView android:layout_width="25dp" android:layout_height="25dp" android:layout_centerVertical="true" android:layout_alignParentRight="true" android:src="@drawable/ic_launcher" /> </RelativeLayout>
activity_main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <com.example.wheelviewdemo.CycleWheelView android:id="@+id/cycleWheelView" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" > </com.example.wheelviewdemo.CycleWheelView> <com.example.wheelviewdemo.CycleWheelView android:id="@+id/cycleWheelView1" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" > </com.example.wheelviewdemo.CycleWheelView> <com.example.wheelviewdemo.CycleWheelView android:id="@+id/cycleWheelView2" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" > </com.example.wheelviewdemo.CycleWheelView> </LinearLayout>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了理解Android中的自定義屬性，在android相關(guān)應(yīng)用開發(fā)過程中，固定的一些屬性可能滿足不了開發(fā)的需求，所以需要自定義控件與屬性，本文將以此問題進(jìn)行詳細(xì)介紹，需要的朋友可以參考下2016-01-01
這篇文章主要介紹了深入了解OkHttp3之Interceptors，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
Android實(shí)現(xiàn)拍照、選擇相冊圖片并裁剪功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)拍照、選擇相冊圖片并裁剪功能的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
在我們的qq聊天工具中，經(jīng)常會(huì)使用qq頭像截取功能，基于代碼是怎么實(shí)現(xiàn)的呢？下面小編通過本文給大家分享android 仿qq頭像自定義截取功能的思路分析及編碼實(shí)現(xiàn)過程，感興趣的朋友一起學(xué)習(xí)吧2016-10-10
Android自定義View實(shí)現(xiàn)圓形進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)圓形進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要為大家介紹了Jetpack?Compose?分步指南教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了Android開發(fā)中Kotlin線程的橋接與切換，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
RxJava 1升級到RxJava 2過程中踩過的一些“坑”
RxJava2相比RxJava1，它的改動(dòng)還是很大的，那么下面這篇文章主要給大家總結(jié)了在RxJava 1升級到RxJava 2過程中踩過的一些“坑”，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下來要一起看看吧。2017-05-05
Android 8.0 讀取內(nèi)部和外部存儲(chǔ)以及外置SDcard的方法
今天小編就為大家分享一篇Android 8.0 讀取內(nèi)部和外部存儲(chǔ)以及外置SDcard的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
輕松實(shí)現(xiàn)功能強(qiáng)大的Android刮獎(jiǎng)效果控件（ScratchView）
這篇文章主要為大家詳細(xì)介紹了ScratchView如何一步步打造萬能的Android刮獎(jiǎng)效果控件，,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09