How do I implement the below view in iOS (Objective-C or Swift)? - ios

Basically I'm trying to implement the feature which is attached as an image. I'm trying to create generic component. Where view can have list of items and minimum that could be shown will be two and there should be a button with 3 more options and click on should expand the view and auto adjust with the container using auto layout. Can any one help me giving brief idea how do I implement this? would be really help full.
Image and Component that I'm trying to implement is as below:

You will use UITableView with 2 UICustomCell one for default view like your image and another for expand view, use NSMutableArray to save flag value that decide to use the first cell or second cell, and in UIButton action reset this array and reload your UITableView.
I hope I help you.

1) If I right understand, the flexible solution it's creating UITableViewCell and UICollectionView as one of subviews (another - UIImageView). UICollectionView has two kinds of cells:
Cell with label - item.
Show more button.
Each time when you press Show more button just can reload UICollectionView without restrictions or insert new items.
But in this case you should manually calculate tableview's height. Implement sizeThatFits in UITableViewCell.
2) Also can add UIStackView and use it for your goal but UIStackView has bad performance.
Hope it helps you!

Related

TableView and CollectionView in the same ViewController with Swift

I'm building my application with Swift and I want to set up TableView and CollectionView in the same ViewController.
The only answer I founded is to setup my CollectionView in the TableViewCell of the TableView.
I did it but it scrolls separately.
The solution I found is to disable CollectionView scrolling and then configure CollectionView's height constraint programmatically by summing heights of the cells. It isn't perfect at all because cells become non reusable (250+).
I'm in desperation because I have seen this setup in many other apps and I think that answer is so simple but I can not find it anywhere.
Can anyone please help me? Thank you a lot!
Another option is to set it up as a single collection view with two sections, one that looks and lays out as a tableview and the other that has the more collection view appearance.
Or set it up as a single table view with two sections, one of which displays two side-by-side images per line (this is the old school way of creating this layout.)
Lots of ways to go about it, depending on what you want to play with and what you want to learn :)
You can put a UITableView and UICollectionView inside a UIViewController, and implement UITableViewDelegate, UITableViewDataSource and UICollectionViewDataSource.
Keys:
Use AutoLayout to make sure tableView has only two rows, and
collectionView takes the rest of area.
Make sure tableView.scrollEnabled = false
Here is a sample, https://www.dropbox.com/s/v6yc40udfk8mqx5/FlexTableCellHeight.zip?dl=0
Set up a blank ViewController. Then place two ContainmentViewControllers inside of the ViewController. Size them however you want based on how much screen you want to the be tableview and how much you want to be collectionview. Then create segues from each containmentViewController to your tableviewcontroller and collectionviewcontroller using embed. This will allow both to be on screen at once and scroll separately.
If you do not need to use a TableViewController and can get away with just a tableview you can also just place one containmentviewcontroller below your tableview and create the embed segue to your collectionviewcontroller.

Implementing scrollable horizontal menu

I am new to iOS and trying to implement something exactly like the scrollable bar with the various sports show here.
I want the user to be able to scroll horizontally through the various options and be able to select one. It can be very simple like the one linked, as long as it is clear what is selected.
I'm not sure where exactly to start. Should I be using a CollectionView?
You are right - UICollectionView is the best option for you. Do set the collectionView's layout to UICollectionViewFlowLayout with horizontal direction.
Setup the UIViewController to be the collectionView's data source and delegate. The selection with tapping will be available immediately provided by default UICollectionView behaviour. The collectionView's delegate will allow you to intercept the event when collection is scrolled to new item so you would be able to determine the new selected item.

How to make cell doesn't scroll along with other cell?

I am making an app that use table View Controller and static cell.
I want to make first cell don't scrolling while other can. This is a picture of what i am talking about.(Sorry for my bad English)
For example as in this picture, I want to make 9gag tab stay when scroll. If you play instragram you will see that when you scrolling the name of user will stay until you scroll into another one. However I want it to stay not changing when it encounter second cell.
Any suggestion?
Using UITableViewController would not help here. You can use these steps to get what you want:
1. Create a UIViewController.
2. Add UITableView as its subview.
3. Add another UIView as UIViewController's view's subview.
4. Using auto layout constraints, you can put UIView above UITableView
This way, you will get a sticky view at the top.
Ok, not exactly sure what you're after but i'll take a stab.
Firstly, if you want the section to remain in place until a new section of items is present, you just need have a look at sections. This is an automatic feature. You may not see it occur until you have plenty of items in the sections.
UITableView With Multiple Sections
There's plenty of stuff about it & not too hard to implement.
My other guess of what you want:
If you want it to remain static regardless of anything, perhaps you could just create a view and place it above the table view. why does it need to be a part of it if it doesn't change?

Is it possible to merge the cells in a UITableView so that i can add some image at the right side?

As seen in the image of my design that i have attached, i want to merge(don't know wether thats the correct word) the first three cells so that i can display an image at the right side in the table itself. Is it possible?
No it's not possible. Instead, you can create first three as one cell(type1), other cells are other type(type2).
Update: see this tutorial for how to create custom cell.
You can create a UIView with fixed dimensions(say, 200x200) having 3 textfields (number, name & uom) to left and add UIImageView to right. Create IBOutlet of this view and name it. Add this view to the header of your UITableview.
self._table.tableHeaderView = yourview;
You should use a UICollectionView instead and apply a custom layout to achieve this.
Collection views provide the same general function as table views
except that a collection view is able to support more than just
single-column layouts. Collection views support customizable layouts
that can be used to implement multi-column grids, tiled layouts,
circular layouts, and many more. You can even change the layout of a
collection view dynamically if you want.
There are many tutorials on the Internet:
http://skeuo.com/uicollectionview-custom-layout-tutorial
http://www.raywenderlich.com/22324/beginning-uicollectionview-in-ios-6-part-12
Another option is to use UITableView and a custom UITableViewCell.
Example:
http://www.idev101.com/code/User_Interface/UITableView/customizing.html
add it in the first cell.The size of you imageview shoud be greater than the cell height.Make sure cell.cliptobounds is set false.Make sure you set the zpositon of imageview to 1 by imageView.layer.zPosiziton = 1.
Actually, you can add your imageView as subview of tableView, so your didSelectRowAtIndexPath: will working as usual

Can I put 2 UITextFields in the same tableViewCell?

Check out this image below, this is what I'm trying to accomplish, but I ran into some problems. The first approach I made was to have an imageView (blue square) and 2 separate tableViews within a scrollView. Each tableViewCell would have textFields inside them. The first issue was when the keyboard came into the view, I would move the view up to make sure the bottom textFields were not covered up. I then wanted to be able to scroll up and down so I could still see the top textFields as well. This didn't work because when I nested the tableView inside the scrollView, The scrollView wouldn't scroll. I was also having a problem with setting the firstResponder to pass from textField to textField on the second table only.
I then decided it would be better to create 1 tableView, and add a custom cell to hold my imageView and two textFields. My question is, is it possible to create that custom cell that will hold my imageView and two textFields? would this be a better approach?
Thanks
Wow, I think your can do it easily by UITableView. All you need to do is customising UITableViewCell.
This is possible using subviews. However, why you aren't considering UIViewController or UIScrollViewController for this design?

Resources