web-dev-qa-db-fra.com

Comment ajouter un séparateur supplémentaire au sommet d'une UITableView?

J'ai une vue pour l'iPhone qui est fondamentalement divisée en deux, avec un affichage informatif dans la moitié supérieure et une UITableView pour sélectionner des actions dans la moitié inférieure. Le problème est qu’il n’ya pas de bordure ou de séparateur au-dessus de la première cellule de UITableView, le premier élément de la liste a donc l’air amusant. Comment puis-je ajouter un séparateur supplémentaire en haut de la table pour le séparer de la zone d'affichage située au-dessus?

Voici le code pour construire les cellules - c'est assez simple. La mise en page globale est gérée dans un fichier xib.

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

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
    }

    switch(indexPath.row) {
        case 0: {
            cell.textLabel.text = @"Action 1";
            break;
        }
        case 1: {
            cell.textLabel.text = @"Action 2";
            break;
        }
        // etc.......
    }
    return cell;
}
iosobjective-ciphonecocoa-touchuikit
33
richt

Pour reproduire les lignes de séparation iOS standard, j'utilise une ligne de cheveux de 1 px (pas 1 pt) tableHeaderView avec la variable separatorColor de la vue tableau:

// in -viewDidLoad
self.tableView.tableHeaderView = ({UIView *line = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.tableView.frame.size.width, 1 / UIScreen.mainScreen.scale)];
    line.backgroundColor = self.tableView.separatorColor;
    line;
});

Même chose à Swift (merci, Danois Jordan, Yuichi Kato et Tony Merritt):

let px = 1 / UIScreen.main.scale
let frame = CGRect(x: 0, y: 0, width: self.tableView.frame.size.width, height: px)
let line = UIView(frame: frame)
self.tableView.tableHeaderView = line
line.backgroundColor = self.tableView.separatorColor
57
Ortwin Gentz

Je viens de recevoir ce même problème et je me suis rendu compte que le séparateur en haut ne s'affiche que lorsque vous faites défiler le tableau.

Ce que j'ai alors fait était le suivant

  1. Dans Interface Builder, accédez à "Taille de la vue de défilement".
  2. Définissez les insertions de contenu de Top sur 1

Alternativement dans le code que vous pourriez faire

[tableView setContentInset:UIEdgeInsetsMake(1.0, 0.0, 0.0, 0.0)];

REMARQUE: cela ne fonctionne plus pour iOS7 car les séparateurs ne sont plus affichés du tout.

14
Jason

J'ai eu le même problème et je n'ai pas trouvé de réponse. J'ai donc ajouté une ligne au bas de l'en-tête de mon tableau.

CGRect  tableFrame = [[self view] bounds] ; 
CGFloat headerHeight = 100;        
UIView * headerView = [[UIView alloc] initWithFrame:CGRectMake(0,0,tableFrame.size.width, headerHeight)];
// Add stuff to my table header...

// Create separator
UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, headerHeight-1, tableFrame.size.width, 1)] ;
lineView.backgroundColor = [UIColor colorWithRed:224/255.0 green:224/255.0 blue:224/255.0 alpha:1.0];
[headerView addSubview:lineView];

self.tableView.tableHeaderView = headerView;
11
ddiego

J'ai créé une extension UITableView qui affiche un séparateur de style natif au-dessus de UITableView, pendant le défilement du tableau.

Here is how it looks

Voici le code (Swift 3)

fileprivate var _topSeparatorTag = 5432 // choose unused tag

extension UITableView {

    fileprivate var _topSeparator: UIView? {
        return superview?.subviews.filter { $0.tag == _topSeparatorTag }.first
    }

    override open var contentOffset: CGPoint {
        didSet {
            guard let topSeparator = _topSeparator else { return }

            let shouldDisplaySeparator = contentOffset.y > 0

            if shouldDisplaySeparator && topSeparator.alpha == 0 {
                UIView.animate(withDuration: 0.15, animations: {
                    topSeparator.alpha = 1
                })
            } else if !shouldDisplaySeparator && topSeparator.alpha == 1 {
                UIView.animate(withDuration: 0.25, animations: {
                    topSeparator.alpha = 0
                })
            }
        }
    }

    // Adds a separator to the superview at the top of the table
    // This needs the separator insets to be set on the tableView, not the cell itself
    func showTopSeparatorWhenScrolled(_ enabled: Bool) {
        if enabled {
            if _topSeparator == nil {
                let topSeparator = UIView()
                topSeparator.backgroundColor = separatorColor?.withAlpha(newAlpha: 0.85) // because while scrolling, the other separators seem lighter
                topSeparator.translatesAutoresizingMaskIntoConstraints = false

                superview?.addSubview(topSeparator)

                topSeparator.leftAnchor.constraint(equalTo: self.leftAnchor, constant: separatorInset.left).isActive = true
                topSeparator.rightAnchor.constraint(equalTo: self.rightAnchor, constant: separatorInset.right).isActive = true
                topSeparator.topAnchor.constraint(equalTo: self.topAnchor).isActive = true

let onePixelInPoints = CGFloat (1)/UIScreen.main.scale topSeparator.heightAnchor.constraint (equalToConstant: onePixelInPoints) .isActive = true

                topSeparator.tag = _topSeparatorTag
                topSeparator.alpha = 0

                superview?.setNeedsLayout()
            }
        } else {
            _topSeparator?.removeFromSuperview()
        }
    }

    func removeSeparatorsOfEmptyCells() {
        tableFooterView = UIView(frame: .zero)
    }
}

Pour l'activer, appelez simplement tableView.showTopSeparatorWhenScrolled(true) après avoir défini votre delegate pour votre UITableView

2
fl034

En complément de La réponse Ortwin , si vous devez ajouter une marge à votre séparateur supérieur pour s’adapter à l’encart du séparateur, vous devez incorporer votre séparateur supérieur dans une autre vue:

UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.tableView.frame.size.width, 1 / UIScreen.mainScreen.scale)];
UIView *topSeparator = [[UIView alloc] initWithFrame:CGRectMake(self.tableView.separatorInset.left, 0, self.tableView.frame.size.width - self.tableView.separatorInset.left - self.tableView.separatorInset.right, 1 / UIScreen.mainScreen.scale)];
topSeparator.backgroundColor = self.tableView.separatorColor;
[headerView addSubview:topSeparator];
self.tableView.tableHeaderView = headerView;

J'espère que ça aide.

2
Paul Mougin

Swift 4 

extension UITableView {
    func addTableHeaderViewLine() {
        self.tableHeaderView = {
            let line = UIView(frame: CGRect(x: 0, y: 0, width: self.frame.size.width, height: 1 / UIScreen.main.scale))
            line.backgroundColor = self.separatorColor
            return line
        }()
    }
}
2
Vadim Nikolaev

J'ai résolu ce problème en ajoutant une ligne supplémentaire au début du tableau. Il suffit de définir sa hauteur sur 1, de définir le texte sur vide, de désactiver l’interaction de l’utilisateur et de modifier la valeur indexPath.row dans tout le code.

0
lzisko

Ajoutez un séparateur entre la vue d'en-tête et la première ligne: - Dans la méthode Header in section delegate, ajoutez une sous-vue self.separator // @ property (nonatomic, strong) UIImageView * separator;

- (CGFloat)tableView:(UITableView *)tableView
heightForHeaderInSection:(NSInteger)section {

return 41; 
}


- (UIView *)tableView:(UITableView *)tableView
viewForHeaderInSection:(NSInteger)section {

self.headerView = [[UIView alloc] init];
self.headerView.backgroundColor = [UIUtils colorForRGBColor:TIMESHEET_HEADERVIEW_COLOR];

self.separator = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"seperator.png"]];
self.separator.frame = CGRectMake(0,40,self.view.frame.size.width,1);
[self.headerView addSubview:self.separator];
return self.headerView;

}
0
YaBoiSandeep