Resolving Design Complexity in the making of Custom Design for iOS App

To be a part of X-Plora is to be a part of challenges, even though my journey with X-Plora hasn’t been long enough but it doesn’t feel the same way. Because of many interesting projects with the trending technological requirement, my time was flying at the speed of an hour per 10 minutes while building the products for X-Plora.

In this article I would like to elaborate, one specific problem of User Interaction Design encountered while developing our base structure (or call It the backbone) of X-Plora. This problem describes the usability and complexity in use of custom design.

In iOS when we need to show a list we use an UITableView object of UIKit framework, which binds the array of data and displays the same in the form of row, which is considered to be the UITableViewCell. Similarly, we also have UICollectionView which has its own UICollectionViewCell but the only difference we face in both of them is in the structure. As UITableView has a linear form having Vertical Direction scroll whereas the UICollectionView could adapt the bi-directional form to be either Vertical or Horizontal scroll. Demonstrating these two views in simple design format.

 

As in the above example we see the visual appearances of the two controller while displaying multiple data or an array of objects. On the left we see the UITableViewCell distributed in four items inside UITableView and on the right is the UICollectionViewCell distributed in twelve items inside UICollectionView. These are simple to create using their delegates methods but when to bring them together and make it a third kind of design which is commonly called as custom design is always a bit tricky. So taking this references and the latest AppStore trend we tend to create a custom design as shown in the below figure which brings the complication in design having UICollectionViewCell items in the UITableViewCell items.

As for the same what we tried to achieve is more complicated in maintaining the references of the data and performing actions when interacted with each of the items. There by following the logical side of it we tried to create a simple UITableView with its delegate method shared in below code.

 



-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 5;
}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return WIDTH;
}


-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
     NSString * const tableIdentifier = @"TableViewCellIdentifier";
    TableViewCell *cell =(TableViewCell *) [tableView dequeueReusableCellWithIdentifier:tableIdentifier];
    
    if (cell == nil) {
        cell = [[TableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:tableIdentifier];
    }
    
    return cell;
}


-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    TableViewCell *cellTemp =(TableViewCell *) cell;
    
    if ([[[arrayExperiences objectAtIndex:indexPath.row] valueForKey:@"data"] count] > 1) {

        cellTemp.pageControlModule.hidden = FALSE;
    }
    else
    {
        cellTemp.pageControlModule.hidden = TRUE;
    }
    cellTemp.pageControlModule.numberOfPages =[[[arrayExperiences objectAtIndex:indexPath.row] valueForKey:@"data"] count];
    [cellTemp setCollectionViewDelegates:self row:(int)indexPath.row];
}


-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
    
}

 

As we can see in the willDisplayCell delegate method of UITableView, we have created a method called in the custom cell class which is used to create the delegates of UICollectionView and connect that individual row with the UICollectionViewCells. Before calling the method during initialization of UITableView when the NIB is launched we are registering our UICollectionViewCell with its specific reusable identifier. You can refer the same in the code of our custom UITableViewCell class.

 



- (void)awakeFromNib {
    [super awakeFromNib];
    // Initialization code
    
    [_collectionModules registerNib:[UINib nibWithNibName:@" CollectionViewCell" bundle:nil] forCellWithReuseIdentifier:@"SubModuleCollectionViewCellIdentifier"];
    
}


-(void)setCollectionViewDelegates:(id<UICollectionViewDataSource,UICollectionViewDelegate>)delegate row:(int)row
{
    [_collectionModules layoutIfNeeded];
    _collectionModules.delegate = delegate;
    _collectionModules.dataSource = delegate;
    _collectionModules.tag = row;
    [_collectionModules reloadData];
    
}

 

Now that we know our UICollectionViewCell has been initialized we tend to call the delegates method of UICollectionView in the same class where we have defined the delegate methods of UITableView. This finally brings the connection among the two and allow us to do horizontal scroll and vertical scroll together in the same. Please check below code for UICollectionView.

 



#pragma mark UICollectionview Delegates
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}


-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 5;
}


-(__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@" CollectionViewCellIdentifier" forIndexPath:indexPath];
    
    return cell;
    
}


- (CGSize)collectionView:(UICollectionView *)collectionView
                  layout:(UICollectionViewLayout*)collectionViewLayout
  sizeForItemAtIndexPath:(NSIndexPath *)indexPath {

    return CGSizeMake(WIDTH, WIDTH*1.2);
}


-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    //Code to execute on the click of UICollectionViewCell
}


 

That looks way simpler but one has to spend some good amount of our time in achieving exactly with the best usability test and performance. The final outcome of our work is shared in the referenced video below. Hopefully you did enjoy this article on resolving design complexity, feel free to subscribe to our newsletter or follow us on social media so not to miss our future blog posts, filled with research and challenges.

See you soon.

Raviraj Jadeja

X-Plora’s senior iOS Developer.

 

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

Related Articles

How to maximize user data?

Museums, tours and other equivalent experiences all face the same challenge: how to extract valuable data from their visitors? Data they can use to better

Subscribe to our Newsletter

Contact us

Cais das Pedras Nº08, 3º Dir. Tras.
4050-465 Porto

hello@goxplora.com

+351 226 002 197

2020 © X-plora. All rights reserved | Privacy Policy