Swift基础之设计折线坐标图

最近添加了折线视图的样式，所以在这里用Swift语言重新再使用设计一下

首先设置纵坐标的数值是：体重

//体重

        let weightLabel = UILabel.init(frame: CGRectMake(0, 10, 60, 30));

        weightLabel.text = "体重(kg)";

        weightLabel.textColor = UIColor.lightGrayColor();

        weightLabel.font = UIFont.systemFontOfSize(12);

        weightLabel.textAlignment = NSTextAlignment.Center;

        weightLabel.adjustsFontSizeToFitWidth = true;

        weightV.addSubview(weightLabel);

然后设计纵向坐标设计(一定要注意设计的顺序结构，否则坐标位置容易出问题)

//纵向

        let vierArray:NSArray = ["90","80","70","60","50","0"];

        for i:Int in 0 ..< vierArray.count {

            //纵坐标值

            let vLabel = UILabel.init(frame: CGRectMake(0, 40+CGFloat(i)*30, 30, 30));

            vLabel.text = vierArray[i] as? String;

            vLabel.font = UIFont.systemFontOfSize(11);

            vLabel.textAlignment = NSTextAlignment.Center;

            vLabel.adjustsFontSizeToFitWidth = true;

            vLabel.textColor = UIColor.lightGrayColor();

            weightV.addSubview(vLabel);

            //横坐标线

            let vLineV = UIView.init(frame: CGRectMake(30, 55+30*CGFloat(i), 260, 1));

            if i==vierArray.count-1 {

                vLineV.backgroundColor = UIColor.blackColor();

            }

            else

            {

                vLineV.backgroundColor = UIColor.lightGrayColor();

            }

            weightV.addSubview(vLineV);

        }

设置横向

//横向

        let hierArray:NSArray = ["0","1","2","3","4","5","6","7","8"];

        for i:Int in 0 ..< hierArray.count {

            //横坐标值

            let hLabel = UILabel.init(frame: CGRectMake(30*CGFloat(i), 40+30*CGFloat(vierArray.count)-15, 30, 30));

            hLabel.text = hierArray[i] as? String;

            hLabel.font = UIFont.systemFontOfSize(11);

            hLabel.textAlignment = NSTextAlignment.Right;

            hLabel.adjustsFontSizeToFitWidth = true;

            hLabel.textColor = UIColor.lightGrayColor();

            weightV.addSubview(hLabel);

            //纵坐标线

            let hLineV = UIView.init(frame: CGRectMake(30+30*CGFloat(i), 40, 1, 30*CGFloat(vierArray.count)-15));

            if i==0 {

                hLineV.backgroundColor = UIColor.blackColor();

            }

            else

            {

                hLineV.backgroundColor = UIColor.lightGrayColor();

            }

            weightV.addSubview(hLineV);

        }

横坐标:年龄

//年龄

        let ageLabel = UILabel.init(frame: CGRectMake(260, 40+30*CGFloat(vierArray.count)-15, 60, 30));

        ageLabel.text = "年龄(岁)";

        ageLabel.textColor = UIColor.lightGrayColor();

        ageLabel.font = UIFont.systemFontOfSize(12);

        ageLabel.textAlignment = NSTextAlignment.Right;

        ageLabel.adjustsFontSizeToFitWidth = true;

        weightV.addSubview(ageLabel);

接下来就是折线的显示了

//创建layer设置属性

        let layerR = CAShapeLayer.init();

        //设置包围的颜色，默认为黑色

        layerR.fillColor = UIColor.clearColor().CGColor;

        //折线宽度

        layerR.lineWidth = 1.0;

        //设置折线颜色

        layerR.strokeColor = UIColor.blueColor().CGColor;

        weightV.layer.addSublayer(layerR);

        //创建贝塞尔路径

        let pathH = UIBezierPath.init();

        //设置起点

        pathH.moveToPoint(CGPointMake(30, 100));

        //添加坐标点

        let xArray:NSArray = [50,70,90,110,130,150,170,190,210,230,250,270];

        let yArray:NSArray = [160,180,200,200,150,120,80,100,130,130,180,110];

        for i:Int in 0 ..< xArray.count {

            pathH.addLineToPoint(CGPointMake((xArray[i] as! CGFloat), (yArray[i] as! CGFloat)));

        }

        layerR.path = pathH.CGPath;

        //创建基础动画,连接个点

        let animationN = CABasicAnimation.init(keyPath: "strokeEnd");

        //设置时间

        animationN.duration = 5;

        //添加动画

        layerR.addAnimation(animationN, forKey: nil);

效果图如下：

源码下载：http://download.csdn.net/detail/hbblzjy/9651941