web-dev-qa-db-fra.com

Comment mettre des boutons sur UITableView qui ne défileront pas avec le tableau dans iOS

Je veux mettre des boutons sur UITableView qui reste à la même position de l'écran, ne défilera pas avec UITableView. Lorsque j'ai essayé de addSubview boutons, ils sont affichés mais défile avec UITableView.

La raison de mettre des boutons sur UITableView est de laisser l'utilisateur effectuer une action dessus. Je ne parle pas d'avoir des boutons dans la cellule. Ce sont des boutons flottants qui ne bougent jamais leur position.

J'utilise UITableViewController, et je ne veux pas utiliser l'en-tête ou le pied de page à cet effet. Et aussi une autre barre (UIToolbar par exemple) n'est pas une option pour moi.

Merci d'avance.

64
Plan B

Une solution à cela consiste à étendre UIViewController au lieu de UITableViewController. Vous devrez ajouter votre propre vue de table et tout configurer. Ensuite, vous pouvez ajouter vos boutons à la vue du contrôleur de vue au lieu de la vue de table.

26
rmaddy

Si vous utilisez un contrôleur de navigation, vous pouvez y ajouter la vue:

[self.navigationController.view addSubview:yourView];

Exemple:

UIButton *goToTopButton = [UIButton buttonWithType:UIButtonTypeCustom];
goToTopButton.frame = CGRectMake(130, 70, 60, 20);
[goToTopButton setTitle:@"Scroll to top" forState:UIControlStateNormal];
[goToTopButton addTarget:self action:@selector(goToTop) forControlEvents:UIControlEventTouchUpInside];
[goToTopButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[goToTopButton.layer setBorderColor:[[UIColor whiteColor] CGColor]];
goToTopButton.titleLabel.font = [UIFont fontWithName:@"Helvetica-Bold" size:13];
[self.navigationController.view goToTopButton];
86
Yossi

Vous pouvez le faire aussi avec UITableViewController (pas besoin de UIViewController ordinaire, qui imbrique votre table ou VC)

MISE À JOUR iOS11 + en utilisant SafeAreas

vous souhaitez utiliser la mise en page automatique pour garder la vue en bas

{
    [self.view addSubview:self.bottomView];
    [self.bottomView setTranslatesAutoresizingMaskIntoConstraints:NO];
    UILayoutGuide * safe = self.view.safeAreaLayoutGuide;
    [NSLayoutConstraint activateConstraints:@[[safe.trailingAnchor constraintEqualToAnchor:self.bottomView.trailingAnchor],
                                              [safe.bottomAnchor constraintEqualToAnchor:self.bottomView.bottomAnchor],
                                              [safe.leadingAnchor constraintEqualToAnchor:self.bottomView.leadingAnchor]]];
    [self.view layoutIfNeeded];
}

et pour vous assurer que la vue est toujours au-dessus

- (void)viewDidLayoutSubviews {

    [super viewDidLayoutSubviews];

    [self.view bringSubviewToFront:self.bottomView];

}

LA SOLUTION ANCIENNE PRÉCÉDENTE

En faisant défiler le tableau, vous devez ajuster la position de la vue "flottante" et ça ira

Si vous êtes dans un UITableViewController, juste

Si vous voulez faire flotter la vue en haut de l'UITableView

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGRect frame = self.floatingView.frame;
    frame.Origin.y = scrollView.contentOffset.y;
    self.floatingView.frame = frame;

    [self.view bringSubviewToFront:self.floatingView];
}

Si vous voulez faire flotter la vue en bas de UITableView

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGRect frame = self.floatingView.frame;
    frame.Origin.y = scrollView.contentOffset.y + self.tableView.frame.size.height - self.floatingView.frame.size.height;
    self.floatingView.frame = frame;

    [self.view bringSubviewToFront:self.floatingView];
}

Je crois que c'est la vraie réponse à votre question

85
Peter Lapisu

Si vous souhaitez afficher une vue de contrôle statique couvrant une vue de table, vous avez trois options:

1) N'utilisez pas UITableViewController. À la place, créez un UIViewController avec une sous-vue UITableView et placez votre code délégué/source de données Table View dans UIViewController. Cette option peut ou non fonctionner selon l'architecture de votre application. Par exemple, si vous essayez d'implémenter une sous-classe UITableViewController avec beaucoup de logique personnalisée, ce n'est pas idéal.

2) La méthode WWDC 2011. Voir la session 125 de la WWDC 2011 "Modifications, conseils et astuces UITableView" à partir de 32:20. Cette méthode d'ajustement du placement de la vue chaque fois que la vue de la table défile a été recommandée par Apple avant l'introduction d'AutoLayout sur iOS et avant d'avoir autant de tailles d'écran différentes à gérer. Je ne le fais pas Je le recommande car vous gérerez vous-même les positions pour les différentes tailles d'écran.

3) Je recommande d'utiliser un UIViewController avec une vue de conteneur qui contiendra votre UITableViewController. De cette façon, vous pouvez garder la logique de vue de table séparée dans le UITableViewController. Le UIViewController héberge un conteneur "stupide" pour le UITableViewController et il contient également la vue de contrôle statique. Pour ce faire, faites glisser un UIViewController vers votre storyboard et faites-y glisser une "vue conteneur". Supprimez l'UIViewController qui est automatiquement attaché à la vue de conteneur, puis attachez votre contrôleur de vue de table à afficher dans la vue de conteneur en faisant glisser la commande de la vue Contrainer vers le contrôleur de vue de table et en sélectionnant "incorporer". Maintenant, vous pouvez ajouter des contrôles statiques en tant que sous-vues à l'UIViewController qui seront affichées en haut de la vue de table. Cela ressemblera à ceci:

Storyboard For a UITableViewController inside a container view

Je préfère cette méthode car UIViewController peut gérer la logique de contrôle et UITableViewController gère la logique de la vue de table. Certaines autres réponses recommandent ici d'ajouter le contrôle statique en tant que sous-vue à un contrôleur de navigation ou à une fenêtre. Ceux-ci ne fonctionnent que tant que vous n'ajoutez jamais un autre contrôleur de vue au contrôleur de navigation ou à la fenêtre.

44
GingerBreadMane

Pour Swift:

override func scrollViewDidScroll(scrollView: UIScrollView){
    var frame: CGRect = self.floatingView.frame
    frame.Origin.y = scrollView.contentOffset.y
    floatingView.frame = frame

    view.bringSubviewToFront(floatingView)
}

Cette fonction est appelée à chaque défilement. Ensuite, à l'intérieur, vous obtenez le cadre de votre UIView et mettez à jour sa position en fonction du défilement. Votre UIView se déplace constamment avec votre UIScrollView donc pour l'utilisateur, il ressemble à son flottant.

11
Esqarrouth

vous pouvez ajouter des boutons sur UIWindow pas besoin de l'étendre à UIViewController au lieu de UITableviewController.Juste ajouter des boutons sur la fenêtre.

UIWindow *window = [[UIApplication sharedApplication] keyWindow];
UIButton *btn =[UIButton buttonWithType:UIButtonTypeCustom];
[btn setFrame:CGRectMake(60, 200,40, 60)];
[btn addTarget:self action:@selector(btnClicked:) forControlEvents:UIControlEventTouchUpInside];
[window addSubview:btn];
9
ManiaChamp

J'ai créé une bibliothèque afin de faciliter l'ajout d'un bouton flottant au-dessus d'un UITableView / UICollectionView / UIScrollView . Est appelé MEVFloatingButton .

Ce sont les étapes pour l'utiliser.

1- Importer le fichier de catégorie

#import "UIScrollView+FloatingButton.h"

2 - Ajouter délégué et les méthodes de délégué facultatives.

  @interface ViewController () <MEVFloatingButtonDelegate>

  #pragma mark - MEScrollToTopDelegate Methods

  - (void)floatingButton:(UIScrollView *)scrollView didTapButton:(UIButton *)button;

2 - Créez un objet MEVFloatingButton.

MEVFloatingButton *button = [[MEVFloatingButton alloc] init];
button.animationType = MEVFloatingButtonAnimationFromBottom;
button.displayMode = MEVFloatingButtonDisplayModeWhenScrolling;
button.position = MEVFloatingButtonPositionBottomCenter;
button.image = [UIImage imageNamed:@"Icon0"];
button.imageColor = [UIColor groupTableViewBackgroundColor];
button.backgroundColor = [UIColor darkGrayColor];
button.outlineColor = [UIColor darkGrayColor];
button.outlineWidth = 0.0f;
button.imagePadding = 20.0f;
button.horizontalOffset = 20.0f;
button.verticalOffset = -30.0f;
button.rounded = YES;
button.hideWhenScrollToTop = YES;

4 - Attribué le bouton et déléguer à UITableView.

[self.tableView setFloatingButtonView:button];
[self.tableView setFloatingButtonDelegate:self]

Résultats de la démonstration

DemoDemoDemo

8
Manuel Escrig

Je viens de voir les vidéos TableView, Tips and Tricks de la WWDC 2011. Les vues flottantes sont exactement la même chose. Tout ce que vous avez à faire est de ramener le cadre à sa position d'origine sur scrollViewDidScroll.

https://developer.Apple.com/videos/wwdc/2011/

Consultez les vidéos Trucs et astuces de TableViews.

1
user1010819

il y a une meilleure solution pour cela. vous pouvez le faire en désactivant la propriété Auto Layout (button.translatesAutoresizingMaskIntoConstraints = false) du Button correspondant ou de tout UIView pour le bouton flottant:

Swift 4

//create a button or any UIView and add to subview
let button=UIButton.init(type: .system)
button.setTitle("NEXT", for: .normal)
let button.frame.size = CGSize(width: 100, height: 50)
self.view.addSubview(nextButton)

//set constrains
button.translatesAutoresizingMaskIntoConstraints = false
if #available(iOS 11.0, *) {
     button.rightAnchor.constraint(equalTo: tableView.safeAreaLayoutGuide.rightAnchor, constant: -10).isActive = true
     button.bottomAnchor.constraint(equalTo: tableView.safeAreaLayoutGuide.bottomAnchor, constant: -10).isActive = true
} else {
     button.rightAnchor.constraint(equalTo: tableView.layoutMarginsGuide.rightAnchor, constant: 0).isActive = true
     button.bottomAnchor.constraint(equalTo: tableView.layoutMarginsGuide.bottomAnchor, constant: -10).isActive = true
}
1
manukn