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

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

　　首先说说需求，是这样的：

　　在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 {
  7     NSTimer *timer;
  8     CGFloat subCount;
  9     CGFloat y;
 10     //自定义滑动块
 11     UIView *myScrollViewIndirect;
 12     UILabel *myLabel;
 13     NSInteger 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.
 25     self.view.backgroundColor = [UIColor whiteColor];
 26     subCount = SUBCOUNT;
 27     [self createNavi];
 28     [self createUI];
 29
 30     myScrollViewIndirect = [LMFUITools createView:CGRectMake(0, 64, 3, 0) andBackgroundColor:[UIColor grayColor]];
 31     myScrollViewIndirect.layer.cornerRadius = myScrollViewIndirect.width/2.0;
 32     myScrollViewIndirect.right = SCREEN_WIDTH-3;
 33     [self.view addSubview:myScrollViewIndirect];
 34
 35     myLabel = [LMFUITools createLabelWithFrame:CGRectMake(0, 0, 100, 0) andBackgroundColor:[UIColor cyanColor] andTextAlignment:NSTextAlignmentCenter andFont:[UIFont systemFontOfSize:17] andText:@"" andTextColor:[UIColor blackColor]];
 36     myLabel.right = myScrollViewIndirect.left-2;
 37     [self.view addSubview:myLabel];
 38
 39     [self loadData];
 40
 41 }
 42
 43 - (void)loadData
 44 {
 45     for (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 {
 55     if (_dataArray == nil)
 56     {
 57         _dataArray = [NSMutableArray array];
 58     }
 59     return _dataArray;
 60 }
 61
 62 - (void)createNavi
 63 {
 64     float height = 20;
 65     float width = height * 16 / 28;
 66     UIView *leftView = [[UIView alloc] initWithFrame:CGRectMake(6, 20, 60, 44)];
 67     [self.view addSubview:leftView];
 68     UIImageView *image = [LMFUITools createImageView:CGRectMake(10, (44-height)/2, width, height) andBackgroundImage:@"naviBlack_image"];
 69     [leftView addSubview:image];
 70     UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(goBackView:)];
 71     [leftView addGestureRecognizer:tap];
 72
 73     UILabel *titleLable = [LMFUITools createLabelWithFrame:CGRectMake(0, 20, SCREEN_WIDTH/2.0, 44) andBackgroundColor:nil andTextAlignment:NSTextAlignmentCenter andFont:[UIFont systemFontOfSize:17] andText:@"照片墙" andTextColor:[UIColor blackColor]];
 74     titleLable.centerX = SCREEN_WIDTH * 0.5;
 75     [self.view addSubview:titleLable];
 76
 77     //平铺
 78     UIView *rightView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 120, 44)];
 79     rightView.right = SCREEN_WIDTH;
 80     rightView.top = 20;
 81     [self.view addSubview:rightView];
 82
 83     UIImageView *rightImage = [LMFUITools createImageView:CGRectMake(0, 0, 44, 44) andBackgroundImage:@""];
 84     [rightView addSubview:rightImage];
 85     UILabel *label = [LMFUITools createLabelWithFrame:CGRectMake(0, 0, 44, 44) andBackgroundColor:nil andTextAlignment:NSTextAlignmentLeft andFont:[UIFont systemFontOfSize:15] andText:@"平铺" andTextColor:[UIColor colorWithHexString:@"#999999"]];
 86     label.left = rightImage.right;
 87     [rightView addSubview:label];
 88
 89     UITapGestureRecognizer *goalPictureTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(startTimer)];
 90     [rightView addGestureRecognizer:goalPictureTap];
 91 }
 92
 93 - (void)startTimer
 94 {
 95     if (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     }
101     else
102     {
103         [timer setFireDate:[NSDate distantFuture]];
104         timer = nil;
105         [timer invalidate];
106         self.tableView.userInteractionEnabled = YES;
107     }
108 }
109
110 - (void)createUI
111 {
112     self.tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 64, SCREEN_WIDTH, SCREEN_HEIGHT-64) style:UITableViewStylePlain];
113     self.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;
118     self.tableView.delegate = self;
119     self.tableView.dataSource = self;
120     [self.view addSubview:self.tableView];
121     [self.tableView setContentOffset:CGPointMake(0, 0)];
122 }
123
124 #pragma mark --tableview delegate
125 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
126 {
127     return 44;
128 }
129
130 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
131 {
132     return [self.dataArray count];
133 }
134 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
135 {
136     return 1;
137 }
138 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
139 {
140     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"UITableViewCell"];
141     if (cell == nil)
142     {
143         cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"UITableViewCell"];
144     }
145     if ([self.dataArray count])
146     {
147         cell.textLabel.text = [self.dataArray objectAtIndex:indexPath.row];
148     }
149
150     cell.selectionStyle = 0;
151     return cell;
152 }
153
154 - (void)goalPicture:(UITapGestureRecognizer *)gesture
155 {
156     ALGoalPictureWallViewController *goalPictureView = [[ALGoalPictureWallViewController alloc] init];
157     self.hidesBottomBarWhenPushed = YES;
158     [self.navigationController pushViewController:goalPictureView animated:YES];
159 }
160
161 #pragma mark --开始滑动
162 - (void)startScrollTableView
163 {
164     y+=subCount;
165     NSInteger count = 40;
166     CGFloat height = count*44.0;
167     if (y>height-self.tableView.height)
168     {
169         subCount = -SUBCOUNT;
170     }
171     else if (y<0)
172     {
173         subCount = SUBCOUNT;
174     }
175     [self.tableView setContentOffset:CGPointMake(0, y)];
176 }
177
178 - (void)scrollViewDidScroll:(UIScrollView *)scrollView
179 {
180     NSLog(@"contentOffset.y      %f", scrollView.contentOffset.y);
181     y = scrollView.contentOffset.y;
182
183     //需要tableview的contentoffset.y，tableview的高度，tableview画布的高度
184     CGFloat height = scrollView.height;
185     CGFloat allHeight = scrollView.contentSize.height;
186
187     //计算自定义滑块的高度
188     myScrollViewIndirect.height = height*height/allHeight;
189     //控件的高度不能设为负数，它会自动转化为正数，阿西吧
190     float currentHeight = myScrollViewIndirect.height;
191     //计算滑块
192     //如果tableview的中心在画框的上部，通过top确定滑块的位置
193
194     if (y<0)
195     {
196         currentHeight += y;
197     }
198     if (y+height>allHeight)
199     {
200         CGFloat h = fabs(y+height-allHeight);
201         currentHeight -= h;
202     }
203
204     if (currentHeight<8)
205     {
206         myScrollViewIndirect.height = 8;
207     }
208     else
209     {
210         myScrollViewIndirect.height = currentHeight;
211     }
212
213     if (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     }
221     else
222     {
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     }
230     myLabel.height = 20;
231     myLabel.centerY = myScrollViewIndirect.centerY;
232     if (myLabel.top < 66)
233     {
234         myLabel.top = 66;
235     }
236     if (myLabel.bottom>62+height)
237     {
238         myLabel.bottom = 62+height;
239     }
240     CGFloat centerY = myLabel.centerY+y-64;
241     for (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 *)gesture
261 {
262     [self.navigationController popViewControllerAnimated:YES];
263 }
264
265 - (void)viewWillAppear:(BOOL)animated
266 {
267     [super viewWillAppear:animated];
268     self.navigationController.navigationBar.hidden = YES;
269 }
270
271 - (void)viewWillDisappear:(BOOL)animated
272 {
273     [super viewWillDisappear:animated];
274     [timer setFireDate:[NSDate distantFuture]];
275     timer = nil;
276     [timer invalidate];
277     self.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

　　

转载于:https://www.cnblogs.com/lmfboke/p/6208698.html

自定义scrollview右侧的滑动条相关推荐

  1. android 自定义view滚动条,Android自定义View实现等级滑动条的实例

    Android自定义View实现等级滑动条的实例 实现效果图: 思路: 首先绘制直线,然后等分直线绘制点: 绘制点的时候把X值存到集合中. 然后绘制背景图片,以及图片上的数字. 点击事件down的时候 ...

  2. mac中NSScrollView自定义滑动条NSScroller

    最近在捣鼓mac上开发app,本以为iOS.mac开发本是同根生,弄起来应该差不多,上手之后才发现iOS是多么的优雅自在,而mac是干啥都觉得不太顺手,UIKit跟AppKit差别还真是不一般的大. ...

  3. Android 自定义ScrollView ListView 体验各种纵向滑动的需求

    1.概述 群里的一个哥们有个需求是这样的:问题:主要功能就是:1.循环的一个滑动:2.每次滑动结束,保持每个Item的完整.然后我当时给他写了个Demo,所有代码都在Activity里面,后期看来其太 ...

  4. Android按钮滚动条,Android自定义Seekbar滑动条，Pop提示跟随滑动按钮一起滑动

    由于项目需要做出此效果,自定义写了一个. 效果图 思路: 原始的seekbar只有滑动条并没有下方的提示文字,所以我们必须要继承Seekbar重写这个控件. 代码: 在values文件夹下新建attr ...

  5. HTML滑动条自动滑动,HTML5新特性——自定义滑动条（input[type=range]）

    HTML 4.01 与 HTML5之间的差异 以下 input 的 type属性值是 HTML5 中新增的: color.date.datetime.datetime-local.month.week ...

  6. input的range类型滑动条的自定义样式设置

    完整代码的项目应用--视频播放器中的音量和播放进度滑动条 /* unholy css to style input type="range" */ /*主要是滑动条的自定义样式设置 ...

  7. echarts的滑动条 dataZoom 样式自定义

    官方链接说明:官方链接 编写实现例子: dataZoom = [{height: 15, //高度type: "slider",// show: true,xAxisIndex: ...

  8. android gridview滑动监听,Android GridView 滑动条设置一直显示状态(推荐)

    Android GridView 滑动条设置一直显示状态(推荐) 模拟GridView控件: android:id="@+id/picture_grid" android:layo ...

  9. 小程序自制自带滑动条的表格组件

    小程序自制自带滑动条的表格组件 在编写过程中遇到的难点 1. 表格的编写 2. 表格内容宽度固定 长度自适应 3. 滚动条逻辑及代码编写 4. 滚动条的卡段优化 5. 小程序组件的编写及应用 尾声 先 ...

  10. 嵌入式Qt-控制硬件：滑动条控制RGB灯

    前面的几篇文章,介绍Qt例程,都是和硬件无关的,Windows平台和嵌入式平台都能运行. 本篇,来测试一下Qt界面控制嵌入式平台上的硬件,以野火i.MX6ULL板子上的RGB LED为例,实现Qt界面 ...

最新文章

  1. 谈谈Java程序员进阶的那些知识和方向
  2. Linux磁盘挂载和docker安装
  3. 正面交锋！另类“竞赛”探索大脑的意识起源
  4. 打印100~200 之间的素数
  5. maven工程拆分与聚合的思想
  6. 【机器学习与差分隐私代码实现】差分隐私代码实现系列（十二）
  7. 电脑位数怎么看_怎么用电脑播放4K视频？怎么用电脑看4K电影？ 附带详细教程...
  8. Keil MDK 软件包（MDK5 Software Packs）离线下载方法
  9. 在国内怎么使用谷歌Chrome浏览器，为什么我的谷歌浏览器进去就加载失败
  10. 十大免费cms建站系统介绍推荐
  11. PDF文件实现在线盖章
  12. ubuntu 19.04下交叉编译64位vlc 3.0.8
  13. 谷歌掐架甲骨文：揭秘 Java 侵权案始末
  14. Rolan 1.3.8 屏蔽强制更新
  15. 用STRAIGHT_JOIN优化mysql的执行速度
  16. ES集群安全重启节点的正确方法
  17. adobe的AGAL语言
  18. OpenGL超级宝典 统一变量(uniform variable)
  19. css样式实现td显示字体超长显示...鼠标悬浮显示全部
  20. Navicat：RA-12514 : TNS : listener does not currently know of service requested in connect descriptor

热门文章

  1. MySQL配置文件my.cnf参数优化和中文详解
  2. 学习ubuntu之wget命令
  3. SSH面试常被问到的问题
  4. 思科ASA防火墙升级为云端防火墙
  5. 使用JDBC编程的问题总结
  6. oracle表空间可以更改吗,如何更改Oracle数据库表的表空间？
  7. kill、killall 、pkill 发送信号命令
  8. Nginx虚拟主机别名的配置
  9. glnxa64 matlab 什么版本_发现了一个MATLAB的小bug
  10. rust里面的柴油桶有什么用_用了橡木桶的红酒就一定好吗？什么样的酒才适合橡木桶？...