300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 自定义scrollview右侧的滑动条

自定义scrollview右侧的滑动条

时间:2023-09-14 00:13:28

相关推荐

自定义scrollview右侧的滑动条

在做这个功能之前我其实是拒绝的,为什么这么说呢,因为我怕麻烦啊!(开玩笑的,怕麻烦就不做程序员了)

很久没有写博客,这次刚好项目中有个有趣的东西,想拿出来分享一下,希望能帮到某些小伙伴。

首先说说需求,是这样的:

在tableview滑动的过程中,右侧的滑动条中间放一个label随着滑动条一起滑动,并且它的centerY与滑动条的centerY相等。当然,在滑到顶部或者尾部的时候label不能超出tableview的范围。

然后label上面显示与之对应的cell的内容。

刚开始想用系统提供的滑动条,scrollIndicator,没啥用啊。就提供了一个方法,没办法完成这种效果,只能自定义一个。下面有几个变量,我先设置一下,height:tableview的高度,allHeight:tableview内容的高度,y:tableview的contentoffset.y,currentHeight:滑动条的高度。

1.猜想,currentHeight/height=height/allHeight,然后去证实这一猜想,结果是有几个像素的偏差,不过并不影响。

2.确定滑动块的位置,要判断画框在画布的上半部分还是下半部分,在上面用top,在下面用bottom(没看明白继续往下看,有完整的代码):

if (y+height/2.0<=allHeight/2.0){myScrollViewIndirect.top = 66+y*height/allHeight;if (myScrollViewIndirect.top < 66){myScrollViewIndirect.top = 66;}}else{CGFloat y1 = (allHeight-height-y);myScrollViewIndirect.bottom = 62+height-y1*height/allHeight;if (myScrollViewIndirect.bottom>62+height){myScrollViewIndirect.bottom = 62+height;}}

3.滑块的位置的高度确定了,相当于已经完成了一半,接下来是确定label的位置,这就简单了,将滑动条的centerY给label的centerY就可以了。不过滑到最顶部,而且继续往下拉,滑动到最底部继续往上拉的时候需要判断一下label的位置。很简单的条件语句,后面有。

4.最核心的功能,label显示其所在位置的cell内容。通过遍历tableview里面cell的位置来判断对应的是哪一个cell,获取其下标,然后在数据源中得到内容。不过由于是遍历,我实在没脸单独把这个算法拿出来,想想以后还是学学高级一点的算法吧。

最后附上代码,不然就要被喷了。

1 #define SUBCOUNT 0.2 2 #import "ALDayPictureWallViewController.h" 3 #import "ALGoalPictureWallViewController.h" 4 5 @interface ALDayPictureWallViewController ()<UITableViewDelegate,UITableViewDataSource> 6 { 7NSTimer *timer; 8CGFloat subCount; 9CGFloat y; 10//自定义滑动块 11UIView *myScrollViewIndirect; 12UILabel *myLabel; 13NSInteger cellCount; 14 } 15 @property (nonatomic, strong) UITableView *tableView; 16 @property (nonatomic, strong) NSMutableArray *dataArray; 17 18 @end 19 20 @implementation ALDayPictureWallViewController 21 22 - (void)viewDidLoad { 23[super viewDidLoad]; 24// Do any additional setup after loading the view. 25self.view.backgroundColor = [UIColor whiteColor]; 26subCount = SUBCOUNT; 27[self createNavi]; 28[self createUI]; 2930myScrollViewIndirect = [LMFUITools createView:CGRectMake(0, 64, 3, 0) andBackgroundColor:[UIColor grayColor]]; 31myScrollViewIndirect.layer.cornerRadius = myScrollViewIndirect.width/2.0; 32myScrollViewIndirect.right = SCREEN_WIDTH-3; 33[self.view addSubview:myScrollViewIndirect]; 3435myLabel = [LMFUITools createLabelWithFrame:CGRectMake(0, 0, 100, 0) andBackgroundColor:[UIColor cyanColor] andTextAlignment:NSTextAlignmentCenter andFont:[UIFont systemFontOfSize:17] andText:@"" andTextColor:[UIColor blackColor]]; 36myLabel.right = myScrollViewIndirect.left-2; 37[self.view addSubview:myLabel]; 3839[self loadData]; 40 41 } 42 43 - (void)loadData 44 { 45for (int i=0; i<40; i++) 46{ 47 NSString *str = [NSString stringWithFormat:@"第%i行", i]; 48 [self.dataArray addObject:str]; 49} 50[self.tableView reloadData]; 51 } 52 53 - (NSMutableArray *)dataArray 54 { 55if (_dataArray == nil) 56{ 57 _dataArray = [NSMutableArray array]; 58} 59return _dataArray; 60 } 61 62 - (void)createNavi 63 { 64float height = 20; 65float width = height * 16 / 28; 66UIView *leftView = [[UIView alloc] initWithFrame:CGRectMake(6, 20, 60, 44)]; 67[self.view addSubview:leftView]; 68UIImageView *image = [LMFUITools createImageView:CGRectMake(10, (44-height)/2, width, height) andBackgroundImage:@"naviBlack_image"]; 69[leftView addSubview:image]; 70UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(goBackView:)]; 71[leftView addGestureRecognizer:tap]; 7273UILabel *titleLable = [LMFUITools createLabelWithFrame:CGRectMake(0, 20, SCREEN_WIDTH/2.0, 44) andBackgroundColor:nil andTextAlignment:NSTextAlignmentCenter andFont:[UIFont systemFontOfSize:17] andText:@"照片墙" andTextColor:[UIColor blackColor]]; 74titleLable.centerX = SCREEN_WIDTH * 0.5; 75[self.view addSubview:titleLable]; 7677//平铺 78UIView *rightView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 120, 44)]; 79rightView.right = SCREEN_WIDTH; 80rightView.top = 20; 81[self.view addSubview:rightView]; 8283UIImageView *rightImage = [LMFUITools createImageView:CGRectMake(0, 0, 44, 44) andBackgroundImage:@""]; 84[rightView addSubview:rightImage]; 85UILabel *label = [LMFUITools createLabelWithFrame:CGRectMake(0, 0, 44, 44) andBackgroundColor:nil andTextAlignment:NSTextAlignmentLeft andFont:[UIFont systemFontOfSize:15] andText:@"平铺" andTextColor:[UIColor colorWithHexString:@"#999999"]]; 86label.left = rightImage.right; 87[rightView addSubview:label]; 8889UITapGestureRecognizer *goalPictureTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(startTimer)]; 90[rightView addGestureRecognizer:goalPictureTap]; 91 } 92 93 - (void)startTimer 94 { 95if (timer == nil) 96{ 97 timer = [NSTimer scheduledTimerWithTimeInterval:0.002 target:self selector:@selector(startScrollTableView) userInfo:nil repeats:YES]; 98 self.tableView.userInteractionEnabled = NO; 99 [timer fire];100}101else102{103 [timer setFireDate:[NSDate distantFuture]];104 timer = nil;105 [timer invalidate];106 self.tableView.userInteractionEnabled = YES;107}108 }109 110 - (void)createUI111 {112self.tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 64, SCREEN_WIDTH, SCREEN_HEIGHT-64) style:UITableViewStylePlain];113self.tableView.backgroundColor = [UIColor colorWithHexString:@"#f5f5f5"];114 // self.tableView.showsVerticalScrollIndicator = NO;115 // self.tableView.showsHorizontalScrollIndicator = NO;116 // self.tableView.separatorInset = UIEdgeInsetsZero;117 // self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;118self.tableView.delegate = self;119self.tableView.dataSource = self;120[self.view addSubview:self.tableView];121[self.tableView setContentOffset:CGPointMake(0, 0)];122 }123 124 #pragma mark --tableview delegate125 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath126 {127return 44;128 }129 130 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section131 {132return [self.dataArray count];133 }134 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView135 {136return 1;137 }138 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath139 {140UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"UITableViewCell"];141if (cell == nil)142{143 cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"UITableViewCell"];144}145if ([self.dataArray count])146{147 cell.textLabel.text = [self.dataArray objectAtIndex:indexPath.row];148}149150cell.selectionStyle = 0;151return cell;152 }153 154 - (void)goalPicture:(UITapGestureRecognizer *)gesture155 {156ALGoalPictureWallViewController *goalPictureView = [[ALGoalPictureWallViewController alloc] init];157self.hidesBottomBarWhenPushed = YES;158[self.navigationController pushViewController:goalPictureView animated:YES];159 }160 161 #pragma mark --开始滑动162 - (void)startScrollTableView163 {164y+=subCount;165NSInteger count = 40;166CGFloat height = count*44.0;167if (y>height-self.tableView.height)168{169 subCount = -SUBCOUNT;170}171else if (y<0)172{173 subCount = SUBCOUNT;174}175[self.tableView setContentOffset:CGPointMake(0, y)];176 }177 178 - (void)scrollViewDidScroll:(UIScrollView *)scrollView179 {180NSLog(@"contentOffset.y%f", scrollView.contentOffset.y);181y = scrollView.contentOffset.y;182183//需要tableview的contentoffset.y,tableview的高度,tableview画布的高度184CGFloat height = scrollView.height;185CGFloat allHeight = scrollView.contentSize.height;186187//计算自定义滑块的高度188myScrollViewIndirect.height = height*height/allHeight;189//控件的高度不能设为负数,它会自动转化为正数,阿西吧190float currentHeight = myScrollViewIndirect.height;191//计算滑块192//如果tableview的中心在画框的上部,通过top确定滑块的位置193194if (y<0)195{196 currentHeight += y;197}198if (y+height>allHeight)199{200 CGFloat h = fabs(y+height-allHeight);201 currentHeight -= h;202}203204if (currentHeight<8)205{206 myScrollViewIndirect.height = 8;207}208else209{210 myScrollViewIndirect.height = currentHeight;211}212213if (y+height/2.0<=allHeight/2.0)214{215 myScrollViewIndirect.top = 66+y*height/allHeight;216 if (myScrollViewIndirect.top < 66)217 {218 myScrollViewIndirect.top = 66;219 }220}221else222{223 CGFloat y1 = (allHeight-height-y);224 myScrollViewIndirect.bottom = 62+height-y1*height/allHeight;225 if (myScrollViewIndirect.bottom>62+height)226 {227 myScrollViewIndirect.bottom = 62+height;228 }229}230myLabel.height = 20;231myLabel.centerY = myScrollViewIndirect.centerY;232if (myLabel.top < 66)233{234 myLabel.top = 66;235}236if (myLabel.bottom>62+height)237{238 myLabel.bottom = 62+height;239}240CGFloat centerY = myLabel.centerY+y-64;241for (NSInteger i=0; i<[self.dataArray count]; i++)242{243 NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];244 CGRect rectInTableView = [self.tableView rectForRowAtIndexPath:indexPath];245 // CGRect rect = [self.tableView convertRect:rectInTableView toView:[self.tableView superview]];246 if (rectInTableView.origin.y<=centerY && centerY<=rectInTableView.origin.y+rectInTableView.size.height)247 {248 NSLog(@"cell.y=%f cellHeight=%f", rectInTableView.origin.y, rectInTableView.size.height);249 myLabel.text = [self.dataArray objectAtIndex:i];250 return;251 }252 if (rectInTableView.origin.y > centerY)253 {254 NSLog(@"cell.y=%f cellHeight=%f", rectInTableView.origin.y, rectInTableView.size.height);255 return;256 }257}258 }259 260 - (void)goBackView:(UITapGestureRecognizer *)gesture261 {262[self.navigationController popViewControllerAnimated:YES];263 }264 265 - (void)viewWillAppear:(BOOL)animated266 {267[super viewWillAppear:animated];268self.navigationController.navigationBar.hidden = YES;269 }270 271 - (void)viewWillDisappear:(BOOL)animated272 {273[super viewWillDisappear:animated];274[timer setFireDate:[NSDate distantFuture]];275timer = nil;276[timer invalidate];277self.navigationController.navigationBar.hidden = NO;278 }279 280 - (void)didReceiveMemoryWarning {281[super didReceiveMemoryWarning];282// Dispose of any resources that can be recreated.283 }284 285 @end

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。