1
votes

Comment puis-je créer un menu de hamburgers avec un sous-menu à l'intérieur

Je travaille sur une application dans laquelle l'exigence est de créer un menu hamburger avec un sous-menu comme like this

J'ai essayé une méthode différente en utilisant un tableau dans une cellule de vue de tableau, etc. mais je n'ai pas réussi à créer ce menu. si quelqu'un a une solution, recommande-moi


3 commentaires

Essayez d'utiliser des cellules extensibles à l'aide de la vue table


Vous pouvez utiliser un mélange de mise en page automatique, de hauteurs de contrainte et d'animations pour y parvenir. Développer au toucher, réduire à nouveau au toucher en modifiant la hauteur avec l'animation


Je sais que c'est une question technique, mais gardez à l'esprit que les menus Hamburger ne sont pas un concept de navigation standard dans iOS et que d'autres concepts de navigation sont beaucoup plus courants et recommandés. Voir par exemple: Est-il possible d'utiliser les menus hamburger dans iOS?


4 Réponses :


0
votes

Vous devez séparer le processus.

  • Tout d'abord, créez le menu hamburger: pour cela, je recommande d'utiliser cette bibliothèque tierce: https://github.com/John-Lluch/SWRevealViewController Avec l'aide de cela, il est très facile de créer un menu latéral à partir du côté gauche de l'écran. La meilleure chose que vous obtiendrez est un ViewController qui sera responsable du menu, afin que vous puissiez facilement le personnaliser.

  • Deuxièmement, comme mentionné ci-dessous, vous devez utiliser une tableView avec des cellules extensibles. La meilleure façon de faire est de simplement afficher les en-têtes des cellules. Si l'utilisateur appuie sur un en-tête, affichez la cellule réelle. (hauteur de ligne> 0). Il existe un tutoriel à ce sujet: https://www.youtube.com/watch?v=bSKUYRsMCrM


0 commentaires

0
votes

-> vous pouvez créer un menu tiroir coulissant (menu hamburger) en utilisant l'une des bibliothèques suivantes:

https://github.com/jeantimex/ios-swift-collapsible-table-section
https://medium.com/@legonaftik/uitableview-with-collapsible-sections-927d726b985c

-> Sous-menu: Dans le contrôleur de vue tiroir, vous devez ajouter un vue de table et implémentez des sections extensibles / réductibles pour afficher un sous-menu. Vous pouvez suivre n'importe quel didacticiel expliquant les sections de vue de tableau développées-réduites. Certains des liens du didacticiel sont ci-dessous:

1) REFrostedViewController
2) SWRevealViewController or any other


0 commentaires

0
votes

1er Suivez https://github.com/jonkykong/SideMenu .

Et puis pour créer des cellules EXTENSIBLES : -

Il vous suffit de créer 2 cellules dans UITableView (dans Storyboard). Première cellule pour ceux qui ne sont pas extensibles et deuxième cellule pour les extensibles.

class SideMenuTableViewController: UITableViewController {

    // MARK:- Constants And Vars
    var isOurProjectCellExpanded = false
}

class SideMenuTableViewController: UITableViewDataSource, UITableViewDelegate {
      override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cell = tableView.dequeueReusableCell(withIdentifier: "simpleCell", for: indexPath) as! SideMenuBasicTableViewCell
            switch indexPath.row {
            case 0:
                cell.itemName.text = "HOME"
                break
            case 1:
                cell.itemName.text = "About Us"
                break
            case 2:
                if(isOurProjectCellExpanded){
                    //expandedCell
                    let cell = tableView.dequeueReusableCell(withIdentifier: "expandedCell", for: indexPath) as! SideMenuBasicTableViewCell
                    cell.itemName.text = "Our Projects"
                    return cell
                }else{
                    cell.arrowDownImageView.isHidden = false
                    cell.itemName.text = "Our Projects"
                }
                break
            case 3:
                cell.itemName.text = "Bahria Town phase 1-7"
                break
            case 4:
                cell.itemName.text = "Bahria Town phase 8"
                break
            default:
                break
            }
            return cell
        }

     //And in `DidSelectRow` Method
     override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
            if(indexPath.row == 2){
                if(isOurProjectCellExpanded){
                    isOurProjectCellExpanded = false
                    tableView.reloadRows(at: [indexPath], with: .none)
                }else{
                    isOurProjectCellExpanded = true
                    tableView.reloadRows(at: [indexPath], with: .none)
                }
            }else if(indexPath.row == 0){
                // Handle it yourself
            }else if(indexPath.row == 1){
                // Handle it yourself
            }else if(indexPath.row == 3){
                // Handle it yourself
            }else if(indexPath.row == 4){
                // Handle it yourself
            }
        }

    }


0 commentaires

5
votes

Vous pouvez créer une telle structure d'élément comme source de données

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    @IBOutlet var tableView: UITableView!

    private let imgOpen = UIImage(named: "open")
    private let imgClose = UIImage(named: "close")

    private var dataSource = [Item]()

    override func viewDidLoad() {
        super.viewDidLoad()

        self.tableView.register(UITableViewCell.self, forCellReuseIdentifier: "groupCell")
        self.tableView.dataSource = self
        self.tableView.delegate = self

        self.dataSource.append(Item("HOME"))
        self.dataSource.append(Item("ABOUT US"))
        self.dataSource.append(Item("OUR PROJECTS", items: ["Project-1", "Project-2", "..."]))
        self.dataSource.append(Item("BAHRIA TOWN PHASE 1 - 7"))
        self.dataSource.append(Item("BAHRIA TOWN PHASE 8"))
        self.tableView.reloadData()
    }

    func numberOfSections(in tableView: UITableView) -> Int {
        return self.dataSource.count
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        let item = self.dataSource[section]
        if item.isExpanded, let count = item.subItems?.count {
            return count + 1
        }

        return 1
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let item = self.dataSource[indexPath.section]

            let cell = tableView.dequeueReusableCell(withIdentifier: "groupCell", for: indexPath)
            var imageView: UIImageView?
            if indexPath.row > 0, let text = item.subItems?[indexPath.row - 1] {
                cell.textLabel?.text = text
            } else {
                cell.textLabel?.text = item.text
                if item.subItems != nil {
                    imageView = UIImageView(image: item.isExpanded ? self.imgClose : self.imgOpen)
                }
            }
            cell.accessoryView = imageView

            return cell
    }

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let item = self.dataSource[indexPath.section]
        if indexPath.row == 0 && item.subItems != nil {
            self.dataSource[indexPath.section].isExpanded = !item.isExpanded
            let indexSet = IndexSet(integer: indexPath.section)
            tableView.reloadSections(indexSet, with: .automatic)
        } else {
            // non-expandable menu item tapped
        }
    }
}

Utilisation

struct Item {
    let text: String
    var subItems: [String]?
    var isExpanded = false
    init(_ text: String, items: [String]? = nil) {
        self.text = text
        self.subItems = items
    }
}


3 commentaires

Génial. Approche géniale. Aimer.


puis-je obtenir le nom de l'article s'il n'est pas extensible?


Utilisez dataSource avec un index, comme dataSource [index] .text , si vous avez besoin du nom du sous-élément, utilisez dataSource [index] .subItems? [SubRowIndex]