iOS 仿网易新闻框架

今天带来的是自定义的仿网易新闻框架,由于时间比较短,所以写的并不是很完美,也没有进行适配,直接用的iPhone7的屏幕尺寸

之前有朋友问我关于类似网易新闻框架的思路,网易新闻框架实现的思路其实是比较简单的,主要的就是计算每个控件的坐标以及 scroll的偏移量,由于我添加了动画,所以顶部按钮背景 frame 的变化看上去就更加的圆滑,也就显得比较逼真,这里就不多说了...

实现的 DEMO 如下

//
//  ViewController.m
//  仿网易框架
//
//  Created by Amydom on 16/11/4.
//  Copyright © 2016年 Amydom. All rights reserved.
//

#import "ViewController.h"
#import "AllCell.h"
#import "ActiveCell.h"
#import "EntertainmentCell.h"
#import "InformationCell 정보.h"

@interface ViewController ()<UITableViewDataSource,UITableViewDelegate,UIScrollViewDelegate>

@property (nonatomic ,strong)UIScrollView *backScrollerView;

@property (nonatomic ,strong)UITableView *myTab;

@property (nonatomic , strong)UIImageView *myImage;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self createView];
    self.view.backgroundColor = [UIColor lightGrayColor];
}
- (void)createView{
    
    
    _backScrollerView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 104, 375, 667)];
    _backScrollerView.backgroundColor = [UIColor whiteColor];
    _backScrollerView.delegate = self;
    
    [self.view addSubview:_backScrollerView];
    
    _backScrollerView.contentSize = CGSizeMake(375 * 4, 0);
    
    //设置按页滑动
    _backScrollerView.pagingEnabled = YES;
    //取消边界反弹效果
    _backScrollerView.bounces = NO;
    //是否显示水平滑动条
    _backScrollerView.showsHorizontalScrollIndicator = NO;
    //是否显示垂直滚动条
    _backScrollerView.showsVerticalScrollIndicator = NO;
    [self CreateSubView];

    
 
}
- (void)CreateSubView{
    //数据数组
    NSArray *array = @[@"全部",@"咨询",@"活动",@"娱乐"];
    //背景 image
    _myImage = [[UIImageView alloc]initWithFrame:CGRectMake(0 , 64, 375 / 4, 40)];
    _myImage.image = [UIImage imageNamed:@"dnfBack.png"];
    
    [self.view addSubview:_myImage];
    //创建顶部按钮以及下面的 tableView
    for (int i = 0; i < array.count; i++) {
        
        NSString *name = [array objectAtIndex:i];
        
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
        
        btn.frame = CGRectMake(0 + i * (375 / 4), 64, 375 / 4, 40);
        
        btn.backgroundColor = [UIColor clearColor];
        
        [btn setTitle:name forState:UIControlStateNormal];
        
        btn.tag = 1000 + i;
        
        [self.view addSubview:btn];
        
        [btn addTarget:self action:@selector(ActionBtn:) forControlEvents:UIControlEventTouchUpInside];
        
        
        _myTab = [[UITableView alloc]initWithFrame:CGRectMake(0 + 375 * i, -64, 375, 667) style:UITableViewStylePlain];
        
        _myTab.tag = 10000 + i;
        
        [_backScrollerView addSubview:_myTab];
        
        _myTab.delegate = self;
        
        _myTab.dataSource = self;
        
        if (_myTab.tag == 10001) {
            
            [_myTab registerClass:[EntertainmentCell class] forCellReuseIdentifier:@"EntertainmentCell"];
        }else if (_myTab.tag == 10002){
            
            [_myTab registerClass:[ActiveCell class] forCellReuseIdentifier:@"ActiveCell"];
        }else if (_myTab.tag == 10003){
            
            [_myTab registerClass:[InformationCell______ class] forCellReuseIdentifier:@"InformationCell______"];
        }else{
            
            [_myTab registerClass:[AllCell class] forCellReuseIdentifier:@"AllCell"];
        }
        
        
        
    }
    
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    
    return 20;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    
    static NSString *AllCell = @"AllCell";
    
    static NSString *ActiveCell = @"ActiveCell";
    
    static NSString *InformationCell______ = @"InformationCell______";
    
    static NSString *EntertainmentCell = @"EntertainmentCell";
    
    UITableViewCell *tabCell0 = [tableView dequeueReusableCellWithIdentifier:AllCell];
    
    UITableViewCell *tabCell1 = [tableView dequeueReusableCellWithIdentifier:EntertainmentCell];
    
    UITableViewCell *tabCell2 = [tableView dequeueReusableCellWithIdentifier:ActiveCell];
    
    UITableViewCell *tabCell3 = [tableView dequeueReusableCellWithIdentifier:InformationCell______];
    //通过 tag 值来为每个 tableView 赋值 cell
    if (tableView.tag == 10000) {
        return tabCell0;
        
    }else if(tableView.tag == 10001){
        return tabCell1;
        
    }else if (tableView.tag == 10002){
        return tabCell2;
        
    }else{
        return tabCell3;
    }
    
    
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    return 100;
    
}


- (void)ActionBtn:(UIButton *)btn{
    
    //根据button 的 tag 值来改变当前的 tabView 以及背景 image
    _backScrollerView.contentOffset = CGPointMake(0 + 375 * (btn.tag - 1000) , 40);
    
    [UIView animateWithDuration:0.5 animations:^{
        
        _myImage.frame = CGRectMake(0 + (btn.tag - 1000) * (375 / 4), 64, 375 / 4, 40);
        
    }];
    
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    //检测 scroller 的偏移量 如果发生变化 则改变相应的 iamge 得 frame
    if (_backScrollerView.contentOffset.x > 0) {
        
        [UIView animateWithDuration:0.5 animations:^{
            
            _myImage.frame = CGRectMake(0 + _backScrollerView.contentOffset.x / 375 * (375 / 4), 64, 375 / 4, 40);
        }];
    }
    
    
    
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end

这里的 cell 均为自定义 cell,当然,我这里只放了4个 button, 如果需要更多的 button  ,在屏幕显示不下的情况,可以在 imageView 的下面加 scroll, 改变它的偏移量来显示超出屏幕范围的 button