UIView学习参考：iOS文档补完计划--UIView
UITextField 文本输入
int txtWidth = self.view.bounds.size.width - 20*2;
UITextField *nameTxt = [[UITextField alloc] initWithFrame:CGRectMake(20, 80, txtWidth, 40)];
nameTxt.placeholder = @"设置占位文本";
//设置边框样式
nameTxt.borderStyle = UITextBorderStyleRoundedRect;
//设置清除按钮的模式
nameTxt.clearButtonMode = UITextFieldViewModeWhileEditing;
//设置键盘上返回键的类型
nameTxt.returnKeyType = UIReturnKeyJoin;
nameTxt.textColor = [UIColor redColor];
[self.view addSubview:nameTxt];
更多属性参考：ios开发UI篇—UITextfield，UITextField使用详解
1、软键盘收起
- 方式一：让textFiled放弃成为第一响应者(
resignFirstResponder)
//方式一
@interface MainViewController ()<UITextFieldDelegate>
@end
nameTxt.delegate = self;
- (BOOL)textFieldShouldReturn:(UITextField *)textField{
return [textField resignFirstResponder];
}
- 方式二：让view或者子view强制结束编辑状态(
endEditing)
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
[self.view endEditing:YES];
}
其它方式参考：iOS中收起键盘的几种方式
2、UITextFieldDelegate 输入框代理类
参考：UITextFieldDelegate协议中各个方法调用情况，iOS-UITextField代理协议中方法
3、修改输入框圆角样式
知识点：xcode添加库文件，参考： Xcode添加库文件framework （转）
- 方式一、在layer层处理，来渲染绘制圆角
//设置边框样式
nameTxt.borderStyle = UITextBorderStyleNone;
nameTxt.layer.borderColor = [UIColor redColor].CGColor;
nameTxt.layer.cornerRadius = 10;
nameTxt.layer.borderWidth = 1.0f;
nameTxt.layer.masksToBounds = YES;
- 方式二、直接使用圆角样式
nameTxt.borderStyle = UITextBorderStyleRoundedRect;
详细参考：UITextField设置leftView、圆角以及文字距离
UIImageView 图片显示
所有的图片都需要在UIImageView上显示，继承于UIView
参考：UIImageView图片
1、图片存放位置
- Image.xcassets
- 图片直接加入工程中作为Resource
- 使用Bundle文件
各有优缺点，根据实际需要使用，参考：iOS 图片存放 3 种方式
2、UIImageView使用
UIImageView *testIV = [[UIImageView alloc] initWithFrame:CGRectMake(20, 80, 150, 150)];
testIV.image = [UIImage imageNamed:@"TestImage"];
[self.view addSubview:testIV];
- 图片圆角 : 推荐使用第二种方法：切割路径。参考：iOS-UIImageView圆角设置，UIImageView加载图片注意事项
UIImageView *testIV = [[UIImageView alloc] initWithFrame:CGRectMake(20, 80, 150, 150)];
testIV.image = [UIImage imageNamed:@"TestImage"];
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:testIV.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:testIV.bounds.size];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc]init];
//设置大小
maskLayer.frame = testIV.bounds;
maskLayer.path = maskPath.CGPath;
testIV.layer.mask = maskLayer;
[self.view addSubview:testIV];
- 添加点击事件
//点击事件
testIV.userInteractionEnabled = YES;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(onImageClick)];
[testIV addGestureRecognizer:tap];
- (void) onImageClick{
[LogUtils log:@"image clicked"];
}
UIProgressView 进度条
1、简单使用
UIProgressView *progressView = [[UIProgressView alloc] initWithFrame:CGRectMake(20, 80, 260, 10)];
//进度条颜色
progressView.progressTintColor = [UIColor blueColor];
//背景颜色
progressView.trackTintColor = [UIColor lightGrayColor];
//进度（0.0～1.0）
progressView.progress = 0.2;
[self.view addSubview:progressView];
2、圆角
progressView.layer.cornerRadius = 2;
progressView.clipsToBounds = YES;
参考：iOS UIProgressView，UIProgressView在工程中的简单应用
UIPickerView 选择视图
UIPickerView也是一个选择器控件，可以生成单列的选择器，也可生成多列的选择器，而且开发者完全可以自定义选择项的外观，因此用法非常灵活。
UIPickerView直接继承了UIView，没有继承UIControl，因此，它不能像UIControl那样绑定事件处理方法，UIPickerView的事件处理由其委托对象完成。
1、简单使用
//实现代理
@interface MainViewController ()<UIPickerViewDelegate, UIPickerViewDataSource>
@end
//创建视图并设置代理
UIPickerView *pickerView = [[UIPickerView alloc] initWithFrame:CGRectMake(20, 80, 200, 100)];
pickerView.delegate = self;
pickerView.dataSource = self;
[self.view addSubview:pickerView];
//实现一下子代理方法
// 设置UIPickerView的列数
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
return 1;
}
// 设置UIPickerView每一列的行数
-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
return 5;
}
// 每一项的内容
-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
return @"test";
}
2、设置要显示的内容有两种方式，一种是返回要显示的NSString内容；另一种是返回一个UIView来显示颜色、图片等内容。
可参考：iOS UIPickerView的使用，iOS 用UIPickerView自定义日期选择器(仿UIDatePicker)
，iOS UIPickerView的默认显示
UIDatePicker 日期选择器
具体使用参考：IOS-UIPickerView和UIDatePicker详解，iOS-UIDatePicker
UITextView 可滚动多行文本
集成于UIScrollView，可显示多行文本，可以编辑。
参考：ios 开发UI篇—UITextView
UIScrollView 滚动视图
UIScrollView为了显示多于一个屏幕的内容或者超过你能放在内存中的内容，功能很强大
参考：iOS学习--UIScrollView 原理详解，iOS UIScrollView 你可能不知道的奇技淫巧，iOS开发之UIScrollView详解
1、contentSize、contentInset、contentOffset的区别
frame 是UIScrollView的大小，也就是显示大小
contentSize 是滚动视图的大小，可能比frame大
contentOffset 是滚动视图的偏移，也就是滑动距离
contentInset 是填充大小，如果学习过Android的话，就很好理解了，类似于Android中padding
详细效果请参考：stanford大学iphone公开课的关于UIScrollView的图片展示
2、特殊属性
// 是否反弹
scrollView.bounces = NO;
// 是否分页
scrollView.pagingEnabled = YES;
// 是否滚动
scrollView.scrollEnabled = NO;
3、如果使用UIScrollView的话，注意内存问题
UITabelView 表格视图
UITableView是iOS开发中使用较为频繁的视图。在很多地方都用到了它来展示数据，比如微信通讯录和新闻列表等。
在UITableView中，分节、分组和索引等功能让我们展示的数据更加规整，更有条理。
1、简单使用
_tableView = [[UITableView alloc]initWithFrame:self.view.bounds style:UITableViewStylePlain];
// [UIScreen mainScreen].bounds;指的是屏幕大小
_tableView.dataSource = self;//遵循数据源
_tableView.delegate = self;//遵循协议
self.dataArray = [NSMutableArray array];//初始化数组
UITableTestCellModel *model = [[UITableTestCellModel alloc] init];
model.name = @"liwei";
model.age = @"30";
[self.dataArray addObject:model];
UITableTestCellModel *model1 = [[UITableTestCellModel alloc] init];
model1.name = @"liwei2";
model1.age = @"30";
[self.dataArray addObject:model1];
[self.tableView registerClass:([UITableViewCell class]) forCellReuseIdentifier:@"TableViewCellID"];
[self.view addSubview:_tableView];
//分组数
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;
}
//每个分区的行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return self.dataArray.count;
}
//cell的样子
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"TableViewCellID" forIndexPath:indexPath];
UITableTestCellModel *m = self.dataArray[indexPath.row];
cell.textLabel.text = m.name;
return cell;
}
2、自定义cell的样式
参考：iOS简单实现UITableView，及自定义UITableViewCell
UISwitch 开关视图
1、简单使用
UISwitch *mSwitch = [[UISwitch alloc] initWithFrame:CGRectMake(20, 80, 100, 40)];
mSwitch.on = YES;
[self.view addSubview:mSwitch];
UISlider 滑动控件
UISlider 滑动控件，可在设置最大值和最小值的前提下，实现滑动控制某个值得大小在某个区间之间操作。
参考：iOS控件--UISlider--滑动控件，iOS UISlider数值与滑块联动，IOS的UISlider，iOS 玩转UISlider
UIPageControll 页面控制器
UIPageControl控件在程序中出现的⽐较频繁，尤其在和UIScrollView(滚动视图)配合来显⽰⼤量数据时，会使⽤它来控制UIScrollView的翻页。在滚动ScrollView时可通过PageControl中的⼩⽩点来观察当前页⾯的位置，也可通过点击PageControl中的⼩⽩点来滚动到指定的页⾯。
参考：ios开发UI篇—UIPageControl，iOS 修改UIPageControl样式
总结
系统本身的控件已经很多了，而且可扩展性很强，还是要多多练习，才能改写基础控件。
感谢本文参考的文章的博客主们。
网友评论