网易新闻@栏目滚动
2019-03-05 本文已影响5人
小石头呢
源代码:
网易新闻:
链接:
https://pan.baidu.com/s/1uFBW5WJfgopyNaOuY13Nag 密码:37s9
栏目滚动:
链接:
https://pan.baidu.com/s/1uH_dKnh-hPq1sa1FvNRZtg 密码:cmim
网易新闻主要代码:
//
// ViewController.m
// 网易新闻
//
// Created by 许磊 on 2019/2/26.
// Copyright © 2019年 xulei. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()<UIScrollViewDelegate>
@property (nonatomic , strong) UILabel *label;
@property (nonatomic , strong) UIScrollView *ScrollView;
@property (nonatomic , strong) UIPageControl *PageControl;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//UIScrollView
self.ScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(10, 100, 300, 200)];
//设置delegate用于监听滚动的事件
_ScrollView.delegate = self;
//设置背景颜色
_ScrollView.backgroundColor = [UIColor blackColor];
//设置边界是否有回弹效果
_ScrollView.bounces = NO;
//设置是否按页显示
_ScrollView.pagingEnabled = YES;
//隐藏横向和纵向的滚动条
_ScrollView.showsHorizontalScrollIndicator = NO;
_ScrollView.showsVerticalScrollIndicator = NO;
//添加到默认视图上
[self.view addSubview:_ScrollView];
//向ScrollView上添加图片
//读取plist文件的内容
NSString *path = [[NSBundle mainBundle] pathForResource:@"banner" ofType:@"plist"];
NSArray *contentArray = [NSArray arrayWithContentsOfFile:path];
NSLog(@"%@",contentArray);
//获取第一个栏目的所有内容
NSDictionary *dic1 = [contentArray objectAtIndex:0];
//获取这个栏目的所有广告内容
NSArray *banners = [dic1 objectForKey:@"banner"];
//显示所有的广告
for (int i = 0; i < banners.count; i++) {
//获取i对应的广告内容
NSDictionary *banner = [banners objectAtIndex:i];
//获取图片名称
NSString *imageName = [banner objectForKey:@"img"];
//获取广告内容
//NSString *text = [banner objectForKey:@"str"];
//创建广告视图 用于显示这个广告的图片内容
UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(i*300, 0, 300,200)];
imgView.image = [UIImage imageNamed:imageName];
//添加到Scroll视图上
[_ScrollView addSubview:imgView];
}
//设置滚动视图的内容尺寸
_ScrollView.contentSize = CGSizeMake(300*banners.count, 200);
//显示文本内容
self.label = [[UILabel alloc] initWithFrame:CGRectMake(10, 300, 300, 20)];
_label.textColor = [UIColor whiteColor];
_label.font = [UIFont systemFontOfSize:15];
_label.textAlignment = NSTextAlignmentCenter;
_label.backgroundColor = [UIColor blackColor];
[self.view addSubview:_label];
//获取i对应的广告内容
NSDictionary *banner = [banners objectAtIndex:0];
//获取广告内容
NSString *text = [banner objectForKey:@"str"];
_label.text = text;
//使用UIPageControl显示页数 控制显示的页数
self.PageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(10, 280, 300, 20)];
//设置背景颜色
_PageControl.backgroundColor = [UIColor clearColor];
//设置数量
_PageControl.numberOfPages = 4;
//设置默认-当前选中的点
_PageControl.currentPage = 0;
//设置选中点的颜色
_PageControl.currentPageIndicatorTintColor = [UIColor redColor];
//设置未选中点的颜色
_PageControl.pageIndicatorTintColor = [UIColor whiteColor];
//添加点击事件
[_PageControl addTarget:self action:@selector(PageChanged:) forControlEvents:UIControlEventValueChanged];
//添加到默认视图
[self.view addSubview:_PageControl];
}
#pragma mark -------PageChanged: ---------
//PageChanged方法
-(void)PageChanged:(UIPageControl *)PageConttrol{
//设置ScrollView滚到某一页
[_ScrollView setContentOffset:CGPointMake(300*PageConttrol.currentPage, 0) animated:YES];
}
#pragma mark -------scrollViewDidScroll: ---------
//滚动过程中
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
}
#pragma mark -------scrollViewDidEndDecelerating: ---------
//停下来了
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
//知道是第几页了
int page = scrollView.contentOffset.x/300;
//更改PageControl显示的页数
[_PageControl setCurrentPage:page];
//获取page对应页的广告内容
//读取plist文件的内容
NSString *path = [[NSBundle mainBundle] pathForResource:@"banner" ofType:@"plist"];
NSArray *contentArray = [NSArray arrayWithContentsOfFile:path];
//获取第一个栏目的所有内容
NSDictionary *dic1 = [contentArray objectAtIndex:0];
//获取这个栏目的所有广告内容 数组里面
NSArray *banners = [dic1 objectForKey:@"banner"];
//获取page对应的字典
NSDictionary *banner = [banners objectAtIndex:page];
//获取广告内容
self.label.text = [banner objectForKey:@"str"];
}
@end
网易新闻运行结果
![](https://img.haomeiwen.com/i13294749/2f187c3dca0cfd97.gif)
难点
1.plist文件的读取以及使用,获取路径,根据内部的嵌套关系,一步步取出来
2.UIScrollView的代理事件的使用
栏目滚动主要代码:
//
// ViewController.m
// 栏目滚动
//
// Created by 许磊 on 2019/2/26.
// Copyright © 2019年 xulei. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, strong) NSArray *titlesArray;
@property (nonatomic, strong) UIScrollView *titleScrollView;
@property (nonatomic, strong) UIButton *lastSelectedButton;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor lightGrayColor];
[self initUI];
}
#pragma mark ------- 创建UI ---------
- (void)initUI{
//创建滚动视图
self.titleScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 64, self.view.frame.size.width, 40)];
_titleScrollView.backgroundColor = [UIColor whiteColor];
_titleScrollView.showsVerticalScrollIndicator = NO;
_titleScrollView.showsHorizontalScrollIndicator = NO;
_titleScrollView.bounces = NO;
_titleScrollView.contentSize = CGSizeMake(100*self.titlesArray.count, 40);
[self.view addSubview:_titleScrollView];
//添加每一个标题的按钮
for (int i = 0; i < self.titlesArray.count; i++) {
NSString *title = [self.titlesArray objectAtIndex:i];
//创建按钮
UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(i*100, 0, 100, 40)];
[btn setTitle:title forState:UIControlStateNormal];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[btn addTarget:self action:@selector(buttonDidClicked:) forControlEvents:UIControlEventTouchUpInside];
[self.titleScrollView addSubview:btn];
}
}
#pragma mark ------- 按钮事件 ---------
- (void)buttonDidClicked:(UIButton *)sender{
//判断之前是否有选中的
if (_lastSelectedButton != nil){
//将之前选中的按钮的状态还原
[_lastSelectedButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
_lastSelectedButton.transform = CGAffineTransformMakeScale(1, 1);
}
//按钮变大 变红
[sender setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
sender.transform = CGAffineTransformMakeScale(1.2, 1.2);
//记录当前被选中的按钮
_lastSelectedButton = sender;
//处理按钮的滚动
//处理左边区域 center.x - width/2
CGFloat offset = sender.center.x - self.titleScrollView.frame.size.width*0.5;
if (offset < 0){
offset = 0;
}
//处理右边的区域
CGFloat maxOffset = self.titleScrollView.contentSize.width - self.titleScrollView.frame.size.width;
if (offset > maxOffset) {
offset = maxOffset;
}
[self.titleScrollView setContentOffset:CGPointMake(offset, 0) animated:YES];
}
//提供懒加载的方式获取标题 plist 服务器下载
//准备数据
#pragma mark ------- 懒加载 ---------
- (NSArray *)titlesArray{
if (_titlesArray == nil){
self.titlesArray = @[@"头条",@"体育",@"房产",@"NBA",@"重庆",@"娱乐",@"汽车",@"科技"];
}
return _titlesArray;
}
@end
栏目滚动运行结果
![](https://img.haomeiwen.com/i13294749/443948684744a747.gif)
难点
1.按钮滚动的处理---无法直接看出来可以通过画图构建逻辑关系
2.提高代码的可移植性---做到移植只需要改变数组里面的内容就可以