仿ios的PickerView

首先看一下效果:

仿ios的PickerView_第1张图片

这个一个点击按钮弹出的dialog,中间是一个类似于ios的PickerVew。
接下来看一下它是怎么实现的:
具体的pickerView,我使用了一个第三方写的,这里就不贴上代码了。
主要是看一下,dialog与pickerView的结合使用:
首先是这个布局:

仿ios的PickerView_第2张图片

中间是一个PickerView


<LinearLayout 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"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:padding="10dp">

            <TextView
                android:id="@+id/tv_cancel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:padding="10dp"
                android:text="取消"
                android:textColor="@color/colorPrimary"
                android:textSize="16sp" />


            <TextView
                android:id="@+id/tv_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="请选择分组"
                android:textColor="@color/colorPrimary"
                android:textSize="20sp" />


            <TextView
                android:id="@+id/tv_select"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:padding="10dp"
                android:text="选择"
                android:textColor="@color/colorPrimary"
                android:textSize="16sp" />

        RelativeLayout>

        <View
            android:layout_width="fill_parent"
            android:layout_height="0.5dp"
            android:background="#11112233" />

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


            <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp"
                android:background="#ffffff"
                android:paddingBottom="15dp"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:paddingTop="15dp">

                <com.ckw.zfsoft.customaddviewlayout.TimePicker.PickerView
                    android:id="@+id/picker_view"
                    android:layout_centerHorizontal="true"
                    android:layout_width="wrap_content"
                    android:layout_height="160dp"
                     />





            RelativeLayout>


        RelativeLayout>

    LinearLayout>


LinearLayout>

接着看代码:
这里自定义了一个结合使用Dialog和PickerView的控件

它的构造函数是这样的:

public SinglePickerView(Context context,ResultHandler resultHandler,ArrayList list){
        this.context = context;
        this.handler = resultHandler;
        this.list = list;
        initDialog();
        initView();
    }

其中,ResultHandler是一个接口,用于向外部提供数据

 public interface ResultHandler {
        void handle(String selectStr);
    }

list是要显示的数据源

initDialog方法初始化Dialog

 private void initDialog() {
        if(seletorDialog == null){
            seletorDialog = new Dialog(context,R.style.time_dialog);
            seletorDialog.setCancelable(false);
            seletorDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
            seletorDialog.setContentView(R.layout.dialog_single_picker_view);
            Window window = seletorDialog.getWindow();
            window.setGravity(Gravity.BOTTOM);
            WindowManager.LayoutParams lp = window.getAttributes();
            int width = ScreenUtil.getInstance(context).getScreenWidth();
            lp.width = width;
            window.setAttributes(lp);
        }
    }

接着是初始化PickerView

 private void initPickerView() {
        pickerView.setData(list);
        int size = list.size()/2;
        pickerView.setSelected(size);
        pickerView.setCanScroll(list.size() > 1);
        pickerView.setIsLoop(false);
        pickerView.setOnSelectListener(new PickerView.onSelectListener() {
            @Override
            public void onSelect(String text) {
                tv_title.setText(text);
                selectStr = text;
            }
        });

    }

最后对外提供一个show方法

 public void show(){
        initPickerView();
        seletorDialog.show();
    }

具体的使用:在需要用到的地方初始化,然后调用.show()方法就好啦

 mSinglePickerView = new SinglePickerView(this, new SinglePickerView.ResultHandler() {
            @Override
            public void handle(String selectStr) {
                mTextShow.setText(selectStr);
            }
        },list);
mSinglePickerView.show();

最后提一下:demo里还有仿ios的日期显示器,上面使用的pickerView就是来自于这里,
地址:https://github.com/ckwcc/CustomAddItemView

你可能感兴趣的:(Android)