Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 1 | page.title=Grid Lists |
Scott Main | 64d5103 | 2013-04-12 14:00:30 -0700 | [diff] [blame] | 2 | page.tags="gridview","layout","listview" |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 3 | @jd:body |
| 4 | |
| 5 | <img src="{@docRoot}design/media/gridview_overview.png"> |
| 6 | |
Scott Main | cbcd17d | 2013-05-14 08:46:55 -0700 | [diff] [blame] | 7 | <a class="notice-developers" href="{@docRoot}guide/topics/ui/layout/gridview.html"> |
| 8 | <div> |
| 9 | <h3>Developer Docs</h3> |
| 10 | <p>Grid View</p> |
| 11 | </div> |
| 12 | </a> |
| 13 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 14 | <p>Grid lists are an alternative to standard list views. They are best suited for showing data sets |
| 15 | that represent themselves through images. In contrast to simple lists, grid lists may scroll either |
| 16 | vertically or horizontally.</p> |
| 17 | |
| 18 | |
| 19 | |
| 20 | <h2 id="generic_grid">Generic Grids</h2> |
| 21 | |
| 22 | |
| 23 | <p>The items in a grid list are arranged in two dimensions, one of which is fixed when scrolling |
| 24 | content. The scrolling direction dictates the ordering of the items within the grid list. Since the |
| 25 | scrolling direction is not deterministic, make it easy for the user to determine the orientation by |
| 26 | cutting off grid items to communicate where the overflow is located.</p> |
| 27 | <p>Avoid creating grid lists that scroll in two dimensions.</p> |
| 28 | |
| 29 | |
| 30 | <div class="layout-content-row"> |
| 31 | <div class="layout-content-col span-7"> |
| 32 | |
| 33 | <img src="{@docRoot}design/media/gridview_vertical.png"> |
| 34 | |
| 35 | </div> |
| 36 | <div class="layout-content-col span-6"> |
| 37 | |
| 38 | <h4>Vertical scrolling</h4> |
| 39 | <p>Vertically scrolling grid list items are sorted in traditional western reading direction: |
| 40 | left-to-right and top-down. When displaying the list, cut off the items in the bottom row to |
| 41 | communicate that the user can scroll the list down to show additional items. Be sure to retain this |
| 42 | scheme when the user rotates the screen.</p> |
| 43 | |
| 44 | </div> |
| 45 | </div> |
| 46 | |
| 47 | <div class="layout-content-row"> |
| 48 | <div class="layout-content-col span-7"> |
| 49 | |
| 50 | <img src="{@docRoot}design/media/gridview_horizontal.png"> |
| 51 | |
| 52 | </div> |
| 53 | <div class="layout-content-col span-6"> |
| 54 | |
| 55 | <h4>Horizontal scrolling</h4> |
| 56 | <p>Horizontally scrolling lists fix the vertical axis of the item grid. Compared to vertically |
| 57 | scrolling lists, the sorting changes slightly to a top-down and left-to-right arrangement. Employ |
| 58 | the same technique of cutting off the items in the rightmost column to indicate the scrolling |
| 59 | direction.</p> |
| 60 | <p>Don't use scrolling tabs as a means to switch views in conjunction with horizontally scrolling grid |
| 61 | lists, because the horizontal gesture for view and content navigation will conflict. If you show |
| 62 | scrolling tabs for view navigation together with a grid list, use vertical grid scrolling for list |
| 63 | navigation.</p> |
| 64 | |
| 65 | </div> |
| 66 | </div> |
| 67 | |
| 68 | |
| 69 | <h2 id="with-labels">Grid List with Labels</h2> |
| 70 | |
| 71 | <p>Use labels to display additional contextual information for your grid list items.</p> |
| 72 | |
| 73 | |
| 74 | <div class="layout-content-row"> |
| 75 | <div class="layout-content-col span-7"> |
| 76 | |
| 77 | <img src="{@docRoot}design/media/gridview_style.png"> |
| 78 | |
| 79 | </div> |
| 80 | <div class="layout-content-col span-6"> |
| 81 | |
| 82 | <h4>Style</h4> |
| 83 | <p>Use semi-transparent panels on top of the grid list items to display your labels. This allows you to |
| 84 | control the contrast and ensures legibility of the labels while letting the content "shine through".</p> |
| 85 | |
| 86 | </div> |
| 87 | </div> |