滑动选择对话框WheelDialogFragment

此对话框是在https://github.com/Carbs0126/NumberPickerView的基础上进行开发的，特此感谢Carbs0126！！WheelDialogFragment继承了DialogFragment。在android 3.0时DialogFragment被引入，是一种特殊的Fragment。使用DialogFragment来管理对话框，当旋转屏幕和按下后退键时可以更好的管理其声明周期，它和Fragment有着基本一致的声明周期。

效果图：

wheelDialog.gif

一：创建布局
使用DialogFragment至少需要实现onCreateView或者onCreateDIalog方法。onCreateView即使用定义的xml布局文件展示Dialog。onCreateDialog即利用AlertDialog或者Dialog创建出Dialog。

• 重写onCreateView实现Dialog

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:paddingRight="16dp"
        android:paddingLeft="16dp"
        android:background="@color/white">

        <TextView
            android:id="@+id/tv_wheel_dialog_left"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@android:color/transparent"
            android:gravity="center"
            android:minWidth="48dp"
            android:layout_alignParentLeft="true"
            android:textSize="16sp"
            android:text="取消"
            android:textColor="@color/default_text_color_normal" />

        <TextView
            android:id="@+id/tv_wheel_dialog_right"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@android:color/transparent"
            android:minWidth="48dp"
            android:gravity="center"
            android:layout_alignParentRight="true"
            android:textSize="16sp"
            android:text="确定"
            android:textColor="@color/colorPrimary" />

    </RelativeLayout>

    <com.github.phoenix.widget.WheelView
        android:id="@+id/WheelView_dialog"
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:layout_centerHorizontal="true"
        android:background="@color/default_window_bg"
        android:contentDescription="test_number_picker_view"
        app:npv_ItemPaddingHorizental="5dp"
        app:npv_ItemPaddingVertical="5dp"
        app:npv_ShowCount="5"
        app:npv_TextSizeNormal="16sp"
        app:npv_TextSizeSelected="20sp"
        app:npv_WrapSelectorWheel="true"/>

</LinearLayout>

二：初始化对话框

• 默认的对话框有黑黑的虚框包围，所以我们要把它去掉

  //设置对话框背景色，否则有虚框
  getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

• 设置窗口以对话框的样式显示，并且去除标题

  //设置窗口以对话框样式显示
  setStyle(DialogFragment.STYLE_NO_TITLE, R.style.dialog);

  也可以在

  inflater.inflate(R.layout.view_dialog_wheel, null);

  前面添加
  getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);来去除标题
• 设置对话框显示在窗口底部，且宽度充满屏幕

  //设置对话框显示在底部
  getDialog().getWindow().setGravity(Gravity.BOTTOM);
  //设置让对话框宽度充满屏幕
  getDialog().getWindow().setLayout(ScreenUtil.getScreenWidth(activity), getDialog().getWindow().getAttributes().height);

• 最重要的一步设置对话框从窗口底部滑出

  //设置对话框弹出动画，从底部滑入，从底部滑出
  getDialog().getWindow().getAttributes().windowAnimations = R.style.dialog_animation;

• 下面两个Style分别是R.style.dialog，R.style.dialog_animation

  <!--对话框弹出，window背景变暗-->
  <style name="dialog" parent="Base.Animation.AppCompat.Dialog">    
     <item name="android:backgroundDimEnabled">true</item>
  </style>
  <!--对话框从下向上滑出动画-->
  <style name="dialog.animation">
    <item name="android:windowEnterAnimation">@anim/slide_in_from_bottom</item>
    <item name="android:windowExitAnimation">@anim/slide_out_to_bottom</item>
  </style>

三：滑动监听

• 当上下滑动停止时回调获取选中的数据

  public interface OnWheelDialogListener {
    /**
     * 左边按钮单击事件回调
     * @param value
     */
    void onClickLeft(String value);
    /**
     * 右边按钮单击事件回调
     * @param value
     */
    void onClickRight(String value);
    /**
     * 滑动停止时的回调
     * @param value
     */
    void onValueChanged(String value);
  }
  /**
    * 对外开放的方法
    * @param onWheelDialogListener
    */
  public void setWheelDialogListener(OnWheelDialogListener onWheelDialogListener) {
    this.onWheelDialogListener = onWheelDialogListener;
  }

• 监听WheelView的onValueChange方法取得数据

  @Override
  public void onValueChange(WheelView picker, int oldVal, int newVal) {
    String[] content = wheelView.getDisplayedValues();
    if (content != null && onWheelDialogListener != null) {
        onWheelDialogListener.onValueChanged(content[newVal - wheelView.getMinValue()]);
    }
  }

  四：监听对话框的返回键

  //监听返回键
  getDialog().setOnKeyListener(new DialogInterface.OnKeyListener() {
     @Override
      public boolean onKey(DialogInterface dialog, int keyCode, KeyEvent event) {
           if (keyCode == KeyEvent.KEYCODE_BACK && event.getAction() == KeyEvent.ACTION_DOWN)
                 return isBack;
           return false;
     }
  });
  //触摸对话框外部是否销毁
  getDialog().setCancelable(isCancelable);
  getDialog().setCanceledOnTouchOutside(isCancelableTouchOutSide);

  五：实际应用

  final WheelDialogFragment wheelDialogFragment = WheelDialogFragment.newInstance(ResUtil.getStringArray(R.array.main_home_menu),
                ResUtil.getString(R.string.app_cancel),
                ResUtil.getString(R.string.app_sure), true, false, false);
  wheelDialogFragment.setWheelDialogListener(new WheelDialogFragment.OnWheelDialogListener() {
    @Override
    public void onClickLeft(String value) {
        wheelDialogFragment.dismiss();
    }
    @Override
    public void onClickRight(String value) {
        wheelDialogFragment.dismiss();
        Toast.makeText(getApplicationContext(), value, Toast.LENGTH_SHORT).show();
    }
    @Override
    public void onValueChanged(String value) {
        Log.i("", "current value: " + value);
    }});
  wheelDialogFragment.show(getSupportFragmentManager(), "");

文／GitPhoenix（简书作者）
原文链接：http://www.jianshu.com/p/80351e1a4959
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。