web-dev-qa-db-fra.com

IOS - Comment créer TableView avec des listes défilables horizontales

J'essaie d'implémenter une vue sous forme de tableau avec des éléments horizontaux défilables (avec un nombre inconnu d'éléments) comme dans l'illustration ci-dessous:

enter image description here

L'interface utilisateur devrait se comporter comme suit:

  1. A l'état init, la cellule du tableau affiche une étiquette et du texte et l'élément de cercle sort du côté droit
  2. Si les utilisateurs glissent de droite à gauche, l'étiquette et le texte s'estompent et la liste horizontale (à l'intérieur de la cellule) prend sa place.

J'ai pensé à utiliser TableView et dequeueReusableCellWithIdentifier et à créer une cellule prototype, mais je dois ensuite me rappeler la position horizontale de la liste et l'initialiser correctement sur cellForRowAtIndexPath, ce qui affectera probablement les performances.

Q: Quelle disposition utiliseriez-vous pour atteindre cet objectif, toute entrée/tutoriel serait apprécié

iosuitableviewswiftlayout
49
Shlomi Schwartz

Utilisez un UITableView et ajoutez un UICollectionView à votre cellule tableView réutilisable. UICollectionView fonctionne de manière similaire à UITableView en ce que les "éléments" (comme les cellules) sont réutilisables et instanciés uniquement lorsqu'ils apparaissent à l'écran. J'ai fait une recherche rapide sur Google pour les tutoriels et j'ai trouvé ICollectionView in UITableViewCell . Vérifiez cela et quelques autres questions de StackOverflow concernant la conception et vous devriez être en or.

50
Andrew Robinson

L'utilisation de UIScrollView peut nécessiter des efforts importants s'il y a une grande quantité d'éléments d'interface utilisateur dans chaque vue de défilement, car vous devez instancier tous ceux-ci à l'avance. Une meilleure solution consiste à définir votre UITableViewCell personnalisé, qui a son propre UITableView mais tourné à 90 degrés pour le défilement horizontal. Les éléments d'interface utilisateur à l'intérieur ne seront créés que lorsqu'ils doivent être affichés à l'aide de dequeueReusableCellWithIdentifier:forIndexPath:. Veuillez consulter un exemple de code sur la création d'une vue de table pivotée à 90 degrés:

iPhone Tableview Utiliser les cellules dans le défilement horizontal et non vertical

6
Xiaojun

Vous pouvez utiliser un objet ScrollView pour le placer dans votre table et définir les valeurs "Verrouillage directionnel activé" et "Paging activés" sur true pour l'affichage en défilement.

4
Calc91

- SwiftUI

Dans swiftUI, vous pouvez utiliser la puissance de Stacks et ScrollView à côté de List (si vous le souhaitez):

struct ContentView: View {

    var verticalData = 0...3
    var horizontalData = 0...15

    var body: some View {
        List(self.verticalData, id: \.self) { vData in
            ScrollView(.horizontal) {
                HStack(spacing: 16) {
                    ForEach(self.horizontalData, id: \.self) { _ in
                        Circle()
                            .foregroundColor(.blue)
                            .frame(width: 40, height: 40, alignment: .center)
                    }
                }
            }
        }
    }
}

Dans cet exemple, j'ai utilisé List pour les données verticales et un ScrollView horizontal contenant une HStack (pile Horizonl) de cercles.

- Exemple

Le code suivant est le seul à reproduire une vue identique à votre illustration (4 ans plus tard sur iPhone Xs):

struct CircleView: View {
    var body: some View {
        Circle()
        .foregroundColor(.blue)
        .frame(width: 80, height: 80, alignment: .center)
    }
}

struct RowView: View {
    var body: some View {
        ScrollView(.horizontal) {
            HStack(spacing: 16) {
                VStack(alignment: .leading, spacing: 4) {
                    Text("Label")
                    Text("Some text here")
                }
                ForEach(0...15, id: \.self) { _ in
                    CircleView()
                }
            }
            .padding(16)
        }
    }
}

struct ContentView: View {

    var body: some View {
        List {
            ForEach(0...3, id: \.self) { _ in
                RowView()
            }.listRowInsets(EdgeInsets())
        }
    }
}

- Résultat

enter image description here

0
Mojtaba Hosseini