今天带来的是自定义的仿网易新闻框架,由于时间比较短,所以写的并不是很完美,也没有进行适配,直接用的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