iOS开发项目篇

网易新闻@栏目滚动

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

网易新闻运行结果

运行结果

难点

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

栏目滚动运行结果

运行结果

难点

1.按钮滚动的处理---无法直接看出来可以通过画图构建逻辑关系
2.提高代码的可移植性---做到移植只需要改变数组里面的内容就可以

上一篇 下一篇

猜你喜欢

热点阅读