UIScrollView,UILabel,UIImage,SDWebImage,UITextField,UITextView

8 8月
  • UIScrollView
  • UILabel
  • UIImage
  • SDWebImage
  • UITextField
  • UITextView

UIScrollView

UITableView和UICollectionView都是继承自UIScrollView,能实现滑动。当然上下滑通常用UITableView和UICollectionView,左右滑就会直接使用UIScrollView。

frame是屏幕属性,view的真实大小用CGSize contentSize表示,用CGPoint contentOffset表示真实大小的view的左上角距离屏幕左上角的偏移量位置。还提供了:

BOOL scrollEnabled:是否允许滚动
BOOL pagingEnabled:是否以屏幕大小进行滚动
BOOL showsHorizontalScrollIndicator,BOOL showsVerticalScrollIndicator:是否展示水平,垂直的滚动条

UIScrollViewDelegate:提供了一系列滚动结束,拖拽结束等生命周期方法

@protocol UIScrollViewDelegate
@optional
- (void)scrollViewDidScroll:(UIScrollView *)scrollView;
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;    
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView;    
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;   
...
@end

例子:

@interface TestViewController ()<UIScrollViewDelegate>

@end

@implementation TestViewController
-(instancetype) init {
    self = [super init];
    if(self) {
        
    }
    return self;
}
- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];

    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
    // 设置5屏的宽度,高度是屏幕高度
    scrollView.contentSize = CGSizeMake(self.view.bounds.size.width * 5, self.view.bounds.size.height);
    scrollView.delegate = self;
    
    NSArray *colorArray = @[[UIColor redColor], [UIColor yellowColor], [UIColor blueColor], [UIColor greenColor], [UIColor purpleColor]];
    for(int i = 0; i < 5; i++) {
        [scrollView addSubview:({
            UIView *view = [[UIView alloc] initWithFrame:CGRectMake(scrollView.bounds.size.width * i, 0, scrollView.bounds.size.width, scrollView.bounds.size.height)];
            view.backgroundColor = [colorArray objectAtIndex:i];
            view;
        })];
    }
    scrollView.showsHorizontalScrollIndicator = NO;  // 不显示水平的滚动条
    scrollView.pagingEnabled = YES;                  // 允许实现翻页,你滚动view到一半时,会自动翻页
    [self.view addSubview:scrollView];
}

// 滚动,根据 contentOffset 做业务逻辑
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { ... }
// 拖拽开始中断一些业务逻辑,如视频/gif播放
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView { ... }
// 结束拖拽
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate { ... }
// 开始减速
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView { ... }
// 减速停止时开始的业务逻辑,如视频自动播放
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView { ... }

UILabel

UILabel用于文本显示,除了通用的text,font属性外,有几个IOS端特有的属性,例如:

NSInteger numberOfLines:最大展示行数
NSLineBreakMode lineBreakMode:显示不下时的处理,如显示…
sizeToFit:UILabel有两种布局方式,一是指定宽高,二是用sizeToFit根据文字自动调整大小

@property(nonatomic, strong, readwrite) UILabel *titleLabel;

self.titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(20, 15, 300, 50)];
self.titleLabel.text = @"我的标题";
self.titleLabel.font = [UIFont systemFontOfSize:16];
self.titleLabel.textColor = [UIColor blackColor];
self.titleLabel.numberOfLines = 2;
self.titleLabel.lineBreakMode = NSLineBreakByTruncatingTail;
[self.titleLabel sizeToFit];    // 初始化时设的宽度将无效

UIImage

IOS中要显示图片,需要将各种图片先转成UIImage对象,然后通过UIImageView来展示这个UIImage对象。常用的方法:

(nullable UIImage *)imageNamed:(NSString *)name;:会将本地文件夹里的图片转为UIImage对象

UIViewContentMode提供了图片和UIImageView的尺寸不符时,图片的填充方式。

@property(nonatomic, strong, readwrite) UIImageView *rightImageView;

self.rightImageView = [[UIImageView alloc] initWithFrame:CGRectMake(330, 15, 70, 70)];
self.rightImageView.image = [UIImage imageNamed:@"icon.bundle/timg.jpeg"];
self.rightImageView.contentMode = UIViewContentModeScaleAspectFit;

UIImageView除了展示图片外,也提供了将静图转成动图的属性和方法:

NSArray *animationImages:可以将一组静图合成动图
NSTimeInterval animationDuration:动图播放的时间
(void)startAnimating:开始播放动图

SDWebImage

实际开发中,更多的是网络图片,而不是上面这样的本地图片。除了网络请求耗时外,下载下来的图片还需要解码和裁剪,还需要要保存到磁盘里,之后系统会先从内存中读取是否存在图片,没有就从磁盘中读取,避免访问相同图片时再次请求网络。下载时可以有占位图优化体验,下载完后替换掉占位图。

总之处理图片细节很多,可以使用开源库SDWebImage,用CocoaPod集成下就能使用。

#import "SDWebImage.h"

[self.rightImageView sd_setImageWithURL:[NSURL URLWithString:item.picUrl] 
    completed:^(UIImage * _Nullable image, NSError * _Nullable error, 
    SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
    NSLog(@"");
}];

UITextField

UITextField用于一行文本输入,由leftView,text,rightView三部分组成,所以可以实现搜索框(左边放大镜,中间文字,右边X按钮)。

一些开始编辑,结束编辑的回调用UITextFieldDelegate来获取,键盘的弹出和收起用UIResponder来实现,

#import "MySearchBar.h"

@interface MySearchBar ()<UITextFieldDelegate>
@property(nonatomic, strong, readwrite) UITextField *textField;
@end

@implementation MySearchBar
- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        [self addSubview:({
            _textField = [[UITextField alloc] initWithFrame:CGRectMake(10, 5, frame.size.width - 10 * 2, frame.size.height - 5 * 2)];
            _textField.backgroundColor = [UIColor whiteColor];
            _textField.delegate = self;
            _textField.leftView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"icon.bundle/search@2x.png"]];
            _textField.leftViewMode = UITextFieldViewModeAlways;   // 一直展示
            _textField.clearButtonMode = UITextFieldViewModeAlways;
            _textField.placeholder = @"请输入搜索内容";
            _textField;
        })];
    }
    return self;
}

// 开始编辑
- (void)textFieldDidBeginEditing:(UITextField *)textField {
    NSLog(@"");
}

// 结束编辑
- (void)textFieldDidEndEditing:(UITextField *)textField {
    NSLog(@"");
}

// 编辑时
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {
    // 字数判断
    return YES;
}

// 回车键
- (BOOL)textFieldShouldReturn:(UITextField *)textField {
    [_textField resignFirstResponder];      // 收起键盘
    return YES;
}
@end

在UITextField中编辑文本时系统会自动弹出键盘,如果你在其他场景下想手动唤起键盘可以:

[_xxxView becomeFirstResponder];    // 唤起键盘
[_xxxView resignFirstResponder];    // 收起键盘

UITextView

UITextView用于多行文本输入,相比UITextField,少了leftView和rightView,但多了支持竖向滚动。用法基本同UITextField,不赘述。

发表评论

电子邮件地址不会被公开。 必填项已用*标注