您的位置:首页 > 移动开发 > IOS开发

仿ios的PickerView

2017-12-23 14:07 106 查看
首先看一下效果:



这个一个点击按钮弹出的dialog,中间是一个类似于ios的PickerVew。

接下来看一下它是怎么实现的:

具体的pickerView,我使用了一个第三方写的,这里就不贴上代码了。

主要是看一下,dialog与pickerView的结合使用:

首先是这个布局:



中间是一个PickerView

<?xml version="1.0" encoding="utf-8"?>
<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<String> 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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: