Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding the little arrow to the right side of a cell in an iPhone TableView Cell

People also ask

What is Table View cell in iOS?

The visual representation of a single row in a table view. iOS 2.0+ iPadOS 2.0+ Mac Catalyst 13.1+ tvOS 9.0+

What is prototype cell?

A prototype cell acts a template for your cell's appearance. It includes the views you want to display and their arrangement within the content area of the cell. At runtime, the table's data source object creates actual cells from the prototypes and configures them with your app's data.

How do I change the tableView style in Swift?

You cannot change the tableView style once set. So the only way is set the style during initialisation.


Just set the respective accessoryType property of UITableViewCell.

cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

In Swift 3,

cell.accessoryType = .disclosureIndicator

You can do this in Interface Builder. Simply click click on the Table View, go to Prototype Cells on the right side and make it 1. Then click that Prototype Cell and on the right look for Accessory. In the drop-down, click Disclosure Indicator.

Interface Builder example


You can set little classic arrow like two way as below

1) Using inbuilt accessory type method of UITableViewCell

[cell setAccessoryType:UITableViewCellAccessoryDisclosureIndicator]; 

2) Creating own accessory view with own image

(I) Drag & drop an arrow image(i.e. circle_arrow_right.png) in your project

(II) In cell design method for every row as below

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 

Write below code:

if (cell ==nil) {
    cell=[[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault  reuseIdentifier:CellIdentifier]autorelease];

    //For creating custom accessory view with own image
    UIImageView *accessoryView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
    [accessoryView setImage:[UIImage imageNamed:@"circle_arrow_right.png"]];
    [cell setAccessoryView:accessoryView];
    [accessoryView release];

    //Your other components on cells
     .............
    .............

 }

[Note: Choose appropriate images for accessory view and add in your desired cells. Choose small images for accessory views for better performance.]


Use the accessoryType property of the cell to show a arrow on the right side. See this.


for simple arrow:

cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; 

and for detailed arrow:

cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;

Swift 3:

cell.accessoryType = .disclosureIndicator