仿写知乎日报依然采用的是MVC框架,因此开始的时候要确定好布局的情况。对于UI布局来说,因为需要用到导航栏的相关UI,所以将导航控制器作为根视图,然后通过导航栏的titleView属性,往上面添加控件。
UINavigationBarAppearance* apperance = [UINavigationBarAppearance new];
[apperance configureWithOpaqueBackground];
apperance.backgroundColor = [UIColor whiteColor];
apperance.shadowColor = [UIColor clearColor];
self.navigationController.navigationBar.standardAppearance = apperance;
self.navigationController.navigationBar.scrollEdgeAppearance = self.navigationController.navigationBar.standardAppearance;
//创建一个view视图
UIView* view1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 395, 44)];
//将view视图添加到titleView属性上
self.navigationItem.titleView = view1;
布局用到的有系统库中自带的方法和Masonry库的方法,两个搭配着使用效果要更好。
当我进行完网络请求的数据赋值后,给我布局的UI元素时,运行时总是会导致程序崩掉,查了下原因是进行完赋值后程序还没回到主线程进行UI布局,所以我加了下面这个方法让程序回到主线程进行布局。
dispatch_async(dispatch_get_main_queue(), ^{
});
我通过网络请求的图片只是这个图片的字符串形式的URL地址,还需要将这个图片的URL地址转换成URL,接着通过URL才能加载图片到指定的UI控件上。这里我用到的是SDWebImage库来进行,这个库可以通过图片URL将图片加载到指定的UI控件上。
NSArray* contentIamgeArray = [self.contentPreDataArray[indexPath.row] images];
NSString* contentImageStr = contentIamgeArray[0];
NSURL* contentImageUrl = [NSURL URLWithString:contentImageStr];
[cell02.contentImageView sd_setImageWithURL:contentImageUrl];
对于知乎日报上每天的时间标题,我使用的是日期组件。将获取的时间复制到UILabel上面添加到导航栏相应的位置。
//获取当前时间
NSDate* current = [NSDate date];
NSCalendar* calender = [NSCalendar currentCalendar];
NSDateComponents *dateComponents = [calender components:NSCalendarUnitMonth | NSCalendarUnitDay fromDate:current];
NSInteger month = [dateComponents month];
NSString* date = [NSString stringWithFormat:@"%ld", [dateComponents day]];
NSString *chineseMonth = [self chineseMonthFromNumber:month];
chineseMonth = [chineseMonth stringByAppendingString:@"月"];
UILabel* dateLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 0, 50, 30)];
dateLabel.font = [UIFont systemFontOfSize:22];
UILabel* monthLabel = [[UILabel alloc] initWithFrame:CGRectMake(7, 25, 40, 15)];
monthLabel.font = [UIFont systemFontOfSize:15];
dateLabel.text = date;
monthLabel.text = chineseMonth;
[view1 addSubview:dateLabel];
[view1 addSubview:monthLabel];
//chineseMonthFromNumber:这个方法是用来转换月份的,将数字转换为汉字
- (NSString *)chineseMonthFromNumber:(NSInteger)month {
NSArray *chineseMonths = @[@"一", @"二", @"三", @"四", @"五", @"六", @"七", @"八", @"九", @"十", @"十一", @"十二"];
if (month >= 1 && month <= 12) {
return chineseMonths[month - 1];
}
return @"";
}