rakuishi.com

・ iOS

[iOS SDK] UITableViewCell の ImageView の横幅を統一する

現在、Music 内にあるアルバムタイトル・アーティスト名・アートワークを表示するアプリを作成して遊んでいます。

で、標準アプリ Music のように、左に画像を設置しているのですが、なんだか横幅がばらばらに表示されてしまいます。

この横幅を統一するために色々と調べましたのでメモします。

方針

最初は、- (UITableViewCell _)tableView:(UITableView _)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 内で、画像の横幅を設定していたのですが、思ったように動作しませんでした。

UITableViewCell をサブクラス化して、- (void) layoutSubviews クラス内に記述するとうまく動作するようです。

サブクラスの作成

「File」→「New」→「File…」→「iOS」→「Objective-C class」を選択。

  • Class: ImageSizeFixedCell
  • Subclass of: UITableViewCell

と入力して、ファイルを作成します。その際、Targets にチェックが入っていることを確認しておきます。

ImageSizeFixedCell.m に以下のように記述。画像サイズは、各自変更する必要ありです。

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

@implementation ImageSizeFIxedCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // Initialization code
    }
    return self;
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}

- (void) layoutSubviews {
    [super layoutSubviews];

    float desiredWidth = 60;
    float w=self.imageView.frame.size.width;
    if (w>desiredWidth) {
        float widthSub = w - desiredWidth;
        self.imageView.frame = CGRectMake(self.imageView.frame.origin.x,self.imageView.frame.origin.y,desiredWidth,self.imageView.frame.size.height);
        self.textLabel.frame = CGRectMake(self.textLabel.frame.origin.x-widthSub,self.textLabel.frame.origin.y,self.textLabel.frame.size.width+widthSub,self.textLabel.frame.size.height);
        self.detailTextLabel.frame = CGRectMake(self.detailTextLabel.frame.origin.x-widthSub,self.detailTextLabel.frame.origin.y,self.detailTextLabel.frame.size.width+widthSub,self.detailTextLabel.frame.size.height);
        self.imageView.contentMode = UIViewContentModeScaleAspectFit;
    }
}

@end

cellForRowAtIndexPath 内の記述を変更

先ほど作成したサブクラスをインポートします。

#import "ImageSizeFIxedCell.h"

そして、cellForRowAtIndexPath 内の記述を変更していきます。

ここでは、Music 内にあるアルバムタイトル・アーティスト名・アートワークを表示するアプリをそのまま貼り付けています。

cell.textLabel.text, cell.detailTextLabel.text, cell.imageView.image は、各自変更する必要ありです。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";

    // UITableViewCell → ImageSizeFIxedCell
    ImageSizeFIxedCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[ImageSizeFIxedCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];
    }

    MPMediaItemCollection *album = [self.albums objectAtIndex:indexPath.row];
    MPMediaItem *representativeItem = [album representativeItem];

    cell.textLabel.text = [representativeItem valueForProperty: MPMediaItemPropertyAlbumTitle];
    if ([cell.textLabel.text isEqualToString:@""])
        cell.textLabel.text = @"Unknown Album";

    cell.detailTextLabel.text = [representativeItem valueForProperty: MPMediaItemPropertyArtist];
    if ([cell.detailTextLabel.text isEqualToString:@""])
        cell.detailTextLabel.text = @"Unknown Artist";

    MPMediaItemArtwork *artWork = [representativeItem valueForProperty: MPMediaItemPropertyArtwork];

    cell.imageView.image = [artWork imageWithSize: CGSizeMake(60.0f, 60.0f)];

    return cell;
}

すると、以下のように綺麗に横幅が統一された状態で表示されます。

Special Thanks !