「OC」暑假第三周——天气预报的仿写

「OC」暑假第三周——天气预报的仿写

写在前面

天气预报作为暑假最后的一个项目，算得上我觉得有点用的内容，毕竟用上了网络请求，就是迈出了新的一步，不过就是在网络请求之中其实卡了挺久，第一次使用或多或少出现了问题。写完了任务也是归心似箭，到了家才开始天气预报的总结。

预览

此次天气预报一共实现了三个界面，一个是初始的主页面，供展示我们添加的城市天气以及展示模糊搜索的内容，第二个页面是从模糊搜索之中点入的天气详情页，有将该城市天气添加到主页的功能，第三个页面就是从主页的cell点入的所有天气详情页，可以查看所有已经添加的天气。

UItableView嵌套UICollectionView

为了实现这个圆角控件，我一开始是想要直接使用一个单独的collectionView来进行布局，但是由于前面是tableView，要使得这个圆角控件的风格统一就必须把内容全部写在tableView之中，于是我就开始研究如何进行tableViewCell和CollectionView的嵌套。

要实现嵌套，我们就要将实现collectionView所需要的协议放在tableViewCell之中，实现<UICollectionViewDataSource,UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>，然后就在tableViewCell之中开始创建流式布局，创建collectionView，布局大小，就是将之前在控制器之中做的在tableViewCell之中实现，代码如下

#import "SquareTableViewCell.h"
#import "SquareCollectionViewCell.h"
@implementation SquareTableViewCell

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        
        self.backgroundColor = [UIColor clearColor];
        [self setupCollectionView];
    }
    return self;
}

- (void)setupCollectionView {
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    layout.minimumInteritemSpacing = 10;
    layout.minimumLineSpacing = 10;
    layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
    
    self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
    self.collectionView.backgroundColor = [UIColor clearColor];
    self.collectionView.delegate = self;
    self.collectionView.dataSource = self;
    [self.collectionView registerClass:[SquareCollectionViewCell class] forCellWithReuseIdentifier:@"SquareCollectionViewCell"];
    [self.contentView addSubview:self.collectionView];
    
    self.collectionView.translatesAutoresizingMaskIntoConstraints = NO;
    [NSLayoutConstraint activateConstraints:@[
        [self.collectionView.topAnchor constraintEqualToAnchor:self.contentView.topAnchor],
        [self.collectionView.bottomAnchor constraintEqualToAnchor:self.contentView.bottomAnchor],
        [self.collectionView.leadingAnchor constraintEqualToAnchor:self.contentView.leadingAnchor],
        [self.collectionView.trailingAnchor constraintEqualToAnchor:self.contentView.trailingAnchor]
    ]];
}


- (void)setData:(NSArray *)data {
    _data = data;
    [self.collectionView reloadData];
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return self.data.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    SquareCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"SquareCollectionViewCell" forIndexPath:indexPath];
    
    NSDictionary *item = self.data[indexPath.item];
    [cell configureWithIcon:item[@"icon"] title:item[@"title"] detail:item[@"detail"] subdetail:item[@"subdetail"]];
    
    return cell;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    CGFloat itemWidth = (self.contentView.bounds.size.width - 40) / 2; 
    return CGSizeMake(itemWidth, itemWidth);
}

@end

毛玻璃效果

UIVisualEffectView是从iOS 8开始提供的控件，功能是创建毛玻璃（Blur）效果，也就是实现模糊效果。

我在实现上面的圆角控件时，背景就是使用的是UIVisualEffectView，用于美化外观

UIVisualEffectView的基础使用非常简单，

 UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleRegular];
    UIVisualEffectView *blurView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    blurView.frame = self.contentView.bounds;
    [self.contentView addSubview:blurView];

根据以上代码，我们有几个知识点需要了解一下

1. UIBlurEffect：

   • UIBlurEffect 是 UIVisualEffect 类的子类，用于创建模糊效果。

   • 通过UIBlurEffectStyle

     枚举可以指定不同的模糊效果风格，包括：

     • UIBlurEffectStyleExtraLight：额外亮度模糊效果。
     • UIBlurEffectStyleLight：亮度模糊效果。
     • UIBlurEffectStyleDark：暗色模糊效果。
     • UIBlurEffectStyleRegular：一般模糊效果。
     • UIBlurEffectStyleProminent：显著模糊效果。

2. UIVisualEffectView：

   • UIVisualEffectView 是一个视图类，用于显示视觉效果，比如模糊效果。
   • 它可以包含 UIBlurEffect 或 UIVibrancyEffect 对象，以创建模糊效果或振动效果。
   • 通过将 UIVisualEffectView 添加到视图层次结构中，可以在其上方显示模糊或振动效果，使应用程序的界面看起来更加吸引人。

其实了解了以上的两个知识点，我们就可以正常使用UIVisualEffectView的相关功能了。

在此之外我再介绍一下UIVisualEffectView之中的 UIVibrancyEffect 对象，用在实现在毛玻璃上的特殊书写效果，内容就像是写在这个毛玻璃效果之上的。如果我们需要，可以根据一下流程进行实现

- (void)viewDidLoad {
   
   
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"back3.jpeg"]]