UITableView additional information before detailed page? - ios

I have a scenario where my table view output will be in the following format:
INC123 >
INC234 >
INC777 >
When an option is selected, the details about the ticket (selected option) is displayed.
What I would like to have is:
INC123 >
(Short description aboutt this, both under one table cell but the short description can be greyed out or lighter than the ticket number
INC234 >
(Short description about this)
INC777 >
(Short description about this)
Is it possible to implement this? Please guide me on this, your help is greatly appreciated.

Yes, it is entirely possible. Implement this into your cellForRowAtIndexPath method:
cell.textLabel.text = INC_STRING_OBJECT;
cell.detailTextLabel.text = INC_STRING_OBJECT.STRING_DESCRIPTION_PROPERTY;
Be sure that your storyboard scene for the tableview has cells that are of the "subtitle" type to get access to the detail label.

This is very simple. You can design your cell in storyboard to include the description labels. Just set the cell to "Custom", drag to make the prototype cell larger, drag UILabel objects to the cell and customise.
In cellForRowAtIndexPath you can configure the text labels. One way is to add a tag and access the label with
UILabel *label = (UILabel*)[cell viewWithTag:kLabelTag];

Related

iOS: How to assert a cell is selected in UITest?

I have the following hierarchy:
ViewController -> TableView -> TableViewCell -> CollectionView -> CollectionViewCell -> UIImage
On the tableViewCell, inside the collectionView, there are 4 cells. Each cell has a unique label.
When the user taps the collectionViewCell the cell becomes selected and also the UIImageView is highlighted. In this case this means there is a different image there. I have the accessibility on the UIImageView enabled and the traits set to both button and image to try to access those XCUIElementTypes
I have not been able to make any UITest work because it always tells me that there are multiple results for the UIImageView even though the cell that the image view is in has a unique identifier.
How do I assert that the cell has been selected?
Using the record function I get:
let whatIsYourFilingStatusCellsQuery = XCUIApplication().tables.cells.containingType(.StaticText, identifier:"Single").childrenMatchingType(.Image).matchingIdentifier("btn_unselected").tap()
#Che has the right idea.
In didSelectItemAtIndexPath:, I did this:
cell.accessibilityIdentifier = #"isSelected";
Then, in the test file:
XCTAssertEqualObjects(randomCellToTap.value, #"isSelected");
I'm also going to do the opposite thin in didDeselect...
Add the selection state to the accessibilityTraits, like this:
cell.accessibilityTraits = [.button, .selected]
Then in the UITest you can check if the cell.isSelected state, also this will reduce the complexity for programming voice over states.
The other solutions will require you to implement the voice over state manually.
I really dont have pretty solution. But I see there is only one way to assert cell is selected. Set some property to the cell at the moment of selecting. E.g accessibilityIdentifier is going to have unique id, and accessibilityValue is going to have any info what you need ("selected=true" or "selected")
UPD you have access for these properties:

Customise rows in sections for UITableViewCell

Most social network apps using UITableViewCell I've observed have a minimum of 3 rows in each section. The rows come in different sizes, with usually the first row containing the users details and the time they've posted the content. The second row contains the content posted with an image or text, and the last row contain further options such as the like button, follow button, share button, etc.
What is the best way to create such a cell?
What I would do is I would create a custom cell in an nib file and then in the custom cell .Swift file all you would have to do is declare all the outlets. To implement this custom cell I would recommend taking a look at this stack question Custom UITableViewCell from nib in Swift
Some approaches:
Footer and Header
Section: users details and the time
cell: content posted with an image or text
footer: further options such as the like button, follow button, share button
Only Cell
You can do it using only cell. You can create a base cell (title [details and the time] and bottom buttons[like button, follow button, share button]) and subclass 2 others: image cell , text only cell , etc..
Many tables (worst option)
You still can use this option. Basically you will have 1 section for each post and inside this section will have one UITableView (with 3 cells[header, content, footer])
I have been using "Only Cell" approach

How to have two separate detailTextLabel values in UITableViewCell?

I currently have one detailTextLabel value for every cell in my table, but I want it to have two, one for price and one for condition. This is how I currently have it set up:
// price of the item
cell.detailTextLabel.text = [NSString stringWithFormat:#"$%#", _matchCenterArray[indexPath.section][#"Top 3"][indexPath.row+1][#"Price"]];
cell.detailTextLabel.textColor = [UIColor colorWithRed:0/255.0f green:127/255.0f blue:31/255.0f alpha:1.0f];
I want condition to be a second detailTextLabel with a different color than the price one, and sitting right under it. Is there any way to include a secondary detail, or will I have to use a custom UITableViewCell? If the 2nd option, how would I go about doing this?
Personally I would subclass UITableViewCell and put whatever UILabels you need into it visually. You can then connect those two labels to the cell controller .h file as IBOutlets to allow you to manage them from the table view controller.
If you are using Storyboards and have a table view already plugged in, if you click on the prototype cell at the top (just once) and open the identity inspector you will see a category at the top "Custom Class". Once you write the code / design your custom cell you will put the class name you gave it in here to start using it. You will have to make sure that you set up the cell correctly in your cellForRowAtIndexPath: method in your table view controller implementation.
This is illustrated by the gentleman in this video (skip to 8:40 for the subclassing of UITableViewCell). He might be doing things a different way round than some other people, but the general principle is the same. Video
The easiest way to do this would be to add another label to the cells content view.
The alternative to this would be to create your own UITableviewcell that has 3 labels insted of 2

Adding a navigation accessory to a UITableCell

I am learning about TableViews in Xcode right now and I am having trouble finding some info on TableViewCell accessories.
My goal is to have a MasterTableView and a SubTableView. When a MasterTableCell is tapped to take the user to the SubTableView. But I'm stuck with something simple like showing a '>' on the right side of the cell to show that it has a SubTableView.
Do I need to design my own button? I thought there was a navigation image already available to me in the UI storyboard maker but it won't let me drag and use it in my custom cell I'm making.
Any thoughts or links to documentation would be great. I've looked in the developer library and all it tells me is that it is possible, not how to do it.
Thank you in advance.
If you are using a Prototype Cell in the Storyboard, just set the "Accessory" type in the Attributes inspector to "Disclosure Indicator".
If you create the cell programmatically, set
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
From the documentation:
UITableViewCellAccessoryDisclosureIndicator
The cell has an accessory
control shaped like a chevron. This control indicates that tapping the
cell triggers a push action. The control does not track touches.

Replace the UIImageView with UILabel in a UITableViewCell

I want to create a UITableViewCell that is very similar to the standard UITableViewCell with the UITableViewCellStyleSubtitle. The user is able to select a cell and the a checkmark should be set on that selected cell.
I want to display a UILabel instead of the UIImage in the left part of the cell. I have tried to add a UILabel to the contentView. The UILabel is displayed above both the text and the detailed text label. I would like to move both the text and the detailed text to the right when my the UILabel expands to the right, just as with the UIImage.
I know to make a custom cell in Interface Builder, but then I do it I don't know how to get the checkmark image, the one that is used when setting the UITableViewCellAccessoryCheckmark. There is the disclosure available as a button (and several others), but the checkmark does not seems to be available. Is there a way to get the checkmark icon and use it in a custom cell in Interface Builder? I don't want to make my own checkmark.
I have searched the Internet and Stackoverflow, but I cannot find the answer to my question. I guess I am missing a crucial part, but I cannot figure this one out by myself.
Are there any free open source or creative commons replacements?
If I'm understanding everything correctly, it seems like the easiest thing to do would be to not use the built in text and detail text on the cell and customize those labels as well.
Then in your:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath adjust the width/offset of your labels as necessary.
For the checkmark, if you're not adjusting where the disclosure image appears you should just be able to set it with cell.accessoryType = UITableViewCellAccessoryCheckmark
If by "checkmark" you mean a box with a tick or similar that the user can switch on or off with a tap, then I'm afraid you're out of luck, as cocoa-touch contains no such control.
However, rolling your own is easier than you might think. You simply need a pair or png images for the graphics (one for 'checked' and one for 'unchecked'). There are thousands of free icons and buttons available on the web.
Then you can create a custom UIButton like this:
UIButton *checkmark = [UIButton buttonWithType:UIButtonTypeCustom];
[checkmark setImage:[UIImage imageNamed:#"unchecked"] forState:UIControlStateNormal];
[checkmark setImage:[UIImage imageNamed:#"checked"] forState:UIControlStateSelected];
You can then check the state of the button (whether it is checked or not) using the selected property. For more info on selected see the Apple documentation here.
Rather create a custom cell programmatically.
There is sample code here.
Also for the checkmark you can add
cell.accessoryType = UITableViewCellAccessoryCheckmark
to your
tableViewCellWithReuseIdentifier or in
cellForRowAtIndexPath
whichever will suit your app.

Resources