Exploring the official Pager in Compose
<p>With the release of version 1.4, Jetpack Compose has officially received support for a paging layout. While this is something the View-based system has had for a long time in the form of a <code>ViewPager</code> widget, the developers had to use the <a href="https://github.com/google/accompanist" rel="noopener ugc nofollow" target="_blank">Accompanist library</a> implementation to achieve a similar effect with Compose.</p>
<p>There are two new composables available, <code>HorizontalPager</code> and <code>VerticalPager</code>. Let’s take a closer look at their usage and behavior.</p>
<h2>HorizontalPager</h2>
<p>HorizontalPager is a composable that allows scrolling horizontally left and right, either by the user or programmatically.</p>
<p><img alt="" src="https://miro.medium.com/v2/resize:fit:360/1*AP2jKexaHqpaCoDt9zPh3Q.gif" style="height:268px; width:400px" /></p>
<p>Horizontal scrolling Pager.</p>
<p><iframe frameborder="0" height="106" scrolling="no" src="https://medium.com/media/c5c6b682f79d6abb4a4781f89b6f567c" title="HorizontalPager.kt" width="680"></iframe></p>
<p>HorizontalPager composable.</p>
<h2>VerticalPager</h2>
<p>VerticalPager is a composable that allows scrolling vertically up and down, either by the user or programmatically.</p>
<p><img alt="" src="https://miro.medium.com/v2/resize:fit:360/1*CMRnteybuokM-9AkJUqxRA.gif" style="height:270px; width:400px" /></p>
<p>Vertical scrolling Pager.</p>
<p><iframe frameborder="0" height="106" scrolling="no" src="https://medium.com/media/29c7a06abf02e0287e5b9dc07b022b0e" title="VerticalPager.kt" width="680"></iframe></p>
<p>VerticalPager composable.</p>
<h2>Taking a Closer Look</h2>
<p>Pages/items are lazily composed and laid out when needed, similar to <code>LazyColumn</code> and <code>LazyRow</code> composables. All of these composables use <code>LazyList</code> internal composable under the hood.</p>
<p><a href="https://medium.com/@domen.lanisnik/exploring-the-official-pager-in-compose-8c2698c49a98">Website</a></p>