目录
- 前言
- 首页
- 关于UINavigationBarAppearance
- “我的”
- 账号
- 夜间模式——多界面传值
- 遇到的问题
- 所用到的其他知识整理
- NSNotification
- reloadData
- 各种键盘模式
- 总结
前言
有了之前仿写ZARA的基础,本周我们仿写了网易云APP,在这里对多界面传值进行了首次应用——夜间模式和换头像功能。以下是我在仿写网易云时觉得比较重要的地方和遇到的问题。
首页
主要包含导航栏,搜索框,无限自动轮播图,以及三个UILabel和与之对应的TableView。其中比较重要的是,当用户滑动页面时,页面上的内容跟着画布一起动,而顶部的导航栏则不动,且用户放手后,页面回到原位置。
效果图如下:
其中无限轮播图及自动播放跟zara的仿写的实现方法相同。而下面的红标功能和推荐歌单,最近常听等就是自定义cell和滚动视图的结合。
我这里以推荐歌单部分的滚动视图为例,给出代码:
//homeTableViewCell.m
if ([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 搜索的键盘,包含搜索相关的字符和布局。
总结
刚开始写网易云可能会比较慢,对于知识的运用和视图控件位置的把控不太好,在这个仿写中不但复习了之前学的知识,而且也学到了reloadData等新知识,也粗略学习了多界面传值的知识,为后面3G share的仿写作铺垫。