UIScrollView，UILabel，UIImage，SDWebImage，UITextField，UITextView

8 8月
2019年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，不赘述。

发表评论

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