网易新闻部分框架
来源:互联网 发布:虎嗅网源码下载 编辑:程序博客网 时间:2024/05/21 09:52
一 网易功能图
二 需要解决的问题
1> 搭建界面,设置标题
2> 处理标题按钮点击事件,处理常见的bug
3> 监听内容的滚动
4> 滚动范围的判断
5> 字体大小和颜色的渐变
三 内容显示和标题显示搭建
1 思路: 由总体app的效果,我们可以看出,标题和内容界面都是可以滚动的,而且标题还可以点击
2 具体方案:采用两个UIScrollView来实现.
3 显示内容的代码:
#pragma mark - 创建控制器内容的scrollView- (void)setUpChildView{ //创建UIScrollView UIScrollView *scrollView = [[UIScrollView alloc] init]; CGFloat X = 0; CGFloat Y = CGRectGetMaxY(self.titleView.frame); CGFloat W = XFJUIScreenW; CGFloat H = XFJUIScreenH - Y; //设置尺寸 scrollView.frame = CGRectMake(X, Y, W, H); //添加到控制器的view中 [self.view addSubview:scrollView]; //设置背景颜色 scrollView.backgroundColor = [UIColor clearColor]; //赋值 self.scrollView = scrollView; scrollView.delegate = self;}
4 内容代码中相关参数
//屏幕宽度#define XFJUIScreenW [UIScreen mainScreen].bounds.size.width//屏幕高度#define XFJUIScreenH [UIScreen mainScreen].bounds.size.height
5 显示标题的相关代码块:
#pragma mark - 添加标题ScrollView- (void)setUptitle{ //创建UIScrollView对象 UIScrollView *titleView = [[UIScrollView alloc] init]; //设置颜色 titleView.backgroundColor = [UIColor clearColor]; //设置尺寸 titleView.frame = CGRectMake(0, 64, XFJUIScreenW, 35); //设置滚动条 titleView.showsHorizontalScrollIndicator = NO; //添加到控制器view中 [self.view addSubview:titleView]; //赋值 self.titleView = titleView;}
6 创建对应的控制器,并且加入到父控制器中
#pragma mark - 设置控制器- (void)setUpChildController{ //热点 XFJHotViewController *hvc = [[XFJHotViewController alloc] init]; //设置标题 hvc.title = @"热点"; [self addChildViewController:hvc]; //订阅 XFJReadViewController *rvc = [[XFJReadViewController alloc] init]; //设置标题 rvc.title = @"订阅"; [self addChildViewController:rvc]; //头条 XFJTopLineViewController *tvc = [[XFJTopLineViewController alloc] init]; //设置标题 tvc.title = @"头条"; [self addChildViewController:tvc]; //科技 XFJScienceViewController *svc = [[XFJScienceViewController alloc] init]; //设置标题 svc.title = @"科技"; [self addChildViewController:svc]; //社会 XFJSocietyViewController *svcr = [[XFJSocietyViewController alloc] init]; //设置标题 svcr.title = @"社会"; [self addChildViewController:svcr]; //视频 XFJVideoViewController *vvc = [[XFJVideoViewController alloc] init]; //设置标题 vvc.title = @"视频"; [self addChildViewController:vvc];}
7 设置标题和内容的scrollView,代码中很多地方都需要使用到,那么我们就需要想办法拿到它.这时我们将其设置为属性,然后在创建scrollView的时候给它赋值,就可以全代码都能用了.
—-> 属性代码:
/** * 标题UIScrollView */@property (nonatomic, weak) UIScrollView *titleView;/** * 控制器的UIScrollView */@property (nonatomic, weak) UIScrollView *scrollView;
四 bug
1 初学者在搭建UIScrollView的时候,很容易犯一个错误,就是忘记了当添加UIScrollView的时候,会默认增加64的间距.很多初学者会说,自己检查了所有的代码,业务逻辑什么都没错,但是就是不出现标题.由于这是由系统决定的,系统增加的间距也是随机的.比如网易新闻的框架,我这里采用的是用两个UIScrollView来搭建的,系统很有可能会让你看不到标题,也有可能是出现在显示的内容会往下走.
2 解决bug
self.automaticallyAdjustsScrollViewInsets = NO;
五 添加标题中的按钮
—–> 具体思路:
5.1 需要知道有多少个按钮:通过取出所有的子控制器的数量(count),然后遍历标题中所有的按钮.
5.2 按钮的尺寸:按钮的y值都是0,但是x的值是随着遍历出来的(i)的增加而变化的.
5.3 按钮的标题:直接根据角标(i)遍历所有的子控制器,通过setTitle来设置按钮的标题.
5.4 按钮的颜色:初步设置按钮的颜色为黑色.
5.5 监听按钮的点击事件:由于需要当用户点击按钮的时候,能有对应的控制器,那么我们就需要监听控制器的点击事件.
—–> 具体部分代码块:
#pragma mark - 设置标题按钮- (void)setUpTitleBtn{ //取出标题中所有的子控件 NSInteger count = self.childViewControllers.count; //创建的按钮的尺寸 NSInteger btnX = 0; NSInteger btnY = 0; NSInteger btnW = 100; NSInteger btnH = 35; //遍历所有的子控件 for (NSInteger i = 0; i < count; i++) { //每次遍历的时候创建一个按钮 UIButton *btn = [[UIButton alloc] init]; //绑定每一个按钮的tag btn.tag = i; //x的值随着按钮的宽度变化 btnX = i * btnW; //设置尺寸 btn.frame = CGRectMake(btnX, btnY, btnW, btnH); //在遍历的时候取出所有的子控制器 UIViewController *vc = self.childViewControllers[i]; //设置按钮的标题 [btn setTitle:vc.title forState:UIControlStateNormal]; //监听按钮的点击事件 [btn addTarget:self action:@selector(setUpBtnClick:) forControlEvents:UIControlEventTouchUpInside]; //设置按钮的文字 [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; //添加按钮到标题中 [self.titleView addSubview:btn];
六 设置按钮状态(选中和正常)
1 点击按钮的时候当前按钮的颜色变为红色
2 点击完按钮后,添加对应的控制器的view
—–> 具体思路:
1 创建一个记录当前按钮状态的属性
/** * 选中按钮 */@property (nonatomic, weak) UIButton *selectBtn;
2 选中按钮颜色和恢复按钮颜色三个步骤
#pragma mark - 设置选中的按钮状态- (void)selectBtnClick:(UIButton *)button{//恢复上一个按钮的颜色状态 [self.selectBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];//设置当前按钮的状态 [button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];//让当前按钮成为选中状态 self.selectBtn = button;}
3 选中了按钮,添加对应的控制器:通过在创建按钮的时候,我们绑定了一个tag属性.利用tag我们直接取出存在父控制器中的子控制器.
#pragma mark - 创建控制器- (void)setUpOneController:(NSInteger)i{ //根据指定的tag,取出对应的控制器 UIViewController *vc = self.childViewControllers[i]; //设置控制器的x值 CGFloat x = i * XFJUIScreenW; //判断是否含有父控制器,如果有的话 if ([vc.view superview]) { return; } //设置控制器的尺寸 vc.view.frame = CGRectMake(x, 0, XFJUIScreenW, self.scrollView.bounds.size.height); //添加控制器到view中 [self.scrollView addSubview:vc.view];}
七 监听按钮
#pragma mark - 实现监听方法- (void)setUpBtnClick:(UIButton *)btn{ //设置按钮颜色状态 [self selectBtnClick:btn]; NSInteger i = btn.tag; //调用创建控制器的方法 [self setUpOneController:i]; //设置控制器的x值 CGFloat x = i * XFJUIScreenW; //让显示控制器的view显示指定的位置 self.scrollView.contentOffset = CGPointMake(x, 0);}
八 滑动scrollView
1 滑动控制器的view,让对应的按钮选中
2 将要停止拖动的时候,添加相应的控制器(该部分通过传入一个角标i在5.5中就实现了添加,直接调用就可以)
3 如何计算停止拖动的时候的角标呢?(通过获取总的滚动范围 / 屏幕的库宽度)
4 怎么让对应的按钮呈现选中状态呢?(定义一个数字,在创建按钮的时候,将按钮装入定义的可变数组中,然后根据角标取出来)
—->对应的代码:
#pragma mark - scrollView将要停止拖动的时候调用- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{ //停止滚动角标 NSInteger i = scrollView.contentOffset.x / XFJUIScreenW; //取出当前的标题号 UIButton *btn = self.titleButtons[i]; //解决了bug-----> btn没有打印出值,是因为定义属性的时候,使用了weak,所有不可能保存按钮. NSLog(@"%@",btn); //令当前按钮成选中状态 [self selectBtnClick:btn]; //添加相应的子控制器 [self setUpOneController:i];}
5 在创建按钮的时候我们将创建的按钮都装入可变数组中,并且当按钮的角标为0的时候我们让开始显示UI界面的时候默认按钮的颜色为选中状态
//判断让按钮默认第一个为选中状态 if (i == 0) { [self setUpBtnClick:btn]; } //将按钮加入到数组中 [self.titleButtons addObject:btn]; }
6 设置标题和显示控制器内容的view是可以滚动的(默认如果不设置的话是不能滚动),并且设置隐藏底部的显示条
//设置滚动范围 CGFloat scope = count * btnW; //设置滑动的contentSize self.titleView.contentSize = CGSizeMake(scope, 0); //开启分页功能 self.scrollView.pagingEnabled = YES; //隐藏底部的滑动条 self.scrollView.showsHorizontalScrollIndicator = NO; //设置控制器的scrollView的滚动范围 self.scrollView.contentSize = CGSizeMake(count * XFJUIScreenW, 0);
九 设置标题的逻辑
1 随着滑动顶部titleView和滑动控制器的view,选中的按钮处在居中的状态,并且控制顶部titleView的滚动位置,不是所有的标题都需要处于居中状态.
——> 代码部分:
#pragma mark - 设置选中的按钮状态- (void)selectBtnClick:(UIButton *)button{ //恢复上一个按钮的颜色状态 [self.selectBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; //取消上一个字体形变 self.selectBtn.transform = CGAffineTransformIdentity; //设置当前按钮的状态 [button setTitleColor:[UIColor redColor] forState:UIControlStateNormal]; //设置随着控制器的view而滚动的titleView //计算滚动区域 CGFloat offsetX = button.center.x - XFJUIScreenW * 0.5; //判断左边最大的滚动范围 if (offsetX < 0) { offsetX = 0; } //计算右边最大的滚动范围 CGFloat offmax = self.titleView.contentSize.width - XFJUIScreenW; //判断如果大于最大的偏移量,那么就让其等于最大的偏移量 if (offsetX > offmax) { offsetX = offmax; } //动画效果 [self.titleView setContentOffset:CGPointMake(offsetX, 0) animated:YES]; //方法字体(选中状态) button.transform = CGAffineTransformMakeScale(1.3, 1.3); //让当前按钮成为选中状态 self.selectBtn = button;}
2 设置滑动的时候字体的缩放,由于设置了scrollView的代理,那么我们可以在滑动scrollView的时候,设置字体的缩放和字体颜色随着缩放的变化而变化.
#pragma mark - 设置滑动的时候字体的放缩(代理方法,滚动标题就会缩放)- (void)scrollViewDidScroll:(UIScrollView *)scrollView{ //获取当前按钮的角标--->通过打印屏幕的角标 NSInteger leftI = scrollView.contentOffset.x / XFJUIScreenW; //根据屏幕的角标去按钮的数组里面找对应的按钮 UIButton *leftBtn = self.titleButtons[leftI]; //获取右边的按钮 NSInteger rightI = leftI + 1; UIButton *rightButton; //判断右边按钮的范围,不能超过数组的总数,否则会数组越界 if (rightI < self.titleButtons.count) { //获取右边的按钮 rightButton = self.titleButtons[rightI]; } //右边按钮的缩放量 CGFloat rightScale = scrollView.contentOffset.x / XFJUIScreenW - leftI; //左边按钮的缩放量 CGFloat leftScale = 1 - rightScale; //对标题进行缩放 rightButton.transform = CGAffineTransformMakeScale(rightScale * 0.3 + 1,rightScale * 0.3 + 1 ); leftBtn.transform = CGAffineTransformMakeScale(leftScale * 0.3 + 1, leftScale * 0.3 + 1); //滑动的时候,字体颜色的渐变(颜色指示器R;G;B) UIColor *rightColor = [UIColor colorWithRed:rightScale green:0 blue:0 alpha:1]; [rightButton setTitleColor:rightColor forState:UIControlStateNormal]; UIColor *leftColor = [UIColor colorWithRed:leftScale green:0 blue:0 alpha:1]; [leftBtn setTitleColor:leftColor forState:UIControlStateNormal];}
十 完善
1 将创建控制器设置的颜色放到对应的子控制器中,让他们自己管理
2 创建一个继承父控制器的子控制器,将创建控制器的所有方法添加到单独的子控制器中.
3 在父控件中写view将要显示的代码,在该代码中添加显示标题的按钮的代码块.因为需要让控制器添加的子控制器都添加上去了,才能显示按钮,否则运行起来不会有内容
#pragma mark - 在view即将显示的时候添加标题,保证viewDidLoad的中的代码都执行完了.- (void)viewWillAppear:(BOOL)animated{ [super viewWillAppear:animated]; //如果没有添加标题,就添加 if (self.isInitial == NO) { [self setUpTitleBtn]; //已经添加了标题 self.isInitial = YES; } }
十一 总结
1 这是是演示的部分,比如这种界面,如果界面多的话,建议UICollectionView,否则加载数据的时候,会卡死.
2 注意字体颜色随着字体大小变化的,计算的时候一定要将左边按钮和右边按钮分明白,否则会出现莫名的bug:拖动scrollView的时候,如果没有搞区分按钮的话,会出现拖动之后显示的标题大小不符合要求.
3 OK就这么多,有什么建议,还是麻烦大家留言,谢谢!!!!
1 0
- 网易新闻部分框架
- 仿网易新闻框架
- 模仿网易新闻部分界面
- 网易新闻(ListView部分)
- iOS 仿网易新闻框架
- 使用viewpagerindicator框架模仿网易新闻客户端
- 实现网易新闻框架的搭建
- 快速实现网易新闻框架搭建
- 网易新闻
- 网易新闻
- 使用Fragments取代tabActivity开发网易新闻客户端框架
- 开源框架ActionBarSherlock 和 ViewPager 仿网易新闻客户端 .
- Andrid仿网易新闻客户端首页滑动框架(ViewPager+SlidingPanelLayout)
- 使用Fragments取代tabActivity开发网易新闻客户端框架
- 使用Fragments取代tabActivity开发网易新闻客户端框架
- 10分钟开发网易新闻首页的框架
- 模仿网易新闻客户端
- 网易新闻主页头部
- 创建和应用母版页
- java中死锁的案例
- 【C/C++】引用和指针的区别
- iOS开发-从iTunes中下载手机应用,并获取应用图标
- javascript自定义右键菜单,js自定义右键删除——和派孔明
- 网易新闻部分框架
- MongoDB初探--安装和启动
- windows编程笔记(win32编程)以及其在游戏开发中的作用
- python运算符优先级
- 338. Counting Bits
- 2016年,C语言该怎样写
- 音视频同步原理
- git学习笔记
- 视角