Snail—UI学习之表视图TableView初识

我们是整一个表视图 然后再表视图的上方是一个广告栏

首先,在.h文件中写上下面的代码 主要就是遵守一些代理

#import <UIKit/UIKit.h>

@interface WJJRootViewController : UIViewController<UITableViewDataSource,UITableViewDelegate,UIScrollViewDelegate>

@end

然后再.m文件中写上如下

#import "WJJRootViewController.h"

@interface WJJRootViewController (){
    //数据源 存放数据
    NSMutableArray * _dataArray;
    //这就是我们的tableView
    UITableView * _tableView;
    //页面控制器
    UIPageControl * _pageControl;
}

@end

@implementation WJJRootViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view.
    self.title = @"2";
    //模拟得到数据
    [self createDataSources];
    //创建tableView
    [self createTableView];
}


//得到数据方法的实现 就是在数组中添加20个字符串对象
- (void)createDataSources{
    _dataArray = [[NSMutableArray alloc] init];
    for (int i = 0; i < 20; i++) {
        NSString * tempStr = [NSString stringWithFormat:@"第%d行",i];
        [_dataArray addObject:tempStr];
    }
}

//创建一个tableView
- (void)createTableView{
    
    /*
     UITableViewStylePlain    不分组的table
     UITableViewStyleGrouped  分组的tableView
     */
    _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)
                                              style:UITableViewStylePlain];
    //在写完tableView后 一定要把下面这两句写上 代理和数据源都是self
    _tableView.delegate = self;
    _tableView.dataSource = self;
    [self.view addSubview:_tableView];
    
    
    //创建一个背景视图
    UIView * backgroudView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 150)];
    //创建一个滚动视图
    UIScrollView * scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 150)];
    //设置滚动视图的实际大小
    scrollView.contentSize = CGSizeMake(4 * 320, 150);
    //偏移量
    scrollView.contentOffset = CGPointZero;
    //是否分页
    scrollView.pagingEnabled = YES;
    //水平的滚动栏隐藏
    scrollView.showsHorizontalScrollIndicator = NO;
    //设置代理
    scrollView.delegate = self;
    //没有那种图片到头了的橡皮筋效果
    scrollView.bounces = NO;
    //加四张图片放到scrollView上面
    for (int i = 0; i < 4; i++) {
        UIImageView * imageV = [[UIImageView alloc] initWithFrame:CGRectMake(i * 320, 0, 320, 150)];
        [imageV setImage:[UIImage imageNamed:[NSString stringWithFormat:@"image%d.png",i]]];
        [scrollView addSubview:imageV];
    }
    
    //初始化页面控制器  总页数是4  初始页面是0
    _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 130, 320, 20)];
    _pageControl.numberOfPages = 4;
    _pageControl.currentPage = 0;
    
    //把滚动视图放到背景视图上
    [backgroudView addSubview:scrollView];
    //把分页控制器方到背景视图上
    [backgroudView addSubview:_pageControl];
    
    //然后把我们创建的背景视图方在tableView的头视图的位置
    _tableView.tableHeaderView = backgroudView;
    
}

#pragma mark --UIScrollViewDelegate--
//实现scrollView的代理方法

//下面这个方法 是只要scrollView在动 始终会调用这个方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
    //因为UITableView 是UIScrollView 的子类 所有判断我们是在点击哪个scrollView
    if (scrollView == _tableView) {
        //tableView的偏移量只是在y上面 所以当偏移量大于151时 让我们的导航栏慢慢消失
        if (scrollView.contentOffset.y > 151) {
            [UIView animateWithDuration:1 animations:^{
                self.navigationController.navigationBar.alpha = 0;
            }];
        }
        //当偏移量小于86时 让我们的导航栏再慢慢显示出来
        else if (scrollView.contentOffset.y < 86) {
            [UIView animateWithDuration:2 animations:^{
                //self.navigationController.navigationBarHidden = NO;
                self.navigationController.navigationBar.alpha = 1;
            }];
        }
    }
}


//这个是scrollView的代理方法中  最后一个执行的函数 停止减速的意思  在这里我们设置页面控制器和scrollView关联 当scrollView达到一定的偏移量 就是另一个页面 控制器也随之变化
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    //当我们点击的是tableView时 不做操作
    if (scrollView == _tableView) {
        
    }
    //当时scrollView时 我们通过计算改变pageControl的page值
    else{
        NSInteger page = scrollView.contentOffset.x / 320;
        _pageControl.currentPage = page;
    }
}


#pragma mark --UITableViewDeleagate
//此方法必须实现 返回的是一个分组内有多少行 因为我们就一个组 所以直接返回数据源数组的个数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    
    return _dataArray.count;
}
//此方法和上面这个方法一样 必须得实现 返回的是cell  重复使用cell的代理方法
- (UITableViewCell *)tableView:(UITableView *)tableView
         cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    //首先 tableView会找带有标记@"snail"的闲置的cell
    UITableViewCell * tableViewCell = [tableView dequeueReusableCellWithIdentifier:@"snail"];
    //如果没有的话 就自动创建 并且把标记@"snail"写上
    if (!tableViewCell) {
        tableViewCell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"snail"];
    }
    // indexPath 有两部分组成 一个是:某行indexPath.row 另一个是:某组indexPath.section
    //cell上面的textLabel上面加上我们数组对应的字符串
    tableViewCell.textLabel.text = _dataArray[indexPath.row];
    //给cell添加一个图片
    [tableViewCell.imageView setImage:[UIImage imageNamed:@"star_icon@2x.png"]];
    //这里给cell的详情标签上再添加文字
    tableViewCell.detailTextLabel.text = _dataArray[indexPath.row];
    return tableViewCell;
}

//返回的是tableViewCell的高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 70;
}

//选中每个tableViewCell调用的方法
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    //点击cell后 不点击后使得cell处于未点击状态 并且有动画
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
}