快捷導航

android時間選擇控件之TimePickerView使用方法詳解

更新時間：2022年09月19日 11:10:28 作者：Lane.Lin

這篇文章主要為大家詳細介紹了android時間選擇控件之TimePickerView的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

相信大家都有這樣的一個需求，選擇相應(yīng)開始時間和結(jié)束時間，對數(shù)據(jù)進行篩選，下面就將使用TimePickerView實現(xiàn)這么一個功能。

一、先導入依賴

implementation "com.contrarywind:Android-PickerView:3.2.7"

二、在界面上畫出選擇時間的框框，這里大家就根據(jù)自己的UI畫就行，我個人用的是約束性布局

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

? ? <TextView
? ? ? ? android:id="@+id/tv_history_default"
? ? ? ? android:layout_width="wrap_content"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:layout_marginLeft="40dp"
? ? ? ? android:layout_marginTop="10dp"
? ? ? ? android:text="時間"
? ? ? ? android:textColor="@color/white"
? ? ? ? android:textSize="36sp"
? ? ? ? app:layout_constraintLeft_toLeftOf="parent"
? ? ? ? app:layout_constraintTop_toTopOf="parent" />


? ? <TextView
? ? ? ? android:id="@+id/tv_date_start"
? ? ? ? android:layout_width="300dp"
? ? ? ? android:layout_height="72dp"
? ? ? ? android:layout_marginLeft="31dp"
? ? ? ? android:background="@drawable/style_history_time"
? ? ? ? android:gravity="center"
? ? ? ? android:hint="請選擇開始日期"
? ? ? ? android:textSize="40sp"
? ? ? ? app:layout_constraintBottom_toBottomOf="@id/tv_history_default"
? ? ? ? app:layout_constraintLeft_toRightOf="@id/tv_history_default"
? ? ? ? app:layout_constraintTop_toTopOf="@id/tv_history_default" />

? ? <TextView
? ? ? ? android:id="@+id/tv_default_zhi"
? ? ? ? android:layout_width="wrap_content"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:layout_marginLeft="54dp"
? ? ? ? android:text="至"
? ? ? ? android:textColor="@color/white"
? ? ? ? android:textSize="36sp"
? ? ? ? app:layout_constraintLeft_toRightOf="@id/tv_date_start"
? ? ? ? app:layout_constraintTop_toTopOf="@id/tv_history_default" />

? ? <TextView
? ? ? ? android:id="@+id/tv_date_end"
? ? ? ? android:layout_width="300dp"
? ? ? ? android:layout_height="72dp"
? ? ? ? android:layout_marginLeft="54dp"
? ? ? ? android:background="@drawable/style_history_time"
? ? ? ? android:gravity="center"
? ? ? ? android:hint="請選擇結(jié)束日期"
? ? ? ? android:textSize="40sp"
? ? ? ? app:layout_constraintLeft_toRightOf="@id/tv_default_zhi"
? ? ? ? app:layout_constraintTop_toTopOf="@id/tv_date_start" />
? ? ? ??
</androidx.constraintlayout.widget.ConstraintLayout>

畫出來就這么一個效果，其實還挺容易的，這是默認的樣子

二、界面畫完接下來就去實現(xiàn)了，我是在fragment中添加的，這個看你自己是在什么地方使用，只是改變上下文而已。

public class TimerFragment extends Fragment implements View.OnClickListener {

? ? private TimePickerView pvTime;//TimePickerView 時間選擇器
? ? private String startTime;
? ? private String endTime;
? ? private TextView tvDateStart, tvDateEnd;

? ? @Override
? ? public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
? ? ? ? View view = inflater.inflate(R.layout.fragment_timer, container, false);
? ? ? ? tvDateStart = view.findViewById(R.id.tv_date_start);
? ? ? ? tvDateEnd = view.findViewById(R.id.tv_date_end);
? ? ? ? tvDateStart.setOnClickListener(this);
? ? ? ? tvDateEnd.setOnClickListener(this);
? ? ? ? selectDate();
? ? ? ? return view;
? ? }

? ? //選擇起止時間
? ? private void selectDate() {
? ? ? ? //控制時間范圍(如果不設(shè)置范圍，則使用默認時間1900-2100年，此段代碼可注釋)
? ? ? ? //因為系統(tǒng)Calendar的月份是從0-11的,所以如果是調(diào)用Calendar的set方法來設(shè)置時間,月份的范圍也要是從0-11
? ? ? ? Calendar selectedDate = Calendar.getInstance();
? ? ? ? Calendar startDate = Calendar.getInstance();
? ? ? ? startDate.set(2020, 0, 1);
? ? ? ? Calendar endDate = Calendar.getInstance();
? ? ? ? endDate.set(2040, 11, 31);
? ? ? ? //時間選擇器
? ? ? ? pvTime = new TimePickerView.Builder(getActivity(), new TimePickerView.OnTimeSelectListener() {
? ? ? ? ? ? @Override
? ? ? ? ? ? public void onTimeSelect(Date date, View v) {//選中事件回調(diào)
? ? ? ? ? ? ? ? // 這里回調(diào)的v,就是show()方法里面所添加的 View 參數(shù)，如果show的時候沒有添加參數(shù)，v則為null
? ? ? ? ? ? ? ? TextView tv = (TextView) v;
? ? ? ? ? ? ? ? if (tv == tvDateStart) {
? ? ? ? ? ? ? ? ? ? startTime = getTimes(date);
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? endTime = getTimes(date);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? //startTime 就為開始時間，endTime為結(jié)束時間
? ? ? ? ? ? ? ? Log.e("TAG", "開始: " + startTime + " 結(jié)束為" + endTime);
? ? ? ? ? ? ? ? tv.setText(getTimes(date));
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? ? ? ? ? //年月日時分秒的顯示與否，不設(shè)置則默認全部顯示，這里可自行定制,true顯示，false不顯示
? ? ? ? ? ? ? ? .setType(new boolean[]{true, true, false, false, false, false})
? ? ? ? ? ? ? ? .setLabel(" 年", "月", "日", "時", "分", "")
? ? ? ? ? ? ? ? .isCenterLabel(true)
? ? ? ? ? ? ? ? .setDividerColor(Color.DKGRAY)
? ? ? ? ? ? ? ? .setContentSize(50)
? ? ? ? ? ? ? ? .setDate(selectedDate)
? ? ? ? ? ? ? ? .setRangDate(startDate, endDate)
? ? ? ? ? ? ? ? .setDecorView(null)
? ? ? ? ? ? ? ? .build();
? ? }

? ? @Override
? ? public void onClick(View v) {
? ? ? ? switch (v.getId()) {
? ? ? ? ? ? case R.id.tv_date_start:
? ? ? ? ? ? ? ? //點擊組件的點擊事件
? ? ? ? ? ? ? ? pvTime.show(tvDateStart);
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case R.id.tv_date_end:
? ? ? ? ? ? ? ? pvTime.show(tvDateEnd);
? ? ? ? ? ? ? ? break;
? ? ? ? }
? ? }

? public String getTimes(Date date) {//可根據(jù)需要自行格式化數(shù)據(jù)顯示
? ? ? ? SimpleDateFormat format = new SimpleDateFormat("yyyy-MM");
? ? ? ? return format.format(date);
? ? }
}

就這樣，時間選擇器就做完啦?。?！下圖是點擊時間，從底部劃出的框框！