如何讓你的tableView部分左右滑動

作者:Love@YR
鏈接:http://blog.csdn.net/jingqiu880905/article/details/52316500
請尊重原創,謝謝!

首先看下效果圖:
這裏寫圖片描述

這裏的需求有:
1. 左邊那一列固定,不能左右滑動
2. 右邊的可以左右滑動
3. 整體可以上下滑動
4. 左邊表頭固定,右邊表頭可以左右滑動,上下滑動時其也固定

最終需求demo地址

爲了實現上述需求,我首先從簡單的做法開始着手,弄了兩個scrollview,於是寫下了一個簡單demo 代碼如下:

- (void)viewDidLoad {
    [super viewDidLoad];
    [self addScrollview];
}

-(void)addScrollview{
    bigScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 20, CGRectGetWidth(self.view.frame), SCROLLVIEW_HEIGHT)];
    [self.view addSubview:bigScrollView];

    //此時scrollview的frame相對的是bigScrollView的內容視圖而不是其frame,所以高度應設置爲CELL_HEIGHT*CELL_COUNT纔不會顯示不全
    scrollview = [[UIScrollView alloc]initWithFrame:CGRectMake(SCROLLVIEW_LEFT_PADDING, 0, CGRectGetWidth(self.view.frame)-SCROLLVIEW_LEFT_PADDING, CELL_HEIGHT*CELL_COUNT)];
    [bigScrollView addSubview:scrollview];

    bigScrollView.delegate = self;
    scrollview.delegate = self;

    //content寬設置爲屏寬則無法左右滑動
    bigScrollView.contentSize = CGSizeMake(CGRectGetWidth(self.view.frame), CELL_COUNT*CELL_HEIGHT);

    bigScrollView.showsHorizontalScrollIndicator = NO;
    bigScrollView.showsVerticalScrollIndicator = NO;
    bigScrollView.bounces = NO;//彈簧效果
    bigScrollView.directionalLockEnabled = YES;//定向鎖定

    //content高設置爲scrollview的frame的高度則無法上下滑動
    scrollview.contentSize = CGSizeMake(1.5*scrollview.frame.size.width, CELL_COUNT*CELL_HEIGHT);
    scrollview.showsHorizontalScrollIndicator = NO;
    scrollview.showsVerticalScrollIndicator = NO;
    scrollview.bounces = NO;//彈簧效果
    scrollview.directionalLockEnabled = YES;//定向鎖定

    [self addSubViewsForBigScrollView];
    [self addSubViewsForScrollView];  
}

-(void)addSubViewsForScrollView{
    for (int i =0; i<CELL_COUNT; i++) {
        UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, i*CELL_HEIGHT, 1.5*scrollview.frame.size.width, CELL_HEIGHT)];
        label.text = [NSString stringWithFormat:@"%d~~~~~~~~~~~~~~~~%d",i,i];
        label.textColor = [UIColor orangeColor];
        label.backgroundColor = [UIColor grayColor];
        [scrollview addSubview:label];
    }
}

-(void)addSubViewsForBigScrollView{
    for (int i =0; i<CELL_COUNT; i++) {
        UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, i*CELL_HEIGHT, SCROLLVIEW_LEFT_PADDING, CELL_HEIGHT)];
        label.text = [NSString stringWithFormat:@"header%d",i];
        label.textColor = [UIColor whiteColor];
        label.backgroundColor = [UIColor darkGrayColor];
        [bigScrollView addSubview:label];
    }

}

需要注意的點:

  1. 對於scrollview addSubview時 subview的frame是相對於scrollview的內容視圖的而不是相對於其frame的
  2. 不想讓scrollview左右滑動就需要讓其frame的寬度和contentsize的寬相等或大於其contentsize的寬,同理不想讓其上下滑動就兩者高度相等
  3. bounces是指彈簧效果,具體效果自己運行看下即知,這裏要禁掉
  4. directionalLockEnabled的功能是用來讓用戶每次只在一個方向上滾動,豎直或者水平。如果不設置其爲YES,當scrollview既能水平又能豎直滾動時就會出現同時在水平和豎直方向進行偏移。

在實現上述需求時遇到的坑:

坑1: 關於分割線右邊不顯示的問題

  • 當tableviewCell.backgroundColor 沒有設置且self.rightLabel.backgroundColor也沒有設置時:
    cell默認是白色右邊的label沒有顏色。又因分割線也是白色,所以右邊的分割線看不見了

  • 當tableviewCell.backgroundColor = [UIColor grayColor];且 self.rightLabel.backgroundColor = [UIColor blueColor];時:
    因rightLabel的高度設置的是CELL_HEIGHT 沒有減去分割線的0.5 所以右邊分割線還是看不見,減去0.5能看見

  • 當 tableviewCell.backgroundColor = [UIColor grayColor];但self.rightLabel.backgroundColor不設置時:
    右邊默認是cell的背景色,分割線顯示出來

  • 當tableviewCell.backgroundColor沒有設置但self.rightLabel.backgroundColor = [UIColor blueColor]且高度減去了0.5時:
    分割線能顯示出來

坑2: 關於secitonview
剛開始的思路是想給tableview設置一個secitonview,在scrollview裏頂部加上一個scrollHeaderLabel即”scrollview的頭部~~~~~數值”那個label,遇到了下面的問題:

  • heightForHeaderInSection一定要實現纔會畫sectionheader,即執行viewForHeaderInSection

  • 在viewForHeaderInSection裏就算返回的headerView的frame的width再小,它還是會霸佔與bigTableView的frame.size.width相同的寬度
    唯一不想讓其蓋住右方scrollview的頭的方法就是設置其顏色爲clearColor

坑3:當scrollview里加上了一個scrollHeaderLabel,tableview設置了一個section header且不擋住scrollHeaderLabel之後,往上滾動時發現scrollHeaderLabel跑屏幕外了

於是在section header裏右邊加上一個和scrollHeaderLabel長得一摸一樣的label(暫且叫做label1),這樣上下滾動時就看見label1 一直懸浮在頂部

左右滾動時讓label1 hide,這樣就顯露出scrollview裏的scrollHeaderLabel,但仍然沒有解決tableview往上滾動scrollHeaderLabel不再在屏幕上顯示的問題,無法做出左右滑動時scrollHeaderLabel仍然懸浮在頂部的效果。

所以最終沒辦法在右邊的紫色區域放的也是個scrollview叫smallscrollview,然後設置其和下方的scrollview進行聯動效果。而不再在scrollview裏放一個scrollHeaderLabel了。

如有更好的解決方案請留言~

第一個demo裏感覺做的比較好的:

cell裏右邊的rightLabel雖然最終是作爲subView加入到scrollview裏而不是加入到cell.contentView裏,但並沒有創建和行數一樣多個rightLabel,而是創建了一屏幕。這樣也是一種複用吧,如果tableview的行太多,也不用擔心創建了太多rightLabel對象~
good~哈哈~~

PS:最開始看到這個需求一般人最先想到的是cell里加了label和scrollview,但想到如果把scrollview加在cell裏就會使得單獨行左右滑動而不是一起滑,所以纔想右邊左右滑動整體搞一個scrollview。
結果看到了有人就把scrollview加每個cell裏了,怎麼實現聯動呢?當檢測到左右滑動某個cell的scrollview時,強制當前可視的所有cell的scrollview的contentoffset都得和那個一樣。。。同理最上方的scrollview的頭也是這樣。
簡單粗暴。。。我服。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章