01.轮播图之二 ：tableView 轮播

Posted 2020-09-14 user_bo

 在做这个tablevew轮播的时候，重要的就是修改frame 和view 的翻转了：：：：

 也是不难的，概要的设计和scroll 轮播是一致的；

首先是 .h 的文件

@interface TableViewShuffling : UIView

@property (nonatomic,strong)NSArray *array;

@end

 

重要的点在.m 文件中加载了详细的注释

@interface TableViewShuffling ()<UITableViewDelegate,UITableViewDataSource>

@property(nonatomic,strong)UITableView *tableView;

@property(nonatomic,strong)NSMutableArray *tableArray;

@end


@implementation TableViewShuffling
@synthesize array = _array;

- (instancetype)initWithFrame:(CGRect)frame{
  
    if (  self = [super initWithFrame:frame]) {
    }
    return self;
}

-(UITableView*)tableView{

    if (_tableView == nil) {
/*
_tableView.transform = CGAffineTransformMakeRotation(-M_PI / 2);

CGRect tabelRect = CGRectMake(10, 10, self.frame.size.height-20, self.frame.size.width-20);

重点：：：
因为table view 翻转 90度角 ，所以frame 设计的时候 宽高 ==互 换===了
*/
        CGRect tabelRect = CGRectMake(10, 10, self.frame.size.height-20, self.frame.size.width-20);
    
        _tableView = [[UITableView alloc] initWithFrame:tabelRect style:UITableViewStylePlain];
        [self addSubview:self.tableView];
        _tableView.delegate = self;
        _tableView.dataSource = self;
        _tableView.pagingEnabled = YES;  // scrollbar 不显示
        //tableview逆时针旋转90度。
        _tableView.transform = CGAffineTransformMakeRotation(-M_PI / 2);
/*

 _tableView.center = CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2);

重点：：： 同样，因为翻转的关系，要把table 重写设置初始位置
*/
        _tableView.center = CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2);
    }
    return _tableView;
}

-(void)setArray:(NSArray *)array{

    NSAssert(array.count != 0, @"传入的滚动数组是 空的");
    _array = array;
    [self prepareData];
    [self prepareUI];
}


-(void)prepareUI{
    
/*
跳转到 row 1===
*/
    [self.tableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:1 inSection:0] animated:YES scrollPosition:UITableViewScrollPositionTop];
    [self.tableView reloadData];
}

- (void)prepareData{
    
    self.tableArray = [NSMutableArray new];
    //    首位 添加数组最后的元素
    [self.tableArray addObject:_array.lastObject];
    //   添加数组元素
    [self.tableArray addObjectsFromArray:_array];
    //    末尾 补充第一个元素
    [self.tableArray addObject:_array.firstObject];
}



-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    /*
row height 千万分清楚 应该是 width 还是haigh 的值
*/
    return self.frame.size.width-20;
}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    
    return self.tableArray.count;
}

- (UITableViewCell *)tableView :( UITableView *)tableView cellForRowAtIndexPath:( NSIndexPath*)indexPath
{
    /*
为什么 不要用系统cell，必须自定义？？
因为你设置 这个tableShuffling view 高度小的时候，会影响titlelabel 等属性显示不全，因为翻转的时候，他们的位置没有改变

     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
     if (cell == nil) {
     cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"cell"];
     // cell顺时针旋转90度
     cell.contentView.transform = CGAffineTransformMakeRotation(M_PI / 2);
     }
     cell.textLabel.text = [NSString stringWithFormat:@"‘;llkjjjjjjhgfds1234567890-=qwertyuioyuiop[asdfghjkl;zxcvbnm,====%ld",(long)indexPath.row];
     cell.textLabel.numberOfLines = 0;
     
     cell.contentView.backgroundColor = (UIColor*)self.tableArray[indexPath.row];
     cell.selectionStyle = UITableViewCellSelectionStyleNone;
     
     return cell;

     */
    
    ShufflingCell *cell = [ShufflingCell getCellForTableView:tableView withIdentifier:@"ShufflingCell" andIndexPath:indexPath];
/*

    cell.contentView.transform = CGAffineTransformMakeRotation(M_PI / 2);

table View 翻转了，但是要把 cell 翻转回正常的状态，否则自定义的cell 显示也是翻转的
*/
    cell.contentView.transform = CGAffineTransformMakeRotation(M_PI / 2);
    cell.contentView.backgroundColor = (UIColor*)self.tableArray[indexPath.row];
    cell.selectionStyle = UITableViewCellSelectionStyleNone;

    return cell;
    
  }

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
    if (scrollView == self.tableView) {
        
        //检测移动的位移
        if (scrollView.contentOffset.y == (self.tableArray.count-1)*(self.frame.size.width-20) ) {
            
            [self.tableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:1 inSection:0] animated:NO scrollPosition:UITableViewScrollPositionTop];
            
        }else if (scrollView.contentOffset.y == 0){
            
            [self.tableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:(self.tableArray.count-2) inSection:0] animated:NO scrollPosition:UITableViewScrollPositionTop];
            
        }else{
            
//            正常滚动
        }
        
    }
}

 

table view 的滚动视图也基本完成，好久没写了，过程有点曲折；

总结下重点：：：

1. frame 翻转前后设置
2. row Height 的设置
3. table 翻转后 cell正常显示，一定要翻转回去

辛苦的我，今天想早点下班，明天继续……………………