谈谈iOS标尺的实现

2018-10-28  本文已影响17人  大神风格化X
image

挺长时间没有撰写技术文章了，今天给大家介绍的虽然不是常用到的标尺demo，但是从这个demo中我们可以学习到别人的绘图是怎么实现的。。。

和以往一样，首先我要强调的是思路。

1.我们要考虑标尺中长短线段不一的实现，还有数字的显示.

先上代码：

``
(.h)

import

typedefNS_ENUM(NSUInteger, RulerDirection) {
RulerDirectionHorizontal, //横向
RulerDirectionVertical, //纵向
};

typedefNS_ENUM(NSUInteger, RulerFace) {
RulerFace_up_left,//横向朝上，纵向朝左
RulerFace_down_right,//横向朝下，纵向朝右
};

typedef struct LineColor {
CGFloat R;
CGFloat G;
CGFloat B;
} CustomeColor;

//c 函数构造结构体
CustomeColorcustomColorMake(CGFloatR,CGFloatG,CGFloatB);
typedef void(^Handler)(void);
@interfaceRullerView :UIView
/**
长刻度的长度 默认 fit(24)
/
@property (nonatomic,assign) float h_height;
/*
短刻度的长度 默认 fit(12)
/
@property (nonatomic,assign) float m_height;
/*
标尺显示的最小值,默认 0
/
@property (nonatomic,assign) NSInteger lockMin;
/*
标尺显示的最大值，默认 360
/
@property (nonatomic,assign) NSInteger lockMax;
/*
一个刻度代表的值是多少，默认 1
/
@property (nonatomic,assign) NSInteger unitValue;
/*
默认横向滚动
/
@property (nonatomic,assign) RulerDirection rulerDirection;
/*
默认朝上，朝左
/
@property (nonatomic,assign) RulerFace rulerFace;
/*
是否显示刻度值
/
@property (nonatomic,assign)BOOL isShowRulerValue;
/*
标尺数字颜色
/
@property (nonatomic,strong) UIColor txtColor;//标尺上数字的颜色
/
标尺线的颜色
/
@property (nonatomic) CustomeColor lineColor;//标尺线的颜色
/*
指针位置，默认居中
/
@property (nonatomic,assign) CGRect pointerFrame;
/*
标尺视图的背景颜色 默认白色
/
@property(nonatomic,strong)UIColorrulerBackgroundColor;

pragma 自定义的宏

//屏幕尺寸

define cy_ScreenW [UIScreen mainScreen].bounds.size.width

define cy_ScreenH [UIScreen mainScreen].bounds.size.height

//视图尺寸

define cy_selfWidth self.bounds.size.width

define cy_selfHeight self.bounds.size.height

//px宏除2

define cy_px(value) (value)/2.0

//按宽度适配

define cy_fit(value) (cy_px(value))*cy_ScreenW/375.0

// RGB颜色转换（16进制->10进制）

define UIColorFromRGB(rgbValue)\


[UIColor colorWithRed:((float)((rgbValue &0xFF0000) >>16))/255.0
green:((float)((rgbValue &0xFF00) >>8))/255.0
blue:((float)(rgbValue &0xFF))/255.0
alpha:1.0]
@end

(.m)

import "RullerView.h"

@interface RullerView()
{
float_unitPX;//标尺单位长度
float_coarseness;//标尺粗
float_num_height;//数字高度
float_num_top;//数字头部位置
float_mark_bottom;//刻度尾部位置
float_short_mark_top;//短刻度头部位置
float_long_mark_top;//长刻度头部位置
}
@end

@implementation RullerView

//绘制方法

//画刻度

for (NSInteger i=_lockMin/_unitValue; i<(_lockMax/_unitValue+1); i++) {

    CGContextSetRGBStrokeColor(context,self.lineColor.R,self.lineColor.G,self.lineColor.B,1.0);

    CGContextSetLineWidth(context, _coarseness);

    CGPointaPoints[2];//X轴

    if (_rulerDirection == RulerDirectionHorizontal) {
        aPoints[0] =CGPointMake(_pointerFrame.origin.x+_pointerFrame.size.width/2.0+_unitPX*i, i%10==0?_long_mark_top:_short_mark_top);//起始点

        aPoints[1] =CGPointMake(_pointerFrame.origin.x+_pointerFrame.size.width/2.0+_unitPX*i, _mark_bottom);//终点
    }else if (_rulerDirection == RulerDirectionVertical) {
        aPoints[0] =CGPointMake(i%10==0?_long_mark_top:_short_mark_top,_pointerFrame.origin.y+_pointerFrame.size.height/2.0+_unitPX*i);//起始点
        aPoints[1] =CGPointMake(_mark_bottom,_pointerFrame.origin.y+_pointerFrame.size.height/2.0+_unitPX*i);//终点
    }else{
        NSAssert(NO,@"error");
    }
    CGContextAddLines(context, aPoints,2);//添加线
    CGContextDrawPath(context, kCGPathStroke); //根据坐标绘制路径
    if(_isShowRulerValue&& i%10==0) {

        NSMutableParagraphStyle *textStyle = [[NSMutableParagraphStyle defaultParagraphStyle] mutableCopy];

        textStyle.lineBreakMode = NSLineBreakByWordWrapping;

        textStyle.alignment = NSTextAlignmentCenter;

        UIFont  *font = [UIFont systemFontOfSize:_num_height];

        NSDictionary *attributes = @{NSForegroundColorAttributeName:self.txtColor,NSFontAttributeName:font, NSParagraphStyleAttributeName:textStyle};

        if (_rulerDirection == RulerDirectionHorizontal) {
            [@(i*_unitValue).stringValue drawInRect:CGRectMake(_pointerFrame.origin.x+_pointerFrame.size.width/2.0+_unitPX*(i-4), _num_top, _unitPX*8, _num_height) withAttributes:attributes];
        }else if (_rulerDirection == RulerDirectionVertical) {
            [@(i*_unitValue).stringValue drawInRect:CGRectMake(_num_top, _pointerFrame.origin.y+_pointerFrame.size.height/2.0+_unitPX*(i-1), _unitPX*8, _num_height) withAttributes:attributes];
        }else{
            NSAssert(NO,@"error");
        }
    }
}

}
//c 函数构造结构体

CustomeColorcustomColorMake(CGFloatR,CGFloatG,CGFloatB) {
CustomeColorl;l.R= R/255.0;l.G= G/255.0;l.B= B/255.0;returnl;
}

@end
``
这里面着重强调的两个点：一个是自定义标尺绘图视图类要暴露一个绘图回调block给外面。

上一篇 下一篇

猜你喜欢

热点阅读