当前位置：首页 > news >正文

【iOS】暑假第二周——网易云APP 仿写

news 来源：原创 2024/9/20 20:33:23

前言

有了之前仿写ZARA的基础，本周我们仿写了网易云APP，在这里对多界面传值进行了首次应用——夜间模式和换头像功能。以下是我在仿写网易云时觉得比较重要的地方和遇到的问题。

首页

主要包含导航栏，搜索框，无限自动轮播图，以及三个UILabel和与之对应的TableView。其中比较重要的是，当用户滑动页面时，页面上的内容跟着画布一起动，而顶部的导航栏则不动，且用户放手后，页面回到原位置。

效果图如下：
在这里插入图片描述
其中无限轮播图及自动播放跟zara的仿写的实现方法相同。而下面的红标功能和推荐歌单，最近常听等就是自定义cell和滚动视图的结合。
我这里以推荐歌单部分的滚动视图为例，给出代码：

//homeTableViewCell.mif ([self.reuseIdentifier isEqualToString:@"tuijiangedan"]) {_tuijiangedanLabel = [[UILabel alloc] initWithFrame:CGRectMake(5, 0, WIDTH, 20)];_tuijiangedanLabel.text = @"  推荐歌单 >";_tuijiangedanLabel.textColor = [UIColor blackColor];_tuijiangedanLabel.font = [UIFont systemFontOfSize:17];_tuijiangedanLabel.backgroundColor = [UIColor whiteColor];if (swDelegate.isNighted) {_tuijiangedanLabel.backgroundColor = [UIColor grayColor];_tuijiangedanLabel.textColor = [UIColor blackColor];} else {_tuijiangedanLabel.backgroundColor = [UIColor whiteColor];_tuijiangedanLabel.textColor = [UIColor blackColor];}[self.contentView addSubview:_tuijiangedanLabel];_tuijiangedanScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 50, WIDTH, 110)];_tuijiangedanScrollView.contentSize = CGSizeMake(WIDTH * 2, 130);_tuijiangedanScrollView.bounces = YES;_tuijiangedanScrollView.alwaysBounceHorizontal = YES;_tuijiangedanScrollView.alwaysBounceVertical = NO;_tuijiangedanScrollView.showsHorizontalScrollIndicator = YES;_tuijiangedanScrollView.scrollEnabled = YES;_tuijiangedanScrollView.pagingEnabled = YES;_tuijiangedanArray = @[@"tuijiangedan1.jpg", @"tuijiangedan2.jpg", @"tuijiangedan3.jpg", @"tuijiangedan4.jpg", @"tuijiangedan5.jpg", @"tuijiangedan6.jpg"];_tuijiangedantitleArray = @[@"【华语经典】那些年听不厌的经典😋", @"✨温柔女声·开口惊艳的女声翻唱", @"心动旋律｜挖掘星辰大海中的宝藏💎", @"💌短发 故事 与她", @"连空想都红了眼是有多遗憾😔", @"华语宝藏R&B｜来自过去的浪漫氛围🌄"];
//        if (swDelegate.isNighted) {
//            _tuijiangedanScrollView.backgroundColor = [UIColor blackColor];
//        } else {
//            _tuijiangedanScrollView.backgroundColor = [UIColor whiteColor];
//        }for (int i = 0; i < 6; i++) {NSString* str = [[NSString alloc] initWithString:_tuijiangedanArray[i]];UIImage* image = [[UIImage alloc] init];image = [UIImage imageNamed:str];UIImageView* iView = [[UIImageView alloc] initWithImage:image];iView.frame = CGRectMake(10 + 130 * i, 0, 110, 110);iView.layer.cornerRadius = 7;iView.layer.masksToBounds = YES;[_tuijiangedanScrollView addSubview:iView];self.tuijiangedanLabel2 = [[UILabel alloc] initWithFrame: CGRectMake(10 + 130 * i, 110, 120, 50)];self.tuijiangedanLabel2.font = [UIFont systemFontOfSize: 14];self.tuijiangedanLabel2.text = _tuijiangedantitleArray[i];self.tuijiangedanLabel2.textColor = [UIColor blackColor];self.tuijiangedanLabel2.numberOfLines = 2;
//            if (swDelegate.isNighted) {
//                _tuijiangedanLabel2.backgroundColor = [UIColor blackColor];
//                _tuijiangedanLabel2.textColor = [UIColor whiteColor];
//            } else {
//                _tuijiangedanLabel2.backgroundColor = [UIColor whiteColor];
//                _tuijiangedanLabel2.textColor = [UIColor blackColor];
//            }[self.tuijiangedanScrollView addSubview: self.tuijiangedanLabel2];}[self.contentView addSubview:_tuijiangedanScrollView];}

在这里学到比较多的是关于导航栏的设置和滑动屏幕时，上面除了导航栏外的内容跟着画布一起动。

下面是导航栏设置的相关代码：

    UINavigationBarAppearance* appearance = [[UINavigationBarAppearance alloc] init];appearance.backgroundColor = [UIColor whiteColor];//取消图像阴影appearance.shadowImage = [[UIImage alloc] init];appearance.shadowColor = nil;_leftbtn = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"caidan.png"] style:UIBarButtonItemStylePlain target:self action:nil];_leftbtn.tintColor = [UIColor redColor];_leftbtn.width = 30;self.navigationItem.leftBarButtonItem = _leftbtn;//[self.tableView reloadData];_search = [[UISearchBar alloc] init];_search.frame = CGRectMake(30, 0, 250, 30);self.textField = [[UITextField alloc] initWithFrame:CGRectMake(30, 0, 250, 30)];_search.searchBarStyle = UISearchBarStyleMinimal;_search.placeholder = @"凤凰传奇";_search.keyboardType = UIKeyboardTypeDefault;self.navigationItem.titleView = _search;_rightbtn = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"tinggeshiqu.png"] style:UIBarButtonItemStylePlain target:self action:nil];_rightbtn.tintColor = [UIColor redColor];_rightbtn.width = 30;self.navigationItem.rightBarButtonItem = _rightbtn;self.navigationController.navigationBar.standardAppearance = appearance;self.navigationController.navigationBar.scrollEdgeAppearance = appearance;[self.tableView reloadData];

关于UINavigationBarAppearance

UINavigationBarAppearance 的 shadowImage 和 shadowColor 属性用来控制导航栏的阴影效果。默认情况下，导航栏有阴影效果以提升视觉层次感，但你可以根据需要进行自定义。下面是对阴影效果的详细说明解释。

导航栏阴影效果：

阴影图像 (shadowImage)

默认阴影图像：UINavigationBar 的默认样式通常包括一个阴影图像，这个图像创建了一个底部边缘的阴影效果，使导航栏从下方看起来有一个轻微的阴影。
自定义阴影图像：你可以设置 shadowImage 属性为一个自定义的 UIImage 对象，以改变或移除阴影效果。如果将 shadowImage 设置为一个自定义的图像，它会替换掉默认的阴影效果。

阴影颜色 (shadowColor)

默认阴影颜色：导航栏的阴影颜色是系统默认的颜色。
自定义阴影颜色：你可以通过 shadowColor 属性设置一个自定义的阴影颜色，或者将其设置为 nil 以移除阴影颜色，使导航栏没有阴影效果。

如何管理和自定义阴影效果：

移除阴影
如果你想移除导航栏的阴影效果，可以将 shadowImage 设置为 nil，或者设置一个透明的图像。示例如下：

UINavigationBarAppearance *appearance = [[UINavigationBarAppearance alloc] init];
appearance.backgroundColor = [UIColor systemBackgroundColor]; // 设置背景颜色
appearance.shadowImage = nil;  // 移除阴影图像
appearance.shadowColor = nil; // 移除阴影颜色（可选）if (self.navigationController) {self.navigationController.navigationBar.standardAppearance = appearance;self.navigationController.navigationBar.scrollEdgeAppearance = appearance;
}

设置自定义阴影图像
如果你需要自定义阴影效果，可以创建一个带有阴影的 UIImage，然后设置 shadowImage 属性：

UIImage *customShadowImage = [UIImage imageNamed:@"customShadowImage"]; // 使用自定义的阴影图像
appearance.shadowImage = customShadowImage;if (self.navigationController) {self.navigationController.navigationBar.standardAppearance = appearance;self.navigationController.navigationBar.scrollEdgeAppearance = appearance;
}

调整阴影颜色
虽然 shadowColor 属性在 UINavigationBarAppearance 中不直接存在，shadowImage 和 backgroundImage 属性间接控制了阴影的显示。在某些情况下，你可能需要通过自定义图像来设置阴影的颜色效果。
如果需要更新导航栏的外观，移除阴影并应用新的背景颜色，代码示例如下：

- (void)updateNavigationBarAppearanceWithColor:(UIColor *)newColor {UINavigationBarAppearance *appearance = [[UINavigationBarAppearance alloc] init];appearance.backgroundColor = newColor;appearance.shadowImage = nil;  // 移除默认的阴影图像appearance.shadowColor = nil;  // 适配阴影颜色的移除if (self.navigationController) {self.navigationController.navigationBar.standardAppearance = appearance;self.navigationController.navigationBar.scrollEdgeAppearance = appearance;}
}

解释

shadowImage 控制阴影图像的显示。如果设置为 nil，阴影将被移除。
shadowColor 用于设置阴影颜色，但在现代 iOS 开发中，通常通过图像来控制阴影效果。
默认行为：如果未设置 shadowImage，系统将使用默认的阴影效果。
通过这些方法，你可以自定义导航栏的视觉效果，确保它符合你的应用设计需求。

“我的”

这个界面主要就是滚动视图和分栏控件及滚动视图的结合（这个跟zara仿写里的是一样的），还有就是云盘空间的界面的推出。
下面先给出效果图：
在这里插入图片描述
滚动视图跟home界面同理，与分栏控件的结合与zara里面同理。下面给出云盘界面跳转的代码（其实就是为按钮添加事件函数，然后在事件函数里实现页面的推出）：

//云盘空间按钮的设置UIImage* icon = [[UIImage alloc] init];icon = [UIImage imageNamed:@"cloudbtn.png"];CGSize newSize = CGSizeMake(35,35);UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);[icon drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];UIImage* resizedImage = [[UIImage alloc] init];resizedImage = UIGraphicsGetImageFromCurrentImageContext();UIGraphicsEndImageContext();UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithImage:resizedImage style:UIBarButtonItemStylePlain target:self action:@selector(yunpankongjian)];leftButton.tintColor = UIColor.redColor;//按下按钮的函数实现
- (void) yunpankongjian {cloudRoomViewController* yun = [[cloudRoomViewController alloc] init];yun.hidesBottomBarWhenPushed = YES;UIBarButtonItem* bar = [[UIBarButtonItem alloc] initWithTitle:@"" style:UIBarButtonItemStylePlain target:nil action:nil];self.navigationItem.backBarButtonItem = bar;[self.navigationController pushViewController:yun animated:YES];
}

账号

账号页面没什么复杂的东西，就是一个tableView，最关键的是夜间模式的按钮，要将按钮状态传到其他页面，为夜间模式作铺垫。
效果图如下：
在这里插入图片描述

夜间模式——多界面传值

这里先给出效果图：
在这里插入图片描述
我们这里主要使用的的属性传值，在appDelegate.m里设置一个属性，可以被整个程序访问，通过按钮的开关状态来改变view，label和text的相关颜色。然后在每个自定义cell里设置开关打开后，控件的颜色状态即可（类似于下面的代码）。关于属性传值，可以去看我的上一篇博客。

if (swDelegate.isNighted) {[_starListbutton setTintColor: UIColor.grayColor];[_myListbutton setTintColor: UIColor.grayColor];[_starListbutton setTitleColor:UIColor.lightGrayColor forState:UIControlStateNormal];[_myListbutton setTitleColor:UIColor.lightGrayColor forState:UIControlStateNormal];[_starListbutton setTitleColor:UIColor.whiteColor forState:UIControlStateSelected];[_myListbutton setTitleColor:UIColor.whiteColor forState:UIControlStateSelected];} else {[_starListbutton setTintColor: UIColor.whiteColor];[_myListbutton setTintColor: UIColor.whiteColor];[_starListbutton setTitleColor:UIColor.grayColor forState:UIControlStateNormal];[_myListbutton setTitleColor:UIColor.grayColor forState:UIControlStateNormal];[_starListbutton setTitleColor:UIColor.blackColor forState:UIControlStateSelected];[_myListbutton setTitleColor:UIColor.blackColor forState:UIControlStateSelected];}

遇到的问题

对于各种view的层级关系还不是特别清晰明了，有时候会出现，view在视图上被遮盖，显示不出来的情况。自定义cell时，有时对cell的尺寸拿捏不好，需要来回改动，比较浪费时间。
在用导航栏创建图像时，如果需要透明，要注意移除图像阴影。
mycell里点击单元格松手后，单元格依旧是灰色的，没有恢复到点击前的状态，需要使用deselectRowAtIndexPath: 方法。
对于五种多界面传值理解的还不是很透彻。

所用到的其他知识整理

NSNotification

NSNotification是 iOS 和 macOS 中用于传递信息的类，它是 NSNotificationCenter 的重要组成部分。通知（NSNotification）用于在应用程序的不同部分之间传递信息，而不需要这些部分直接相互引用。这种机制非常适合于解耦合的通信方式，尤其是在复杂的应用中。

主要特点：

封装通知信息：
NSNotification 类封装了有关通知的所有信息，包括通知的名称、发送通知的对象以及任何附加的数据（userInfo 字典）。
通知的创建和发送：
通知通常由某个对象创建并发送，其他对象可以注册为观察者，以便在通知发送时执行特定的操作。

主要属性和方法：

name 属性：
通知的名称，是一个 NSString 类型的属性。它用于标识通知的类型。
object 属性：
发送通知的对象。这可以是任何对象，通常是发送通知的对象本身。接收通知的观察者可以选择只对特定对象发送的通知做出响应，或者不关心对象（即 nil）。
userInfo 属性：
一个字典（NSDictionary），用于传递附加信息。这个字典可以包含任何类型的键值对，用于通知的详细数据。
初始化方法：

- (instancetype)initWithName:(NSString *)name object:(nullable id)object userInfo:(nullable NSDictionary *)userInfo;* name：通知的名称。* object：发送通知的对象（可以是 nil）。* userInfo：附加信息字典（可以是 nil）。

reloadData

在 iOS 开发中，reloadData 是一个常用的方法，主要用于刷新视图控件中的数据内容。这个方法通常用于表视图（UITableView）或集合视图（UICollectionView），它会重新加载视图控件中的所有数据项，并刷新界面的显示。

UITableView 中的 reloadData：

用途：在 UITableView 中，reloadData 会重新加载表视图中的所有数据，刷新所有的单元格（UITableViewCell）。这在数据源发生变化后非常有用，例如数据从网络加载完成后，或者数据被修改时。

调用方式：

[self.tableView reloadData];

注意事项：
在调用 reloadData 时，表视图会重新调用数据源方法来更新所有单元格，因此要确保数据源的数据是最新的。
* reloadData 会使整个表视图重新加载，这可能会导致性能开销，特别是在表视图包含大量数据时。

UICollectionView 中的 reloadData
用途：在 UICollectionView 中，reloadData 会重新加载集合视图中的所有项（UICollectionViewCell）。适用于集合视图的数据源发生变化时，刷新整个集合视图的显示。
调用方式：

[self.collectionView reloadData];

注意事项：
与 UITableView 类似，reloadData 会导致集合视图重新调用数据源方法，并重新布局所有单元格。这可能会影响性能，尤其是当集合视图中包含大量数据项时。

各种键盘模式

UIKeyboardTypeDefault：默认键盘类型，适用于一般文本输入。
UIKeyboardTypeASCIICapable：ASCII字符键盘，适用于只需要ASCII字符的输入。
UIKeyboardTypeNumbersAndPunctuation：数字和标点符号键盘，适用于需要输入数字和标点符号的场景。
UIKeyboardTypeURL：专门用于输入URL的键盘,通常包括用于输入斜杠的特殊键。
UIKeyboardTypeNumberPad：仅包含数字的键盘，适用于仅需要输入数字的场景，如电话号码或计算器输入。
UIKeyboardTypePhonePad：专为电话号码输入设计的键盘，包含常用的电话号码符号。
UIKeyboardTypeEmailAddress：适用于电子邮件地址输入的键盘，包含电子邮件地址输入所需的特殊字符。
UIKeyboardTypeDecimalPad：数字键盘，包含一个小数点，用于输入需要小数点的数字。
UIKeyboardTypeWebSearch：用于 Web 搜索的键盘，包含搜索相关的字符和布局。