利用视错觉原理实现一个自定义的SegmentControl

最新推荐文章于 2024-05-23 09:59:55 发布

iOS_hrh

最新推荐文章于 2024-05-23 09:59:55 发布

阅读量1k

点赞数

分类专栏：控件动画 iOS 文章标签：控件源码 uiview

本文链接：https://blog.csdn.net/iOS_hrh/article/details/50519148

版权

iOS 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

控件

1 篇文章 0 订阅

订阅专栏

动画

1 篇文章 0 订阅

订阅专栏

本文探讨如何利用视错觉原理实现一个独特的SegmentControl。通过分析其复杂性，作者揭示了该控件背后的实现思路，包括三层结构、UIView的clipstoBounds属性的应用、点击事件的处理以及关键代码展示，展示了自定义UI组件的挑战和乐趣。

摘要由CSDN通过智能技术生成

我们先来看一下这个效果，

本人看到这个控件的效果的第一反应是——这个任何初学者应该都会吧，相信绝大多数的开发人员也和我一样，我们再看一张图

在看到这张图的时候，瞬间蒙了，这绝对不是表面这么简单，至少眼见为虚！

然后再根据原文上（http://ios.jobbole.com/83528/）的github地址找源码，对方把实现给封装了，好吧，源码看不到只好自己实现了，再实现之前，我们先聊下面对这个问题时想法。

想法——分析：

1、这里至少有三层，底层黑色label，最上层高亮字体label，以及红色视图view

2、UIView的clipstoBounds 方法应该可以在这里发挥大用

3、同个位置有多层视图，那么要手动设置响应主体，并且这里应该是通过点击去确定点在哪个底层的label上

4、如果用clipstoBounds方法，那么高亮字体的label一定是加到红色视图view上的

5.。。。。。。

6.。。。。。。等等

总之解决问题的过程就像埋坑。

最后，我们来看下实现1.0的核心代码

代码1.视图的创建

- (void)loadCustomView {
    
    NSArray *arrayTitle = @[@"Hello",@"Apple",@"Objc",@"Swift"];
    for (int i = 0; i < 4; i++) {
        
        FirstFloorLabel *label1 = [[FirstFloorLabel alloc] initWithFrame:CGRectMake((kWidth - 320)/2 + i*80, 40, 80, 40)];
        label1.textColor = [UIColor blackColor];
        label1.userInteractionEnabled = YES;
        label1.tag = i+10;
        label1.textAlignment = NSTextAlignmentCenter;
        //label1.backgroundColor = [UIColor grayColor];
        label1.text = arrayTitle[i];
        [self addSubview:label1];
        
        
    }
    buttonView = [[UIView alloc] initWithFrame:CGRectMake((kWidth - 320)/2, 40, 80, 40)];
    buttonView.backgroundColor = [UIColor redColor];
    buttonView.layer.cornerRadius = 8;
    buttonView.clipsToBounds = YES;
    [self addSubview:buttonView];
    
    label2sFatherView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 40)];
    //label2sFatherView.backgroundColor = [UIColor greenColor];
    //label2sFatherView.alpha = 0.5;
    [buttonView addSubview:label2sFatherView];
    for (int i = 0; i < 4; i++) {
        
        SecondFloorLabel *label2 = [[SecondFloorLabel alloc] initWithFrame:CGRectMake(i*80, 0, 80, 40)];
        label2.textColor = [UIColor whiteColor];
        label2.textAlignment = NSTextAlignmentCenter;
        label2.text = arrayTitle[i];
        
        [label2sFatherView addSubview:label2];
        
    }
    
    
}

代码2 动画效果的实现

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    
    for (UIView *subView in self.subviews) {
        
        CGPoint p = [self convertPoint:point toView:subView];
        
        if ([subView pointInside:p withEvent:event] && [subView isKindOfClass:[FirstFloorLabel class]]) {
            [UIView animateWithDuration:0.7 animations:^{
                CGPoint p3 = label2sFatherView.center;
                
                CGPoint p1 = buttonView.center;
                CGPoint p2 = subView.center;
                CGFloat offsetX = p2.x - p1.x;
                p3.x -= offsetX;

                
                buttonView.center = subView.center;
                
            
                label2sFatherView.center = p3;
                

            }];
            return subView;
        }
    }
    return [super hitTest:point withEvent:event];
}

完整的实现1.0会稍后上传到github上