1 page.title=Using ViewPager for Screen Slides 2 trainingnavtop=true 3 4 @jd:body 5 6 <div id="tb-wrapper"> 7 <div id="tb"> 8 <h2>This lesson teaches you to</h2> 9 <ol> 10 <li><a href="#views">Create the Views</a></li> 11 <li><a href="#fragment">Create the Fragment</a></li> 12 <li><a href="#viewpager">Animate the Screen Slide</a></li> 13 </ol> 14 </div> 15 </div> 16 <p> 17 Screen slides are transitions between one entire screen to another and are common with UIs 18 like setup wizards or slideshows. This lesson shows you how to do screen slides with 19 a {@link android.support.v4.view.ViewPager} provided by the <a href= 20 "{@docRoot}/tools/extras/support-library.html">support library</a>. 21 {@link android.support.v4.view.ViewPager}s can animate screen slides 22 automatically. Here's what a screen slide looks like that transitions from 23 one screen of content to the next: 24 </p> 25 26 <div class="framed-galaxynexus-land-span-8"> 27 <video class="play-on-hover" autoplay> 28 <source src="anim_screenslide.mp4" type="video/mp4"> 29 <source src="anim_screenslide.webm" type="video/webm"> 30 <source src="anim_screenslide.ogv" type="video/ogg"> 31 </video> 32 </div> 33 34 <div class="figure-caption"> 35 Screen slide animation 36 <div class="video-instructions"> </div> 37 </div> 38 39 <p>If you want to jump ahead and see a full working example, 40 <a href="{@docRoot}shareables/training/Animations.zip">download</a> 41 and run the sample app and select the Screen Slide example. See the 42 following files for the code implementation:</p> 43 <ul> 44 <li><code>src/ScreenSlidePageFragment.java</code></li> 45 <li><code>src/ScreenSlideActivity.java</code></li> 46 <li><code>layout/activity_screen_slide.xml</code></li> 47 <li><code>layout/fragment_screen_slide_page.xml</code></li> 48 </ul> 49 50 <h2 id="views">Create the Views</h2> 51 <p>Create a layout file that you'll later use for the content of a fragment. The following example 52 contains a text view to display some text: 53 54 <pre> 55 <com.example.android.animationsdemo.ScrollView 56 xmlns:android="http://schemas.android.com/apk/res/android" 57 android:id="@+id/content" 58 android:layout_width="match_parent" 59 android:layout_height="match_parent"> 60 61 <TextView style="?android:textAppearanceMedium" 62 android:padding="16dp" 63 android:lineSpacingMultiplier="1.2" 64 android:layout_width="match_parent" 65 android:layout_height="wrap_content" 66 android:text="@string/lorem_ipsum" /> 67 68 </com.example.android.animationsdemo.ScrollView> 69 </pre> 70 71 <h2 id="fragment">Create the Fragment</h2> 72 <p>Create a {@link android.support.v4.app.Fragment} class that returns the layout 73 that you just created in the {@link android.app.Fragment#onCreateView onCreateView()} 74 method. You can then create instances of this fragment in the parent activity whenever you need a new page to 75 display to the user:</p> 76 77 78 <pre> 79 public class ScreenSlidePageFragment extends Fragment { 80 81 @Override 82 public View onCreateView(LayoutInflater inflater, ViewGroup container, 83 Bundle savedInstanceState) { 84 ViewGroup rootView = (ViewGroup) inflater.inflate( 85 R.layout.fragment_screen_slide_page, container, false); 86 87 return rootView; 88 } 89 } 90 </pre> 91 92 <h2 id="viewpager">Screen Slides with ViewPager</h2> 93 94 <p>{@link android.support.v4.view.ViewPager}s have built-in swipe gestures to transition 95 through pages, and they display screen slide animations by default, so you don't need to create any. {@link android.support.v4.view.ViewPager}s use 96 {@link android.support.v4.view.PagerAdapter}s as a supply for new pages to display, so the {@link android.support.v4.view.PagerAdapter} will use the 97 fragment class that you created earlier. 98 </p> 99 100 <p>To begin, create a layout that contains a {@link android.support.v4.view.ViewPager}:</p> 101 102 <pre> 103 <android.support.v4.view.ViewPager 104 xmlns:android="http://schemas.android.com/apk/res/android" 105 android:id="@+id/pager" 106 android:layout_width="match_parent" 107 android:layout_height="match_parent" /> 108 </pre> 109 110 <p>Create an activity that does the following things: 111 </p> 112 113 <ul> 114 <li>Sets the content view to be the layout with the {@link android.support.v4.view.ViewPager}.</li> 115 <li>Create a class that extends the {@link android.support.v13.app.FragmentStatePagerAdapter} abstract class. Implement 116 the {@link android.support.v4.app.FragmentStatePagerAdapter#getItem getItem()} method to supply 117 instances of <code>ScreenSlidePageFragment</code> as new pages. The pager adapter also requires that you implement the 118 {@link android.support.v4.view.PagerAdapter#getCount getCount()} method, which returns the amount of pages the adapter will create (five in the example). 119 <li>Hooks up the {@link android.support.v4.view.PagerAdapter} to the {@link android.support.v4.view.ViewPager}</code>.</li> 120 <li>Handle's the device's back button by moving backwards in the virtual stack of fragments. 121 If the user is already on the first page, go back on the activity back stack.</li> 122 </ul> 123 124 <pre> 125 public class ScreenSlidePagerActivity extends FragmentActivity { 126 /** 127 * The number of pages (wizard steps) to show in this demo. 128 */ 129 private static final int NUM_PAGES = 5; 130 131 /** 132 * The pager widget, which handles animation and allows swiping horizontally to access previous 133 * and next wizard steps. 134 */ 135 private ViewPager mPager; 136 137 /** 138 * The pager adapter, which provides the pages to the view pager widget. 139 */ 140 private PagerAdapter mPagerAdapter; 141 142 @Override 143 protected void onCreate(Bundle savedInstanceState) { 144 super.onCreate(savedInstanceState); 145 setContentView(R.layout.activity_screen_slide_pager); 146 147 // Instantiate a ViewPager and a PagerAdapter. 148 mPager = (ViewPager) findViewById(R.id.pager); 149 mPagerAdapter = new ScreenSlidePagerAdapter(getFragmentManager()); 150 mPager.setAdapter(mPagerAdapter); 151 } 152 153 @Override 154 public void onBackPressed() { 155 if (mPager.getCurrentItem() == 0) { 156 // If the user is currently looking at the first step, allow the system to handle the 157 // Back button. This calls finish() on this activity and pops the back stack. 158 super.onBackPressed(); 159 } else { 160 // Otherwise, select the previous step. 161 mPager.setCurrentItem(mPager.getCurrentItem() - 1); 162 } 163 } 164 165 /** 166 * A simple pager adapter that represents 5 ScreenSlidePageFragment objects, in 167 * sequence. 168 */ 169 private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter { 170 public ScreenSlidePagerAdapter(FragmentManager fm) { 171 super(fm); 172 } 173 174 @Override 175 public Fragment getItem(int position) { 176 return new ScreenSlidePageFragment(); 177 } 178 179 @Override 180 public int getCount() { 181 return NUM_PAGES; 182 } 183 } 184 } 185 </pre>
