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