IOS第二十六天——Picker

本文介绍了iOS开发中Picker控件的使用方法,包括DatePicker和PickerView两种类型,并通过实例展示了如何创建日期选择器及带有数据源的选项选择器。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这篇相隔时间有些长了,好吧,跪求大家原谅我的懒惰,最近心情不是很美丽(次凹,真矫情了~),别人是蛋蛋的忧桑,在我来就是忧桑的二蛋了,反正咱也不是小资的人,干脆,好好学习,嗯哼,今天我们来学习下Picker,IOS中的Picker有些像老虎机(希望这个词儿不是敏感词),嗯,效果是很炫的,那么这种样式的控件有两种,一种是用来选择时间日期的date picker,另一种就是picker view,我们今天就主要来学习下这两个。

首先新建一个项目,Single View就可以了。

然后拖一个Date Picker过来,再拽一个Button,要实现的效果是这样儿的,选择日期,点击Button,弹出一个Alert,告知我选择的时间:

xib文件中布局如下:


我们来看下ViewController.h中的代码:

#import <UIKit/UIKit.h>

@interface ETViewController : UIViewController
@property (weak, nonatomic) IBOutlet UIDatePicker *datePicker;
- (IBAction)getDate:(id)sender;

@end


ViewController.m文件中,我们就要调用date picker的date方法获取用户选择的时间,代码如下:

- (IBAction)getDate:(id)sender
{
    NSString *dateStr=[[NSString alloc] initWithFormat:@"the time you pick is:%@",[datePicker date]];
    UIAlertView *dateAlert=[[UIAlertView alloc] initWithTitle:@"the time u choose:" message:dateStr delegate:self cancelButtonTitle:@"cancel" otherButtonTitles:nil];
    [dateAlert show];
}

OK,这样儿我们就写完了一个简单的Date Picker的demo,测试下效果:


嗯,能够顺利的弹出我们需要的展示内容,那么接下来我们去掉Date Picker,换成Picker View,取名为actionPicker:

添加完控件之后我们还要选中File's Owner,control-drag到actionPicker上

然后选中actionPicker,打开connections inspector,将dataSource和delegate最后面的红圈儿拖拽到File's Owner上进行绑定,这样儿,我们的这个Picker View就会知道它的dataSource和delegate都是ETViewController类


这里我直接把原先的按钮也删掉了,重新加了一个按钮,我们需要为它添加Action,需要注意一下。

关于Picker View呢,样式和Date Picker是狠相似的,可以包含有多个组件-component,即竖着的分栏,每个component可以包含多个row,我们需要用实现以下三个方法来为Picker View赋值:

//picker view中组件的个数
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    //返回1即可,我们只添加一个Component
    return 1;
}

//picker view组件中的row行数
-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
    return [pickerDataSource count];
}

//循环数据源并绑定到picker view上进行展示
-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    return [pickerDataSource objectAtIndex:row];
}
然后我们就要在按钮的点击事件中添加如下代码:

//alert弹出用户选择的活动
- (IBAction)chooseActionBtn:(id)sender
{
    NSInteger row=[actionPicker selectedRowInComponent:0];
    NSString *selectedStr=[pickerDataSource objectAtIndex:row];
    NSString *alertTitle=[[NSString alloc] initWithFormat:@"you chose %@",selectedStr];
    UIAlertView *alertView=[[UIAlertView alloc] initWithTitle:alertTitle message:@"thx for choosing the right thing to do" delegate:nil cancelButtonTitle:@"it's ok" otherButtonTitles:nil, nil];
    [alertView show];
}
当然,不要忘了初始化我们的数组,因为数组是我们的picker view展示的数据来源

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    NSArray *strArray=[[NSArray alloc] initWithObjects:@"Breakfast",@"Lunch",@"Supper",@"Game",@"Sport",@"Music", nil];
    self.pickerDataSource=strArray;
}

那么代码部分我们也写完了,来运行下看效果:

OK,这个简单的功能也开发完成了,今天的课程就先学到这里,休息下,大家也好好享受周末!

2013年05月25日,Eric.Tang 记



### MUI Framework Picker (DTPicker) 使用教程 MUI 是一款专注于移动端开发的前端框架,提供了丰富的组件库来简化开发者的工作流程。其中 `dtpicker` 是日期时间选择器的一个实现方式,属于 MUI 的 Picker 组件之一。 以下是关于如何使用 MUI 中的 DTPicker 的详细介绍: #### 基本概念 MUI 提供了一个名为 `picker` 的模块用于创建各种类型的弹出选择框,其中包括日期/时间选择器(即 dtpicker)。它支持多种配置选项以及自定义样式[^1]。 #### 初始化方法 要初始化一个 dtpicker,可以通过调用 `mui.picker()` 方法并传入相应的参数对象完成设置。下面是一个简单的例子展示其基本用法: ```javascript // 创建一个新的日期时间选择器实例 var picker = new mui.DtPicker({ type: 'date', // 设置为日期模式,默认是 datetime(日期+时间) }); // 显示选择器界面 picker.show(function(rs){ console.log('您选择了:', rs.text); // 输出所选中的值 }); ``` 上述代码片段展示了如何通过 JavaScript 来启动一个仅显示日期的选择对话框,并获取用户最终选定的结果。 #### 参数说明 | 属性名 | 类型 | 描述 | | --- | --- | --- | | `type` | String | 定义选择器类型, 可接受值有 `'datetime'`, `'date'`, 或者 `'time'`. 默认值为 `'datetime'`.| | `beginYear` / `endYear` | Number | 如果设置了 year mode,则可以指定起始年份和结束年份范围。| | `labels` | Array[String] | 自定义头部标签文字数组,长度需匹配当前模式下的列数。| 更多高级功能可通过查阅官方文档进一步学习[^2]. #### 解决已知问题 对于 iOS 版本升级带来的兼容性挑战,比如提到的 IOS 16.4 和 16.2 上可能遇到的一些视觉异常或者交互障碍等问题,建议按照以下策略处理: - 更新至最新版 MUI 库文件以获得最新的修复补丁; - 对特定 CSS 进行调整优化渲染效果; 如果发现仍有未覆盖的情况发生,请尝试手动修改源码或联系社区寻求帮助^. ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值