最近添加了折线视图的样式，所以在这里用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);
效果图如下：