仿ios的PickerView
2017-12-23 14:07
106 查看
首先看一下效果:
这个一个点击按钮弹出的dialog,中间是一个类似于ios的PickerVew。
接下来看一下它是怎么实现的:
具体的pickerView,我使用了一个第三方写的,这里就不贴上代码了。
主要是看一下,dialog与pickerView的结合使用:
首先是这个布局:
中间是一个PickerView
接着看代码:
这里自定义了一个结合使用Dialog和PickerView的控件
它的构造函数是这样的:
其中,ResultHandler是一个接口,用于向外部提供数据
list是要显示的数据源
initDialog方法初始化Dialog
接着是初始化PickerView
最后对外提供一个show方法
具体的使用:在需要用到的地方初始化,然后调用.show()方法就好啦
最后提一下:demo里还有仿ios的日期显示器,上面使用的pickerView就是来自于这里,
地址:https://github.com/ckwcc/CustomAddItemView
这个一个点击按钮弹出的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
相关文章推荐
- iOS开发UI篇—使用picker View控件完成一个简单的选餐应用
- UIPickerView 选取器(滚轮)—IOS开发
- iOS UI-UIPickerView(拾取器)、UIWebView(网页视图)和传值方式
- iOS开发UI篇—使用picker View控件完成一个简单的选餐应用
- ios UIImagePickerController 添加一个自定义的view
- iOS开发-UIPickerView 简单介绍
- iOS学习之UIPickerView控件的简单使用
- iOS学习之UIPickerView控件的简单使用
- iOS 自定义PickerView
- IOS UIPickerView的简单使用 省份+城市 联动
- IOS UIPickerView
- iOS清除UIDatePicker和UIPickerView中间Row上面的分割线
- iOS学习之UIPickerView控件的简单使用
- ios 炒鸡简单使用地址选择器(AddressPickerView),支持省份,省市,省市区三种联动
- iOS编程之UIPickerView
- iOS开发之pickerView 制作省份选择器
- IOS学习之UIPickerView控件的关联选择
- IOS点击事件的PickerView和ToolBar
- iOS开发使用Picker View实现一个图片浏览的App
- iOS开发UI篇—UIPickerView控件简单介绍