UITableView

UITableView是自带吸顶效果#xff0c;我们把需要置顶的控件设置为SectionHeaderView#xff0c;这样在滚动时#xff0c;该控件会…项目中在列表向上滚动时有时需要将某个控件置顶这就是我们常见的吸顶效果。

UITableView

UITableView是自带吸顶效果我们把需要置顶的控件设置为SectionHeaderView这样在滚动时该控件会自动置顶。

(UITableView

NO;_tableView.showsVerticalScrollIndicator

self;[_tableView

forCellReuseIdentifier:CellId];}return

_tableView;

(NSInteger)numberOfSectionsInTableView:(UITableView

*)tableView

(NSInteger)tableView:(UITableView

*)tableView

numberOfRowsInSection:(NSInteger)section

{if

(CGFloat)tableView:(UITableView

*)tableView

heightForRowAtIndexPath:(NSIndexPath

*)indexPath

viewForHeaderInSection:(NSInteger)section

{if

50)];headerView.backgroundColor

[UIColor

(CGFloat)tableView:(UITableView

*)tableView

heightForHeaderInSection:(NSInteger)section

{if

cellForRowAtIndexPath:(NSIndexPath

*)indexPath

dequeueReusableCellWithIdentifier:CellId

(indexPath.section

yellowColor];cell.textLabel.text

section

whiteColor];}cell.textLabel.text

[NSString

style:UITableViewStylePlain];if

(self)

whiteColor];self.separatorColor

[UIColor

clearColor];self.separatorStyle

UITableViewCellSeparatorStyleNone;if

(available(iOS

{self.contentInsetAdjustmentBehavior

UIScrollViewContentInsetAdjustmentNever;}self.estimatedRowHeight

0.000;self.estimatedSectionHeaderHeight

0.000;self.estimatedSectionFooterHeight

0.000;if

{self.automaticallyAdjustsScrollIndicatorInsets

NO;}if

去除表格头留白self.sectionHeaderTopPadding

YES;}}return

UITableView的吸顶效果能满足部分的要求但在实际应用中需要置顶的往往是一些标签页对应的也是多个列表。

(UKTabView

blueColor]];UKCustomTabItemView

*tabItemView1

addItemView:tabItemView1];UKCustomTabItemView

*tabItemView2

addItemView:tabItemView2];_tabView.delegate

self;[_tabView

viewForHeaderInSection:(NSInteger)section

{if

cellForRowAtIndexPath:(NSIndexPath

*)indexPath

dequeueReusableCellWithIdentifier:CellId

(indexPath.section

yellowColor];cell.textLabel.text

section

whiteColor];}cell.textLabel.text

[NSString

(void)onTabViewSelected:(UKTabView

*)tabView

上述的方法简单地实现了标签页置顶和选项卡切换功能但由于我们只能共用一个列表所以会发生两个标签页都滚动的现象。

为此我们需要优化滚动的偏移首先在滚动结束时记录偏移量然后在切换标签页时设置原有的偏移量。

property(nonatomic,

(void)scrollViewDidEndDragging:(UIScrollView

*)scrollView

willDecelerate:(BOOL)decelerate

{NSLog(scrollViewDidEndDragging);[self

}//

(void)scrollViewDidEndDecelerating:(UIScrollView

*)scrollView

{NSLog(scrollViewDidEndDecelerating);[self

(void)recordOffset:(UIScrollView

*)scrollView

scrollView.contentOffset.y;NSLog(tab1Offset

%.2f,

scrollView.contentOffset.y;NSLog(tab2Offset

%.2f,

(void)onTabViewSelected:(UKTabView

*)tabView

有时设置tableView.contentOffset无效需要提前刷新[self.tableView

layoutIfNeeded];if

虽然我们记录了原有的偏移量但从实际的效果来看切换时TabView会在同样的位置闪烁比较严重。

为此我们需要尽量保持TabView的位置。

(void)onTabViewSelected:(UKTabView

*)tabView

originOffset:self.tab2Offset];self.tableView.contentOffset

CGPointMake(0,

originOffset:self.tab1Offset];self.tableView.contentOffset

CGPointMake(0,

(CGFloat)getDestOffset:(CGFloat)destOffset

originOffset:(CGFloat)originOffset

{if

内容只能用UIScrollView显示为了保持UKTableView保持位置不变不能完全保证内容的偏移位置。

如果一个内容较短的情况下依然会有偏移量的问题虽然我们可以通过填充空白内容来改善这个问题但又增加了很多工作量。

内容切换时没有平顺的效果。

为了尽可能的完善我们的吸顶效果我们尝试用UITableViewUICollectionView的组合来实现吸顶和左右滑动二种效果。

interface

UKNestedScrollView()property(nonatomic,

strong)

(instancetype)initWithFrame:(CGRect)frame

{self

{self.tableView.tableHeaderView

}//

(void)addTabView:(UKTabItemView

*)itemView

addItemView:itemView];[self.contentViewArray

addObject:contentView];[self.collectionView

reloadData];

UKNestedScrollView包含一个UITableView[self

addSubview:self.tableView];[self.tableView

mas_makeConstraints:^(MASConstraintMaker

*make)

{make.left.right.top.bottom.equalTo(self);}];

(UITableView

NO;_tableView.showsVerticalScrollIndicator

self;[_tableView

forCellReuseIdentifier:CellId];}return

_tableView;

NO;_tableView.showsVerticalScrollIndicator

self;[_tableView

forCellReuseIdentifier:CellId];}return

_tableView;

SectionHeaderView包含UKTabView和UICollectionView

(UIView

initWithFrame:self.frame];[_sectionHeaderView

addSubview:self.tabView];[_sectionHeaderView

addSubview:self.collectionView];}return

_sectionHeaderView;

UICollectionViewScrollDirectionHorizontal;layout.itemSize

CGSizeMake(self.frame.size.width,

CGFLOAT_MIN;layout.minimumInteritemSpacing

[[UICollectionView

collectionViewLayout:layout];_collectionView.pagingEnabled

NO;_collectionView.showsHorizontalScrollIndicator

registerClass:[UICollectionViewCell

class]

forCellWithReuseIdentifier:CellId];}return

_collectionView;

(CGFloat)tableView:(UITableView

*)tableView

heightForHeaderInSection:(NSInteger)section

{return

viewForHeaderInSection:(NSInteger)section

{return

(NSInteger)tableView:(UITableView

*)tableView

numberOfRowsInSection:(NSInteger)section

{return

cellForRowAtIndexPath:(NSIndexPath

*)indexPath

(NSInteger)collectionView:(UICollectionView

*)collectionView

numberOfItemsInSection:(NSInteger)section

{return

*)collectionView:(UICollectionView

*)collectionView

cellForItemAtIndexPath:(NSIndexPath

*)indexPath

dequeueReusableCellWithReuseIdentifier:CellId

forIndexPath:indexPath];UITableView

*contentView

self.contentViewArray[indexPath.row];[contentView

removeFromSuperview];[cell.contentView

addSubview:contentView];[contentView

mas_makeConstraints:^(MASConstraintMaker

*make)

{make.left.right.top.bottom.equalTo(cell.contentView);}];return

cell;

(void)scrollViewWillBeginDragging:(UIScrollView

*)scrollView

(void)scrollViewDidScroll:(UIScrollView

*)scrollView

scrollView.contentOffset.x;NSInteger

page

offsetRatio:(width/self.frame.size.width

page)];}}

(void)scrollViewDidEndDecelerating:(UIScrollView

*)scrollView

scrollView.contentOffset.x;NSInteger

page

setSelection:page];self.dragging

NO;}

(void)scrollViewDidEndDragging:(UIScrollView

*)scrollView

willDecelerate:(BOOL)decelerate

{if

scrollView.contentOffset.x;NSInteger

page

setSelection:page];self.dragging

NO;}

(void)onTabViewSelected:(UKTabView

*)tabView

collectionViewScrollToPosition:position];

}为了让UICollectionView内的手势能被UITableView接收需要在UKNestedTableView里面加上

(BOOL)gestureRecognizer:(UIGestureRecognizer

*)gestureRecognizer

shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer

{return

我们可以看到当列表滑动时两个列表都在滑动而且里面的内容的滑动更快。

这主要是因为例外两个列表都在滑动所以里面的列表其实是两个滑动距离相加所有我们需要在外面列表滑动时禁止里面列表的滑动。

(scrollView

self.tableView.contentOffset.y;//

YES;

记录当前页面偏移量方便后面禁止事件self.offsetArray[position]

[NSNumber

numberWithFloat:scrollView.contentOffset.y];}

break;}position;}

现在的效果已经基本满足了我们的需求有吸顶效果、能左右滑动、能记录列表偏移量内容滑动时也比较平顺了。

(scrollView

self.tableView.contentOffset.y;self.changed

YES;

numberWithFloat:scrollView.contentOffset.y];}}

else

self.originOffset;self.tableView.delegate

nil;self.tableView.contentOffset

CGPointMake(0,

self.offset);self.tableView.delegate

self;self.changed

numberWithFloat:scrollView.contentOffset.y];}break;}position;}