間にスペースを追加する方法はありますUITableViewCellか？

テーブルを作成しました。各セルには画像のみが含まれています。画像は次のようにセルに割り当てられます：

cell.imageView.image = [myImages objectAtIndex:indexPath.row];

しかし、これにより画像が拡大されてセル全体に収まり、画像間にスペースがなくなります。

または、このようにして、画像の高さがたとえば50であり、画像間に20のスペースを追加したいとします。これを達成する方法はありますか？

Swiftバージョン

Swift 3用に更新

この回答は、将来の視聴者のために、元の質問よりも少し一般的です。これはSwiftの基本的なUITableViewの例の補足例です。

概観

基本的な考え方は、各配列項目に対して（新しい行ではなく）新しいセクションを作成することです。次に、セクションヘッダーの高さを使用してセクションの間隔を空けることができます。

どうやってするの

• SwiftのUITableViewの例の説明に従ってプロジェクトを設定します。（つまり、を追加UITableViewし、tableViewコンセントをView Controllerに接続します）。

• Interface Builderで、メインビューの背景色を水色に、UITableView背景色をクリアに変更します。

• ViewController.swiftコードを次のコードに置き換えます。

ViewController.swift

import UIKit
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    // These strings will be the data for the table view cells
    let animals: [String] = ["Horse", "Cow", "Camel", "Sheep", "Goat"]
    
    let cellReuseIdentifier = "cell"
    let cellSpacingHeight: CGFloat = 5
    
    @IBOutlet var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // These tasks can also be done in IB if you prefer.
        self.tableView.register(UITableViewCell.self, forCellReuseIdentifier: cellReuseIdentifier)
        tableView.delegate = self
        tableView.dataSource = self
    }
    
    // MARK: - Table View delegate methods
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return self.animals.count
    }
    
    // There is just one row in every section
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }
    
    // Set the spacing between sections
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return cellSpacingHeight
    }
    
    // Make the background color show through
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let headerView = UIView()
        headerView.backgroundColor = UIColor.clear
        return headerView
    }
    
    // create a cell for each table view row
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell:UITableViewCell = self.tableView.dequeueReusableCell(withIdentifier: cellReuseIdentifier) as UITableViewCell!
        
        // note that indexPath.section is used rather than indexPath.row
        cell.textLabel?.text = self.animals[indexPath.section]
        
        // add border and color
        cell.backgroundColor = UIColor.white
        cell.layer.borderColor = UIColor.black.cgColor
        cell.layer.borderWidth = 1
        cell.layer.cornerRadius = 8
        cell.clipsToBounds = true
        
        return cell
    }
    
    // method to run when table view cell is tapped
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        // note that indexPath.section is used rather than indexPath.row
        print("You tapped cell number \(indexPath.section).")
    }
}

配列要素とタップ位置の適切な値を取得するためでindexPath.sectionはなく、が使用されていることに注意してくださいindexPath.row。

どのようにして右側と左側に余分なパディング/スペースを確保しましたか

どのビューにも間隔を追加するのと同じ方法で取得しました。自動レイアウト制約を使用しました。Interface Builderのピンツールを使用して、先行制約と後続制約の間隔を追加します。

Swiftを使用した私の簡単な解決策：

// Inside UITableViewCell subclass

override func layoutSubviews() {
    super.layoutSubviews()

    contentView.frame = contentView.frame.inset(by: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10))
}

結果

セル間のスペースを追加する方法は、numberOfSections = "Your array count"にし、各セクションに1行のみを含めることです。そして、headerViewとその高さを定義します。

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return yourArry.count;
}

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

-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return cellSpacingHeight;
}

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *v = [UIView new];
    [v setBackgroundColor:[UIColor clearColor]];
    return v;
}

UITableCellsの間に「スペース」を設けるという同じ概念を実行する必要がありました。セル間に文字通りスペースを追加することはできないため、UITableViewのセルの高さを操作し、セルのcontentViewにUIViewを追加することで、スペースを偽造できます。これは、これをシミュレーションしているときに別のテストプロジェクトで作成したプロトタイプのスクリーンショットです。

ここにいくつかのコードがあります（注：デモンストレーション用にハードコードされた値がたくさんあります）

まず、heightForRowAtIndexPathUITableViewCellでさまざまな高さに対応できるようにを設定する必要がありました。

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{

    NSString *text = [self.newsArray  objectAtIndex:[indexPath row]];
    if ([text isEqual:@"December 2012"])
    {
        return 25.0;
    }

    return 80.0;
}

次に、UITableViewCellsのルックアンドフィールを操作したいので、willDisplayCell:(NewsUITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPathメソッドで操作します。

- (void)tableView:(UITableView *)tableView willDisplayCell:(NewsUITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (cell.IsMonth)
    {
        UIImageView *av = [[UIImageView alloc] initWithFrame:CGRectMake(20, 20, 20, 20)];
        av.backgroundColor = [UIColor clearColor];
        av.opaque = NO;
        av.image = [UIImage imageNamed:@"month-bar-bkgd.png"];
        UILabel *monthTextLabel = [[UILabel alloc] init];
        CGFloat font = 11.0f;
        monthTextLabel.font = [BVFont HelveticaNeue:&font];

        cell.backgroundView = av;
        cell.textLabel.font = [BVFont HelveticaNeue:&font];
        cell.textLabel.textColor = [BVFont WebGrey];
    }


    if (indexPath.row != 0)
    {
        cell.contentView.backgroundColor = [UIColor clearColor];
        UIView *whiteRoundedCornerView = [[UIView alloc] initWithFrame:CGRectMake(10,10,300,70)];
        whiteRoundedCornerView.backgroundColor = [UIColor whiteColor];
        whiteRoundedCornerView.layer.masksToBounds = NO;
        whiteRoundedCornerView.layer.cornerRadius = 3.0;
        whiteRoundedCornerView.layer.shadowOffset = CGSizeMake(-1, 1);
        whiteRoundedCornerView.layer.shadowOpacity = 0.5;
        [cell.contentView addSubview:whiteRoundedCornerView];
        [cell.contentView sendSubviewToBack:whiteRoundedCornerView];

    }
}

セルの高さは実際には80.0ですが、私のcontentViewは外観を与える70.0であるため、私はwhiteRoundedCornerViewの高さを70.0にしたことに注意してください。

これをより良く達成する他の方法があるかもしれませんが、それは私がそれを行う方法を見つけた方法です。私はそれが他の誰かを助けることを願っています。

画像にフレームを設定する必要があります。テストされていないコードは

cell.imageView.frame = CGRectOffset(cell.frame, 10, 10);

私は同じ船に乗っていました。最初はセクションに切り替えてみましたが、私の場合は当初思っていたよりも頭痛の種だったので、別の方法を探していました。行の使用を継続するために（モデルデータへのアクセス方法をいじるのではなく）、ここではマスクを使用するだけでうまくいきました。

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath)
{
    let verticalPadding: CGFloat = 8

    let maskLayer = CALayer()
    maskLayer.cornerRadius = 10    //if you want round edges
    maskLayer.backgroundColor = UIColor.black.cgColor
    maskLayer.frame = CGRect(x: cell.bounds.origin.x, y: cell.bounds.origin.y, width: cell.bounds.width, height: cell.bounds.height).insetBy(dx: 0, dy: verticalPadding/2)
    cell.layer.mask = maskLayer
}

あとは、セルの高さを希望の値と同じ値だけ大きくしてverticalPaddingから、セルの端までの間隔があったすべてのビューの間隔がだけ増えるように内部レイアウトを変更するだけverticalPadding/2です。マイナーな欠点：verticalPadding/2tableViewの上部と下部の両方にパディングが発生しますがtableView.contentInset.bottom = -verticalPadding/2、およびを設定することでこれをすばやく修正できますtableView.contentInset.top = -verticalPadding/2。これが誰かに役立つことを願っています！

少しスペースがあり、おそらく最もコストがかからない場合の最も簡単な解決策は、セルの境界線の色をテーブルの背景色に設定し、境界線の幅を設定して目的の結果を得ることです！

    cell.layer.borderColor = blueColor.CGColor
    cell.layer.borderWidth = 3

セクションヘッダー（またはフッター）をまだ使用していない場合は、それらを使用してテーブルセルに任意の間隔を追加できます。n行のセクションを1つ持つ代わりに、それぞれ1行のnセクションのテーブルを作成します。

tableView:heightForHeaderInSection:間隔を制御するメソッドを実装します。

tableView:viewForHeaderInSection:間隔をどのように表示するかを制御するために実装することもできます。

Swift 4でこのように解決しました。

UITableViewCellの拡張を作成し、次のコードを含めます。

override open var frame: CGRect {
    get {
        return super.frame
    }
    set (newFrame) {
        var frame =  newFrame
        frame.origin.y += 10
        frame.origin.x += 10
        frame.size.height -= 15
        frame.size.width -= 2 * 10
        super.frame = frame
    }
}

override open func awakeFromNib() {
    super.awakeFromNib()
    layer.cornerRadius = 15
    layer.masksToBounds = false
}

お役に立てば幸いです。

迅速な例3。

1. シングルビューアプリケーションに折り目を付ける
2. ビューコントローラーにテーブルビューを追加する
3. tablviewセルのカスタムセルを追加する

4. ビューコントローラコードは次のようです

      class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
   
      @IBOutlet weak var tableView: UITableView!
   
   
       var arraytable = [[String:Any]]()
        override func viewDidLoad() {
        super.viewDidLoad()
   
        arraytable = [
        ["title":"About Us","detail":"RA-InfoTech Ltd -A Joint Venture IT Company formed by Bank Asia Ltd"],
        ["title":"Contact","detail":"Bengal Center (4th & 6th Floor), 28, Topkhana Road, Dhaka - 1000, Bangladesh"]
   ]
   
   
   
   
   
   
      tableView.delegate = self
      tableView.dataSource = self
   
      //For Auto Resize Table View Cell;
     tableView.estimatedRowHeight = 44
      tableView.rowHeight = UITableViewAutomaticDimension
   
      //Detault Background clear
      tableView.backgroundColor = UIColor.clear
   }

   func numberOfSections（in tableView：UITableView）-> Int {return arraytable.count}

      func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 1
    }
   
   // Set the spacing between sections
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
   return 10
   }
   
   // Make the background color show through
     func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
   let headerView = UIView()
   headerView.backgroundColor = UIColor.clear
   
   return headerView
   }
   
        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
   
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell")! as! CustomCell
   
        cell.tv_title.text = arraytable[indexPath.section]["title"] as! String?
       cell.tv_details.text = arraytable[indexPath.section]["detail"] as! String?
   
      //label height dynamically increase
      cell.tv_details.numberOfLines = 0
   
   
   
   
      //For bottom border to tv_title;
      let frame =  cell.tv_title.frame
       let bottomLayer = CALayer()
      bottomLayer.frame = CGRect(x: 0, y: frame.height - 1, width: frame.width, height: 1)
       bottomLayer.backgroundColor = UIColor.black.cgColor
      cell.tv_title.layer.addSublayer(bottomLayer)
   
     //borderColor,borderWidth, cornerRadius
     cell.backgroundColor = UIColor.lightGray
     cell.layer.borderColor = UIColor.red.cgColor
     cell.layer.borderWidth = 1
     cell.layer.cornerRadius = 8
     cell.clipsToBounds = true
   
     return cell
     }
   
      }

5. ソース全体をGithubにダウンロード：リンク

   https://github.com/enamul95/CustomSectionTable

私が考えることができる3つのアプローチ：

1. セル全体のビューを希望どおりにレイアウトするカスタムテーブルセルを作成する

2. 画像を画像ビューに追加する代わりに、画像ビューのサブビューをクリアし、画像のUIImageViewと別のビューを追加するカスタムビューを作成します。希望する間隔を提供するシンプルなUIViewを作成し、それをサブビューとして追加します。画像ビュー。

3. UIImageViewを直接操作して固定サイズ/パディングを設定することをお勧めしますが、私はXcodeの近くにいないため、これが機能するかどうか/どのように機能するかを確認できません。

それは理にかなっていますか？

はい、セル内のコンテンツビューにベースビューを1つ作成することで、2つのセル間の間隔（パディング）を増減できます。コンテンツビューの背景にクリアカラーを設定し、ベースビューの高さを調整してセル間にスペースを作成できます。

Husamの回答に基づく：コンテンツビューの代わりにセルレイヤーを使用すると、セル全体と必要に応じてアクセサリの周りに境界線を追加できます。この方法では、セルの下部の制約とそれらのインセットを注意深く調整する必要があります。そうしないと、ビューが適切になりません。

@implementation TableViewCell

- (void)awakeFromNib { 
    ... 
}

- (void) layoutSubviews {
    [super layoutSubviews];

    CGRect newFrame = UIEdgeInsetsInsetRect(self.layer.frame, UIEdgeInsetsMake(4, 0, 4, 0));
    self.layer.frame = newFrame;
}

@end

セクションの行数を1に 変更します。行数ではなくセクション数を変更しました

 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        1
    }

    func numberOfSections(in tableView: UITableView) -> Int {
        return 2
    }

ここに行の間にスペースを入れます

 func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 50
    }

私はこれが最もきれいな解決策だと思います：

class MyTableViewCell: UITableViewCell {
    override func awakeFromNib() {
        super.awakeFromNib()
        layoutMargins = UIEdgeInsetsMake(8, 0, 8, 0)
    }
}

この記事は役に立ちました、それは他の答えが言ったこととほとんど同じですが要約して簡潔です

https://medium.com/@andersongusmao/left-and-right-margins-on-uitableviewcell-595f0ba5f5e6

その中で、彼はそれらを左側と右側にのみ適用しますが、 UIEdgeInsetsMake初期化では4つのポイントすべてにパディングを追加できます。

func UIEdgeInsetsMake（_ top：CGFloat、_ left：CGFloat、_ bottom：CGFloat、_ right：CGFloat）-> UIEdgeInsets

説明
ボタンまたはビューのエッジインセットを作成します。インセットは、長方形の周りのマージンです。正の値は四角形の中心に近いマージンを表し、負の値は中心から離れたマージンを表します。

パラメータ
top：オブジェクトの上部のインセット。
左：オブジェクトの左側
のインセット。下部：オブジェクトの下部のインセット。
right：オブジェクトの右側のインセット。

返し
ボタンまたはビューのインセットを

UIEdgeInsetsを使用して同じことを実現することもできます。

Xcode 9.3 / Swift 4

一連の異なるセクションを使用する必要はありません。他の答えは、フレームインセットとCGRectとレイヤーを使用します... BLAH。良くない; 自動レイアウトとカスタムUITableViewCellを使用します。そのUITableViewCellで、contentView内のコンテンツをサブ表示する代わりに、新しいcontainerView（UIView）を作成し、contentView内のコンテナービューをサブビューし、次にコンテナービュー内のすべてのビューをサブビューします。

ここで間隔を空けるには、次のように、コンテナービューのレイアウトマージンを編集します。

class CustomTableViewCell: UITableViewCell {
    let containerView = UIView()
    let imageView = UIImageView()

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

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)

        containerView.translatesAutoResizingMaskIntoConstraints = false
        imageView.translatesAutoResizingMaskIntoConstraints = false
        contentView.addSubview(containerView)
        containerView.addSubview(imageView)

        contentView.layoutMargins = UIEdgeInsets(top: 15, left: 3, bottom: 15, right: 3)
        containerView.layoutMargins = UIEdgeInsets(top: 15, left: 17, bottom: 15, right: 17) // It isn't really necessary unless you've got an extremely complex table view cell. Otherwise, you could just write e.g. containerView.topAnchor

        let cg = contentView.layoutMarginsGuide
        let lg = containerView.layoutMarginsGuide
        NSLayoutConstraint.activate([
            containerView.topAnchor.constraint(equalTo: cg.topAnchor),
            containerView.leadingAnchor.constraint(equalTo: cg.leadingAnchor),
            containerView.trailingAnchor.constraint(equalTo: cg.trailingAnchor),
            containerView.bottomAnchor.constraint(equalTo: cg.bottomAnchor),
            imageView.topAnchor.constraint(equalTo: lg.topAnchor),
            imageView.leadingAnchor.constraint(equalTo: lg.leadingAnchor),
            imageView.trailingAnchor.constraint(equalTo: lg.trailingAnchor),
            imageView.bottomAnchor.constraint(equalTo: lg.bottomAnchor)
        ])
    }
}

調べてみてください-（UIEdgeInsets）layoutMargins; セル上

私の状況は、カスタムUIViewを使用してセクションのviewForHeaderもセクションのheightForHeaderを返し、高さが40と一定だった場合、すべてのヘッダービューが互いに接触しているデータがないときに問題が発生しました。データがないセクションの間にスペースを空けたいので、「テーブルビュースタイル」プレーンを「グループ」に変更するだけで修正しました。

Objective-Cのランタイム機能のサブクラス化と実行機能を使用して、GitHubで私のソリューションを確認してくださいUITableView。
基本的にはUITableViewRowData、UITableView次のプライベートランタイムヘッダーを検索したAppleのプライベートデータ構造を使用します。

https://github.com/JaviSoto/iOS10-Runtime-Headers/blob/master/Frameworks/UIKit.framework/UITableView.h、

セルのクラスに設定せずに、セルの間隔をレイアウトするために必要なすべてを含む必要なプライベートクラスを次に示します。

https://github.com/JaviSoto/iOS10-Runtime-Headers/blob/master/Frameworks/UIKit.framework/UITableViewRowData.h

これをセルの背景色やアクセサリビューと一緒に機能させるのに問題がありました。最終的に：

1）背景色で設定されたUIViewでセルの背景ビュープロパティを設定します。

let view = UIView()
view.backgroundColor = UIColor.white
self.backgroundView = view

2）このビューをlayoutSubviewsに再配置して、間隔の概念を追加します

override func layoutSubviews() {
    super.layoutSubviews()
    backgroundView?.frame = backgroundView?.frame.inset(by: UIEdgeInsets(top: 2, left: 0, bottom: 0, right: 0)) ?? CGRect.zero
}

ヘッダーをスペーシングとして使用するとうまくいきますが、ヘッダーを使用したくない場合はそうでしょう。そうでなければ、おそらく最良のアイデアではありません。私が考えているのは、カスタムセルビューを作成することです。

例：

• ニブの使用
• コードで

カスタムセルで、セル全体を埋めないように制約付きの背景ビューを作成し、いくつかのパディングを付けます。

次に、テーブルビューの背景を非表示にし、セパレーターを削除します。

// Make the background invisible
tableView.backgroundView = UIView()
tableView.backgroundColor = .clear

// Remove the separators
tableview.separatorStyle = .none

テーブルビューのセクションと行番号を変更したくない場合は（私が行ったように）、次のようにします。

1）テーブルセルビューの下部にImageViewを追加します。

2）テーブルビューの背景色と同じ色にします。

私はこれをアプリケーションで実行しましたが、完全に機能します。乾杯！：D

SWift-5、UITableViewCell間の間隔

    1. use sections instead of rows
    2. each section should return one row
    3. assign your cell data like this e.g [indexPath.section], instead of row
    4. use UITableView Method "heightForHeader" and return your desired spacing
    5. Do rest things as you were doing it

    Thanks!

次のようなコードで制約を使用できます。

class viewCell : UITableViewCell 
{

@IBOutlet weak var container: UIView!



func setShape() {
    self.container.backgroundColor = .blue
    self.container.layer.cornerRadius = 20
    container.translatesAutoresizingMaskIntoConstraints = false
    self.container.widthAnchor.constraint(equalTo:contentView.widthAnchor , constant: -40).isActive = true
           self.container.heightAnchor.constraint(equalTo: contentView.heightAnchor,constant: -20).isActive = true
           self.container.centerXAnchor.constraint(equalTo: contentView.centerXAnchor).isActive = true
           self.container.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true

    }
}

サブビュー（コンテナー）を追加し、その中に他の要素を配置することが重要です。

Swift 5.0ソリューション

UITableViewCellサブクラスの内部

override func layoutSubviews() {
    super.layoutSubviews()
    let padding = UIEdgeInsets(top: 0, left: 0, bottom: 10, right: 0)
    bounds = UIEdgeInsetsInsetRect(bounds, padding)
}

セルに内部ビューを追加してから、独自のビューをセルに追加します。

UITableViewDelegateを使用してheightForRowAtIndexPath、行の高さを返します。

 (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
 return 100.0f ;
}