美文网首页ios开发技术收集
简单:iOS做一个字体选择控件:SliderView

简单:iOS做一个字体选择控件:SliderView

作者: 不会抽烟 | 来源:发表于2018-05-30 10:35 被阅读3次
    看一下效果: SliderView.png

    简单分析一下

    一个拖拽视图: image.png 三个Label: image.png

    一个刻度根视图:


    image.png

    三个手势:
    ①:小圆点的拖拽手势
    ②:整个视图的点击手势

    需要注意的:拖拽或者点击结束以后小圆点必须确定在某一个刻度上。所以我们需要根据刻度分成相应的区间如图示,上区间对应下刻度点,当手势结束时根据所在的区间将原点移动到对应的刻度点上,并保存当前刻度。


    image.png

    接下来开始做:

    一、懒加载创建需要的视图并设置相应的属性:

          拖拽小圆点
      - (UIImageView *)controlPoint {
        if (!_controlPoint) {
            _controlPoint = [[UIImageView alloc]init];
            _controlPoint.frame = CGRectMake(20 + (SCREEN_WIDTH - 60) / 6.f, 47, 26, 26);
            _controlPoint.backgroundColor = [UIColor colorWithRed:36.0/255.f green:159.0/255.f  blue:244.0/255.f  alpha:1.0f];
            _controlPoint.layer.cornerRadius = 13;
            _controlPoint.layer.masksToBounds = YES;
            _controlPoint.userInteractionEnabled = YES;
            [self setShadowForView:_controlPoint];
            //给小点设置拖拽手势
            UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(panGesture:)];
            [_controlPoint addGestureRecognizer:panGesture];
        }
        return _controlPoint;
    }
    
      刻度根视图
    - (UIView *)baseLineView {
        if (!_baseLineView) {
            _baseLineView = [[UIView alloc]init];
            UIColor *color = [UIColor colorWithRed:81.0/255.0 green:81.0/255.0 blue:81.0/255.0 alpha:1.0];
            _baseLineView.backgroundColor = color;
            _baseLineView.frame = CGRectMake(30, 60, SCREEN_WIDTH - 60, 0.5);
            for (int i = 0; i < 7; i++) {
                UIView *line = [[UIView alloc]init];
                line.backgroundColor = color;
                line.frame = CGRectMake(30 + i * (SCREEN_WIDTH - 60) / 6.f, 55, 0.5, 10);
                [self addSubview:line];
            }
        }
        return _baseLineView;
    }
    
    需要的label
    - (UILabel *)labels {
        if (!_labels) {
            _labels = [[UILabel alloc]init];
            _labels.frame = CGRectMake(15, 25, 30, 15);
            _labels.font = [UIFont boldSystemFontOfSize:16.f];
            _labels.textAlignment = NSTextAlignmentCenter;
            _labels.text = @"A";
            UILabel *standard = [[UILabel alloc]init];
            standard.frame = CGRectMake(10 + (SCREEN_WIDTH - 60) / 6.f, 20, 40, 20);
            standard.font = [UIFont boldSystemFontOfSize:17.f];
            standard.textAlignment = NSTextAlignmentCenter;
            standard.text = @"标准";
            [self addSubview:standard];
            UILabel *max = [[UILabel alloc]init];
            max.frame = CGRectMake(SCREEN_WIDTH - 20 - 30, 20, 40, 20);
            max.font = [UIFont boldSystemFontOfSize:22.f];
            max.textAlignment = NSTextAlignmentCenter;
            max.text = @"A";
            [self addSubview:max];
        }
        return _labels;
    }
    

    二、处理手势:

    /处理单击手势
    - (void)onTap:(UITapGestureRecognizer *)tap {
        CGPoint locationPoint = [tap locationInView:self.self];
        if (locationPoint.x >= 28 && locationPoint.x <= self.frame.size.width - 28) {
            if (tap.state == UIGestureRecognizerStateEnded) {
                [self changeControlWithPoint:locationPoint];
            }
        }
    }
    
    //处理拖拽手势
    - (void)panGesture:(UIPanGestureRecognizer *)pan {
        CGPoint locationPoint = [pan locationInView:self];
        if (locationPoint.x >= 28 && locationPoint.x <= self.frame.size.width - 28) {
            self.controlPoint.center = CGPointMake(locationPoint.x, self.baseLineView.center.y);
            if (pan.state == UIGestureRecognizerStateEnded) {
                [self changeControlWithPoint:locationPoint];
            }
        }
    }
    
    //根据最后手势结束的位置选择相应的刻度
    - (void)changeControlWithPoint:(CGPoint)locationPoint {
        CGFloat X = locationPoint.x;
        CGFloat lineW = (SCREEN_WIDTH - 60);
        CGFloat onePointX   = 28;
        CGFloat twoPointX   = 30 + lineW / 12.f;
        CGFloat threePointX = 30 + lineW / 12.f * 3.f;
        CGFloat fourPonitX  = 30 + lineW / 12.f * 5;
        CGFloat fivePointX  = 30 + lineW / 12.f * 7;
        CGFloat sixPointX   = 30 + lineW / 12.f * 9;
        CGFloat sevenPointX = 30 + lineW / 12.f * 11;
        CGFloat pointY = self.baseLineView.center.y;
        if (X >= onePointX && X < twoPointX) {
            self.controlPoint.center = CGPointMake(30, pointY);
        }else if (X >= twoPointX && X < threePointX) {
            self.controlPoint.center = CGPointMake(30 + lineW / 6.f, pointY);
        }else if (X >= threePointX && X < fourPonitX) {
            self.controlPoint.center = CGPointMake(30 + lineW / 6.f * 2, pointY);
        }else if (X>= fourPonitX && X < fivePointX) {
            self.controlPoint.center = CGPointMake(30 + lineW / 6.f * 3, pointY);
        }else if (X >= fivePointX && X < sixPointX) {
            self.controlPoint.center = CGPointMake(30 + lineW / 6.f * 4, pointY);
        }else if(X >= sixPointX && X < sevenPointX) {
            self.controlPoint.center = CGPointMake(30 + lineW / 6.f * 5, pointY);
        }else {
           self.controlPoint.center  = CGPointMake(30 + lineW / 6.f * 6, pointY);
        }
    }
    

    最后附上demo地址:demo地址

    相关文章

      网友评论

        本文标题:简单:iOS做一个字体选择控件:SliderView

        本文链接:https://www.haomeiwen.com/subject/jnqtsftx.html