web-dev-qa-db-ja.com

iPhoneでuitableViewセパレーターをカスタマイズする方法

既定では、uitableviewには単一行の区切り記号があります。

しかし、カスタマイズした行をセパレータとして配置したいです。

出来ますか？どうやって？

iphoneuitableview
64
Sagar R. Kothari

ITableView の separatorColor プロパティを使用してセパレーターの色を変更するだけではなく、 separatorStyle プロパティを- ITableViewCellSeparatorStyleNone そして、次のいずれか：

たとえば、テーブルに現在5行が表示されている場合、9行を表示するように更新でき、インデックス1、3、5、7の行は区切りセルになります。

カスタム ITableViewCell sの作成方法の詳細については、 Table View Programming Guide の ITableViewCellのサブクラス化 を参照してください。

82
Daniel Richardson

より良い解決策は、セルの現在の幅と高さを使用することです。このようなもの：

UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, cell.contentView.frame.size.height - 1.0, cell.contentView.frame.size.width, 1)];

lineView.backgroundColor = [UIColor darkGrayColor];
[cell.contentView addSubview:lineView];
35
Jerry Destremps

異なる行ごとに異なるセパレータ色が必要な場合は、ORタップ時に行が強調表示されているときにセパレータを表示したままにする場合は、これを試してください。

self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

// We have to use the borderColor/Width as opposed to just setting the 
// backgroundColor else the view becomes transparent and disappears during 
// the cell's selected/highlighted animation
UIView *separatorView = [[UIView alloc] initWithFrame:CGRectMake(0, 43, 1024, 1)];
separatorView.layer.borderColor = [UIColor redColor].CGColor;
separatorView.layer.borderWidth = 1.0;
[cell.contentView addSubview:separatorView];

これは、セルの背景色が透明であることを前提としています。

上記のソリューションは、いくつかの広範な実験から生まれました。私の調査結果に関するいくつかの注意事項は、人々を助けると確信しています：

通常の「選択されていない」状態

  • ContentView（コーディングしていない限り、XIBの内容）は通常通りに描画されます
  • SelectedBackgroundViewは非表示です
  • BackgroundViewは表示されます（したがって、contentViewが透明であればbackgroundViewが表示されます（またはbackgroundViewを定義していない場合は、UITableView自体の背景色が表示されます）

セルが選択されている場合、アニメーションなしですぐに以下が発生します：

  • ContentView内のすべてのビュー/サブビューのbackgroundColorはクリア（または透明に設定）され、ラベルなどのテキストの色は選択した色に変更されます。
  • SelectedBackgroundViewが表示されます（このビューは常にセルのフルサイズです（カスタムフレームは無視され、必要に応じてサブビューを使用します）。また、何らかの理由でsubViewsのbackgroundColorが表示されないことに注意してください。 contentViewなど）。 selectedBackgroundViewを定義しなかった場合、Cocoaは青（または灰色）のグラデーション背景を作成/挿入し、これを表示します）
  • BackgroundViewは変更されていません

セルの選択が解除されると、ハイライトを削除するアニメーションが開始されます：

  • SelectedBackgroundView alphaプロパティは、1.0（完全に不透明）から0.0（完全に透明）にアニメーション化されます。
  • BackgroundViewは再び変更されません（したがって、アニメーションはselectedBackgroundViewとbackgroundViewの間のクロスフェードのように見えます）
  • アニメーションが終了すると、contentViewは「選択されていない」状態で再描画され、そのサブビューbackgroundColorが再び表示されます（これにより、アニメーションが恐ろしく見える可能性があるため、UIView.backgroundColorを使用しないことをお勧めしますcontentView）
31
Oliver Pearmain

これらの回答の結果、ハイライト四角形はセルに追加したセパレーターによって上書きされます（少なくとも私のテストではiOS 6で）。セルが1pxで区切られるようにseparatorColorを[UIColor clearColor]に設定する必要があります。その後、ギャップにセパレーターを描画できます。

- (void)viewDidLoad {
    self.tableView.separatorColor = [UIColor clearColor];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    // snip
    CALayer *separator = [CALayer layer];
    separator.backgroundColor = [UIColor redColor].CGColor;
    separator.frame = CGRectMake(0, 43, self.view.frame.size.width, 1);
    [cell.layer addSublayer:separator];
    return cell;
}
13
mxcl

TableViewの次のコードcellForRowAtIndexPathデリゲートを追加して、everyCellに対して高さ1px、幅200pxのカスタム画像ビューを作成します

UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, 200, self.view.bounds.size.width, 1)];
lineView.backgroundColor = [UIColor blackColor];
[cell.contentView addSubview:lineView];

注：パフォーマンスにどれだけ重さがあるかわかりません。

8
carbonr

これが何らかの設定で「自動的に」実行できるかどうかはわかりません。ただし、行区切りをなしに設定することをお勧めします。セルの境界には、実際に必要な行区切りを描画します。

4
Daniel

Swiftでカスタムセルを使用している場合：別のアプローチは、そのセルの上部に線を描画できる関数でUITableViewCellを拡張することです。

import UIKit

extension UITableViewCell {
    func addSeparatorLineToTop(){
        let lineFrame = CGRectMake(0, 0, bounds.size.width, 1)
        let line = UIView(frame: lineFrame)
        line.backgroundColor = UIColor.myGray_300()
        addSubview(line)
    }
}

次に、この行を任意のカスタムセル、たとえばawakeFromNibに追加できます。

override func awakeFromNib() {
    super.awakeFromNib()
    addSeparatorLineToTop()
}

このソリューションは、ストーリーボードを台無しにせず、余分なコードを1行に制限するので便利です。

3
Pbk

IOS 7（GM）でテスト済み：

@implementation MyTableViewController

- (void)viewDidLayoutSubviews {
    for (UIView *view in self.view.subviews) {
        if ([view isKindOfClass:NSClassFromString(@"_UITableViewCellSeparatorView")])
            view.backgroundColor = [UIColor redColor];
    }
}

@end

注：一部の構成では、UITableView movesセル​​の区切り記号が表示されます。これにより、すべてのUITableViewCellsに降りない限り、このコードは機能しません。

1
mxcl

Retinaディスプレイでは、0.5単位のラインを描画しても、アンチエイリアスのために2ピクセルのラインになります。両方のディスプレイで単一のピクセルとしてレンダリングするには、1/4単位上にシフトします。

UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, self.contentView.frame.size.height - (1.0 - 0.25), self.contentView.frame.size.wi
lineView.backgroundColor = [UIColor colorWithRed:(230.0/255.0f) green:(233/255.0f) blue:(237.0/255.0f) alpha:1.0f];
[self.contentView addSubview:lineView];
1
tooluser

以下のGistのセルはUITableViewCellのサブクラスで、各セルは多くのスタイルを持つ独自のセパレータを持つことができます（現在は.Noneと.Defaultのみがサポートされています）。 Swiftで記述されており、自動レイアウトの使用を想定しています。

https://Gist.github.com/evgeniyd/fa36b6f586a5850bca3f

クラスの使用方法：

  1. uITableViewオブジェクトのセパレータースタイルを_UITableViewCellSeparatorStyle.None_に設定します

    _tableView.separatorStyle = .None
_

  2. MPSTableViewCellのサブクラスを作成します

  3. awakeFromNib()内のどこかにセルの区切りスタイルを設定します

注：以下のコードは、セルがxib/storyboardからロードされることを前提としています

_    class FASWorkoutCell: FASTableViewCell {

    required init(coder aDecoder: NSCoder) {
         super.init(coder: aDecoder)
     }

     override func awakeFromNib() {
         super.awakeFromNib()

         separatorType = .Default
     }

     // ...

     }
_
1
Yevhen Dubinin

Swiftバージョン：

private let kSeparatorTag = 123
private let kSeparatorHeight: CGFloat = 1.5

func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath)
{
    if cell.viewWithTag(kSeparatorTag) == nil //add separator only once
    {
        let separatorView = UIView(frame: CGRectMake(0, cell.frame.height - kSeparatorHeight, cell.frame.width, kSeparatorHeight))
        separatorView.tag = kSeparatorId
        separatorView.backgroundColor = UIColor.redColor()
        separatorView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]

        cell.addSubview(separatorView)
    }
}
0
ChikabuZ

カスタマイズされたUITableViewCellを使用する場合、UItableViewCell.xibの下部にUIViewを追加し、背景色を希望の色に設定するだけです。

たとえば、xibでは、下部にUIViewを追加し、高さを1に設定します。自動レイアウトを使用して、左の制約を12、下の制約を0、右の制約を0、高さを1に設定します。

0
Kyle Ju