1e41f4b71Sopenharmony_ci# Layout Use Cases 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ci 4e41f4b71Sopenharmony_ci## Composite Grid View of Flat Navigation 5e41f4b71Sopenharmony_ci 6e41f4b71Sopenharmony_ciThe composite grid view of flat navigation is often used to display different contents on the same page. 7e41f4b71Sopenharmony_ci 8e41f4b71Sopenharmony_ciFor example, the application market, which uses typical flat navigation, employs a handful of layout capabilities on the home page. 9e41f4b71Sopenharmony_ci 10e41f4b71Sopenharmony_ci 11e41f4b71Sopenharmony_ci 12e41f4b71Sopenharmony_ci- Title bar and search bar: There are limited components fixed on the top. Therefore, adaptive stretching is used. In addition, vertical arrangement is changed to horizontal arrangement on a large screen, making full use of the top area. 13e41f4b71Sopenharmony_ci 14e41f4b71Sopenharmony_ci- Banner: Adaptive scaling is used. By default, multiple images are displayed in rotation mode on a small-sized device. On a medium-sized page, multiple images are displayed side by side through the repetition layout. 15e41f4b71Sopenharmony_ci 16e41f4b71Sopenharmony_ci- Icon grid: There are a fixed number of grids with the same priority. Therefore, equalization is used to ensure the full display of grids. If the number of grids is flexible, adaptive extension can be used to display more grids on a larger screen. 17e41f4b71Sopenharmony_ci 18e41f4b71Sopenharmony_ci- Navigation bar at the bottom: Equalization and wrapping are used for the layout of navigation components. When the screen width changes, navigation components with the same width are arranged side by side. On a larger screen, they are displayed on the left sidebar. This makes the tabs closer to each other and complies with the visual direction. 19e41f4b71Sopenharmony_ci 20e41f4b71Sopenharmony_ciConsistent layout capabilities are used during device orientation changes. This implements the switching between large and medium sizes. 21e41f4b71Sopenharmony_ci 22e41f4b71Sopenharmony_ci 23e41f4b71Sopenharmony_ci 24e41f4b71Sopenharmony_ciOn a smart TV, the search bar is replaced by an icon entry and the navigation bar is moved to the upper part of the screen. This complies with the device style and remote control interaction rules. 25e41f4b71Sopenharmony_ci 26e41f4b71Sopenharmony_ci 27e41f4b71Sopenharmony_ci 28e41f4b71Sopenharmony_ci 29e41f4b71Sopenharmony_ci## List View of Hierarchical Navigation 30e41f4b71Sopenharmony_ci 31e41f4b71Sopenharmony_ciThe list view of hierarchical navigation is often used to display multiple types of simple information in parallel or multiple service entries. 32e41f4b71Sopenharmony_ci 33e41f4b71Sopenharmony_ciFor example, the **Settings** page, which uses typical hierarchical navigation, employs adaptive stretching for its components. 34e41f4b71Sopenharmony_ci 35e41f4b71Sopenharmony_ci 36e41f4b71Sopenharmony_ci 37e41f4b71Sopenharmony_ciOn a medium-sized device, the indentation layout is used to avoid too large blank space in the middle. On a large-sized device, the grid system is used to display multiple columns and stretching is used for the list components in their respective areas to make full use of the horizontal space. 38e41f4b71Sopenharmony_ci 39e41f4b71Sopenharmony_ci 40e41f4b71Sopenharmony_ci## Album Details Page 41e41f4b71Sopenharmony_ci 42e41f4b71Sopenharmony_ciAn album details page can be used to display the music content, videos, short videos, radios, and books. 43e41f4b71Sopenharmony_ci 44e41f4b71Sopenharmony_ciFor example, as a typical content vertical page, the playlist page consists of the title bar, playlist information, playlist operation, playlist, and playback bar. 45e41f4b71Sopenharmony_ci 46e41f4b71Sopenharmony_ci- Title bar: Adaptive stretching is used. 47e41f4b71Sopenharmony_ci 48e41f4b71Sopenharmony_ci- Playlist information: Adaptive scaling is used, and the indentation layout is used on a medium-sized device for better content display. 49e41f4b71Sopenharmony_ci 50e41f4b71Sopenharmony_ci- Playlist operation: Equalization is used. On a small-sized device, the buttons fully utilize the vertical space. On a medium-sized device, they are moved to the right of the playlist cover. 51e41f4b71Sopenharmony_ci 52e41f4b71Sopenharmony_ci- Playlist: Stretching is used, and the indentation layout is used on a medium-sized device. 53e41f4b71Sopenharmony_ci 54e41f4b71Sopenharmony_ci- Playback bar: It is fixed at the bottom of the screen and stretching is used. 55e41f4b71Sopenharmony_ci 56e41f4b71Sopenharmony_ci 57e41f4b71Sopenharmony_ci 58e41f4b71Sopenharmony_ciConsistent layout capabilities are used during device orientation changes. This implements the switching between large and medium sizes. When the orientation layout is used for the playlist, the repetition layout is used for the components inside it. 59e41f4b71Sopenharmony_ci 60e41f4b71Sopenharmony_ciThe playlist information and playlist operation areas, because of their small aspect ratio, are horizontally arranged. 61e41f4b71Sopenharmony_ci 62e41f4b71Sopenharmony_ci 63e41f4b71Sopenharmony_ci 64e41f4b71Sopenharmony_ciOn a smart TV, some playlist information replaces the original title bar and the playback bar is removed. This delivers immersive and simple device information and complies with remote control interaction rules. In addition, the playlist is displayed on the left, facilitating selection using the remote control. 65e41f4b71Sopenharmony_ci 66e41f4b71Sopenharmony_ci 67
