What would be the best approach to include multiple labels or textfields in a view?

Question

I need to create a view controller with multiple UILabel or UIbutton (about 20), that open an alert box with an input UITextField on touch. What would be the best approach to do this?

Also, if adding them in a UIScrollView is appropriate, since I won't be able to place all 20 in the storyboard view, how can one make outlet connections to each one of them?

Answer 1

There are 3 general approaches.

1. ScrollView.
2. TableView.
3. StackView (Only iOS 9)

ScrollView

See Fennec's answer.

TableView

There are two approaches to TableViews: Static and Dynamic. If you're always sure there are 20 buttons/labels you can use static TableViews and you won't face the problem you mentioned about scrollViews in IB (because tableViews are scrollable in IB). But if you're not sure that there are always 20 buttons/labels, it's better to use Dynamic tableViews. user3182143's answer covers that up.

StackView

See this tutorial -> Introducing Stack Views

But if it was me, I would have gone with the Dynamic TableView.

Answer 2

If you know something that is going to be repeated some n times, then the best way to add them to the view is by using the UITableView (for vertical views) or UICollectionView (for grid-like views), however, if the items are different and non-repetitive, the best possible case to display them is by using UIScrollView. You add a UIView with scrollView as its child.

Afterwards, you can add more child views in the UIScrollView and increase the dimensions of the Scrollview as soon as more items start to add in it. To increase the ScrollView height or say width, or both, you use contentSize with viewWillLayoutSubviews(). The structure may look like this:

View
--UIScrollView
---UILabel1
---UIImageView
---UITextView
---UIButton

For creating the layout, there are couple of ways: 1. You set simulated size under size inspector to Freeform with the choice of height and width, then add subViews such as UITextView, UILabel and so on. 2. You programmatically add UIScrollView and then other views as subviews of the scroll.

Hope it helps in making you the right choice.

Thanks.

Answer 3

As Pradeep give you the idea for you solution very simply, I tried and I got it.I posted the answer below.It works fine.

OBJECTIVE C

ViewController.m

#import "ViewController.h"

@interface ViewController ()<UITableViewDataSource,UITableViewDelegate>
{
   NSMutableArray *array;
}
@property (strong, nonatomic) IBOutlet UITableView *tableViewData;

@end

@implementation ViewController

@synthesize tableViewData;
- (void)viewDidLoad {
  [super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
   array = [[NSMutableArray alloc]initWithObjects:@"iOS",@"Android",@"Windows",@"Blackberry",@"iPad",@"iPod",@"iWatch",@"iTV",@"iPhone",@"Tablet",@"Lenova",@"Microsoft",@"Honor",@"Samsung",@"Mi4",@"Moto",@"Lava",@"Nokia",@"ASus",@"OnePlus", nil];
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

//UITableView DataSource methods
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
  return 1;
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
   return array.count;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
  static NSString *strCell = @"cell";
  UITableViewCell *cell =  [tableView dequeueReusableCellWithIdentifier:strCell];
  if(cell==nil)
  {
    cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:strCell];
  }
  cell.textLabel.text = array[indexPath.row];
  return cell;
}

//UITableView Delegates Methods
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
   UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"Input" message:@"TextField" preferredStyle:UIAlertControllerStyleAlert];
   [alertController addTextFieldWithConfigurationHandler:^(UITextField *textField)
   {
     textField.placeholder = NSLocalizedString(@"Enter the Product Name", @"Login");
     textField.text = array[indexPath.row];
   }];
    [alertController addTextFieldWithConfigurationHandler:^(UITextField *textField)
    {
     textField.placeholder = NSLocalizedString(@"Enter the Password", @"Password");
     textField.secureTextEntry = YES;
    }];
   UIAlertAction* ok = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:nil];
   [alertController addAction:ok];
   [self presentViewController:alertController animated:YES completion:nil];
}
@end

SWIFT

import UIKit

class ViewController: UIViewController,UITableViewDataSource,UITableViewDelegate {

@IBOutlet var tableViewData: UITableView!

var array : [String] = ["iOS","Android","Windows","Blackberry","iPad","iPod","iWatch","iTV","iPhone","Tablet","Lenova","Microsoft","Honor","Samsung","Mi4","Moto","Lava","Nokia","ASus","OnePlus"]
override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
}

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

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return array.count
}

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

    var cell = tableView.dequeueReusableCellWithIdentifier("CELL") as UITableViewCell?

    if (cell == nil) {
        cell = UITableViewCell(style: UITableViewCellStyle.Value1, reuseIdentifier: "CELL")
    }

    cell?.textLabel?.text = array[indexPath.row] as String
    return cell!
}
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath)
{

    let alertController = UIAlertController(title: "Input", message: "TextField", preferredStyle: .Alert)
    var loginTextField: UITextField?
    alertController.addTextFieldWithConfigurationHandler { (textField) -> Void in
        // Enter the textfiled customization code here.
        loginTextField = textField
        loginTextField?.placeholder = "Enter the product"
        loginTextField?.text = self.array[indexPath.row]
    }
    let defaultAction = UIAlertAction(title: "OK", style: .Default, handler: nil)
    alertController.addAction(defaultAction)

    presentViewController(alertController, animated: true, completion: nil)
}
}

Answer 4

You should use a table view instead. If you have only 20 such items then you can create them in storyboard itself using static table view cells.