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

news2024/11/28 20:57:44

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

文章目录

  • 「OC」暑假第三周——天气预报的仿写
    • 写在前面
    • 预览
    • UItableView嵌套UICollectionView
    • 毛玻璃效果
    • SVGKit库的使用
    • 简单的动画实现
    • 主页之中详情页的编写
    • 总结

写在前面

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

预览

Aug-13-2024 18-21-35

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

UItableView嵌套UICollectionView

image-20240814114438568

为了实现这个圆角控件，我一开始是想要直接使用一个单独的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"]];
    // 创建一个模糊效果
    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    blurEffectView.frame = self.view.bounds;
    [self.view addSubview:blurEffectView];

    // 创建一个振动效果
    UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];
    UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];
    vibrancyEffectView.frame = self.view.bounds;

    // 在振动效果视图中添加子视图（比如标签）
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 400, 30)];
    label.text = @"Hello, Vibrancy Effect!";

    label.font = [UIFont boldSystemFontOfSize:30];
    label.textAlignment = NSTextAlignmentCenter;
    label.center = vibrancyEffectView.center;
    [vibrancyEffectView.contentView addSubview:label];

    // 将振动效果视图添加到模糊效果视图中
    [blurEffectView.contentView addSubview:vibrancyEffectView];
}

此外，需要注意的是如果我们要将控件添加到UIVisualEffectView之中，我们需要将子控件添加到其 contentView 属性中。

SVGKit库的使用

在关于天气相关的icon，我使用了和风天气API之中自带的icon，根据时刻的天气之中JSON数据，读取到相应的icon编号，利用和风天气自身给出的图片素材库实现了，当前天气icon的展示。

因为xcode似乎不支持SVG格式的图片，所以我们需要引入第三方SVGKit库来进行使用，首先是安装完成集成第三方库的Cocoapods，然后创建podfile文件，在podfile文件之中加入以下代码，并进行保存，最后在终端之中开始install就可以安装好了。

platform:ios,'17.5'

target 'weather' do
 
 pod 'SVGKit', :git => 'https://github.com/SVGKit/SVGKit.git', :branch => '2.x'
 pod 'CocoaLumberjack'


end

关于SVGKit库的用法：

 NSString *imagename = data[@"icon"];
        
 SVGKImage* image = [SVGKImage imageNamed:imagename];
 image.size = CGSizeMake(40, 40);
 UIImage* iconImage = image.UIImage;
 UIImageView* iView = [[UIImageView alloc] initWithImage:iconImage];

就可以直接使用SVG类型的图片格式了

简单的动画实现

在天气预报编写的过程之中，我还加入了一些动画，比如搜索栏从右往左动至导航栏上；在点击搜索框键盘弹出的过程，慢慢添加一个半透明背景。

Aug-14-2024 19-50-24

- (void)keyboardWillShow:(NSNotification *)notification {
    [self.view addSubview:self.dimmedBackgroundView];
    
    [self.view addGestureRecognizer:self.tapGesture];
    [UIView animateWithDuration:0.3 animations:^{
        self.dimmedBackgroundView.alpha = 1;
        [self.view bringSubviewToFront:self.tableView1];
    }];
}
- (void)keyboardWillHide:(NSNotification *)notification {
    [self.view removeGestureRecognizer:self.tapGesture];
    [UIView animateWithDuration:0.3 animations:^{
        self.dimmedBackgroundView.alpha = 0;
        if (self.tableView1.hidden) {
            self.searchContainerView.frame = CGRectMake(self.view.frame.size.width, 0, self.view.frame.size.width, 44);
        }
       
           
    } completion:^(BOOL finished) {
        [self.dimmedBackgroundView removeFromSuperview];
        
    }];
}

-(void)setupSearchBar {
    self.searchBar = [[UISearchBar alloc] init];
    self.searchBar.placeholder = @"搜索城市或机场";
    self.searchBar.delegate = self;
    // 初始化容器视图
    self.searchContainerView = [[UIView alloc] initWithFrame:CGRectMake(self.view.frame.size.width, 0, self.view.frame.size.width, 44)];
    self.searchContainerView.backgroundColor = [UIColor whiteColor]; // 可以根据需要设置背景颜色
    [self.searchContainerView addSubview:self.searchBar];

    // 添加容器视图到导航栏的顶部
    [self.navigationController.navigationBar addSubview:self.searchContainerView];

    // 设置 searchBar 的 frame
    self.searchBar.frame = self.searchContainerView.bounds;
}

- (void)addButtonTapped {
    [UIView animateWithDuration:0.3 animations:^{
           self.searchContainerView.frame = CGRectMake(0, 0, self.view.frame.size.width, 44);
       }];
    
}

我通过判断键盘是否需要回收来，对黑色半透明背景和搜索栏进行动画操作，在搜索栏初始化的时候，我将其设置在了控制器屏幕外的右边，当点击加号按钮时，利用动画将搜索栏移至屏幕正上方，黑色半透明背景也是如此，当键盘弹出时将黑色背景加入并将透明度从0拉到1，当键盘回收时，再将视图透明度从1拉回0，然后再移出当前控制器。

主页之中详情页的编写

在点入主页之中的cell，我使用的是一个滚动视图，然后将详情页变为当前滚动视图所在的控制器的子控制器，然后将详情页控制器的view属性全部添加至滚动视图之中，具体代码如下：

-(void)setupScrollview {
    
    self.scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
    self.scrollView.showsHorizontalScrollIndicator = NO;
    self.scrollView.contentSize = CGSizeMake( W * self.weatherDataArray.count, 0);
    self.scrollView.pagingEnabled = YES;
    self.scrollView.scrollEnabled = YES;
    self.scrollView.delegate = self;
    self.scrollView.bounces = NO;
    [self.scrollView setContentOffset:CGPointMake( self.index * W, 0)];
    for (int i = 0; i < self.weatherDataArray.count; i++) {
        detailViewController *city = [[detailViewController alloc] init];
        city.cityName = self.weatherDataArray[i][@"cityName"];
        city.name = self.weatherDataArray[i][@"cityID"];
        city.view.frame = CGRectMake(i * W, 0, W, H);
        [self addChildViewController:city];//将详情页控制器作为当前控制器的子控制器
        [self.scrollView addSubview:city.view];
    }
    [self.view addSubview:self.scrollView];
}

总结

暑假的项目学习过程，随着天气预报的完成也是趋近尾声，接下来的日子可以好好回家休息了！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2060163.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

西门子PLC跟汇川H5U系列PLC标签方式以太网通讯的快速实现方案

西门子PLC跟汇川H5U系列PLC标签方式以太网通讯的快速实现方案

PLC通讯智能网关IGT-DSER模块支持汇川、西门子、三菱、欧姆龙、罗克韦尔AB、GE等各种品牌的PLC之间通讯&#xff0c;同时也支持PLC与Modbus协议的变频器、智能仪表等设备通讯。网关有多个网口、串口&#xff0c;也可选择WIFI无线通讯。PLC内无需编程开发&#xff0c;在智能网关…
阅读更多...
金九银十秋招大模型岗位攻略来了，已收offer，非常详细收藏我这一篇就够了

金九银十秋招大模型岗位攻略来了，已收offer，非常详细收藏我这一篇就够了

秋季招聘季节是求职者寻找新机会的重要时期&#xff0c;特别是对于想要进入大模型领域的专业人士来说。以下是一份大模型学习攻略和应聘攻略&#xff0c;帮助你为秋季招聘做好准备&#xff1a; 大模型学习攻略 理解大模型基础 学习AI基础&#xff1a;了解机器学习、深度学习的…
阅读更多...
[数据集][目标检测]扳手检测数据集VOC+YOLO格式1042张1类别

[数据集][目标检测]扳手检测数据集VOC+YOLO格式1042张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1042 标注数量(xml文件个数)&#xff1a;1042 标注数量(txt文件个数)&#xff1a;1042 标注…
阅读更多...
论文阅读1 Scaling Synthetic Data Creation with 1,000,000,000 Personas

论文阅读1 Scaling Synthetic Data Creation with 1,000,000,000 Personas

Scaling Synthetic Data Creation with 1,000,000,000 Personas 链接&#xff1a;https://github.com/tencent-ailab/persona-hub/ 文章目录 Scaling Synthetic Data Creation with 1,000,000,000 Personas1. 摘要2. 背景2.1 什么是数据合成2.2 为什么需要数据合成2.3 10亿种人…
阅读更多...
【Datawhale AI夏令营第四期】 浪潮源大模型应用开发方向笔记 Task04 RAG模型 人话八股文Bakwaan_Buddy项目创空间部署

【Datawhale AI夏令营第四期】 浪潮源大模型应用开发方向笔记 Task04 RAG模型 人话八股文Bakwaan_Buddy项目创空间部署

【Datawhale AI夏令营第四期】 浪潮源大模型应用开发方向笔记 Task04 RAG模型 人话八股文Bakwaan_Buddy项目创空间部署 什么是RAG&#xff1a; 我能把这个过程理解为Kimi.ai每次都能列出的一大堆网页参考资料吗&#xff1f;Kimi学了这些资料以后&#xff0c;根据这里面的信息综…
阅读更多...
支持2.4G频秒变符合GB42590的标准的飞行器【无人机GB42590发射端】

支持2.4G频秒变符合GB42590的标准的飞行器【无人机GB42590发射端】

使用方法: 放在飞机 上&#xff0c;按键那一面需要朝上对着天空(因为GPS陶瓷天线在按键面)&#xff0c;支持基本ID&#xff0c;向量和系统包&#xff0c;电池容量240mAH充电1小时&#xff0c;使用时间大概2小时。 1.长按3秒开关机 2.开机红灯慢闪&#xff0c;只发射基本ID数据…
阅读更多...
Spring核心思想讲解之控制反转（IOC）

Spring核心思想讲解之控制反转（IOC）

控制反转概述 控制反转实现方式 XML方式 方式一 方式二 方式三 注解方式 第一步 第二步 第三步 依赖注入&#xff08;DI&#xff09;实现方式 XML方式 手动注入 set注入 构造器注入 自动注入 set注入 构造方法注入 注解方式 方式一&#xff1a; 方式二&…
阅读更多...
IO流【详解】

IO流【详解】

一、IO流 1.1 IO说明 Input 输入 Output 输出 流: 例如水流,流量,即流是指数据流动传输 IO流就是指数据的输入输出 例如: 将磁盘中的小说.txt,读取到java代码中 ---> 输入 例如: 从java代码中,写到磁盘中创建出文件,并向文件中写入内容 --> 输出 1.2 IO体系 IO 字节…
阅读更多...
新手也能快速上手！免费的四款视频剪辑神器大揭秘

新手也能快速上手！免费的四款视频剪辑神器大揭秘

现在好用的剪辑工具好的的呀&#xff0c;只要有玩抖音、快手和一些视频为主的社交平台&#xff0c;大家都会尝试用一些剪辑工具自己动手剪辑&#xff0c;在近几年视频的热度之下这类工具做得也越来越专业了&#xff0c;当然其中也还是会有既专业又免费实用的产品&#xff0c;今…
阅读更多...
教程：一步步教你构建基于Python Flask和Vue的智慧书析K-means分析系统

教程：一步步教你构建基于Python Flask和Vue的智慧书析K-means分析系统

&#x1f34a;作者&#xff1a;计算机毕设匠心工作室 &#x1f34a;简介&#xff1a;毕业后就一直专业从事计算机软件程序开发&#xff0c;至今也有8年工作经验。擅长Java、Python、微信小程序、安卓、大数据、PHP、.NET|C#、Golang等。 擅长&#xff1a;按照需求定制化开发项目…
阅读更多...
20240821给飞凌OK3588-C的核心板刷Rockchip原厂的Buildroot并挂载1TB的exFAT格式的TF卡

20240821给飞凌OK3588-C的核心板刷Rockchip原厂的Buildroot并挂载1TB的exFAT格式的TF卡

fdisk -l df -h df -t df -T mount 20240821给飞凌OK3588-C的核心板刷Rockchip原厂的Buildroot并挂载1TB的exFAT格式的TF卡 2024/8/21 18:06 【切记&#xff0c;对于Rockchip原厂的Buildroot&#xff0c;如果你没有针对性的适配DTS&#xff1a;修改其中的GPIO口供电&#xff0c…
阅读更多...
分析AAC raw data

分析AAC raw data

分析AAC raw data 本文的主要目标是分析说明AAC解码器如何处理RAW AAC数据。通过拆解理解AAC解码器处理raw aac的关键点&#xff0c;通过数据分析和代码阅读&#xff0c;来说明这个细节&#xff0c;某些细微之处尚需深入探索&#xff0c;留待后续更为详尽的阐述。 几种格式介…
阅读更多...
C语言 ——— 常见的动态内存错误（上篇）

C语言 ——— 常见的动态内存错误（上篇）

对NULL指针的解引用操作 代码演示&#xff1a; int* ptr (int*)malloc(sizeof(int) * INT_MAX); *ptr 10; free(ptr); 代码解析&#xff1a; 使用 malloc 函数动态开辟 sizeof(int)*INT_MAX 这么多个字节的空间&#xff0c;而 INT_MAX 是整型类型的最大值&#xff0c;那么…
阅读更多...
优化WAN流量：如何通过调整系统设置降低企业网络成本

优化WAN流量：如何通过调整系统设置降低企业网络成本

一、症状与问题背景 当电脑显示空闲状态时&#xff0c;如果满足以下条件&#xff0c;第二拨号链接可能会意外激活&#xff1a; 您正在使用基于 Microsoft Windows 的计算机&#xff0c;该计算机连接到远程网络并且是 Active Directory 域服务 (AD DS) 域的成员。 您通过二级…
阅读更多...
jpg怎么转换成pdf？6个简单方法，实现jpg转换成pdf

jpg怎么转换成pdf？6个简单方法，实现jpg转换成pdf

你是否也曾想将jpg图片转换为pdf格式文档呢&#xff1f;亦或者在处理文档或制作报告时&#xff0c;不知道怎么才能更快地将多张图片整合成一个pdf文件呢&#xff1f;如果你正在寻找简单快速的方法&#xff0c;又有哪些工具可以帮助您完成图片转pdf呢&#xff1f;别着急&#xf…
阅读更多...
Windows服务器部署基于【若依管理系统】开发的项目

Windows服务器部署基于【若依管理系统】开发的项目

&#x1f3af;导读&#xff1a;本文档详述了基于前后端分离的若依系统&#xff08;版本3.8.8&#xff09;在Windows环境下从零开始的部署流程&#xff0c;包括JDK、Redis、MySQL等环境的搭建与配置。前端部署涉及Vue项目构建、图片优化及利用Nginx托管&#xff1b;而后端则涵盖…
阅读更多...
猫咪掉毛严重如何清理？希喂，霍尼韦尔宠物空气净化器实测分享

猫咪掉毛严重如何清理？希喂，霍尼韦尔宠物空气净化器实测分享

随着养宠人群的增多&#xff0c;市场关注到铲屎官们的需要&#xff0c;带来了新的科技产品——宠物空气净化器。宠物空气净化器是在普通空气净化器基础上&#xff0c;调整服务对象&#xff0c;为吸附宠物毛发而设计的。不少消费者被它的功能所吸引&#xff0c;打算购入使用。然…
阅读更多...
带你速通C语言——函数（11）

带你速通C语言——函数（11）

在 C 语言中&#xff0c;函数是组织代码的重要方式&#xff0c;它们允许我们将代码划分为可重用的模块&#xff0c;每个模块执行特定的任务。函数的使用有助于代码的清晰性和维护性&#xff0c;也是编写结构化程序的基本构建块之一。 1.函数的基本组成 在 C 中定义函数时&…
阅读更多...
Agentic Security：一款针对LLM模型的模糊测试与安全检测工具

Agentic Security：一款针对LLM模型的模糊测试与安全检测工具

关于Agentic Security Agentic Security是一款针对LLM模型的模糊测试与安全检测工具&#xff0c;该工具可以帮助广大研究人员针对任意LLM执行全面的安全分析与测试。 请注意 Agentic Security 是作为安全扫描工具设计的&#xff0c;而不是万无一失的解决方案。它无法保证完全防…
阅读更多...
八爪鱼现金流-034，实际使用，资产折线图

八爪鱼现金流-034，实际使用，资产折线图

每个月发工资后&#xff0c;记账月报。 回顾资产折线图。 比较大的波动&#xff0c;一次是22年2月左右贷款买房。一次是24年8月宝宝出生。 孩子开销太大。呜呜呜。 话说&#xff0c;这个折线图&#xff0c;能不能加一个标签或者备注呢&#xff1f; 这个需求功能稍后我研究一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023