diff options
Diffstat (limited to 'docs/html/design/building-blocks/grid-lists.jd')
| -rw-r--r-- | docs/html/design/building-blocks/grid-lists.jd | 96 |
1 files changed, 0 insertions, 96 deletions
diff --git a/docs/html/design/building-blocks/grid-lists.jd b/docs/html/design/building-blocks/grid-lists.jd deleted file mode 100644 index 7a1c652..0000000 --- a/docs/html/design/building-blocks/grid-lists.jd +++ /dev/null @@ -1,96 +0,0 @@ -page.title=Grid Lists -page.tags=gridview,layout,listview -@jd:body - -<img src="{@docRoot}design/media/gridview_overview.png"> - - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/grid-lists.html"> - <div> - <h3>Material Design</h3> - <p>Grid lists<p> - </div> -</a> - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/layout/gridview.html"> - <div> - <h3>Developer Docs</h3> - <p>Grid View</p> - </div> -</a> - -<p itemprop="description">Grid lists are an alternative to standard list views. They are best suited for showing data sets -that represent themselves through images. In contrast to simple lists, grid lists may scroll either -vertically or horizontally.</p> - - - -<h2 id="generic_grid">Generic Grids</h2> - - -<p>The items in a grid list are arranged in two dimensions, one of which is fixed when scrolling -content. The scrolling direction dictates the ordering of the items within the grid list. Since the -scrolling direction is not deterministic, make it easy for the user to determine the orientation by -cutting off grid items to communicate where the overflow is located.</p> -<p>Avoid creating grid lists that scroll in two dimensions.</p> - - -<div class="cols"> - <div class="col-7"> - - <img src="{@docRoot}design/media/gridview_vertical.png"> - - </div> - <div class="col-6"> - -<h4>Vertical scrolling</h4> -<p>Vertically scrolling grid list items are sorted in traditional western reading direction: -left-to-right and top-down. When displaying the list, cut off the items in the bottom row to -communicate that the user can scroll the list down to show additional items. Be sure to retain this -scheme when the user rotates the screen.</p> - - </div> -</div> - -<div class="cols"> - <div class="col-7"> - - <img src="{@docRoot}design/media/gridview_horizontal.png"> - - </div> - <div class="col-6"> - -<h4>Horizontal scrolling</h4> -<p>Horizontally scrolling lists fix the vertical axis of the item grid. Compared to vertically -scrolling lists, the sorting changes slightly to a top-down and left-to-right arrangement. Employ -the same technique of cutting off the items in the rightmost column to indicate the scrolling -direction.</p> -<p>Don't use scrolling tabs as a means to switch views in conjunction with horizontally scrolling grid -lists, because the horizontal gesture for view and content navigation will conflict. If you show -scrolling tabs for view navigation together with a grid list, use vertical grid scrolling for list -navigation.</p> - - </div> -</div> - - -<h2 id="with-labels">Grid List with Labels</h2> - -<p>Use labels to display additional contextual information for your grid list items.</p> - - -<div class="cols"> - <div class="col-7"> - - <img src="{@docRoot}design/media/gridview_style.png"> - - </div> - <div class="col-6"> - -<h4>Style</h4> -<p>Use semi-transparent panels on top of the grid list items to display your labels. This allows you to -control the contrast and ensures legibility of the labels while letting the content "shine through".</p> - - </div> -</div> |