【iOS】—— 网易云音乐总结

---

前言

`

本周仿写了网易云音乐的界面，学到了许多新知识也也遇到了不少的问题，好在通过学长的帮助和自己查阅资料解决了，下面就总结一下吧。

---

一、首页界面

效果图如下：

首页的搜索框用UITextField控件，接着就是需要自定义导航栏的按钮。首先印入眼帘的图片需要通过自动无限轮播图实现，下面就是通过滚动视图UISCrollView与按钮UIBUtton或数据视图UITableView相结合。

如果想使用渐变色的话可以在当前视图控制器的View上加一个图层。

具体实现的代码如下：

// 创建一个CAGradientLayer图层
        CAGradientLayer *gradientLayer = [CAGradientLayer layer];

        // 设置图层的大小和位置
        gradientLayer.frame = CGRectMake(0, 0, CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame) / 8);

        // 设置渐变色的起始颜色和结束颜色
        UIColor *startColor = [UIColor whiteColor];
        UIColor *endColor = [UIColor colorWithRed:255.0/255.0 green:182.0/255.0 blue:193.0/255.0 alpha:1.0];
        gradientLayer.colors = @[(__bridge id)startColor.CGColor, (__bridge id)endColor.CGColor];

        // 设置渐变色的方向
        gradientLayer.startPoint = CGPointMake(0.5, 1.0);
        gradientLayer.endPoint = CGPointMake(0.5, 0.0);

        // 设置渐变色的位置和颜色
        gradientLayer.locations = @[@0.0, @0.5, @1.0];
        UIColor *middleColor = [UIColor colorWithRed:254.0/255.0 green:222.0/255.0 blue:224.0/255.0 alpha:1.0];
        gradientLayer.colors = @[(__bridge id)startColor.CGColor, (__bridge id)middleColor.CGColor, (__bridge id)endColor.CGColor];

        // 将图层添加到视图中
        [self.view.layer addSublayer:gradientLayer];

二、我的界面

效果图如下：

这个界面用到的就是自定义Cell还有就是深色模式的实现。
对于深色模式，我是使用一个全局变量tag来判断，如果开关为开将tag设置为102，如果为关设置为101，再通过tag值来判断文字颜色和背景颜色。

- (void)pressPush {
    EighthViewController* eightViewController = [[EighthViewController alloc] init];
    [self.navigationController pushViewController:eightViewController animated:YES];
}
- (void)swChange: (UISwitch*)sw {
    if (sw.isOn) {
        tag = 101;
        
        self.view.backgroundColor = [UIColor blackColor];
    } else {
        tag = 102;
        self.view.backgroundColor = [UIColor whiteColor];
    }
    [self.tableView reloadData];
}

如果想让头像圆角化的话，可以通过下面的代码实现：

headImageView.layer.cornerRadius = headImageView.frame.size.width / 2;
 headImageView.layer.masksToBounds = YES;

三、社区界面

效果图如下：

社区界面主要就是在滚动视图上再添加滚动视图，还有就是要通过分段控制器（UISegmentedControl控件）来控制滚动视图，并且还能通过滑动滚动视图控制分段控制器。那就需要通过协议函数来实现了。

//通过分段控制器控制滚动视图
- (void)segmentedControlValueChanged:(UISegmentedControl *)sender {
    NSInteger selectedIndex = sender.selectedSegmentIndex;
    UIScrollView* myScrollView = self.scrollView;
    CGFloat offsetX = selectedIndex * myScrollView.bounds.size.width;
    CGFloat offsetY = myScrollView.contentOffset.y;
    [myScrollView setContentOffset:CGPointMake(offsetX, offsetY)];
}
//通过滚动视图控制分段控制器
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat contentOffsetX = scrollView.contentOffset.x;
    NSInteger selectedIndex = (double)(contentOffsetX / scrollView.frame.size.width + 0.5);
    UISegmentedControl* mySegmentedControl = self.segmentControl;
    if (selectedIndex != mySegmentedControl.selectedSegmentIndex) {
        self.segmentControl.selectedSegmentIndex = selectedIndex;
    }
}

总结

仿写网易云音乐的时候，学到了不少新知识，同时也巩固了前面所学知识，总的来说就是受益匪浅。