IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> iOS——UIPickerView使用 -> 正文阅读

[移动开发]iOS——UIPickerView使用

UIPickerView

UIPickerView在iOS开发中是一个很常见的控件,例如计时器选择时间,填写省市区位置时都可以用的上,最近写项目时使用到了这个技术,总结一下。

遵循的协议

UIPickerView类似于UITableView这类控件,是需要遵循数据源和代理两个协议的。
我们在使用前添加这两个协议。

@interface ViewController : UIViewController<
UIPickerViewDelegate,
UIPickerViewDataSource
>
@property (nonatomic, strong) UIPickerView* pickerView;

UIPickerViewDataSource
此协议中有两个必须实现的方法
分别是设置选择器的行和列数

// 列数
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
    return 3;
}

//行数
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
    return 10;
}
// 还有一个比较重要的方法:
// 设置选择的响应事件
-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component

UIPickerViewDeleagate:
有以下方法

返回UIPickerView中Component列的宽度
 - (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component;
 
 返回UIPickerView中Component列中每行的高度
 - (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component;
 
 当选择某一项Component列中的row行时的回调函数
 - (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
 - 标准的UIPickerView内容,只有字符串
 - (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component;
 
 自定义的UIPickerView内容,给每个列,行设置一个UIView对象
 - (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view;
 ----这里列为component,行row返回一个UIView用来显示在UIPickerView中。reusingView:(UIView *)

刷新数据的方法:

- (void)reloadAllComponents;
- (void)reloadComponent:(NSInteger)component;

简单实用

大概使用的方法如上所示,下面就开始创建UIPickerView;

_pickerView = [[UIPickerView alloc] init];
    _pickerView.delegate = self;
    _pickerView.dataSource = self;
    _pickerView.frame = CGRectMake(0, HEIGHT * 0.7, WIDTH, HEIGHT * 0.3);
    [self.view addSubview:_pickerView];
    

然后实现必须的方法以及你需要的方法:
这里简单的使用了NSSting显示这种方式

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
    return 3;
}
//
// 行数
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
    return 10;
}
 代理方法
//
// // 显示内容两种方式NSString,UIView;
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
    return @"差不多先生";
}

就实现了下面的效果
在这里插入图片描述
这就是一个简单的选择器的使用,但比较单一无法解决实际开发的需求,下面实现了一个省市区绑定选择的UIPickerView。

省市区联动UIPickerView

Demo需求展示如下:

滑动省市对应的列数据刷新
在这里插入图片描述

重构plist

由于这里省市区的数据很多,所以我们利用plist文件来保存信息,这里有一个重构好的文件,链接: plist 密码: 8b9u。

有了文件后,我们首先创建三个数组来保存文件中存的信息,可以提前看一下plist里面存储的数据了解一下类型。
解析数据:

@interface ChangeAreaViewController () {
    
    NSArray* provinceArray, *cityArray, *areaArray;

}
// 加载plist中的数据
- (void)loadData {
    provinceArray = [[NSMutableArray alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"area.plist" ofType:nil]];
    cityArray = [[provinceArray objectAtIndex:0] objectForKey:@"cities"];
    areaArray = [[cityArray objectAtIndex:0] objectForKey:@"areas"];
   
}

这样我们便得到了plist中的全部省信息,以及第一个省的市区信息(这里默认展示第一行)。

实现相应方法

下面设置列和行数

// DataSource
// 列数
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
    return 3;
}

//行数
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
    if (component == 0) {
        return [provinceArray count];

    } else if( component == 1 ) {
        return [cityArray count];
        
    } else {
        return [areaArray count];
    }
}

列数还是3,行数变成实际每列对应的行数。

实现自定义view的显示,以及滑动对应的逻辑关系

// 返回View
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view {
    UILabel* myView = nil;

    myView = [[UILabel alloc] init];

    myView.textAlignment = NSTextAlignmentCenter;

    myView.font = [UIFont systemFontOfSize:22];         //用label来设置字体大小

    if (component == 0) {
        myView.text =[[provinceArray objectAtIndex:row] objectForKey:@"state"];

    } else if (component == 1) {

        myView.text =[[cityArray objectAtIndex:row] objectForKey:@"city"];

    } else {

        myView.text =[areaArray objectAtIndex:row];

    }
    
    return myView;
}





// 滑动触发事件

-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {

    if (component == 0) {   //当是省的时候

            cityArray = [[provinceArray objectAtIndex:row] objectForKey:@"cities"];
            NSLog(@"%@", cityArray);
            [self.pickerView reloadComponent:1];
            [_pickerView selectRow:0 inComponent:1 animated:NO];
            
            if ([cityArray count] != 0) {

                 areaArray = [[cityArray objectAtIndex:0] objectForKey:@"areas"];
                [_pickerView selectRow:0 inComponent:2 animated:NO];
                [_pickerView reloadComponent:2];
            }

    } else if (component == 1) {

            areaArray = [[cityArray objectAtIndex:row] objectForKey:@"areas"];
            [_pickerView selectRow:0 inComponent:2 animated:NO];
            [_pickerView reloadComponent:2];

    }
}

上面的方法很好理解,就是显示对应数据,不多赘述。
最核心的代码就是滑动后响应方法,当我们滑动数据为第0列时候,更新对应的第1列数据,如果第1列数据存在,那么请求第2列的数据,对应更新第二列的数据。
以上就是UIPickerView的简单实用,如有问题,敬请斧正。

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-02-26 11:42:07  更:2022-02-26 11:42:26 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 15:36:46-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码