一,内容介绍
1. 完善第三天中单元格高度的计算,(根据单元格中数据自动适配高度)
2. 自动布局的应用
3. 原微博背景的设置
3. 支持旋转功能的实现
4. iOS实现图文混排的方式:
二,主要技术点
1. 对于单元格的适配,会通过简单的demo来实现原理
2. 自动布局的原理和要主要的点,与横竖屏结合起来
三,代码的实现
UITabeViewController),数据来自plist文件
#import "ViewController.h"
#import "WeiboCell.h"
@interface ViewController ()
@end
@implementation ViewController {
NSString *identify;
NSArray *_data;
WeiboCell *_propertyCell;
}
- (void)viewDidLoad {
[super viewDidLoad];
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"data.plist" ofType:nil];
_data = [NSArray arrayWithContentsOfFile:filePath];
identify = @"WeiboCell-01";
UINib *nib = [UINib nibWithNibName:@"WeiboCell" bundle:nil];
[self.tableView registerNib:nib forCellReuseIdentifier:identify];
_propertyCell = [[[NSBundle mainBundle] loadNibNamed:@"WeiboCell" owner:nil options:nil] lastObject];
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return _data.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
WeiboCell *cell = [tableView dequeueReusableCellWithIdentifier:identify];
cell.text = _data[indexPath.row];
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
//告诉系统调用LayoutSubview填充数据
[_propertyCell setNeedsLayout];
[_propertyCell layoutIfNeeded]; //让cell立刻调用LayoutSubview
//计算cell中所有的子视图的总高度
CGSize size = [_propertyCell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];
return size.height;
}
@end
子类化单元格(通过xib)
#import <UIKit/UIKit.h>
@interface WeiboCell : UITableViewCell
{
__weak IBOutlet UILabel *_weiboLabel;
__weak IBOutlet UILabel *reWeiboText;
}
@property(nonatomic,copy)NSString *text;
@end
#import "WeiboCell.h"
@implementation WeiboCell
- (void)layoutSubviews {
[super layoutSubviews];
_weiboLabel.text = self.text;
reWeiboText.text = self.text;
// _weiboLabel.preferredMaxLayoutWidth = _weiboLabel.frame.size.width;
_weiboLabel.preferredMaxLayoutWidth = CGRectGetWidth(_weiboLabel.frame);
reWeiboText.preferredMaxLayoutWidth = CGRectGetWidth(reWeiboText.frame);
reWeiboText.numberOfLines = 0;
}
@end
2. WeiboTableView 类中配置单元格高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
//把高度加在字典中,不用重复计算高度
if (cellHeightCache == nil) {
cellHeightCache = [NSMutableDictionary dictionary];
}
NSNumber *heightNumber = cellHeightCache[indexPath];
if (heightNumber == nil) {
_propertyCell.weiboModel = _data[indexPath.row];
[_propertyCell setNeedsLayout];
[_propertyCell layoutIfNeeded];
CGSize size = [_propertyCell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];
CGFloat height = size.height;
//height 是contentView的高度,而cell的高度要比contentView多1个尺寸
[cellHeightCache setObject:@(height + 1) forKey:indexPath];
heightNumber = @(height + 1);
}
return [heightNumber floatValue];
}
3. 关于单元格的自动布局
主要是通过代码和storyboard相结合的方式,通过对UI空间(UIView、UIButton、UILabel)等添加约束(constraint),通过简单的例子来看下具体约束的方法
头像、转发的图片约束顶部、左边和宽高,保持图片不被拉伸。 昵称、评论数、转发数设置等高,保证不被拉伸,评论和转发的宽度可以设置 <= 某一值,根据内容拉伸文本宽度。微博的内容和转发的微博内容的长宽会根据内容自适应,约束边界即可。
4. 原微博背景的设置
背景的大小需要拉伸,我们在 ThemeManager 中定义一个拉伸的方法,拉伸点由外部传入,只有要拉伸才传入拉伸点
#import <UIKit/UIKit.h>
@interface ThemeImageView : UIImageView
//定义宽和高
@property (nonatomic,copy) NSString *imgName;
@property (nonatomic,assign) CGFloat leftWidth;
@property (nonatomic,assign) CGFloat topHeight;
@end
方法的实现
- (void) setImage:(UIImage *)image {
image = [image stretchableImageWithLeftCapWidth:self.leftWidth topCapHeight:self.topHeight];
super.image = image;
}
WeiboCell.m中传入拉伸点
- (void)awakeFromNib {
[super awakeFromNib];
_bgImgView.leftWidth = 25;
[_bgImgView setTopHeight:25];
_bgImgView.imgName = @"timeline_rt_border_9.png";
}
5. 图文混排
应用:
(1)、新闻类的APP
(2)、社交类的APP
(3)、教育类、笔记(文档):印象笔记
iOS实现图文混排的方式:
(1)、WebView html+javascript (头条新闻)
(2)、CoreText (C语言实现的框架)
(3)、iOS新增加的特性:
TextKit