iOS开发中创建一个纵向滑动控件

原创 2018年04月16日 11:31:48

先看一个效果图:

https://upload-images.jianshu.io/upload_images/1154538-cb819f377dc2e3ab.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/463

滑动控件
一张图胜过千言万语,一张动态图更是胜过多张图。

看了动态效果图,看者也就应该猜到了本篇文章要说的大致内容了。

在开发中我们有时会有像效果图中这样的需求。比如我们常用的读书App,每本书都会有一个章节目录,如果一本书的章节目录过多有上千张章的话我们要滑动到后面的某一个张可能需要需要滑动很长时间,而如果有了我们效果中的那个右侧滑动控件则能很快地滑动到后面的某些章节。

实现思路:

  1. 首先我们需要创建一个滑动控件,我们利用UISlider(最小值为0,最大值为1)来进行创建。

  2. 我们都知道系统给UISlider是一个横向进度控件,这个我们需要先将该控件进行一个九十度的旋转,让其变成一个纵向进行控件,变成纵向进度控件之后再对其frame进行调整。

  3. 创建一个UITableView,将UISlider的滑动和UITableView的滑动关联起来(在UISlider滑动的时候让UITableView也随着滑动,在UITableView滑动的时候UISlider也随着滑动)。

  4. UITableView和UISlider的具体关联:

    4.1 UISlider滑动的时候让UITableView跟着滑动:当UISlider滑动的时候UISlider的value值会发生变化,此时让(value值)乘以(UITableView的数据源总长度-1)获得一个数值,然后让UITableView滑动到该数值所对应的行上。

    4.2 UITableView滑动的时候让UISlider跟着滑动:当UITableView滑动的时候记录下它的偏移量,(偏移量)除以(UITableView上所有cell的总高度)获得一个数值,然后将此数值赋值给UISlider的value即可。(注意:1. 当偏移量不小于0的时候改变UISlider的value值 2.当偏移量小于UITableView的高度的时候利用偏移量除以UITableView的总高度,当偏移量大于UITableView的高度的时候利用偏移量和UITableView的高度之和处以UITableView的总高度)。

注意:在滑动UISlider的时候此时UITableView也会滑动但不能再通过UITableView的滑动再去改变UISlider的值。

someone say:talk is sheep,show me your code

demo地址: https://gitee.com/liangsenliangsen/longitudinal_progress_bar.git

本篇文章到这里就结束了,愿大家加班不多工资多,男同胞都有女朋友,女同胞都有男朋友。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/79958453

Android中不同方向嵌套滑动的解决方案(ListView为例子)

前言: 就像手机QQ 的聊天消息列表,一个纵向滑动的ListView列举所有消息,但每一条消息可以横向滑动。         是否觉得很分裂?其实实现起来也不复杂。         理解了以后,...
  • oyyj42
  • oyyj42
  • 2015-08-07 08:24:14
  • 3038

竖向ScrollView嵌套横向滑动布局冲突

当外层竖向滑动ScrollView里面嵌套横向的滑动布局时,会发先内层横向滑动很卡顿 原因:左右滑动操作被外层的scrollView处理掉了 解决:只要让scrollview对左右滑动事件不监听,...
  • QiY6010
  • QiY6010
  • 2017-11-28 11:53:02
  • 373

android ScrollView弹性控件,横向和纵向滑动

  • 2016年07月04日 14:22
  • 1.55MB
  • 下载

iOS开发——解决UIScrollView控件移动错位和无法滚动

跟着iOS老师发的教程做了个简陋的图片浏览器,因为图片太多展示不开所以想要用Scroll View来显示,就自己试了一下。然而并没有自己想象的那么顺利orz主要就以下几个问题:1.在该图片浏览器上添加...
  • PinkRiverside
  • PinkRiverside
  • 2017-05-29 11:22:41
  • 488

Android实现竖着的滑动刻度尺效果,选择身高(竖向的)

这次是你想要的效果哦!高兴了吧?高兴地话,你不用给我打赏,分享到朋友圈,我就很高兴了。 群里有人问我要竖着的滑动尺效果,前天我贱贱地分享了一个横向的滑动效果,让大家模仿者,自己尝试着去改编一...
  • loongggdroid
  • loongggdroid
  • 2016-01-07 14:31:10
  • 3511

Android中TextView的滑动(横向/纵向)

最近产品要求功能:文字显示的滑动效果一开始自然就想到了ScrollView和HorizontalScrollView这两个可以实现横向和纵向的滑动,但是ScrollView 有个特性就是它的内部只能有...
  • lplj717
  • lplj717
  • 2017-05-05 10:56:34
  • 1035

RecyclerView横向和竖向滑动冲突

package com.dongnao.alvin.dn_l21_recyclerview_scrolling_issue; import android.content.Context; imp...
  • linkuiyao
  • linkuiyao
  • 2017-06-25 00:02:16
  • 1178

iOS开发从入门到精通-- UIProgressView进度条&UISlider滑动条

UIProgressView进度条&UISlider滑动条: 我们要实现上面图片的效果,在滑动条滑动改变的同时,进度条也跟随着改变。 在 ViewController.h里面声明:#import ...
  • android_it
  • android_it
  • 2016-07-20 15:04:43
  • 13469

iOS使用UICollectionView只允许向左方向滑动,不允许向右方向滑动。

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{          if (scrollView == 《这里换成你的UIColloc...
  • hsf_study
  • hsf_study
  • 2017-12-19 10:56:50
  • 139

IOS添加滑动手势

使用手势很简单,分为三步: 1 创建手势识别器对象实例。创建时,指定一个回调方法,当手势开始,改变、或结束时,执行回调方法。 2 设置手势识别器对象实例的相关属性(可选部分...
  • lgx_admin
  • lgx_admin
  • 2016-03-22 14:11:07
  • 1023
收藏助手
不良信息举报
您举报文章:iOS开发中创建一个纵向滑动控件
举报原因:
原因补充:

(最多只允许输入30个字)