FlexGrid には、セルのコンテンツを完全に制御できる formatItem プロパティがあります。インラインセルテンプレートを追加することで各列をカスタマイズでき、FlexGrid コントロールでのセルの外観を定義できます。列のセルテンプレートを定義するには、画像、テキスト、アイコンなどの入った任意のタイプのコンテンツを追加します。
次の図は、パフォーマンスを表すセルテンプレートとして XuniGauge を設定したときの FlexGrid を示しています。例では、「フィルタ処理」セクションで追加した Customer という cocoa クラスを使用します。
次のコード例は、FlexGrid コントロールにカスタムセル内容を追加する方法を示します。
import UIKit
import XuniFlexGridKit
import XuniGaugeKit
class ViewController: UIViewController
{
var grid = FlexGrid()
override func viewDidLoad()
{
super.viewDidLoad()
// ビューを読み込んだ後の追加セットアップを行います（通常は nib から）。
grid.isReadOnly = true
grid.autoGenerateColumns = false
let c1 = GridColumn()
c1.header = "First Name"
c1.binding = "firstName"
let c2 = GridColumn()
c2.header = "Last Name"
c2.binding = "lastName"
let c3 = GridColumn()
c3.header = "Total Orders"
c3.binding = "orderTotal"
grid.columns.addObject(c1)
grid.columns.addObject(c2)
grid.columns.addObject(c3)
grid.selectionMode = GridSelectionMode.None
grid.itemsSource = FlexGridDataSource.getCustomerData(10)
grid.selectionMode = GridSelectionMode.None
self.view.addSubview(grid)
}
func formatItem(sender: FlexGrid!, panel: GridPanel!, forRange range: GridCellRange!, inContext context: CGContext!) -> Bool {
let col = grid.columns.objectAtIndex(UInt(range.col)) as! GridColumn
if(col.header == "Total Orders"){
let v = panel.getCellDataForRow(range.row, inColumn: range.col, formatted: false)
if(v != nil){
//ヘッダーのパフォーマンスと同じではない場合は列のヘッダーをチェックします
if(v.description != "Total Orders"){
let radialGauge = XuniRadialGauge()
let lower = XuniGaugeRange(gauge: radialGauge)
lower.min = 0
lower.max = 40
lower.color = UIColor(red: CGFloat(0.133), green: CGFloat(0.694), blue: CGFloat(0.298), alpha: CGFloat(1))
let middle = XuniGaugeRange(gauge: radialGauge)
middle.min = 40
middle.max = 80
middle.color = UIColor(red: CGFloat(1), green: CGFloat(0.502), blue: CGFloat(0.502), alpha: CGFloat(1))
var upper = XuniGaugeRange(gauge: radialGauge)
upper.min = 80
upper.max = 100
upper.color = UIColor(red: CGFloat(0), green: CGFloat(0.635), blue: CGFloat(0.91), alpha: CGFloat(1))
radialGauge.ranges.addObject(lower)
radialGauge.ranges.addObject(middle)
radialGauge.ranges.addObject(upper)
radialGauge.showText = XuniShowText.None
radialGauge.thickness = 0.6
radialGauge.min = 0
radialGauge.max = 100
radialGauge.loadAnimation = nil
radialGauge.value = Double(v.description)! * (100.0/90000.0)
radialGauge.showRanges = false
var r : CGRect = panel.getCellRectForRow(range.row, inColumn: range.col)
r.size.width-=4;
r.size.height-=4;
r.origin.x+=2;
r.origin.y+=2;
var t = XuniRect(left: 0.0, top: 0.0, width: Double(r.size.width), height: Double(r.size.height))
radialGauge.rectGauge = t
radialGauge.frame = CGRectMake(0, 0, r.size.width, r.size.height)
radialGauge.backgroundColor = UIColor.clearColor()
var image = UIImage()
image = UIImage(data: radialGauge.getImage())!
image.drawInRect(r)
return true
}
}
}
return false
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
grid.frame = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height/3)
}
func starSizing(g: FlexGrid){
for i : UInt in 0 ..< g.columns.count {
var c = GridColumn()
c = g.columns.objectAtIndex(i) as! GridColumn
c.widthType = GridColumnWidth.Star
c.width = (i == 0) ? 5 : (i == 3) ? 3 : 4
}
}
}
#import "CustomCellsController.h"
#import "FlexGridKit/FlexGridKit.h"
#import "XuniGaugeKit/XuniGaugeKit.h"
#import "CustomerData.h"
@interface CustomCellsController ()
@end
@implementation CustomCellsController
- (void)viewDidLoad {
[super viewDidLoad];
// ビューを読み込んだ後の追加セットアップを行います（通常は nib から）。
FlexGrid *grid = [[FlexGrid alloc] init];
grid.autoGenerateColumns = false;
grid.isReadOnly = true;
grid.delegate = self;
grid.tag = 1;
FlexColumn *c1 = [[FlexColumn alloc] init];
c1.binding = @"customerID";
FlexColumn *c2 = [[FlexColumn alloc] init];
c2.binding = @"first";
FlexColumn *c3 = [[FlexColumn alloc] init];
c3.header = @"performance";
c3.binding = @"weight";
[grid.columns addObject:c1];
[grid.columns addObject:c2];
[grid.columns addObject:c3];
grid.itemsSource = [CustomerData getCustomerData:5];
grid.tag = 1;
[self.view addSubview:grid];
}
- (void)viewDidLayoutSubviews{
[super viewDidLayoutSubviews];
FlexGrid *grid = (FlexGrid*)[self.view viewWithTag:1];
grid.frame = CGRectMake(0, 65, self.view.bounds.size.width, self.view.bounds.size.height - 65);
[grid setNeedsDisplay];
}
-(void)starSizing:(FlexGrid*)g{
for (int i = 0; i < g.columns.count; i++) {
FlexColumn *c = [g.columns objectAtIndex:i];
c.widthType = FlexColumnWidthStar;
c.width = (i == 0) ? 5 : (i == 3) ? 3 : 4;
}
}
- (void)formatItem:(FlexFormatItemEventArgs*)args{
FlexGrid *g = (FlexGrid*)[self.view viewWithTag:1];
FlexColumn *col = [g.columns objectAtIndex:args.col];
if ([col.header isEqualToString:@"performance"]) {
NSObject *v = [args.panel getCellDataForRow:args.row inColumn:args.col formatted:false];
if (v != nil) {
if (![v.description isEqual: @"performance"]){
XuniRadialGauge *radialGauge = [[XuniRadialGauge alloc] init];
radialGauge.showText = XuniShowTextNone;
radialGauge.thickness = 0.6;
radialGauge.min = 0;
radialGauge.max = 100;
radialGauge.loadAnimation = nil;
radialGauge.value =[v.description integerValue]/3;
radialGauge.showRanges = false;
CGRect r = [args.panel getCellRectForRow:args.row inColumn:args.col];
XuniRect *t = [[XuniRect alloc] initLeft:0 top:0 width:r.size.width height:r.size.height];
radialGauge.rectGauge = t;
radialGauge.frame = CGRectMake(0, 0, r.size.width, r.size.height);
//これは、getImage メソッドを使用して、UIImage コントロールで使用される NSData オブジェクトを取得します。これは正しく、問題なく機能します
UIImage *image = [[UIImage alloc] init];
image = [UIImage imageWithData:[radialGauge getImage]];
[image drawInRect:r];
args.cancel = YES;
}
}
}
}
@end