网易云仿写

---

前言

网易云仿写的要求：仿写我的界面和账号界面，尽量做到一比一还原

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、启动界面

启动界面是指在打开网易云的第一个加载出的界面，这个界面会停留两三秒钟，使用NSTimer定时器来实现。

NSTimer的使用代码如下：

//创建启动界面
qidongView* qiView = [[qidongView alloc]init];
//数字3表示在这个界面停留3秒
NSTimer* timerView = [[NSTimer alloc]init];
    timerView = [NSTimer scheduledTimerWithTimeInterval:3 target:self selector:@selector(timer) userInfo:nil repeats:NO];

二、我的界面

1.搜索框

使用textField来实现搜索框，代码如下

self.textField = [[UITextField alloc]init];
self.textField.frame = CGRectMake(0, 0, self.view.frame.size.width, 40);
self.textField.text = @"陶阳";
self.textField.font = [UIFont systemFontOfSize:22];
self.textField.textColor = [UIColor grayColor];
[self.tableView addSubview:self.textField];
self.textField.backgroundColor = [UIColor blackColor];
    

2.图片圆角化

在添加头像等需要圆角化的图片后，加上两行代码即可实现圆角化。

//这里的_imageView的类型是UIImageView
_imageView.layer.cornerRadius =_imageView.frame.size.width/2;
_imageView.layer.masksToBounds = YES;
        

3.并列按钮

需要实现两个并列的按钮，在点击相应的按钮后会展现不同内容相同格式的歌单。我们使用滚动视图来实现这个需求

//滚动视图的创建
UIScrollView* vc = [[UIScrollView alloc]init];
    vc.frame = CGRectMake(0,710,self.view.frame.size.width*2,150);
    vc.pagingEnabled = YES;
    vc.scrollEnabled = YES;
    vc.userInteractionEnabled = YES;
    vc.contentSize = CGSizeMake(self.view.frame.size.width*2, 170);
    vc.bounces = YES;
    vc.alwaysBounceVertical = NO;
    vc.alwaysBounceHorizontal = YES;
    vc.showsVerticalScrollIndicator = YES;
    vc.showsHorizontalScrollIndicator = NO;
    
    //滚动视图内图片的添加。有名为21-24的四张图片
    for(int i = 20; i < 24; i++){
    
        NSString* strName = [NSString stringWithFormat:@"%d.jpeg",i+1];
        UIImage* image = [UIImage imageNamed:strName];
        UIImageView* iView = [[UIImageView alloc]initWithImage:image];
        iView.frame = CGRectMake(self.view.frame.size.width*(i-20)/2, 0, 80, 80);
        [vc addSubview:iView];



        //设置图片旁边的文字
        UILabel* lab1 = [[UILabel alloc]init];
        lab1.text = @"欧美";
        lab1.textColor = [UIColor grayColor];
        lab1.frame = CGRectMake(90, 0, 40, 40);
        [vc addSubview:lab1];
        
        
        UILabel* lab2 = [[UILabel alloc]init];
        lab2.text = @"节奏";
        lab2.textColor = [UIColor grayColor];
        lab2.frame = CGRectMake(280, 0, 40, 40);
        [vc addSubview:lab2];
        
        
        
        UILabel* lab3 = [[UILabel alloc]init];
        lab3.text = @"奥特曼";
        lab3.textColor = [UIColor grayColor];
        lab3.frame = CGRectMake(480, 0, 60, 40);
        [vc addSubview:lab3];
        
        
        
        UILabel* lab4 = [[UILabel alloc]init];
        lab4.text = @"华语";
        lab4.textColor = [UIColor grayColor];
        lab4.frame = CGRectMake(670, 0, 40, 40);
        [vc addSubview:lab4];
    }

三、账号界面

1.自定义cell

自定义cell

2.取消cell间分隔线

//在UUIViewController里加上如下代码即可实现cell间分隔线的啊女校
[self.tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];
    

3.深色模式小控件

使用UISwitch来实现这个小开关

UISwitch* mySwitch = [[UISwitch alloc]init];
        mySwitch.frame = CGRectMake(330, 20, 80, 40);
        mySwitch.on = NO;
        [self.contentView addSubview:mySwitch];

四、分栏控制器

分栏控制器在SceneDelegate.m文件中创建，要包含所有需要创建的界面的.h文件

    NSArray* arr = [NSArray arrayWithObjects:faView,guanView,nav ,boView,nav2, nil];
    woView.tabBarItem.image = [UIImage imageNamed:@"wode.png"];
    zhangView.tabBarItem.image = [UIImage imageNamed:@"zhanghao.png"];
    faView.tabBarItem.image = [UIImage imageNamed:@"faxian.png"];
    guanView.tabBarItem.image = [UIImage imageNamed:@"guanzhu.png"];
    boView.tabBarItem.image = [UIImage imageNamed:@"boke.png"];
    
    woView.title = @"我的";
    zhangView.title = @"账号";
    faView.title = @"发现";
    guanView.title = @"关注";
    boView.title = @"播客";
    
    UITabBarController* tbc = [[UITabBarController alloc]init];
    tbc.viewControllers = arr;
    tbc.selectedIndex = 0;
    tbc.tabBar.translucent = NO;
    tbc.view.backgroundColor = [UIColor whiteColor];
    self.window.rootViewController = tbc;
    tbc.view.tintColor = [UIColor redColor];
    

总结

1:自定义cell
2.页面切换
3.导航栏的图标设置
4.按钮标签视图的添加顺序