写在前面

“工欲善其事，必先利其器”-《论语·卫灵公》

说到自定义控件，其实系统的控件已经基本满足了简单的开发需要。但是对于一些app系统的控件是无法满足的或者说系统的控件不能达到产品的需求。那么遇到这种怎么办呢？很简单 自己手撸一个就可以了。又有人说，现在网上那么多，去git或者code4app上get一份下来就可以了。是的 这也是一种方法。网上的固然好，不尝试自己弄，那你永远没有进步的机会。如果项目有时间的话，还是自己手撸一个吧

---

自定义索引控件

相信好多人都用过系统的索引控件，但系统的限制就比较多了。而像下面这样的 系统就无能无力了。

图1

看到这个效果，细细想下 还是很简单。主要还是动画效果。当点击移动的时候 会有一个动画效果，同时会有个toast提示。

1.首先 能够点击移动 说明有响应事件发生。而能够接受响应事件，有UIButton，手势等。但这个自定义控件中 还有移动事件，因此用UIButton就不合适了。用手势也可以做，不过在这里不用手势来做，而用下面这几个：

- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent *)event{ }

- (void)touchesMoved:(NSSet*)touches withEvent:(UIEvent *)event{ }

- (void)touchesEnded:(NSSet*)touches withEvent:(UIEvent *)event{ }

- (void)touchesCancelled:(NSSet*)touches withEvent:(UIEvent *)event{}

这几个方法就可以接受开始 滑动 结束等事件。

2.接下来就应该考虑动画了。你会发现动画其实就是一个半圆形的圆弧。确定圆心和半径后，在根据UILabel 的位置 根据勾股定理（x^2 + y^2 = z^2）就可以确定UILabel在该圆弧上的位置。在滑动的过程中 不停的改变UILabel在圆弧上的位置 就出现了这种动画效果：

UITouch *touch = [touches anyObject];

CGPoint point = [touch locationInView:self];

CGFloat height = self.frame.size.height / self.array.count;

NSInteger index = point.y / height;

for (NSInteger i = 0; i< self.array.count; i++) {

UILabel *label = [self viewWithTag:indexTag + i];

if (fabs(point.y - label.center.y) < maxRadius) {

CGFloat centerX = self.frame.size.width * 0.5 - sqrt(maxRadius * maxRadius - fabs(point.y - label.center.y) *fabs(point.y - label.center.y));

[UIView animateWithDuration:0.2 animations:^{

label.center = CGPointMake(centerX, label.center.y);

}else{

[UIView animateWithDuration:0.2 animations:^{

label.center = CGPointMake(self.frame.size.width * 0.5, i * height + height *0.5);

}];

}}

3.选中回调：当接触屏幕或者滑动的时候 都会随时回调选中的结果。而这个选中事件在哪里写比较好呢？不可能在结束的时候，因为在结束时 那么滑动的时候就不会回调了。所以只能在滑动中来处理选中事件。其实也简单，在上面的for循环中 加入一个判断就可以了：

if (index <= self.array.count - 1 && index >= 0 && index != self.currentIndex) {

self.toastLabel.text = self.array[index];

self.toastLabel.alpha = 1;

self.currentIndex = index;

if (self.handler) {

self.handler(index);

};}

4.选中后，手离开屏幕的事件了。这个比较好弄 ，手离开屏幕后，所有的UILabel恢复原状就可以了。

这样，这个自定义控件就OK了。查看完整代码