UITableViewをツリー上に表示する。第5回目(見栄えをかっこよく)

iphone

今回でツリーテーブルは、最終回です。
最後は見栄えを少し修正します。えぇ少しです。


変更は３点

  • 色の変更
  • セルとページヘッダーの上下に線を入れる。
  • セクションの背景をグラデーションにする。



色を変更します、CustomCellの色を下記のように変更します。

- (void)setCellSelected:(bool)cellSelected {
    cellSelected_ = cellSelected;
    if (cellSelected_) {
        self.backgroundColor = [UIColor colorWithRed:0.29
                                               green:0.22
                                                blue:0.29
                                               alpha:1.0];
    } else {
        self.backgroundColor = [UIColor colorWithRed:0.19
                                               green:0.22
                                                blue:0.29
                                               alpha:1.0];
    }
}



CustomCellに線を入れます。セルの上端に白い線。セルの下端に黒い線を引くために、下記メソッドを書き足します。

-(void)drawRect:(CGRect)rect {
	// 罫線
    int height = self.frame.size.height;
    int width = self.frame.size.width;
	CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGContextMoveToPoint(context, 0, 0);
	CGContextAddLineToPoint(context, width, 0);
	CGContextSetLineWidth(context, 1.0);
	CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 0.5);
	CGContextStrokePath(context);
    
    CGContextMoveToPoint(context, 0, height);
	CGContextAddLineToPoint(context, width, height);
	CGContextSetLineWidth(context, 1.0);
	CGContextSetRGBStrokeColor(context, 0.0, 0.0, 0.0, 0.5);
	CGContextStrokePath(context);
}



PageHeaderにも同様に線をいれます。

-(void)drawRect:(CGRect)rect {
	// 罫線
    int height = self.frame.size.height;
    int width = self.frame.size.width;
	CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGContextMoveToPoint(context, 0, 0);
	CGContextAddLineToPoint(context, width, 0);
	CGContextSetLineWidth(context, 1.0);
	CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 0.5);
	CGContextStrokePath(context);
    
    CGContextMoveToPoint(context, 0, height);
	CGContextAddLineToPoint(context, width, height);
	CGContextSetLineWidth(context, 1.0);
	CGContextSetRGBStrokeColor(context, 0.0, 0.0, 0.0, 0.5);
	CGContextStrokePath(context);
}



セクションの背景をグラデーションにします。Quartzを使うので、ヘッダーファイルのインクルードとQuartzCore.frameworkをLink Binalyに加えます。そして、背景書の設定をグラデーションするように書き換えます。

#import "SectionHeader.h"
#import <QuartzCore/QuartzCore.h>

@implementation SectionHeader
@synthesize sectionNo = sectionNo_;
@synthesize delegate  = delegate_;

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        float fontSize = 14.0;
        float marginSize = 5.0;
        float iconSize = 10.0;
        float sectionNamePos = marginSize * 2 + iconSize;

        // セルの背景色（グラデーション）
        CAGradientLayer *pageGradient = [CAGradientLayer layer];
        pageGradient.frame = self.frame;
        pageGradient.colors =
        [NSArray arrayWithObjects:
         (id)[UIColor colorWithRed:0.26 green:0.29 blue:0.36 alpha:1.0].CGColor,
         (id)[UIColor colorWithRed:0.22 green:0.25 blue:0.32 alpha:1.0].CGColor,
         nil];
        [self.layer insertSublayer:pageGradient atIndex:0];
　　　　　　　・
　　　　　　　・
　　　　　　　・



以上で完了、動かしてみるとこんな感じになります。



一手間で、だいぶ見栄えがかっこ良くなるものです。
以上で、ツリーテーブルは完成。facebookのUIと同じものが作れそうですね。