4

Is there any way that I can make simple Accordion View in swift like the one at Calendar Event Create? I don't want to use other third party library as well as other code.

I found many answer at github and over google. But,still don't meet my requirement.

Actually I want to add two table view.

The first one is section which show City such as (New York,Los Angles,Las Vegas,etc)

When I tapped one of the city,it will show store address in tableview which mean there are many stores.

All the store and data will got from json.

The accordion view that i want to do is as simple as the one at Calendar App on iOS. But,the data that I gonna insert into two tableView (Section Header & Inner Records inside each section) which is dynamic.

Any Help? Please Guide me,Help me out.

UPDATE : Please take a look

enter image description here

2
  • Can you pls add a screenshot to understand you better
    – TechBee
    Feb 14, 2016 at 16:50
  • I have updated the question.One city may vary many shop address.
    – Thiha Aung
    Feb 14, 2016 at 16:54

2 Answers 2

4

The answer provided by @TechBee works fine using sections for those interested in not using sections and use cells.

The implementation of an Accordion Menu in Swift can be achieved using UITableView in a very simple way, just having two cells one for the parent cells and another for the childs cells and in every moment keep the track for the cells expanded or collapsed because it can change the indexPath.row every time a new cell is expanded or collapsed.

Using the functions insertRowsAtIndexPaths(_:withRowAnimation:) and deleteRowsAtIndexPaths(_:withRowAnimation:) always inside a block of call to tableView.beginUpdates() and tableView.endUpdates() and updating the total of items in the data source or simulating it changes we can achieve the insertion of deletion of new cells in the UITableView in a very easy way with animation included.

I've implemented myself a repository in Github with all the explained above AccordionMenu using Swift and UITableView in a easy and understandable way. It allows several cells expanded or only one at time.

2
  • Thanks for your easy and understandable way.And Thanks for some customization
    – Thiha Aung
    Mar 21, 2016 at 18:18
  • @6245Htarwara Sure, even you can see the example in the repository I've put in the answer to see it in action :) Mar 21, 2016 at 18:19
2

Try this:

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    arrayForBool = ["0","0","0"]
    sectionTitleArray = ["Pool A","Pool B","Pool C"]
    var tmp1 : NSArray = ["New Zealand","Australia","Bangladesh","Sri Lanka"]
    var string1 = sectionTitleArray .objectAtIndex(0) as? String
    [sectionContentDict .setValue(tmp1, forKey:string1! )]
    var tmp2 : NSArray = ["India","South Africa","UAE","Pakistan"]
    string1 = sectionTitleArray .objectAtIndex(1) as? String
    [sectionContentDict .setValue(tmp2, forKey:string1! )]


    self.tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "Cell")


}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    return sectionTitleArray.count
}


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

    if(arrayForBool .objectAtIndex(section).boolValue == true)
    {
        var tps = sectionTitleArray.objectAtIndex(section) as! String
        var count1 = (sectionContentDict.valueForKey(tps)) as! NSArray
        return count1.count
    }
    return 0;
}

func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    return "ABC"
}

func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {

    return 50
}

func tableView(tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
    return 1
}

func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    if(arrayForBool .objectAtIndex(indexPath.section).boolValue == true){
        return 100
    }

    return 2;
}

func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {

    let headerView = UIView(frame: CGRectMake(0, 0, tableView.frame.size.width, 40))
    headerView.backgroundColor = UIColor.grayColor()
    headerView.tag = section

    let headerString = UILabel(frame: CGRect(x: 10, y: 10, width: tableView.frame.size.width-10, height: 30)) as UILabel
    headerString.text = sectionTitleArray.objectAtIndex(section) as? String
    headerView .addSubview(headerString)

    let headerTapped = UITapGestureRecognizer (target: self, action:"sectionHeaderTapped:")
    headerView .addGestureRecognizer(headerTapped)

    return headerView
}

func sectionHeaderTapped(recognizer: UITapGestureRecognizer) {
    println("Tapping working")
    println(recognizer.view?.tag)

    var indexPath : NSIndexPath = NSIndexPath(forRow: 0, inSection:(recognizer.view?.tag as Int!)!)
    if (indexPath.row == 0) {

        var collapsed = arrayForBool .objectAtIndex(indexPath.section).boolValue
        collapsed       = !collapsed;

        arrayForBool .replaceObjectAtIndex(indexPath.section, withObject: collapsed)
        //reload specific section animated
        var range = NSMakeRange(indexPath.section, 1)
        var sectionToReload = NSIndexSet(indexesInRange: range)
        self.tableView .reloadSections(sectionToReload, withRowAnimation:UITableViewRowAnimation.Fade)
    }

}

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell{

    let CellIdentifier = "Cell"
    var cell :UITableViewCell
    cell = self.tableView.dequeueReusableCellWithIdentifier(CellIdentifier) as! UITableViewCell

    var manyCells : Bool = arrayForBool .objectAtIndex(indexPath.section).boolValue

    if (!manyCells) {
        //  cell.textLabel.text = @"click to enlarge";
    }
    else{
        var content = sectionContentDict .valueForKey(sectionTitleArray.objectAtIndex(indexPath.section) as! String) as! NSArray
        cell.textLabel?.text = content .objectAtIndex(indexPath.row) as? String
        cell.backgroundColor = UIColor .greenColor()
    }

    return cell
}
7
  • I knew that example.That was from github.But,the reason why i am asking this because i want to add the data dynamic from realm swift object.If you need to know,i will update the question.
    – Thiha Aung
    Feb 14, 2016 at 17:03
  • Change only data part for realm. Your business logic should not change.
    – TechBee
    Feb 14, 2016 at 17:05
  • Ok,I will give a try.If that doesn't work out.I will let you know.Is there any other way?like calendar event add?
    – Thiha Aung
    Feb 14, 2016 at 17:09
  • I can't set custom height and width to header view.And how do I disable seperator at header view cell?
    – Thiha Aung
    Feb 20, 2016 at 7:26
  • how to set spacing of left and right of header view in swift? Please take a look at that : puu.sh/nf7cc/168be859ff.png.I only want to set header view like that.not just whole tableview.frame.size.width.I need some spacing with left,right,top and button of the header view.
    – Thiha Aung
    Feb 20, 2016 at 18:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.