ios开发技术收集

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

2018-05-30  本文已影响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地址

上一篇下一篇

猜你喜欢

热点阅读