update: 2012/04/19
reference: I touchs: Filter4Cam 學習之 Scroll Horizontally Tables: Part 2
客製化 TableViewCell 之一
A. 說明
1. 使用 Apple 預設的 cell 樣式, 可以有子標題或圖片, 但是無法在其中嵌入一個
Table View.
2. 在此將簡化架構, 僅供 iPhone 使用, 也讓將來的維護較為容易.(不考慮 iPad)
3. 之後將會建立一個 UITableView, 旋轉後加入成為 cell 的 subview.
(需要覆寫 initWithFrame 方法)
------------------------------------------------------------------------------------
B. 新增 TableViewCell 子類別
(可在其中嵌入水平的 filter Table View)
1. Xcode > File > New > File...
> iOS > Cocoa Touch > Objective-C class > Next
Class: HorizontalTableCell
Subclass of: UITableViewCell // 自行輸入> Next > Create
2. 開啓 HorizontalTableCell.h 檔案, 修改如下:
#import <UIKit/UIKit.h>
//@add
#import "ConstantDefined.h"
//@interface HorizontalTableCell : UITableViewCell
//@update
@interface HorizontalTableCell : UITableViewCell <UITableViewDelegate, UITableViewDataSource>
{
//@add
// we will rotate and add as a subview of our cell
UITableView *filterTableView;
// hold the filters for the category we are in
NSArray *filters;
}
//@add
@property (nonatomic, strong) UITableView *filterTableView;
@property (nonatomic, strong) NSArray *filters;
@end
3. 開啓 HorizontalTableCell.m 檔案, 修改如下:
#import "HorizontalTableCell.h"
@implementation HorizontalTableCell
//@add
@synthesize filterTableView = _filterTableView;
@synthesize filters = _filters;
#pragma mark - Table View Data Source
//@add
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return [self.filters count];
}
//@add
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellIdentifier = @"FilterCell";
// we create a standard UITableViewCell for now
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
if (cell == nil)
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
}
cell.textLabel.text = @"The title of the cell in the table within the table :O";
return cell;
}
//@update: comment it
/*
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
// Initialization code
}
return self;
}
*/
//@update: comment it
/*
- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
[super setSelected:selected animated:animated];
// Configure the view for the selected state
}
*/
#pragma mark - Memory Management
//@add
- (void)dealloc
{
self.filterTableView = nil;
self.filters = nil;
}
@end
------------------------------------------------------------------------------------
C. 定義用來客製化介面(大小, 顏色)的常數
開啓 ConstantDefined.h 檔案, 修改如下:
#ifndef Filter4Cam_ConstantDefined_h
#define Filter4Cam_ConstantDefined_h
//@add
#define kHeadlineSectionHeight 26
#define kRegularSectionHeight 18
////////////////////////////////////////////////////////////////////
//@add: 將 Table View 旋轉成水平向之相關設定值
//
// 嵌在一個 table view row 裡的 table view 之寬度(或旋轉前的 table 長度)
// 在此設為 iPhone 預設的寬度 320 來填滿整個螢幕.
#define kTableLength 320
////////////////////////////////////////////////////////////////////
// 在水平向的 Table 裡, 我們不想要預設的 UITableView cells 大小.
// 原因有二: 1. 因為我們要作成正方形的.
// 2. 即使你的 table 可能是 100 pixels 寬, 但是 cells 將會大於這個值,
// 浪費了記憶體與資源來畫看不到的東西.
//
// 嵌入的 table view 之 cell 的寬度(旋轉之後, 會是 row 的高度)
#define kCellWidth 106
// 嵌入的 table view 之 cell 的高度(旋轉之後, 會是 row 的寬度)
#define kCellHeight 106
//@add: 2012/03/25
////////////////////////////////////////////////////////////////////
// overlay 在最底層 camera 上的原始 table
//
// 設定其 Row 的高度與嵌入的 table 之 cell 的 高度/寬度(正方形) 相同
// 如此 cell 才會完整的位於可捲動的區域內.
#define kOverlayTableViewRowHeight 106
////////////////////////////////////////////////////////////////////
// 為了在水平向的 Table 裡建立稍微小一點的 cell, 我們讓每個 filter 的圖片和標題
// 之間有一些間隔.
//
// 為 cell(filter) 的圖片和標題填上空白
#define kFilterCellVerticalInnerPadding 3
#define kFilterCellHorizontalInnerPadding 3
////////////////////////////////////////////////////////////////////
// 讓標題的可讀性提高
// 藉由設定 cell 左右二邊的空白 pixels 數量, 來明確區別 UILabel 中不同 filter 的 title
//
// 為 filter cell 的標題 Label 填上空白
#define kFilterTitleLabelPadding 4
////////////////////////////////////////////////////////////////////
// 水平 Table View 裡的空白 pixels 數量
//
// 在 row 裡嵌入的 table view 之垂直方向空白 pixels 數量
#define kRowVerticalPadding 0
// 在 row 裡嵌入的 table view 之水平方向空白 pixels 數量
#define kRowHorizontalPadding 0
////////////////////////////////////////////////////////////////////
// 分別為垂直方向與水平方向的 table view 設定背景顏色
// 當使用者在 scroll 可用的 row, 或當 app 載入時; 才可以看到類似的背景顏色
// (而非全白)
//
// 垂直方向 table view 的背景顏色
#define kVerticalTableBackgroundColor [UIColor colorWithRed:0.58823529 green:0.58823529 blue:0.58823529 alpha:1.0]
// 水平方向 table view 的背景顏色(即嵌在垂直 table rows 裡的)
#define kHorizontalTableBackgroundColor [UIColor colorWithRed:0.6745098 green:0.6745098 blue:0.6745098 alpha:1.0]
// 將 Table (最下方)的分隔線設為: 不透明灰 (update: 2012/04/19)
#define kVerticalTableSeparatorColor [UIColor colorWithRed:0.48235294 green:0.48235294 blue:0.48235294 alpha:1.0]
////////////////////////////////////////////////////////////////////
// 當使用者選擇特定的 filter 時, cell 會出現的背景顏色.
// 一般的預設是藍色的, 這樣會破壞整體的設計
//
// 當使用者選擇特定的 filter 時, 水平方向 table view 的背景顏色
// (點選 Filter 時, 圖例的外框顏色)
#define kHorizontalTableSelectedBackgroundColor [UIColor colorWithRed:0.0 green:0.59607843 blue:0.37254902 alpha:1.0]
//@add: 2012/03/25
////////////////////////////////////////////////////////////////////
// Filter Cell 標題標籤的背景顏色
//
#define kFilterCellTitleLabelBackgroundColor [UIColor colorWithRed:0.0 green:0.476 blue:0.0 alpha:0.7]
#endif
------------------------------------------------------------------------------------
D. 開啓 HorizontalTableCell.m 檔案, 修改如下:
....//@add
- (NSString *)reuseIdentifier
{
return @"HorizontalCell";
}
//@add
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
//@add
// we are creating our table horizontally
self.filterTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, kCellHeight, kTableLength)];
// turn off the vertical and horizontal scroll indicators
self.filterTableView.showsVerticalScrollIndicator = NO;
self.filterTableView.showsHorizontalScrollIndicator = NO;
// making a call to Core Graphic’s API in order to
// rotate our view 90 degrees counter clockwise.(逆時針90度)
// iOS 乘法運算效能優於除法
self.filterTableView.transform = CGAffineTransformMakeRotation(-M_PI * 0.5);
// set the table view's frame again
// since we now rotated it we must reset the values of the table
[self.filterTableView setFrame:CGRectMake(kRowHorizontalPadding * 0.5, kRowVerticalPadding * 0.5, kTableLength - kRowHorizontalPadding, kCellHeight)];
self.filterTableView.rowHeight = kCellWidth;
self.filterTableView.backgroundColor = kHorizontalTableBackgroundColor;
self.filterTableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
self.filterTableView.separatorColor = [UIColor clearColor];
// set ourselves as the table's data source and delegate
self.filterTableView.dataSource = self;
self.filterTableView.delegate = self;
[self addSubview:self.filterTableView];
}
return self;
}
....
沒有留言:
張貼留言
注意：只有此網誌的成員可以留言。