Android PickerView的实现

本文详细介绍了如何使用自定义PickerView组件实现多级联动选择功能,包括XML引用、Java代码调用及关键代码解析,提供了一个完整的实现流程。通过设置数据集、监听器和回调方法,实现不同层级数据的动态更新和展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

话不多说,直接上图
这里写图片描述

这样子的PickerView,也就是自定义一个View。直接上代码

/*
 * 使用:xml文件中直接引用,需要多少列数据就用多少个PickerView
 * 在Activity中:获取到PickerView实例后,使用setData()方法设置数据,其他方法见103行
 * 关联数据:比如现在第一列选中xx市,可以在监听中为第二个PickerView调用setData()来更新第二列的数据
 */
public class PickerView extends View
{

    public static final String TAG = "PickerView";
    /**
     * text之间间距和minTextSize之比
     */
    public static final float MARGIN_ALPHA = 2.8f;
    /**
     * 自动回滚到中间的速度
     */
    public static final float SPEED = 2;

    private List<String> mDataList;
    /**
     * 默认初始化时选中的位置,这个位置是mDataList的中心位置,一直不变
     */
    private int mCurrentSelected;
    private Paint mPaint;

    private float mMaxTextSize = 80;
    private float mMinTextSize = 40;

    private float mMaxTextAlpha = 255;
    private float mMinTextAlpha = 120;

    private int mColorText = 0x333333;

    private int mViewHeight;
    private int mViewWidth;

    private float mLastDownY;
    /**
     * 滑动的距离
     */
    private float mMoveLen = 0;
    private boolean isInit = false;
    private onSelectListener mSelectListener;
    private Timer timer;
    private MyTimerTask mTask;

    Handler updateHandler = new Handler()
    {

        @Override
        public void handleMessage(Message msg)
        {
            if (Math.abs(mMoveLen) < SPEED)
            {
                mMoveLen = 0;
                if (mTask != null)
                {
                    mTask.cancel();
                    mTask = null;
                    performSelect();
                }
            } else
                // 这里mMoveLen / Math.abs(mMoveLen)是为了保有mMoveLen的正负号,以实现上滚或下滚
                mMoveLen = mMoveLen - mMoveLen / Math.abs(mMoveLen) * SPEED;
            invalidate();
        }

    };

    //构造方法都调用init
    public PickerView(Context context)
    {
        super(context);
        init();
    }

    public PickerView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        init();
    }
    //以下为主要使用的public方法---------------------------------------------------------------------------------

    /*
     * 获取到当前选中的数据在数据集中的position
     */
    public int getCurrentItem(){
        return mCurrentSelected;
    };
    /*
     * 设置监听,这个onSelectedLisener需要实现一个onSelect(String text)方法
     * text是当前显示的数据
     */
    public void setOnSelectListener(onSelectListener listener)
    {
        mSelectListener = listener;
    }
    /*
     * 设置数据集,参数类型为List
     */
    public void setData(List<String> datas)
    {
        mDataList = datas;
        mCurrentSelected = datas.size() / 2;
        invalidate();
    }
    /*
     * 设置当前选中的数据
     */
    public void setSelected(int selected)
    {
        mCurrentSelected = selected;
    }

    //-------------------------------------------------------------------------------------
    private void performSelect()
    {
        if (mSelectListener != null)
            mSelectListener.onSelect(mDataList.get(mCurrentSelected));
    }



    private void moveHeadToTail()
    {
        String head = mDataList.get(0);
        mDataList.remove(0);
        mDataList.add(head);
    }

    private void moveTailToHead()
    {
        String tail = mDataList.get(mDataList.size() - 1);
        mDataList.remove(mDataList.size() - 1);
        mDataList.add(0, tail);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mViewHeight = getMeasuredHeight();
        mViewWidth = getMeasuredWidth();
        // 按照View的高度计算字体大小
        mMaxTextSize = mViewHeight / 4.0f;
        mMinTextSize = mMaxTextSize / 2f;
        isInit = true;
        invalidate();
    }

    private void init()
    {
        timer = new Timer();
        mDataList = new ArrayList<String>();
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setTextAlign(Paint.Align.CENTER);
        mPaint.setColor(mColorText);
    }

    @Override
    protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
        // 根据index绘制view
        if (isInit)
            drawData(canvas);
    }

    private void drawData(Canvas canvas)
    {
        // 先绘制选中的text再往上往下绘制其余的text
        float scale = parabola(mViewHeight / 4.0f, mMoveLen);
        float size = (mMaxTextSize - mMinTextSize) * scale + mMinTextSize;
        mPaint.setTextSize(size);
        mPaint.setAlpha((int) ((mMaxTextAlpha - mMinTextAlpha) * scale + mMinTextAlpha));
        // text居中绘制,注意baseline的计算才能达到居中,y值是text中心坐标
        float x = (float) (mViewWidth / 2.0);
        float y = (float) (mViewHeight / 2.0 + mMoveLen);
        Paint.FontMetricsInt fmi = mPaint.getFontMetricsInt();
        float baseline = (float) (y - (fmi.bottom / 2.0 + fmi.top / 2.0));

        canvas.drawText(mDataList.get(mCurrentSelected), x, baseline, mPaint);
        Paint linePaint=new Paint();
        linePaint.setColor(Color.LTGRAY);
        linePaint.setStrokeWidth(3);



        // 绘制上方data
        for (int i = 1; (mCurrentSelected - i) >= 0; i++)
        {
            drawOtherText(canvas, i, -1);
        }
        // 绘制下方data
        for (int i = 1; (mCurrentSelected + i) < mDataList.size(); i++)
        {
            drawOtherText(canvas, i, 1);
        }

    }

    /**
     * @param canvas
     * @param position
     *            距离mCurrentSelected的差值
     * @param type
     *            1表示向下绘制,-1表示向上绘制
     */
    private void drawOtherText(Canvas canvas, int position, int type)
    {
        float d = (float) (MARGIN_ALPHA * mMinTextSize * position + type
                * mMoveLen);
        float scale = parabola(mViewHeight / 4.0f, d);
        float size = (mMaxTextSize - mMinTextSize) * scale + mMinTextSize;
        mPaint.setTextSize(size);
        mPaint.setAlpha((int) ((mMaxTextAlpha - mMinTextAlpha) * scale + mMinTextAlpha));
        float y = (float) (mViewHeight / 2.0 + type * d);
        Paint.FontMetricsInt fmi = mPaint.getFontMetricsInt();
        float baseline = (float) (y - (fmi.bottom / 2.0 + fmi.top / 2.0));
        canvas.drawText(mDataList.get(mCurrentSelected + type * position),
                (float) (mViewWidth / 2.0), baseline, mPaint);
    }

    /**
     * 抛物线
     *
     * @param zero
     *            零点坐标
     * @param x
     *            偏移量
     * @return scale
     */
    private float parabola(float zero, float x)
    {
        float f = (float) (1 - Math.pow(x / zero, 2));
        return f < 0 ? 0 : f;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event)
    {
        switch (event.getActionMasked())
        {
            case MotionEvent.ACTION_DOWN:
                doDown(event);
                break;
            case MotionEvent.ACTION_MOVE:
                doMove(event);
                break;
            case MotionEvent.ACTION_UP:
                doUp(event);
                break;
        }
        return true;
    }

    private void doDown(MotionEvent event)
    {
        if (mTask != null)
        {
            mTask.cancel();
            mTask = null;
        }
        mLastDownY = event.getY();
    }

    private void doMove(MotionEvent event)
    {

        mMoveLen += (event.getY() - mLastDownY);

        if (mMoveLen > MARGIN_ALPHA * mMinTextSize / 2)
        {
            // 往下滑超过离开距离
            moveTailToHead();
            mMoveLen = mMoveLen - MARGIN_ALPHA * mMinTextSize;
        } else if (mMoveLen < -MARGIN_ALPHA * mMinTextSize / 2)
        {
            // 往上滑超过离开距离
            moveHeadToTail();
            mMoveLen = mMoveLen + MARGIN_ALPHA * mMinTextSize;
        }

        mLastDownY = event.getY();
        invalidate();
    }

    private void doUp(MotionEvent event)
    {
        // 抬起手后mCurrentSelected的位置由当前位置move到中间选中位置
        if (Math.abs(mMoveLen) < 0.0001)
        {
            mMoveLen = 0;
            return;
        }
        if (mTask != null)
        {
            mTask.cancel();
            mTask = null;
        }
        mTask = new MyTimerTask(updateHandler);
        timer.schedule(mTask, 0, 10);
    }

    class MyTimerTask extends TimerTask
    {
        Handler handler;

        public MyTimerTask(Handler handler)
        {
            this.handler = handler;
        }

        @Override
        public void run()
        {
            handler.sendMessage(handler.obtainMessage());
        }

    }

    public interface onSelectListener
    {
        void onSelect(String text);
    }

在xml中引用

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
    <LinearLayout
        android:layout_centerHorizontal="true"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <com.liu.pickerview.PickerView
            android:id="@+id/year_picker"
            android:layout_width="100dp"
            android:layout_height="100dp" />
        <com.liu.pickerview.PickerView
            android:id="@+id/month_picker"
            android:layout_width="100dp"
            android:layout_height="100dp" />
    </LinearLayout>

</RelativeLayout>

在java代码中调用

public class MainActivity extends AppCompatActivity {
    private PickerView year, month;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        year = (PickerView) findViewById(R.id.year_picker);
        month = (PickerView) findViewById(R.id.month_picker);

        ArrayList<String> month_list=new ArrayList<>();
        for (int i=0;i<12;i++){
            month_list.add(i + "");
        }
        ArrayList<String> year_list=new ArrayList<>();
        for (int i=0;i<100;i++){
            year_list.add( i + "");
        }

        year.setData(year_list);
        month.setData(month_list);


        year.setOnSelectListener(new PickerView.onSelectListener() {
            @Override
            public void onSelect(String text) {
                Log.i("tag","选择了"+text);
            }
        });
        month.setOnSelectListener(new PickerView.onSelectListener() {
            @Override
            public void onSelect(String text) {
                Log.i("tag","选择了"+text);
            }
        });
    }
}

demo下载地址:http://download.youkuaiyun.com/detail/u013290075/9304729

作者jaaksi,源码pickerview,一个非常好用的 Android PickerView 库,内部提供 3 种常用类型的 Picker,支持扩展自定义 Picker:TimePicker:时间选择器,支持聚合模式的时间选择器(合并 v1.x 的 MixedTimePicker)OptionPicker:联动选择器效果图  APKDemo App下载连接PickerView READMEPicker通过组装 PickerView 实现常用的 Picker 选择器。上面已经列举提供的 3 中常用的 Picker。BasePickerPicker 基类:封装了 TopBar,PickerView 容器,create and add PickerView 方法,Picker 弹窗等方法。 三种 Picker 都继承自 BasePicker,你也可以继承它扩展自己的 Picker。APIapidescriptionsetPickerBackgroundColor设置 picker 背景setPadding设置 PickerView 父容器 padding 单位:pxsetTag给 Picker 设置 tag,用于区分不同的 picker 等。用法同 View setTaggetRootLayout获取 PickerView 的父容器,创建 DefaultTopBar 时必须指定setOnPickerChooseListener设置 picker 取消,确定按钮监听。可用于拦截选中操作setTopBar设置自定义 TopBarsetInterceptor设置拦截器createPickerView创建 PickerViewgetPickerViews获取 Picker 中所有的 pickerview 集合addPicker将创建的 PickerView 添加到上面集合中,createPickerView 内部已调用该方法findPickerViewByTag通过 tag 找到对应的 PickerViewisScrolling是否滚动未停止。滚动未停止的时候,不响应 Picker 的取消,确定按键getPickerDialog获取 Picker 弹窗。可以在 new 之后设置 dialog 属性show显示 picker 弹窗对比 github 上最受欢迎的同类库 Android-PickerView ,本库将 TopBar 等通用相关逻辑封装在基类中,并提供代码中创建 PickerView 方法,不需要再依赖 xml。用户自定义 Picker 时,继承 BasePicker,只需要处理自己的逻辑即可,简单便捷。 而对 Android-PickerView 来说,实现自定义 Picker,依然需要处理 TopBar 等逻辑,造成大量重复代码。TopBarTopBar:TopBar 通过抽象接口 ITopBar 来管理,实现 Picker 与 TopBar 的解耦。提供默认实现 DefaultTopBar。可实现接口定制自己的 TopBar。   public interface ITopBar {      /**       * @return topbar view       */      View getTopBarView();      /**       * @return 取消按钮 view       */      View getBtnCancel();      /**       * @return 确定按钮 view       */      View getBtnConfirm();      /**       * @return title view       */      TextView getTitleView();    }DefaultTopBar APIapidescriptionsetDividerColor设置 topbar bottom line colorsetDividerHeight设置 bottom divider line heightgetDivider获取 TopBar bottom linegetTitleView获取 TopBar title viewInterceptor拦截器:用于在 pickerview 创建时拦截,设置 pickerview 的属性。Picker 内部并不提供对 PickerView 的设置方法,而是通过 Interceptor 实现。这种设计用来实现 Picker 和 PickerView 的属性设置完美解耦。   private void init(){     mTimePicker.setInterceptor(new 
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值