Android开发 滚轮View第三方框架

前言

　　这个博客记录几个好用的滚轮View框架

 

WheelView

单纯的滚轮View

地址：https://github.com/CNCoderX/WheelView

添加依赖

compile 'com.cncoderx.wheelview:library:1.2.5'

使用方法

在xml文件中添加

<com.cncoderx.wheelview.Wheel3DView
    android:id="@+id/wheel3d"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    app:wheelCyclic="true"
    app:wheelEntries="@array/default_array"
    app:wheelItemCount="9"
    app:wheelItemWidth="160dp"
    app:wheelItemHeight="40dp"
    app:wheelTextSize="@dimen/wheel_text_size"
    app:wheelTextColor="@color/wheel_text_color"
    app:wheelSelectedTextColor="@color/wheel_selected_text_color"
    app:wheelDividerColor="@color/wheel_divider_color"
    app:wheelHighlightColor="@color/wheel_highlight_color" />

在java文件中添加

WheelView wheelView = (WheelView) findViewById(R.id.wheel);
wheelView.setOnWheelChangedListener(new OnWheelChangedListener() {
    @Override
    public void onChanged(WheelView view, int oldIndex, int newIndex) {
        CharSequence text = view.getItem(newIndex);
        Log.i("WheelView", String.format("index: %d, text: %s", newIndex, text));
    }
});

Android-PickerView

较为热门的Android第三方滚轮选择器框架，已经提供了时间滚轮选择器，github里有详细说明，并且有提供博客地址阅读了解滚轮View的实现原理。在项目里最关键的是WheelView这个View，并且有大量注释十分适合学习与修改。

地址：https://github.com/Bigkoo/Android-PickerView

使用Demo自定义时间选择器

java

/**
     * 显示时间选择器
     */
    private fun showTimePickerDialog() {
        if (mTimePickerDialog != null) {
            mTimePickerDialog?.dismiss()
            mTimePickerDialog = null
        }
        mTimePickerDialog = TimePickerBuilder(context) { date, view ->
            val simpleDateFormat = SimpleDateFormat("yyyy/MM/dd", Locale.getDefault())
            startDateContent.text = simpleDateFormat.format(date.time)
            startDateContent.setTextColor(resources.getColor(R.color.color_181818))
        }
                .setLayoutRes(R.layout.bl_dialog_date_picker) { view ->
                    view.rootView.elevation = 10f
                    val title = view.findViewById<TextView>(R.id.title)
                    val leftBtn = view.findViewById<TextView>(R.id.left_btn)
                    val rightBtn = view.findViewById<TextView>(R.id.right_btn)
                    title.setText("开始日期")
                    leftBtn.setText("取消")
                    rightBtn.setText("确定")
                    rightBtn.setTextColor(resources.getColor(R.color.color_FF7A0D))
                    leftBtn.setOnClickListener { mTimePickerDialog?.dismiss() }
                    rightBtn.setOnClickListener {
                        mTimePickerDialog?.returnData() //刷新时间,让上面的回调触发
                        mTimePickerDialog?.dismiss()
                    }
                }
                .setType(booleanArrayOf(true, true, true, true, true, false))
                .setContentTextSize(18)
                .setLineSpacingMultiplier(2.5f)
                .isCenterLabel(true)
                .isCyclic(true)
                .setDecorView(rootLayout)
                .build()
        mTimePickerDialog?.show(false)
    }

 

xml

请注意,year,month,day,hour,min,second 这6个id的View必选

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:background="@drawable/bl_shape_while_rectangle_top_10dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/left_btn"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="left|center_vertical"
        android:paddingLeft="25dp"
        android:paddingTop="13dp"
        android:paddingBottom="13dp"
        android:textColor="@color/color_181818"
        android:textSize="18sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/title" />

    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:paddingTop="13dp"
        android:paddingBottom="13dp"
        android:singleLine="true"
        android:textColor="@color/color_181818"
        android:textSize="18sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@id/left_btn"
        app:layout_constraintRight_toLeftOf="@id/right_btn" />

    <TextView
        android:id="@+id/right_btn"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="right|center_vertical"
        android:paddingTop="13dp"
        android:paddingRight="25dp"
        android:paddingBottom="13dp"
        android:textColor="@color/color_181818"
        android:textSize="18sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@id/title"
        app:layout_constraintRight_toRightOf="parent" />

    <View
        android:id="@+id/line"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:background="@color/color_F2F2F2"
        app:layout_constraintTop_toBottomOf="@id/title"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <LinearLayout
        android:id="@+id/timepicker"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@android:color/white"
        android:gravity="center"
        android:minHeight="150dp"
        android:orientation="horizontal"
        android:layout_marginLeft="22dp"
        android:layout_marginRight="22dp"
        app:layout_constraintTop_toBottomOf="@id/line"
        app:layout_constraintBottom_toBottomOf="parent">

        <com.contrarywind.view.WheelView
            android:id="@+id/year"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <com.contrarywind.view.WheelView
            android:id="@+id/month"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <com.contrarywind.view.WheelView
            android:id="@+id/day"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <com.contrarywind.view.WheelView
            android:id="@+id/hour"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <com.contrarywind.view.WheelView
            android:id="@+id/min"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <com.contrarywind.view.WheelView
            android:id="@+id/second"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

如果需要单独WheelView使用

请注意WheelView的宽高是根据父类布局来设置的，所以如果你需要调整WheelView的大小，需要给它套一个父类布局

        mBinding.hour.setTextSize(42f)
        //分割线颜色
        mBinding.hour.setDividerColor(Color.TRANSPARENT)
        //行距乘数
        mBinding.hour.setLineSpacingMultiplier(1.65f)
        //是否透明渐变
        mBinding.hour.setAlphaGradient(true)
        //显示多少个item
        mBinding.hour.setItemsVisibleCount(5)
        //中间item颜色
        mBinding.hour.setTextColorCenter(resources.getColor(R.color.main_color_9F621B))
        //其他item颜色
        mBinding.hour.setTextColorOut(resources.getColor(R.color.main_color_9F621B))
        mBinding.hour.adapter = object :WheelAdapter<String>{
            override fun getItemsCount() = hourList.size
            override fun getItem(index: Int) = hourList[index]
            override fun indexOf(o: String?) = hourList.indexOf(o)
        }

 

WheelPicker

可能是参考了Android-PickerView实现的第三方滚轮选择器框架，也提供了时间滚轮选择器，github上也有详细说明。在WheelView实现上应该是有部分简化。

地址：https://github.com/zyyoona7/WheelPicker

 

 

 

 

 

End

 

https://github.com/CNCoderX/WheelView