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>

 

WheelPicker

可能是參考了Android-PickerView實現的第三方滾輪選擇器框架，也提供了時間滾輪選擇器，github上也有詳細說明。在WheelView實現上應該是有部分簡化。

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

 

 

 

 

 

End

 

https://github.com/CNCoderX/WheelView