iphone - 空のセルの UITableView カスタム ディバイダー

Question

リマインダー、ibooks、メモアプリで見られるテクニックを使ったサンプルを作りたいです。

リマインダー アプリの仕切りでわかるように、次のようになります。

リマインダーには点線の仕切りがあります。
iBook には本棚の仕切りがあります。
問題は、サンプル アプリのようにカスタム ディバイダーを作成する方法です。また、テーブルビューにデータが設定されていない場合でも、仕切りが描画されるはずです。

Answer 1

基本的に、あなたは

- (UITableViewCell *)tableView:(UITableView *)aTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

そのメソッド内で、一番上、一番下、および他のすべてのセルの認識を実装し、それらのバッグ ラウンド イメージを適切に設定します。

本棚のように見えるテーブルビューの場合、一番上を実装し、一番下に棚を配置し、一番上に本棚を配置します。他のすべてについては、標準的な中間の棚を実装し、一番下の棚については、より下に見える棚を実装します。

したがって、 cellForRoatAtIndexPath メソッドで私が話していることを実装するには、このようなコードが機能するはずです

UIImage * rowBackground;
UIImage * selectionBackground;

if( 0 == [indexPath row] ){
    rowBackground       = [UIImage imageNamed:@"listBackingTop.png"];
    selectionBackground = [UIImage imageNamed:@"listBackingTopSelected.png"];
}else if( 217 == [indexPath row] ){
    rowBackground       = [UIImage imageNamed:@"listBackingBottom.png"];
    selectionBackground = [UIImage imageNamed:@"listBackingBottomSelected.png"];
}else{      
    rowBackground       = [UIImage imageNamed:@"listBackingMiddle.png"];
    selectionBackground = [UIImage imageNamed:@"listBackingMiddleSelected.png"];
}

((UIImageView *)cell.backgroundView).image         = rowBackground;
((UIImageView *)cell.selectedBackgroundView).image = selectionBackground;

上記の私の場合、217 が最大行数でした。

必要に応じて、行ごとに異なるバッキングを実装できるように、行数を制御することを忘れないでください。偶数行に青、奇数行にオレンジを使用したテーブルビューを作成しましたが、上部と下部が丸みを帯びており、セルの間に四角形が表示されていました。

さらに複雑なセットアップのコードを次に示します。これは、オレンジとブルーで、上部と下部のセルが中央のセルとは異なるものです。また、セルのよりダイナミックなアバウトを備えています。

UIImage * rowBackground;
UIImage * selectionBackground;
UIImage * accessoryImage;
UIImage * backingImage;

if( 0 == [indexPath row] ){
    rowBackground       = [UIImage imageNamed:@"listTop.png"];
    selectionBackground = [UIImage imageNamed:@"listTopDown.png"];
}else if( (amountRows - 1) == [indexPath row] ){

    if( 0 == ([indexPath row] % 2) ){
        rowBackground       = [UIImage imageNamed:@"listBottomOrange.png"];
        selectionBackground = [UIImage imageNamed:@"listBottomOrangeDown.png"];
    }else{
        rowBackground       = [UIImage imageNamed:@"listBottomBlue.png"];
        selectionBackground = [UIImage imageNamed:@"listBottomBlueDown.png"];
    }

}else{      
    if( 0 == ([indexPath row] % 2) ){
        rowBackground       = [UIImage imageNamed:@"listMiddleOrange.png"];
        selectionBackground = [UIImage imageNamed:@"listMiddleOrangeDown.png"];
    }else{
        rowBackground       = [UIImage imageNamed:@"listMiddleBlue.png"];
        selectionBackground = [UIImage imageNamed:@"listMiddleBlueDown.png"];
    }
}

accessoryImage = [UIImage imageNamed:@"arrow.png"];
accessory.image = accessoryImage;

backingImage = [UIImage imageNamed:@"imageBacking.png"];
imageBack.image = backingImage;

((UIImageView *)cell.backgroundView).image         = rowBackground;
cell.backgroundView.alpha                          = 0.9;
((UIImageView *)cell.selectedBackgroundView).image = selectionBackground;
cell.selectedBackgroundView.alpha                  = 0.5;

私が作ろうとしている主なポイントは、セパレーターをセルから分離しないで、セルバッキングの一部にすることだと思います.

Answer 2

セクション ヘッダーを使用してカスタム ビューを作成してみませんか? .m ファイルで、次を試してください。

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView; {
  return [_cellArray count];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section; {
  return 1;
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section; {
  CustomView * customView = [[CustomView alloc] init]; // This view is the custom view you want, like the dotted lines for example.
  return customView;
}

常に表示されるようにするために、この外観を得るために空白のセルを追加する必要がある場合があります。お役に立てば幸いです!!!

Answer 3

contentSize以下のように追加する必要がUIViewあります。backgroundColorpatternWithColor:["your image with custom divider"]UITableView

CGSize size = _tableView.contentSize;
UIView *footerImageView = [[UIView alloc] initWithFrame:CGRectMake(0.0f, size.height + 50, 320.0f, 600.0f)];
footerImageView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"Shelf.png"]];
[_tableView addSubview:footerImageView];