<commit_before><!--docs:
title: "Lists"
layout: detail
section: components
excerpt: "Material Design Lists are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text."
api_doc_root: true
-->

# Lists

Material Design Lists are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text.

## Status

The [Lists component](https://material.io/go/design-lists) is yet to be completed, please follow the [tracking issue](https://www.pivotaltracker.com/epic/show/3950586) for more information.

In the meanwhile, we are offering an example on how to implement a list cell that is self-sizing, supports dynamic type, and right-to-left using pure UIKit classes. 
We will walk through the example and discuss things needed to achieve a list cell implementation of your own.

## Example Walkthrough / How to implement your own List Cell

The example files can be found <a href="examples/">here</a>

<img src="docs/assets/listcellexample.gif" alt="List Cell Example" width="300">

Our example consists of a custom `UICollectionViewController`: <a href="examples/CollectionListCellExampleTypicalUse.m">examples/CollectionListCellExampleTypicalUse.m</a>
and also of a custom `UICollectionViewCell`: <a href="examples/supplemental/CollectionViewListCell.m">examples/supplemental/CollectionViewListCell.m</a>.

The main focus will be on the custom cell as that's where all the logic goes in, whereas the collection view and its controller are using mostly boilerplate code of setting up a simple example and collection view.

### Layout
For our example we will have a layout consisting of a left aligned `UIImageView`, a title text `UILabel` and a details text `UILabel`. The title text will have a max of 1 line whereas the details text can be up to 3 lines. It is important to note that neither the image nor the labels need to be set. To see more of the spec guidelines for Lists please see here: <a href="https://material.io/go/design-lists">https://material.io/go/design-lists</a>

To create our layout we used auto layout constraints that are all set up in the `(void)setupConstraints` method in our custom cell. It is important to make sure we set `translatesAutoresizingMaskIntoConstraints` to `NO` for all the views we are applying constraints on.

### Ink Ripple
Interactable Material components and specifically List Cells have an ink ripple when tapped on. To add ink to your cells there are a few steps you need to take:<commit_msg>[List] Hide from the website generator.<commit_after># Lists

Material Design lists are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text.

## Status

The [Lists component](https://material.io/go/design-lists) is yet to be completed, please follow the [tracking issue](https://www.pivotaltracker.com/epic/show/3950586) for more information.

In the meanwhile, we are offering an example on how to implement a list cell that is self-sizing, supports dynamic type, and right-to-left using pure UIKit classes. 
We will walk through the example and discuss things needed to achieve a list cell implementation of your own.

## Example Walkthrough / How to implement your own List Cell

The example files can be found <a href="examples/">here</a>

<img src="docs/assets/listcellexample.gif" alt="List Cell Example" width="300">

Our example consists of a custom `UICollectionViewController`: <a href="examples/CollectionListCellExampleTypicalUse.m">examples/CollectionListCellExampleTypicalUse.m</a>
and also of a custom `UICollectionViewCell`: <a href="examples/supplemental/CollectionViewListCell.m">examples/supplemental/CollectionViewListCell.m</a>.

The main focus will be on the custom cell as that's where all the logic goes in, whereas the collection view and its controller are using mostly boilerplate code of setting up a simple example and collection view.

### Layout
For our example we will have a layout consisting of a left aligned `UIImageView`, a title text `UILabel` and a details text `UILabel`. The title text will have a max of 1 line whereas the details text can be up to 3 lines. It is important to note that neither the image nor the labels need to be set. To see more of the spec guidelines for Lists please see here: <a href="https://material.io/go/design-lists">https://material.io/go/design-lists</a>

To create our layout we used auto layout constraints that are all set up in the `(void)setupConstraints` method in our custom cell. It is important to make sure we set `translatesAutoresizingMaskIntoConstraints` to `NO` for all the views we are applying constraints on.

### Ink Ripple
Interactable Material components and specifically List Cells have an ink ripple when tapped on. To add ink to your cells there are a few steps you need to take:
{'fraction_non_alphanumeric': 0.06676022453889334, 'fraction_numerical': 0.0048115477145148355, 'mean_word_length': 4.918149466192171, 'pattern_counts': {'":': 0, '<': 22, '<?xml version=': 0, '>': 22, 'https://': 8, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4859880', 'n_tokens_mistral': 1308, 'n_tokens_neox': 1243, 'n_words': 677}