iOS —— 网易云仿写

首页#

首页实现效果如上图。

上方导航栏#

1
self.leftbtn = [[UIBarButtonItem alloc] initWithImage: [UIImage imageNamed: @"caidan"] style: UIBarButtonItemStylePlain target: self action: @selector(pressMenu)];
2
    self.rightbtn = [[UIBarButtonItem alloc] initWithImage: [UIImage imageNamed: @"tinggeshiqu"] style: UIBarButtonItemStylePlain target: nil action: nil];
3
    self.navigationItem.leftBarButtonItem = self.leftbtn;
4
    self.navigationItem.rightBarButtonItem = self.rightbtn;
5
    self.navigationItem.leftBarButtonItem.tintColor = [UIColor blackColor];
6
    self.navigationItem.rightBarButtonItem.tintColor = [UIColor blackColor];
7
    self.searchbar = [[UISearchBar alloc] init];
8
    self.searchbar.placeholder = @"安和桥 宋冬野";
9
    self.searchbar.showsSearchResultsButton = YES;
10
    self.navigationItem.titleView = self.searchbar;

导航栏的左右按钮和搜索栏代码如上

主页内容#

如上图Lookin，我把主页分成了三个部分：poster , recommend , guessyoulike

分别对应显示效果中的无线轮播海报，私人漫游，根据你喜欢的歌曲推荐。

海报#

1
- (void)pageChanged:(UIPageControl *)sender {
2
    NSInteger page = sender.currentPage;
3
    CGFloat width = WIDTH;
4
    [self.scrollView setContentOffset:CGPointMake((page + 1) * width, 0) animated:YES];
5
}
6

7
//自动翻页
8
- (void)autoScroll {
9
    CGFloat screenWidth = self.scrollView.bounds.size.width;
10
    CGFloat currentOffset = self.scrollView.contentOffset.x;
11
    NSInteger nextPage = (NSInteger)(currentOffset / screenWidth) + 1;
12

13
    NSInteger realPageCount = self.page.numberOfPages;
14

15
    if (nextPage >= realPageCount + 2) {
16
        [self.scrollView setContentOffset:CGPointMake(screenWidth, 0) animated:NO];
17
        self.page.currentPage = 0;
18
        return;
19
    }
20

21
    [self.scrollView setContentOffset:CGPointMake(nextPage * screenWidth, 0) animated:YES];
22

23
    self.page.currentPage = (nextPage - 1) % realPageCount;
24
}
25

26
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
27
    if (scrollView != self.scrollView) return;
28

29
    CGFloat screenWidth = scrollView.bounds.size.width;
30
    CGFloat offsetX = scrollView.contentOffset.x;
31
    NSInteger realPageCount = self.page.numberOfPages;
32
    NSInteger totalPages = realPageCount + 2;
33
    if (offsetX <= 0) {
34
        scrollView.contentOffset = CGPointMake(screenWidth * (totalPages - 2), 0);
35
        self.page.currentPage = realPageCount - 1;
36
    }
37
    else if (offsetX >= screenWidth * (totalPages - 1)) {
38
        scrollView.contentOffset = CGPointMake(screenWidth, 0);
39
        self.page.currentPage = 0;
40
    }
41
    else {
42
        NSInteger currentPage = (NSInteger)(offsetX / screenWidth) - 1;
43
        if (currentPage < 0) currentPage = realPageCount - 1;
44
        if (currentPage >= realPageCount) currentPage = 0;
45

46
        self.page.currentPage = currentPage;
47
    }
48
}
49

50
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
51
    [self.timer invalidate];
52
    self.timer = nil;
53
}
54

55
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
56
    [self startAutoScrollTimer];
57
}
58

59
- (void)startAutoScrollTimer {
60
    if (self.timer) {
61
        [self.timer invalidate];
62
        self.timer = nil;
63
    }
64

65
    self.timer = [NSTimer timerWithTimeInterval:5.0 target:self selector:@selector(autoScroll) userInfo:nil repeats:YES];
66
    [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
67
}

一些控制轮播的关键函数如上图，如代码可简化或有误烦请指出。

同时，我添加了一个点击海报放大功能，

1
- (void)bannerTapped:(UITapGestureRecognizer *)gesture {
2
    //取出被点击的对象
3
    UIImageView *imgView = (UIImageView *)gesture.view;
4
    UIImage *image = imgView.image;
5
    if (!image) return;
6

7
    UIWindow *keyWindow = [UIApplication sharedApplication].keyWindow;
8
    UIView *backgroundView = [[UIView alloc] initWithFrame:keyWindow.bounds];
9
    backgroundView.backgroundColor = [UIColor whiteColor];
10
    backgroundView.alpha = 0.5;
11
    UIImageView *fullImageView = [[UIImageView alloc] initWithFrame:backgroundView.bounds];
12
    fullImageView.contentMode = UIViewContentModeScaleAspectFit;
13
    fullImageView.image = image;
14
    fullImageView.userInteractionEnabled = YES;
15

16
    UITapGestureRecognizer *tapClose = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(dismissFullScreenImage:)];
17
    [fullImageView addGestureRecognizer:tapClose];
18

19
    [backgroundView addSubview:fullImageView];
20
    [keyWindow addSubview:backgroundView];
21
}

与此同时，我也添加了一个点击后取消

1
- (void)dismissFullScreenImage:(UITapGestureRecognizer *)tap {
2
    UIView *backgroundView = tap.view.superview;
3
    [UIView animateWithDuration:0.3 animations:^{
4
        backgroundView.alpha = 0;
5
    } completion:^(BOOL finished) {
6
        [backgroundView removeFromSuperview];
7
    }];
8
}

推荐内容#

我建立一个数组用于储存内容，代码难度较低

1
- (void)setupRecommandCell {
2
    self.scrollView02 = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, WIDTH, 211)];
3
    self.scrollView02.scrollEnabled = YES;
4
    self.scrollView02.pagingEnabled = YES;
5
    self.scrollView02.alwaysBounceHorizontal = YES;
6
    self.scrollView02.alwaysBounceVertical = NO;
7
    self.scrollView02.contentSize = CGSizeMake(WIDTH * 2.1, 211);
8
    self.scrollView02.showsHorizontalScrollIndicator = NO;
9
    [self.contentView addSubview:self.scrollView02];
10

11
    NSArray* arrayLabel02 = @[@"私人漫游", @"欧美日推", @"民谣日推", @"快乐旅行", @"电音日推", @"每日推荐"];
12
    NSArray* arrayLabel2 = @[@"1.2亿", @"23w", @"30w", @"460w", @"521w", @"6亿"];
13
    BOOL isNight = [NightModeManager sharedManager].isNightMode;
14

15
    for (int i = 0; i < 6; i++) {
16
        NSString* strName = [NSString stringWithFormat: @"guess%d", i + 1];
17
        UIImageView* iView = [[UIImageView alloc] initWithImage: [UIImage imageNamed: strName]];
18
        iView.frame = CGRectMake(10 + 135 * i, 5, 125, 166);
19
        iView.layer.cornerRadius = 9;
20
        iView.layer.masksToBounds = YES;
21
        [self.scrollView02 addSubview: iView];
22

23
        self.label02 = [[UILabel alloc] initWithFrame: CGRectMake(10 + 135 * i, 160, 130, 50)];
24
        self.label02.font = [UIFont systemFontOfSize: 15];
25
        self.label02.text = arrayLabel02[i];
26
        self.label02.textColor = [UIColor darkGrayColor];
27
        self.label02.numberOfLines = 2;
28
        [self.scrollView02 addSubview: self.label02];
29

30
        self.label2 = [[UILabel alloc] initWithFrame: CGRectMake(5, 88, 100, 50)];
31
        self.label2.font = [UIFont systemFontOfSize: 15];
32
        self.label2.text = arrayLabel2[i];
33
        self.label2.textColor = [UIColor whiteColor];
34
        [iView addSubview: self.label2];
35
    }
36
}
37
#### 猜你喜欢
38

39

40
因为猜你喜欢部分有三个横向栏目，我分别建立tableView0301 0302 0303
41

42

43
以其中0301为例：
44

45

46
```objective-c
47
- (UITableViewCell *)createCellForTableView0301:(NSIndexPath *)indexPath {
48

49
    static NSString *cellIdentifier = @"CustomSongCell";
50
    UITableViewCell *cell = [self.tableView0301 dequeueReusableCellWithIdentifier:cellIdentifier];
51
    BOOL isNight = [NightModeManager sharedManager].isNightMode;
52
    if (!cell) {
53
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
54

55
        UIImageView *albumImageView = [[UIImageView alloc] initWithFrame:CGRectMake(15, 5, 55, 55)];
56
        albumImageView.tag = 100;
57
        albumImageView.layer.cornerRadius = 5;
58
        albumImageView.layer.masksToBounds = YES;
59
        albumImageView.contentMode = UIViewContentModeScaleAspectFill;
60
        [cell.contentView addSubview:albumImageView];
61
        UILabel *songLabel = [[UILabel alloc] initWithFrame:CGRectMake(80, 10, WIDTH - 150, 20)];
62
        songLabel.tag = 101;
63
        songLabel.textColor = isNight ? [UIColor whiteColor] : [UIColor blackColor];
64
        songLabel.font = [UIFont systemFontOfSize:16 weight:UIFontWeightMedium];
65
        [cell.contentView addSubview:songLabel];
66

67
        UILabel *artistLabel = [[UILabel alloc] initWithFrame:CGRectMake(80, 35, WIDTH - 150, 15)];
68
        artistLabel.tag = 102;
69
        artistLabel.font = [UIFont systemFontOfSize:12];
70
        artistLabel.textColor = [UIColor grayColor];
71
        [cell.contentView addSubview:artistLabel];
72

73
        UIButton *playButton = [UIButton buttonWithType:UIButtonTypeCustom];
74
        playButton.frame = CGRectMake(WIDTH - 45, 20, 30, 30);
75
        playButton.tag = 103;
76
        [playButton setImage:[UIImage imageNamed:@"bofang.png"] forState:UIControlStateNormal];
77
        playButton.tintColor = [UIColor systemPurpleColor];
78
        [playButton addTarget:self action:@selector(playButtonTapped:) forControlEvents:UIControlEventTouchUpInside];
79
        [cell.contentView addSubview:playButton];
80
    }
81

82
    NSArray* array01 = @[@"董小姐", @"Hate Me", @"野孩子"];
83
    NSArray* array011 = @[@"宋冬野 - 安河桥北", @"two - Hate Me", @"杨千嬅"];
84
    NSArray* imageNames = @[@"011", @"012", @"013"];
85

86
    UIImageView *albumImageView = [cell.contentView viewWithTag:100];
87
    albumImageView.image = [UIImage imageNamed:imageNames[indexPath.row]];
88

89
    UILabel *songLabel = [cell.contentView viewWithTag:101];
90
    songLabel.text = array01[indexPath.row];
91

92
    UILabel *artistLabel = [cell.contentView viewWithTag:102];
93
    artistLabel.text = array011[indexPath.row];
94

95
    return cell;
96
}

“我的”页面#

我依旧把这个页面分成三个cell文件 UserInfoCell. ToolbarCell. SegmentTabCell

分别对应我的用户信息、工具栏：例如最近、本地、网盘等、和下方的音乐、博客、笔记分栏。

导航栏#

导航栏设置与之前无异

主要内容#

我的信息#

1
- (void)setupViews {
2
    _avatarImageView = [[UIImageView alloc] initWithFrame:CGRectMake( 155, -30, 90, 90)];
3
    _avatarImageView.layer.cornerRadius = 45;
4
    _avatarImageView.image = [UIImage imageNamed:@"avater"];
5
    _avatarImageView.layer.masksToBounds = YES;
6
    _avatarImageView.layer.borderColor = [UIColor whiteColor].CGColor;
7
    _avatarImageView.layer.borderWidth = 2.0;
8
    _avatarImageView.userInteractionEnabled = YES;
9

10
    UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(avatarTapped:)];
11
    [_avatarImageView addGestureRecognizer:tapGesture];
12

13
    [self.contentView addSubview:_avatarImageView];
14
    _vipLabel = [[UILabel alloc] initWithFrame:CGRectMake(240, 70, 60, 25)];
15
    _vipLabel.textColor = [UIColor colorWithRed:1.0 green:0.8 blue:0.2 alpha:1.0];
16
    _vipLabel.font = [UIFont boldSystemFontOfSize:12];
17
    _vipLabel.textAlignment = NSTextAlignmentCenter;
18
    _vipLabel.backgroundColor = [UIColor blackColor];
19
    _vipLabel.layer.cornerRadius = 12;
20
    _vipLabel.layer.masksToBounds = YES;
21
    [self.contentView addSubview:_vipLabel];
22

23
    _usernameLabel = [[UILabel alloc] initWithFrame:CGRectMake(35, 70, self.contentView.bounds.size.width, 30)];
24
    _usernameLabel.textColor = [UIColor whiteColor];
25
    _usernameLabel.font = [UIFont boldSystemFontOfSize:20];
26
    _usernameLabel.textAlignment = NSTextAlignmentCenter;
27
    [self.contentView addSubview:_usernameLabel];
28

29
    _bioLabel = [[UILabel alloc] initWithFrame:CGRectMake(50, 100, self.contentView.bounds.size.width, 25)];
30
    _bioLabel.textColor = [UIColor colorWithWhite:1.0 alpha:0.7];
31
    _bioLabel.font = [UIFont systemFontOfSize:15];
32
    _bioLabel.textAlignment = NSTextAlignmentCenter;
33
    [self.contentView addSubview:_bioLabel];
34

35
    _statusButton = [UIButton buttonWithType:UIButtonTypeCustom];
36
    _statusButton.frame = CGRectMake(150, -60, 100, 24);
37
    [_statusButton setTitle:@"+添加状态" forState:UIControlStateNormal];
38
    [_statusButton setTitleColor:[UIColor systemMintColor] forState:UIControlStateNormal];
39
    _statusButton.titleLabel.font = [UIFont systemFontOfSize:14];
40
    _statusButton.layer.borderColor = [UIColor colorWithRed:0.0 green:0.6 blue:1.0 alpha:1.0].CGColor;
41
    _statusButton.layer.borderWidth = 0;
42
    _statusButton.layer.cornerRadius = 12;
43
    [self.contentView addSubview:_statusButton];
44

45
    _statsView = [[UIView alloc] initWithFrame:CGRectMake(80, 130, self.contentView.bounds.size.width - 60, 50)];
46
    [self.contentView addSubview:_statsView];
47

48
    NSArray *statTitles = @[@"33\n关注", @"8\n粉丝", @"Lv.9\n等级", @"1641\n时长"];
49
    CGFloat statWidth = _statsView.bounds.size.width / statTitles.count;
50

51
    for (int i = 0; i < statTitles.count; i++) {
52
        UILabel *statLabel = [[UILabel alloc] initWithFrame:CGRectMake(i * statWidth, 0, statWidth, 50)];
53
        statLabel.text = statTitles[i];
54
        statLabel.numberOfLines = 2;
55
        statLabel.textColor = [UIColor whiteColor];
56
        statLabel.font = [UIFont systemFontOfSize:14];
57
        statLabel.textAlignment = NSTextAlignmentCenter;
58
        [_statsView addSubview:statLabel];
59
    }
60

61
    _badgeView = [[UIView alloc] initWithFrame:CGRectMake(100, 190, 200, 30)];
62
    _badgeView.backgroundColor = [UIColor colorWithWhite:1.0 alpha:0.15];
63
    _badgeView.layer.cornerRadius = 10;
64
    [self.contentView addSubview:_badgeView];
65

66
    UILabel *badgeDesc = [[UILabel alloc] initWithFrame:CGRectMake(14, 3, 300, 20)];
67
    badgeDesc.text = @"♂ | 日常摸鱼中 | 黑胶收藏者";
68
    badgeDesc.textColor = [UIColor colorWithWhite:1.0 alpha:0.7];
69
    badgeDesc.font = [UIFont systemFontOfSize:14];
70
    [_badgeView addSubview:badgeDesc];
71
}

同时，我增加了照片墙换头像功能。

代理传值：

UserInfoCell：

1
- (void)avatarTapped:(UITapGestureRecognizer *)gesture {
2
    NSLog(@"头像被点击");
3
    if ([self.delegate respondsToSelector:@selector(didTapAvatarInCell:)]) {
4
        [self.delegate didTapAvatarInCell:self];
5
    }
6
}
7

8
- (void)setAvatarImageView:(UIImageView *)avatarImageView {
9
    _avatarImageView.image = avatarImageView;
10
}

myVC控制器：

1
- (void)didTapAvatarInCell:(UserInfoCell *)cell {
2

3
    NSLog(@"代理方法");
4
    PhotoWallVC *photoVC = [[PhotoWallVC alloc] init];
5
    photoVC.delegate = self;
6
    [self presentViewController:photoVC animated:YES completion:nil];
7
}
8

9
#pragma mark - PhotoWallDelegate
10

11
- (void)didSelectAvatar:(UIImage *)selectedAvatar {
12
    NSLog(@"接收头像");
13

14
    self.currentAvatar = selectedAvatar;
15

16
    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:0];
17
    UserInfoCell* cell = [self.tableView cellForRowAtIndexPath:indexPath];
18
    [cell setAvatarImageView: _currentAvatar];
19
}
20
#### 工具栏：
21

22

23
我还是通过两个数组记录每个工具的文字和图片
24

25

26
```objective-c
27
- (void)setupUI {
28
    self.backgroundColor = [UIColor clearColor];
29
    self.selectionStyle = UITableViewCellSelectionStyleNone;
30
    self.contentView.backgroundColor = [UIColor clearColor];
31

32
    _buttons = [NSMutableArray array];
33
    _backgroundViews = [NSMutableArray array];
34

35
    for (int i = 0; i < 5; i++) {
36
        UIView *backgroundView = [[UIView alloc] init];
37
        backgroundView.backgroundColor = [UIColor colorWithWhite:1.0 alpha:0.1];
38
        backgroundView.layer.cornerRadius = 10;
39
        [self.contentView addSubview:backgroundView];
40
        [_backgroundViews addObject:backgroundView];
41

42
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
43
        button.tag = i;
44
        button.titleLabel.font = [UIFont systemFontOfSize:13];
45
        button.titleLabel.textAlignment = NSTextAlignmentCenter;
46
        button.titleLabel.adjustsFontSizeToFitWidth = YES;
47
        button.titleLabel.minimumScaleFactor = 0.8;
48
        [button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
49
        [button addTarget:self action:@selector(buttonTapped:) forControlEvents:UIControlEventTouchUpInside];
50
        [self.contentView addSubview:button];
51
        [_buttons addObject:button];
52
    }
53
}
54

55
- (void)layoutSubviews {
56
    [super layoutSubviews];
57

58
    CGFloat padding = 15.0;
59
    CGFloat buttonSpacing = 5.0;
60
    CGFloat contentWidth = CGRectGetWidth(self.contentView.bounds) - padding * 2;
61
    CGFloat contentHeight = 40.0;
62

63
    CGFloat buttonWidth = (contentWidth - (4 * buttonSpacing)) / _buttons.count;
64

65
    for (int i = 0; i < _buttons.count; i++) {
66
        CGFloat xPosition = padding + i * (buttonWidth + buttonSpacing);
67

68

69
        UIView *backgroundView = _backgroundViews[i];
70
        backgroundView.frame = CGRectMake(xPosition, -30, buttonWidth, contentHeight);
71

72
        UIButton *button = _buttons[i];
73
        button.frame = CGRectMake(xPosition, -30, buttonWidth, contentHeight);
74

75
        [self layoutButtonContent:button];
76
    }
77
}

最终实现效果如图：

歌单部分：#

我加入了一个分栏实现音乐、播客、笔记之间的切换

1
_segmentedControl = [[UISegmentedControl alloc] init];
2
    _segmentedControl.selectedSegmentTintColor = [UIColor colorWithRed:0.98 green:0.30 blue:0.30 alpha:1.0];
3
    [_segmentedControl setBackgroundImage:[UIImage new] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
4
    [_segmentedControl setBackgroundImage:[UIImage new] forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];
5
    [_segmentedControl setDividerImage:[UIImage new] forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
6
    UIFont *selectedFont = [UIFont boldSystemFontOfSize:16];
7
    UIFont *normalFont = [UIFont systemFontOfSize:14];
8

9
    [_segmentedControl setTitleTextAttributes:@{
10
        NSForegroundColorAttributeName: [UIColor whiteColor],
11
        NSFontAttributeName: selectedFont
12
    } forState:UIControlStateSelected];
13

14
    [_segmentedControl setTitleTextAttributes:@{
15
        NSForegroundColorAttributeName: [UIColor lightGrayColor],
16
        NSFontAttributeName: normalFont
17
    } forState:UIControlStateNormal];
18

19
    [_segmentedControl addTarget:self action:@selector(segmentChanged:) forControlEvents:UIControlEventValueChanged];
20
    [self.contentView addSubview:_segmentedControl];

设置页面#

我实现了一个抽屉视图，并设置了黑夜模式

recommendVC：

1
-(void) pressMenu {
2
    settingViewController *settingView = [[settingViewController alloc] init];
3
        settingView.modalPresentationStyle = UIModalPresentationOverFullScreen;
4
        settingView.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
5

6
        [self presentViewController:settingView animated:YES completion:nil];
7
}

settingViewController：

1
[[NSNotificationCenter defaultCenter] addObserver:self
2
                                               selector:@selector(updateAppearance)
3
                                                   name:@"NightModeChangedNotification"
4
                                                 object:nil];

先通过这段代码接收通知

1
- (void)updateAppearance {
2
    BOOL isNightMode = [NightModeManager sharedManager].isNightMode;
3

4
    if (isNightMode) {
5
        self.tableView.backgroundColor = [UIColor blackColor];
6
        self.tabBarController.tabBar.backgroundColor = [UIColor darkGrayColor];
7
        self.tabBarController.tabBar.barTintColor = [UIColor darkGrayColor];
8
        self.tabBarController.tabBar.tintColor = [UIColor redColor]; // 设置选中颜色
9
    } else {
10
        UIColor *wechatBackgroundColor = [UIColor colorWithRed:247/255.0 green:247/255.0 blue:247/255.0 alpha:1.0];
11
        self.tableView.backgroundColor = wechatBackgroundColor;
12
        self.tabBarController.tabBar.barTintColor = [UIColor whiteColor];
13
        self.tabBarController.tabBar.backgroundColor = [UIColor whiteColor];
14
        self.tabBarController.tabBar.tintColor = [UIColor grayColor];
15
    }
16
    [self.tableView reloadData];
17
}
18

19

20
//在当前页面上加一个半透明黑色的背景蒙层，并且能点击关闭设置面板
21
- (void)setupBackgroundDimmingView {
22
    self.backgroundDimmingView = [[UIView alloc] initWithFrame:self.view.bounds];
23
    self.backgroundDimmingView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5];
24
    self.backgroundDimmingView.alpha = 0;
25
    [self.view addSubview:self.backgroundDimmingView];
26

27
    UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(dismissSetting)];
28
    [self.backgroundDimmingView addGestureRecognizer:tapGesture];
29
}
30

31
//通知中心取消
32
- (void)dealloc {
33
    [[NSNotificationCenter defaultCenter] removeObserver:self];
34
}

然后实现白天黑夜模式切换。

原文发布于 CSDN：iOS —— 网易云仿写