Android 时间选择器（TimeBucketSelector）

Android TimeBucketSelector 时间段选择器

首先感谢GitHub mrfluency 大神的Time-Selector

TimeBucketSelector 控件基于 jingchenUSTC/TimePicker的选择器，感兴趣的可以传送去看一下。

先看一下效果图

---

思路
- 1.底部弹出实现
- 2.时间选择及格式判定
- 3.动画效果

---

看一下调用方法，特别简单
先实例化

TimeBucketSelector timeBucketSelector=TimeBucketSelector.init(this);

显示

 timeBucketSelector.show(v, "00:00-00:00");

隐藏

timeBucketSelector.hide();

清除（建议在activity stop的时候就将popupwindow清除掉）

timeBucketSelector.clear();

监听事件

timeBucketSelector.setOnTimeSelectedListener(new TimeBucketSelector.OnTimeSelectedListener() {
            @Override
            public void OnSelected(String date) {

            }
        });

首先我们需要一个装载View的容器，我这里选择PopupWindow来实现，原因是PopupWindow自定义动画比较方便，用起来也比较简单（个人观点）。

先导入依赖

compile 'com.feezu.liuli:timeselector:1.1.3+' 

然后开始布局，这里我用了4个TimePicker来显示开始时、分及结束时、分

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/time_cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:background="@drawable/click_bg"
            android:gravity="center"
            android:layout_margin="5dp"
            android:padding="16dp"
            android:text="取消"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/time_ok"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:background="@drawable/click_bg"
            android:gravity="center"
            android:padding="16dp"
            android:layout_margin="5dp"
            android:text="确定"
            android:textColor="@color/colorPrimary"
            android:textSize="16sp" />
    RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">

        <org.feezu.liuli.timeselector.view.PickerView
            android:id="@+id/picker_start_hour"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_weight="1" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:text=":"
            android:textSize="18sp" />

        <org.feezu.liuli.timeselector.view.PickerView
            android:id="@+id/picker_start_min"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="0.5"
            android:gravity="center"
            android:text="-"
            android:textSize="18sp" />

        <org.feezu.liuli.timeselector.view.PickerView
            android:id="@+id/picker_end_hour"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:text=":"
            android:textSize="18sp" />

        <org.feezu.liuli.timeselector.view.PickerView
            android:id="@+id/picker_end_min"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="16dp"
            android:layout_weight="1" />
    LinearLayout>
LinearLayout>

然后就是逻辑的实现了，创建四个集合来装开始时、分和结束时、分

 private ArrayList hour_s, min_s, hour_n, min_n;

        hour_s = new ArrayList<>();
        min_s = new ArrayList<>();
        hour_n = new ArrayList<>();
        min_n = new ArrayList<>();

        for (int i = 0; i < 24; i++) {
            if (i < 10)
                hour_s.add("0" + i);
            else
                hour_s.add(i + "");
        }
        for (int i = 0; i < 60; i++) {
            if (i < 10)
                min_s.add("0" + i);
            else
                min_s.add(i + "");
        }

        for (int i = 0; i < 24; i++) {
            if (i < 10)
                hour_n.add("0" + i);
            else
                hour_n.add(i + "");
        }

        for (int i = 0; i < 60; i++) {
            if (i < 10)
                min_n.add("0" + i);
            else
                min_n.add(i + "");
        }

再把这四个集合放到对应的TimePicker里面去基本上就能用了，为了满足有时候我们要默认显示一个时间段，就需要给TimePicker设置一个默认值，TimePicker可以根据集合下标来选择和直接查找item项

/**
     * 设置默认值
     *
     * @param Date
     */
    public void setDefaultSelected(String Date) {

        String sh, sm, eh, em;

        if (Date.equals(""))
            return;

        sh = Date.split("-")[0].split(":")[0];
        sm = Date.split("-")[0].split(":")[1];
        eh = Date.split("-")[1].split(":")[0];
        em = Date.split("-")[1].split(":")[1];

        if (start_hour != null && start_min != null && end_hour != null && end_min != null) {
            start_hour.setSelected(sh);
            start_min.setSelected(sm);
            end_hour.setSelected(eh);
            end_min.setSelected(em);

            s_hour = sh;
            s_min = sm;
            e_hour = eh;
            e_min = em;
        }
    }

这样就差不多了，其实很简单。

PopupWindow的动画xml
隐藏

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="400"
        android:fromYDelta="0%p"
        android:toYDelta="100%p" />

set>

显示

<set xmlns:android="http://schemas.android.com/apk/res/android">
   <translate
    android:duration="400"
    android:fromYDelta="100%p"
    android:toYDelta="0" />
set>

Style里面设置一下

 
    <style name="mypopwindow_anim_style">
        <item name="android:windowEnterAnimation">@anim/popupwindow_bottom_show_anim
        

        "android:windowExitAnimation">@anim/popupwindow_bottom_hide_anim
        
    style>

上面选择和取消按钮的点击效果是5.0新出的，这里也贴出来，既然是5.0的新特性，就需要建一个 drawable-21

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@android:color/darker_gray">
    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/white" />
        shape>
    item>
ripple>

在系统低于5.0的时候就需要另外的xml来设置了

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@android:color/white" android:state_pressed="true"/>
    <item android:drawable="@android:color/white" android:state_focused="false" android:state_pressed="false"/>
    <item android:drawable="@android:color/darker_gray"  android:state_focused="true"/>
    <item android:drawable="@android:color/white" android:state_focused="false"/>

selector>

源码下载地址，包会比较大，gradle忘记删了