月別アーカイブ: 2012年9月

[XCode4][UIKit]UITableVieCellをオリジナルのXibを使用して表示する

ここに凄くシンプルな方法が載っていたのでまとめ。
http://stackoverflow.com/で載っていたサンプル

用意するもの

  • Cell.h
  • Cell.m
  • Cell.xib
  • MasterViewController.h
  • MasterViewController.m

前提として・・・

Cellは基本的に表示してる領域+前後いくつか分のViewしか持たないのでCellそのものにデータ保持をさせるのは危険。

やっていること

独立したUITableViewCellクラス専用に1つのXibを持たせる。
Cell自身がXibを呼び出すので、他のサイトで載っているようなController側が保持するやりかたのように複雑風にならない。

Cell.h

#import 

@interface Cell : UITableViewCell
{
    NSNumber* num_;
@private
   IBOutlet UILabel* label1_;
   IBOutlet UILabel* label2_;
   IBOutlet UIImageView* icon_;
}
@property (nonatomic,strong) UILabel* label1;
@property (nonatomic,strong) UILabel* label2;
@property (nonatomic,strong) UIImageView* icon;

+ (Cell*)cellFromNibNamed:(NSString *)nibName;
@end

Cell.m

#import "Cell.h"
@implementation Cell
@synthesize label1 = label1_;
@synthesize label2 = label2_;
@synthesize icon = icon_;

+ (Cell *)cellFromNibNamed:(NSString *)nibName {
    NSArray *nibContents = [[NSBundle mainBundle] loadNibNamed:nibName owner:self options:NULL];
    NSEnumerator *nibEnumerator = [nibContents objectEnumerator];
    Cell *customCell = nil;
    NSObject* nibItem = nil;
    while ((nibItem = [nibEnumerator nextObject]) != nil) {
        if ([nibItem isKindOfClass:[Cell class]]) {
            customCell = (Cell *)nibItem;
            break; // we have a winner
        }
    }
    return customCell;
}
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    NSLog(@"%s",__func__);
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // Initialization code
    }
    return self;
}

+ (Cell *)cellFromNibNamed:(NSString *)nibName について

このクラスメソッドでは何でも格納ObjectNSArray型のnibContentsにXibを読み込んで格納し、列挙型NSEnumeratorを生成。
Xib内に独自Cell用のnibがあったら返してもらい、それを以てCellとし、列挙を離脱。
最後にCellを返して終了する、という流れ。

MasteViewController.m

セルの生成

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    cell = [tableView dequeueReusableCellWithIdentifier:@"orgCell"];
    if (cell == nil) {
        cell = (Cell *)[Cell cellFromNibNamed:@"Cell"];
        cell.label1.text = @"test";
    }
    return cell;
}

ここでは先のCellで定義したNibを読み込んでViewを生成するクラスメソッドを呼び出して格納している。
label1.textはviewに載っているLabelにIBOutletで接続したUILabelへの接続。独自に作ったXibに合わせて変更を。

また、Cellにコントローラを埋める場合はCellの使い回しをセルの種類単位で分けないとぐちゃぐちゃになるとの事。

セルの高さ指定

必ずFloat型の数値を返しておくこと。

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"%s",__func__);
    return 100.0;
}

セル選択時の表現の変更

セルを生成しなおしたりできる。

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"%s",__func__);
}

セルの選択解除時の変更

変更をデフォルトに戻しておく。

-(void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath{
    NSLog(@"%s",__func__);
}

XibのIBOutletの設定

File’sOwnerのCustomClassの項目はMasterViewControllerにしておく。
※これは記述無しでも駆動する。記述が無い場合はデフォルトの値が入るので、Cell
Cell側のCustomClassの項目はCellにする。
Cells'Class

IBOutlet付きのメンバはCell下のLabel – Label1等に直接接続する。
IBOutlet

デフォルトのプロパティに準拠

UITableViewCellはデフォルトでUILabelを複数保持している。
これらのプロパティ名はtextLabelとdetailTextLabelなのでこれらの既存プロパティをメンバ変数と一緒に扱う事で上書きができる。無為にプロパティを増やさなくて済む。

サンプル

Cell.h

@interface Cell : UITableViewCell
{
    NSNumber* num_;
@private
    IBOutlet UILabel* label1_;
    IBOutlet UILabel* label2_;
    IBOutlet UIImageView* icon_;
    IBOutlet UILabel* detailTextLabel_;//既存プロパティ用に追加。
    IBOutlet UILabel* textLabel_;//既存プロパティ用に追加。
}

Cell.m

@synthesize detailTextLabel = detailTextLabel_;
@synthesize textLabel = textLabel_;

これで既存プロパティと共通化させる事が出来た。

下の画像のセル中央部分がオリジナルのプロパティ。右側がデフォルトのプロパティを利用した表示。
Screen Shot 0024-09-09 at 13.51.26

今更きけないUILabelの基本まとめ

概要

UILabelはUIViewを継承したクラス。
固定された内容のテキストを画面に貼付けるのに使う。
生成したら必ずどこぞのコントローラ下のViewにaddSubviewする。

UILabelTest

プロパティ

設定できるプロパティは以下の通り。

text

  • NSStringでパラメータ付与。
  • ラベル内に表示する文字列を指定する。

font

 

  • UIFontで指定。
  • フォントの種類を指定。フォントオブジェクトはその章を参照。
  •  

textColor

   

  • UIColorでパラメータ付与。
  • フォントの色を変える。
  •  

lineBreakMode

   

  • UILineBreakMode定数を指定する。
  • 文字数オーバー時の表現方法を指定。
  •  

enabled

   

  • BOOL指定。
  • グレー反転させて使用不可表現を行う。
  •  

adjustsFontSizeToFitWidth

   

  • BOOL指定。
  • textで指定した文字列がラベルの矩形内に納まる様にアジャストするか否かを指定する。
  • これをYESニシタバアイハlineBreakModeが無効になる。
  •  

baselineAdjustment

   

  • UIBaselineAdjustmentを文字列定数で指定。
  •  

minimumFontSize

   

  • CGFloatで指定。
  • 次に記述するnumberOfLinesが1の時のみ効果が出る。
  •  

numberOfLines

   

  • NSInteger指定。
  • textで指定された文字列を表示する限界の行数を指定する。
  •  

highlightedTextColor

   

  • UIColor指定。
  • ハイライトされた際の文字色を指定する。
  •  

highlighted

   

  • BOOL指定
  • ハイライトするか否かを指定する。
  •  

shadowColor

   

  • UIColor指定。
  • highlightedが有効だと
  •  

shadowOffset

   

  • CGSize指定。
  • CGSizeはCGFloat型のwidthとheightの2部構成。CGSizeMake(w,h)で作成。
  •  

userInteractionEnabled

   

  • BOOL指定。
  • タッチの検出をするか否か。しない、がデフォ。
  •  

メソッド一覧

    drawTextInRect:

    • このメソッドは直接呼ばない方が良い。継承したサブクラスのデフォルトの振舞で描画したい時に呼ばれるべきだ。
    • このメソッドが呼ばれる時、現在の描画コンテキスト(デフォルトの環境とテキストの色で)の設計が完了する。
    • Overrideしたメソッドではsuper使って同名メソッドを発動させよう。

    textRectForBounds:limitedToNumberOfLines:

       

    • ラベルのテキストの矩形(CGRect)を返す。
    • parameter
      • bounds(CGRect)
      •      

        • レシーバの矩形を渡す
      • numberOfLines:(NSInteger)
      •          

        • 最大行数を渡す
    • このメソッドは直接呼ぶべきではない。レシーバに指定した矩形に何かしらの計算を伴う動作をさせる前に、継承したサブクラスがOverrideしたメソッドから呼ぶべきだ。
    • 最大行数を指定するnumberOfLinesパラメータを使って高さの上限を返される矩形に指定できる。
    • メソッドを呼ぶためにはsizeToFitか、sizeThatFitsの呼び出しが先だ。
    • UITableViewCellオブジェクト内のUILabel、またはサイズ指定のないUILabelはセルの寸法ベースのサイズが適用される。
    •    

    UILineBreakModeについて

    矩形に対する文字列幅がオーバーした際の表現方法を指定する。
    もともと行数指定をしてた場合は矩形幅がたらなくなるところまでは大凡共通した仕様で改行が行われる。
    UILineBreakModeCharacterWrapは例外で、Word間で自動改行ではなく、たらなくなった時点で改行が行われるので1単語を切ることになるので注意が必要。
    UILabel_Preview

    typedef enum {
       UILineBreakModeWordWrap = 0,
       UILineBreakModeCharacterWrap,
       UILineBreakModeClip,
       UILineBreakModeHeadTruncation,
       UILineBreakModeTailTruncation,
       UILineBreakModeMiddleTruncation, } UILineBreakMode;
    

    サンプル

    このサンプルを実行すると本記事のトップで表示した画像とおなじViewになる。

    - (void)viewDidLoad
    {
        NSLog(@"%s",__func__);
        [super viewDidLoad];
        
        float margine = 5;
        float y = 5;
        float h = 70;
        CGRect rect1 = CGRectMake(10,y,300,h);
        UILabel* label_UILineBreakModeWordWrap = [[UILabel alloc]initWithFrame:rect1];
        label_UILineBreakModeWordWrap.lineBreakMode = UILineBreakModeWordWrap;
        label_UILineBreakModeWordWrap.text = @"label_UILineBreakModeWordWrapnthis is label_UILineBreakModeWordWrap this is label_UILineBreakModeWordWrap this is label_UILineBreakModeWordWrap this is label_UILineBreakModeWordWrap";
        label_UILineBreakModeWordWrap.font = [UIFont systemFontOfSize:[UIFont smallSystemFontSize]];
        label_UILineBreakModeWordWrap.textAlignment = UITextAlignmentLeft;
        label_UILineBreakModeWordWrap.numberOfLines = 3;
        [self.view addSubview:label_UILineBreakModeWordWrap];
        
        y += h + margine;
        
        CGRect rect2 = CGRectMake(10,y,300,h);
        UILabel* label_UILineBreakModeTailTruncation = [[UILabel alloc]initWithFrame:rect2];
        label_UILineBreakModeTailTruncation.lineBreakMode = UILineBreakModeTailTruncation;
        label_UILineBreakModeTailTruncation.text = @"label_UILineBreakModeTailTruncationnthis is label_UILineBreakModeTailTruncation this is label_UILineBreakModeTailTruncation this is label_UILineBreakModeTailTruncation this is label_UILineBreakModeTailTruncation";
        label_UILineBreakModeTailTruncation.font = [UIFont systemFontOfSize:[UIFont smallSystemFontSize]];
        label_UILineBreakModeTailTruncation.textAlignment = UITextAlignmentLeft;
        label_UILineBreakModeTailTruncation.enabled = NO;
        label_UILineBreakModeTailTruncation.adjustsFontSizeToFitWidth = YES;
        label_UILineBreakModeTailTruncation.baselineAdjustment = UIBaselineAdjustmentAlignBaselines;//UIBaselineAdjustmentNone;//UIBaselineAdjustmentAlignCenters;//
        label_UILineBreakModeTailTruncation.numberOfLines = 3;
        label_UILineBreakModeTailTruncation.highlighted = YES;
        label_UILineBreakModeTailTruncation.shadowColor = [UIColor redColor];
        label_UILineBreakModeTailTruncation.shadowOffset = CGSizeMake(3.0, 2.0);
        [self.view addSubview:label_UILineBreakModeTailTruncation];
    
        y += h + margine;
    
        CGRect rect3 = CGRectMake(10,y,300,h);
        UILabel* label_UILineBreakModeMiddleTruncation = [[UILabel alloc]initWithFrame:rect3];
        label_UILineBreakModeMiddleTruncation.lineBreakMode = UILineBreakModeMiddleTruncation;
        label_UILineBreakModeMiddleTruncation.text = @"label_UILineBreakModeMiddleTruncationnthis is label_UILineBreakModeMiddleTruncation this is label_UILineBreakModeMiddleTruncation this is label_UILineBreakModeMiddleTruncation";
        label_UILineBreakModeMiddleTruncation.font = [UIFont systemFontOfSize:[UIFont smallSystemFontSize]];
        label_UILineBreakModeMiddleTruncation.textAlignment = UITextAlignmentLeft;
        label_UILineBreakModeMiddleTruncation.numberOfLines = 3;
        label_UILineBreakModeMiddleTruncation.highlighted = NO;
        label_UILineBreakModeMiddleTruncation.highlightedTextColor = [UIColor blueColor];
        label_UILineBreakModeMiddleTruncation.shadowColor = [UIColor redColor];
        label_UILineBreakModeMiddleTruncation.shadowOffset = CGSizeMake(3.0, 2.0);
    
        [self.view addSubview:label_UILineBreakModeMiddleTruncation];
        
        y += h + margine;
    
        CGRect rect4 = CGRectMake(10,y,300,h);
        UILabel* label_UILineBreakModeHeadTruncation = [[UILabel alloc]initWithFrame:rect4];
        label_UILineBreakModeHeadTruncation.lineBreakMode = UILineBreakModeHeadTruncation;
        label_UILineBreakModeHeadTruncation.text = @"label_UILineBreakModeHeadTruncationnthis is label_UILineBreakModeHeadTruncation this is label_UILineBreakModeHeadTruncation this is label_UILineBreakModeHeadTruncation";
        label_UILineBreakModeHeadTruncation.font = [UIFont systemFontOfSize:[UIFont smallSystemFontSize]];
        label_UILineBreakModeHeadTruncation.textAlignment = UITextAlignmentLeft;
        label_UILineBreakModeHeadTruncation.numberOfLines = 3;
        label_UILineBreakModeHeadTruncation.highlighted = YES;
        label_UILineBreakModeHeadTruncation.highlightedTextColor = [UIColor blueColor];
        label_UILineBreakModeHeadTruncation.shadowColor = [UIColor redColor];
        label_UILineBreakModeHeadTruncation.shadowOffset = CGSizeMake(3.0, 2.0);
    
        [self.view addSubview:label_UILineBreakModeHeadTruncation];
    
        y += h + margine;
    
        CGRect rect5 = CGRectMake(10,y,300,h);
        UILabel* label_UILineBreakModeClip = [[UILabel alloc]initWithFrame:rect5];
        label_UILineBreakModeClip.lineBreakMode = UILineBreakModeClip;
        label_UILineBreakModeClip.text = @"label_UILineBreakModeClipnthis is label_UILineBreakModeClip this is label_UILineBreakModeClip this is label_UILineBreakModeClip this is label_UILineBreakModeClip";
        label_UILineBreakModeClip.font = [UIFont systemFontOfSize:[UIFont smallSystemFontSize]];
        label_UILineBreakModeClip.textAlignment = UITextAlignmentLeft;
        label_UILineBreakModeClip.numberOfLines = 3;
        label_UILineBreakModeClip.userInteractionEnabled = NO;
        [label_UILineBreakModeClip textRectForBounds:CGRectMake(50,y,100,h) limitedToNumberOfLines:0];
        [self.view addSubview:label_UILineBreakModeClip];
    
        y += h + margine;
    
        CGRect rect6 = CGRectMake(10,y,300,h);
        UILabel* label_UILineBreakModeCharacterWrap = [[UILabel alloc]initWithFrame:rect6];
        label_UILineBreakModeCharacterWrap.lineBreakMode = UILineBreakModeCharacterWrap;
        label_UILineBreakModeCharacterWrap.text = @"label_UILineBreakModeCharacterWrapnthis is label_UILineBreakModeCharacterWrap this is label_UILineBreakModeCharacterWrap this is label_UILineBreakModeCharacterWrap this is label_UILineBreakModeCharacterWrap";
        label_UILineBreakModeCharacterWrap.font = [UIFont systemFontOfSize:[UIFont smallSystemFontSize]];
        label_UILineBreakModeCharacterWrap.textAlignment = UITextAlignmentLeft;
        label_UILineBreakModeCharacterWrap.numberOfLines = 3;
        label_UILineBreakModeCharacterWrap.userInteractionEnabled = YES;
        [label_UILineBreakModeCharacterWrap drawTextInRect:CGRectMake(10,y,100,h)];
        [self.view addSubview:label_UILineBreakModeCharacterWrap];
    }
    

    詳解 Objective-C 2.0 第3版

    Objective-C プログラマーズバイブル