当前位置：首页 > 编程日记 > 正文

【仿汽车之家】价格区间选择控件

编程日记 2024-08-20 08:10:00

仿照汽车之家iOS客户端“找车”栏目的价格区间选择控件，最终实现效果如下：

一、界面实现

*根据屏幕大小以及刻度的大小，宏定义需要用到的一些值

#define SCREENW [UIScreen mainScreen].bounds.size.width
#define SCREENH [UIScreen mainScreen].bounds.size.height
#define PRICEBGW  271.0
#define PRICEBGH  21.0
#define PRICEBGX (SCREENW - PRICEBGW)*0.5
#define PRICEBGY (SCREENH - PRICEBGH)*0.5
#define PRICEMAX (SCREENW*0.5 + PRICEBGW*0.44)
#define PRICEMIN (SCREENW*0.5 - PRICEBGW*0.45)
#define NODE1  (PRICEBGX + 103)

项目中用了两张图片，一张是刻度图（紫色框中的UIIMageView,图片命名为priceRuler@2x.png），一张是把手图（两个红色框内分别有一个UIIMageView，图片命名为xiabashou@2x.png），蓝色框内的进度条，使用一个UIView来实现，而使用UILabel来显示用户选择的数值范围。

priceRuler@2x.png

xiabashou@2x.png

我们把界面实现的代码写到一个函数中，函数名为setUpView，并在viewDidLoad中调用。

-(void)setUpView{//数值显示resultLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 100, SCREENW, 60)];[resultLabel setTextAlignment:NSTextAlignmentCenter];[resultLabel setFont:[UIFont systemFontOfSize:18]];[self.view addSubview:resultLabel];//刻度图UIImageView *priceBg = [[UIImageView alloc] initWithFrame:CGRectMake(PRICEBGX, PRICEBGY, PRICEBGW, PRICEBGH)];[priceBg setImage:[UIImage imageNamed:@"priceBg"]];[self.view addSubview:priceBg];//蓝色进度条progressView = [[UIView alloc] initWithFrame:CGRectMake(PRICEBGX, CGRectGetMaxY(priceBg.frame)-2, PRICEBGW, 2.f)];[progressView setBackgroundColor:[UIColor colorWithRed:30.0/255.0 green:144.0/255.0 blue:255.0/255.0 alpha:1.0]];[self.view addSubview:progressView];//左把手CGFloat commonHandImageViewW = 20.f;CGFloat commonHandImageViewH = 25.f;CGFloat leftHandImageViewX = PRICEBGX - commonHandImageViewW*0.5;CGFloat leftHandImageViewY = PRICEBGY + commonHandImageViewH;leftHandImageView = [[UIImageView alloc] initWithFrame:CGRectMake(leftHandImageViewX, leftHandImageViewY, commonHandImageViewW, commonHandImageViewH)];[leftHandImageView setImage:[UIImage imageNamed:@"xiabashou"]];[self.view addSubview:leftHandImageView];//右把手CGFloat rightHandImageViewX = CGRectGetMaxX(priceBg.frame) - commonHandImageViewW*0.5;CGFloat rightHandImageViewY = leftHandImageViewY;rightHandImageView = [[UIImageView alloc] initWithFrame:CGRectMake(rightHandImageViewX, rightHandImageViewY, commonHandImageViewW, commonHandImageViewH)];[rightHandImageView setImage:[UIImage imageNamed:@"xiabashou"]];[self.view addSubview:rightHandImageView];}

现在运行项目，已经可以看到一个区间选择器了，但是我们在屏幕进行任意拖动操作，界面并没有任何改变。因此我们需要使得app能够响应我们的手势。

二、响应用户手势

为了响应用户的拖动手势，给两个把手（UIIMageView）分别添加滑动手势识别（UIPanGestureRecognizer）。我们在setUpView中继续添加如下代码

-(void)setUpView{….….//给左把手添加滑动手势识别UIPanGestureRecognizer *leftPanRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(leftHandMove:)];[leftPanRecognizer setMinimumNumberOfTouches:1];[leftPanRecognizer setMaximumNumberOfTouches:1];[leftHandImageView setUserInteractionEnabled:YES];[leftHandImageView addGestureRecognizer:leftPanRecognizer];//给右把手添加滑动手势识别UIPanGestureRecognizer *rightPanRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(rightHandMove:)];[rightHandImageView setUserInteractionEnabled:YES];[rightHandImageView addGestureRecognizer:rightPanRecognizer];}

实现leftHandMove：和rightHandMove：方法，处理滑动事件：

-(void)leftHandMove:(UIPanGestureRecognizer *)pan{CGPoint point = [pan translationInView:leftHandImageView];CGFloat x = leftHandImageView.center.x + point.x;if(x > PRICEMAX){x = PRICEMAX;}else if (x< PRICEBGX ){x = PRICEBGX;}leftHandImageView.center = CGPointMake(ceilf(x), leftHandImageView.center.y);[pan setTranslation:CGPointZero inView:self.view];
}

-(void)rightHandMove:(UIPanGestureRecognizer *)pan{CGPoint point = [pan translationInView:rightHandImageView];CGFloat x = rightHandImageView.center.x + point.x;if(x>PRICEBGX+PRICEBGW){x = PRICEBGX+PRICEBGW;}else if (x<PRICEMIN){x = PRICEMIN;}rightHandImageView.center = CGPointMake(ceilf(x), rightHandImageView.center.y);}

在leftHandMove：方法中，我们使用translationInView函数，得到在指定的View坐标系中的改变值point，将原来的x坐标值加上改变的值后，若超出符合要求的刻度范围，我们要设置其为边界值，然后再更新把手的位置，否则直接更新即可。rightHandMove:同理实现。

尝试运行项目并拖动把手，现在把手的位置可以水平拖动了，但是UILabel还没有显示我们选中的范围，蓝色进度条也没随之改变。

三、更新数值显示和蓝色进度条

为了得到上一步中用户选中的值，我们先声明两个个全局变量：

float leftValue;
float rightValue;

在viewDidLoad中初始化

- (void)viewDidLoad {[super viewDidLoad];leftValue = 0;rightValue = 100;[self setUpView];
}

然后在leftHandMove：和rightHandMove：中将用户选中的值分别赋值给leftValue和rightValue。

<pre code_snippet_id="1582410" snippet_file_name="blog_20160219_8_6433823" name="code" class="objc">-(void)leftHandMove:(UIPanGestureRecognizer *)pan{……leftValue =  x;

</pre><pre code_snippet_id="1582410" snippet_file_name="blog_20160219_9_4132529" name="code" class="objc">}

现在，我们写一个更新数值和进度条的函数，函数名为updateData。

-(void)updateData{[resultLabel setText:[NSString stringWithFormat:@"%.0f~%.0f",leftValue,rightValue]];}

我们再一次运行程序，滑动手柄，数值虽然改变了，但并不是我们想要的价格数值！！

这是因为屏幕的坐标和刻度图的坐标范围并不一致，因此我们需要将数据处理一下。可能你已经发现，刻度图中的范围并不是均匀分布的，而是分成三段：0~25、25~40、40~100。因此我们在处理时需要分段处理。

我们写一个将左边转换为价格的转换函数：

//坐标->价格
-(CGFloat)x2price:(CGFloat)x{CGFloat price = 0.f;//<5if(x < PRICEMIN){price = 0;}//5~25else if (x < PRICEBGX + 133){price = (x - PRICEMIN) / 120 * 20 + 5;}//25~40else if (x < PRICEBGX +  163){price = (x - PRICEBGX - 133) *0.5 + 25;}//40~100else if (x < PRICEBGX + 253){price = (x - PRICEBGX - 163) * 2 / 3 + 40;}//100+else{price = 100;}return price;
}

将leftHandMove:中的leftValue = x；修改为如下

-(void)leftHandMove:(UIPanGestureRecognizer *)pan{……leftValue = [self x2price:ceilf(x)];
}

同理rightHandMove:也做相应处理。重新运行程序，滑动把手，显示的价格数值正是我们所期望的。

我们还要更新蓝色进度条，只需修改它的frame即可：

-(void)updateData{[resultLabel setText:[NSString stringWithFormat:@"%.0f~%.0f",leftValue,rightValue]];CGRect progressRect = CGRectMake(leftHandImageView.center.x, progressView.frame.origin.y, rightHandImageView.center.x - leftHandImageView.center.x, progressView.frame.size.height);progressView.frame = progressRect;
}

四、优化

当将右边的把手一直往左滑动，它将滑到左边把手的左边，也就是用户选择的区间中，上界值比下界值更小了！这并不是我们期望的结果。我们希望上界至少要比下界大1个单位，所以当用户滑动右把手到上界比下界小于等于1时，左把手也要跟着滑动，与右把手始终保持1个单位。

我们在rightHandMove:函数中添加如下代码：

-(void)rightHandMove:(UIPanGestureRecognizer *)pan{……if (rightValue-leftValue <= 1) {leftValue = rightValue - 1;leftHandImageView.center = CGPointMake([self price2x:leftValue], leftHandImageView.center.y);}}

同理在leftHandMove:函数中添加对应代码：

-(void)leftHandMove:(UIPanGestureRecognizer *)pan{……if (rightValue-leftValue <= 1) {rightValue = leftValue + 1;rightHandImageView.center = CGPointMake([self price2x:rightValue], rightHandImageView.center.y);}}

注意到函数中用到了方法price2x:，这个函数是将价格转换为对应的x坐标，作用于前面用到的x2price：刚好相反。

//价格->坐标
-(CGFloat)price2x:(CGFloat)price{CGFloat x;//<5if (price<5) {x = PRICEBGX;}//5~25else if (price >= 5 && price < 25) {x = (price-5) * 6 + PRICEMIN;}//25~40else if (price >= 25 && price <40) {x = (price-25) * 2 + 133 + PRICEBGX;}//40~100else if (price >=40 && price <100){x = (price-40) * 3/2 +163 + PRICEBGX;}else if(price >= 100){x = PRICEBGX + PRICEBGW;}return x;
}

运行程序，现在已经不能将右把手拖动到左把手的前面的吧~

完整源代码下载：http://download.csdn.net/detail/dolacmeng/9436673

https://www.dkcj.cn/info/15062.html

【仿汽车之家】价格区间选择控件

一、界面实现

二、响应用户手势

三、更新数值显示和蓝色进度条

四、优化

相关文章：

Apache服务器部署（2）

ASCII、Unicode、GBK和UTF-8字符编码的区别联系

【iOS】快速集成轮播控件

Hibernate中get方法和load方法的区别

DNS高速缓存

将时间改为显示：几天前，几小时前，或者几分钟前

支持placeholder和自适配高度的TextView控件

ZOJ 3735 dp

haproxy实现高可用及负载均衡

Apache转发到Tomcat

.net基础问题

【iOS】NSDate分类，获得中国农历

LVS_NAT实现负载均衡

自定义Push和Pop过渡动画

centos 安装 mysql 5.7

c语言：婚礼上的谎言

redis主从复制、高可用和集群

对学习编译原理的看法

iOS提示气泡,带动画

GIt/Github常用命令

python练习题（python之“求一个数的阶乘并求结果中从后向前数第一个不为0(零)的数” 等）

【动画1】UIView动画

【python】解压文件

JS设计模式——3.封装与信息隐藏

nginx源码编译、负载均衡及模块的扩展

LinkedHashMap and LinkedHashSet

Windows Phone开发（19）：三维透视效果

【动画2】CALayer动画

nginx+tomcat+memcache实现负载均衡、session共享

（转）二叉树系列面试问题