【iOS】APP仿写——网易云音乐

启动页

这里我的启动页是使用Xcode自带的启动功能，将图片放置在LaunchScreen中即可。这里也可以通过定时器控制，来实现启动的效果

效果图：

这里放一篇大佬的博客，讲的比较具体：
Xcode 中设置APP的图标（Icon）和启动页面（Launch Screen）

发现

这里先给出效果图：

定时器控制轮播图

这里实现定时器控制时要注意，在滚动屏幕时定时器应该克制工作，不然在滚动克制时，由于定时器工作，可能会立刻跳转图片；在动图中看到在我滑动滚动视图以外区域时，定时器并没有克制工作，这个效果使用下面这个代码实现：

**这样设置定时器是将定时器添加到了主runloop中，这样就可以确保定时器在各种交互场景下都可以正常运行。
代码实现：

1. -(void) beginTime
2. {
3.     self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(press:) userInfo:nil repeats:YES];
4. }
6. -(void) stopTime
7. {
8.     [self.timer invalidate];
9.     self.timer = nil;
10. }
12. -(void) press: (MyCell*) cell
13. {
14.     NSInteger pageX = self.scrollview.contentOffset.x / ([UIScreen mainScreen].bounds.size.width - 40 );
15.     self.Page.currentPage = pageX - 1;
16.     if (pageX == 3) {
17.         [self.scrollview setContentOffset:CGPointMake(0, 0) animated:NO];
18.         [self.scrollview setContentOffset:CGPointMake(([UIScreen mainScreen].bounds.size.width - 40), 0) animated:YES];
19.         
20.         pageX = 1;
21.     } else {
22.         [self.scrollview setContentOffset:CGPointMake(([UIScreen mainScreen].bounds.size.width - 40) * (pageX + 1), 0) animated:YES];
23.     }
24. }
26. - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
27. {
28.     [self stopTime];
29. }
31. - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
32. {
33.     [self beginTime];
34.     [[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
35. }

复制代码

无限轮播图的实现与ZARA中相同，这里就不做讲解了
UIButtonConfiguration

UIButtonConfiguration 是 iOS 15 及以后版本中新引入的一个用于配置 UIButton 表面的类。它提供了一种更加灵活和结构化的方式来界说按钮的样式和行为。 在iOS15.0之后无法直接在按钮中同时添加图片文字并且调整位置了，以是我们必要借助UIButtonConfiguration实现，在我的效果图中，保举歌单就是借助这个实现了。
下面通过一个使用的代码进行讲解：

1. NSArray* arr = [NSArray arrayWithObjects:@"每日推荐",@"歌单",@"排行榜",@"电台",@"直播",@"有声书", @"歌手",@"专辑",nil];
2.         for(int i = 0; i < 8; i++) {
3.             NSString *str = arr[i];
4.             NSString *strImage = [NSString stringWithFormat:@"%@.png",str];
5.             UIButtonConfiguration *config = [UIButtonConfiguration plainButtonConfiguration];//创建一个UIButtonConfiguration对象
6.             config.attributedTitle = [[NSAttributedString alloc] initWithString:str];//设置按钮的富文本标题
7.             config.image = [UIImage imageNamed:strImage];//甚至按钮的图片
8.             //设置图片与文字的位置
9.             config.imagePlacement = NSDirectionalRectEdgeTop;
10.             config.buttonSize = UIButtonConfigurationSizeMini;
11.             config.imagePadding = 8;
12.             config.baseForegroundColor = [UIColor blackColor];
13.             //将这个添加到一个按钮中去
14.             UIButton* btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
15.             btn.configuration = config;
16.             btn.frame = CGRectMake(i * 100, 0, 100, 100);
17.             //在滚动视图中加入btn这个按钮
18.             [self.scrollview addSubview:btn];
19.         }

复制代码

发现

这里先给出我的效果图

这个界面中，重要必要实现的是照片墙中更换图片，导航栏中添加按钮事件，别的的在前面都进行过讲解，自界说cell中使用UIButtonConfigurtion，添加含有文字图片的按钮，使用分栏控件控制滚动视图。
换头像

这里换头像我使用的是协议传值，背面我也会将五大传值单独写一篇博客进行总结讲解五大传值。

1. if(self.selectedCount == 0) {
2.         self.elertView = [UIAlertController alertControllerWithTitle:@"警告" message:@"请选择一张图片更换" preferredStyle:UIAlertControllerStyleAlert];
3.         UIAlertAction* action = [UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:^(UIAlertAction* action){}];
4.         [self.elertView addAction:action];
5.         [self presentViewController:self.elertView animated:YES completion:nil];
6.     } else if (self.selectedCount == 1) {
7.         for(UIView* subview in self.scrollview.subviews) {
8.             if([subview isKindOfClass:[UIButton class]]) {
9.                 UIButton* button = (UIButton*) subview;
10.                 if(button.selected) {
11.                     UIImage* image = [button imageForState:UIControlStateNormal];
12.                     [self.delegate ChangePhoto:image];
13.                     button.selected = NO;
14.                     [self.navigationController popViewControllerAnimated:YES];
15.                     break;
16.                 }
17.             }
18.         }
19.     } else {
20.         self.elertView = [UIAlertController alertControllerWithTitle:@"警告" message:@"禁止一次选用多张图片更换" preferredStyle:UIAlertControllerStyleAlert];
21.         UIAlertAction* action = [UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:^(UIAlertAction* action){}];
22.         [self.elertView addAction: action];
23.         [self presentViewController:self.elertView animated:YES completion:nil];
24.     }

复制代码

这段代码是我对图片被选中多少的判断，可以在警告对话框事件函数中将选中按钮规复，这样会更公道一点。

这两行代码用于设置是否被选中图片
我的

这个界面最重要的就是夜间模式，这里重点讲解夜间模式，先放上效果图可以看一看。

这里夜间模式传递到其他的页面是我使用的通知传值，背面在进行讲解如何实现通知传值，这里先不做讲解。

先在自界说cell控件使用时添加事件函数，而后通过一个全局开关的属性来控制其他cell的颜色，并用来通知传值。

1. -(void) pressSwitch: (UISwitch*) sw
2. {
3.     self.switchon = sw.isOn;
4.     BOOL A = self.switchon;
5.     //通知传值
6.     NSDictionary* dict = @{@"switch":@(A)};
7.     [[NSNotificationCenter defaultCenter] postNotificationName:@"string" object:nil userInfo:dict];
8.     if(self.switchon) {
9.         [self.tableView reloadData];
10.         self.tableView.backgroundColor = [UIColor blackColor];
11.         self.tabBarController.tabBar.backgroundColor = [UIColor darkGrayColor];
12.         self.tabBarController.tabBar.barTintColor = [UIColor darkGrayColor];
13.         self.tabBarController.tabBar.tintColor = [UIColor grayColor];
14.         
15.     } else {
16.         UIColor* wechat = [UIColor colorWithRed:(CGFloat)0xF7/255.0 green:(CGFloat)0xF7/255.0 blue:(CGFloat)0xF7/255.0 alpha:1.0];
17.         self.tableView.backgroundColor = wechat;
18.         self.tabBarController.tabBar.backgroundColor = wechat;
19.         self.tabBarController.tabBar.barTintColor = wechat;
20.         self.tabBarController.tabBar.tintColor = [UIColor grayColor];
21.         [self.tableView reloadData];
22.     }
23. }

复制代码

**注意：通知传值到其他页面，假如没有打开过第二个页面，第二个页面就不会加载，这样他就无法吸收到通知传值的信息，以是我们必要开始时将三个页面全部加载，这里给出代码：

   在自界说cell使用时，会发现第一个cell和导航栏可能存在一定的间隙，可以使用这个函数解决

  总结

网易云音乐仿写过程中，运用了许多之前学习的内容对老知识进行了巩固 ，也学习了新的知识，在学习传值时比较花时间，在背面的3g share、管理系统中都有着大量的应用。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。