CoreAnimationは折れ線表を実現する
5053 ワード
割引テーブルを1つのviewにカプセル化し、使用者に露出するのはデータを転送する方法が1つしかない.
はい.mファイルで、書き換え-(id)initWithFrame:(CGRect)frameメソッド.
折れ線表で、1、座標軸レイヤーの3つのレイヤーに分けて表すことができます.2、背景色のレイヤー.3、データ折れ線レイヤー.ここで、座標画層はベッセル曲線を設定し、経路に基づいて座標軸を描画します.
背景色レイヤーにはグラデーション効果があり、背景色は座標軸に囲まれた象限内にある必要があります.
最後に、setData:メソッドを呼び出すと、折れ線グラフが描画されます.
//
// ChartLine.h
// BoxingChampion
// : , frame 20, 50
// Created by on 14-12-29.
// Copyright (c) 2014 . All rights reserved.
//
#import <UIKit/UIKit.h>
@interface ChartLine : UIView
/*
:
: , @[@1,@2]
:
*/
-(void)setData:(NSArray *)array_data;
@end
はい.mファイルで、書き換え-(id)initWithFrame:(CGRect)frameメソッド.
折れ線表で、1、座標軸レイヤーの3つのレイヤーに分けて表すことができます.2、背景色のレイヤー.3、データ折れ線レイヤー.ここで、座標画層はベッセル曲線を設定し、経路に基づいて座標軸を描画します.
//
UIBezierPath *path_coordinate=[[UIBezierPath alloc] init];
[path_coordinate moveToPoint:CGPointMake(8, 12)]; //
[path_coordinate addLineToPoint:CGPointMake(10, 10)];
[path_coordinate addLineToPoint:CGPointMake(12, 12)];
[path_coordinate addLineToPoint:CGPointMake(10, 10)];
[path_coordinate addLineToPoint:CGPointMake(10, self.frame.size.height-10)];
[path_coordinate addLineToPoint:CGPointMake(self.frame.size.width-10, self.frame.size.height-10)];
[path_coordinate addLineToPoint:CGPointMake(self.frame.size.width-12, self.frame.size.height-12)];
[path_coordinate addLineToPoint:CGPointMake(self.frame.size.width-10, self.frame.size.height-10)];
[path_coordinate addLineToPoint:CGPointMake(self.frame.size.width-12, self.frame.size.height-8)];
//
CAShapeLayer *layer_coordinate=[CAShapeLayer layer];
layer_coordinate.frame=
CGRectMake(0, 0, self.layer.frame.size.width, self.layer.frame.size.height);
layer_coordinate.lineCap=kCALineCapButt;
layer_coordinate.lineWidth=2;
layer_coordinate.fillColor=[[UIColor clearColor] CGColor];
layer_coordinate.strokeColor=[[UIColor orangeColor] CGColor];
layer_coordinate.strokeEnd=1;
layer_coordinate.path=[path_coordinate CGPath];
背景色レイヤーにはグラデーション効果があり、背景色は座標軸に囲まれた象限内にある必要があります.
//
CAGradientLayer *layer_background=[CAGradientLayer layer];
layer_background.frame=CGRectMake(11, 13, self.layer.frame.size.width-22,self.layer.frame.size.height-24);//
[layer_background setColors:[NSArray arrayWithObjects:
(id)[[UIColor whiteColor] CGColor],
[[UIColor colorWithRed:1.000 green:0.827 blue:0.000 alpha:1.000] CGColor] ,nil]];
layer_background.locations=@[@0.1];// 0.1 location (0,0), (1,1)
layer_background.startPoint=CGPointMake(0,0);
layer_background.endPoint=CGPointMake(0, 1);
ビューレイヤーに2つのレイヤーを追加 //
[self.layer addSublayer:layer_coordinate];
[self.layer addSublayer:layer_background];
最後に、setData:メソッドを呼び出すと、折れ線グラフが描画されます.
-(void)setData:(NSArray *)array_data
{
//
NSInteger i_dataCount=[array_data count];
//
CGFloat f_maxData=[[array_data objectAtIndex:0] floatValue];
CGFloat f_minData=[[array_data objectAtIndex:0]floatValue];
for (NSInteger i=0;i<i_dataCount; i++)
{
if (f_maxData<[[array_data objectAtIndex:i] floatValue])
{
f_maxData=[[array_data objectAtIndex:i] floatValue];
}
if (f_minData>[[array_data objectAtIndex:i] floatValue])
{
f_minData=[[array_data objectAtIndex:i] floatValue];
}
}
//
CGFloat x_perDataPointInterval=(self.layer.frame.size.width-20)/(i_dataCount+1);
if (0==(f_maxData-f_minData))//
{
NSLog(@"Y ");
return;
}
// 1
CGFloat y_perPointInterval=(self.layer.frame.size.height-50)/(f_maxData-f_minData);
//
UIBezierPath *path_data=[[UIBezierPath alloc] init];
//
[path_data moveToPoint:CGPointMake(10+x_perDataPointInterval,
self.layer.frame.size.height-(20+([[array_data objectAtIndex:0] floatValue]-f_minData)*y_perPointInterval))];
for (NSInteger i=0; i<i_dataCount-1; i++)
{
//
[path_data addLineToPoint:CGPointMake(10+x_perDataPointInterval*(i+2),
self.layer.frame.size.height-(20+([[array_data objectAtIndex:(i+1)] floatValue]-f_minData)*y_perPointInterval))];
}
//
CAShapeLayer *layer_data=[CAShapeLayer layer];
layer_data.frame=CGRectMake(0, 0, self.layer.frame.size.width, self.layer.frame.size.height);
layer_data.lineCap=kCALineCapRound;
layer_data.lineWidth=1;
layer_data.fillColor=[[UIColor clearColor] CGColor];
layer_data.strokeColor=[[UIColor redColor] CGColor];
layer_data.strokeEnd=1;
layer_data.path=[path_data CGPath];
[self.layer addSublayer:layer_data];
}