作者:Love@YR
鏈接:http://blog.csdn.net/jingqiu880905/article/details/52316500
請尊重原創,謝謝!
首先看下效果圖:
這裏的需求有:
1. 左邊那一列固定,不能左右滑動
2. 右邊的可以左右滑動
3. 整體可以上下滑動
4. 左邊表頭固定,右邊表頭可以左右滑動,上下滑動時其也固定
爲了實現上述需求,我首先從簡單的做法開始着手,弄了兩個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];
}
}
需要注意的點:
- 對於scrollview addSubview時 subview的frame是相對於scrollview的內容視圖的而不是相對於其frame的
- 不想讓scrollview左右滑動就需要讓其frame的寬度和contentsize的寬相等或大於其contentsize的寬,同理不想讓其上下滑動就兩者高度相等
- bounces是指彈簧效果,具體效果自己運行看下即知,這裏要禁掉
- 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的頭也是這樣。
簡單粗暴。。。我服。