從一個完整的屏幕移動到另一個屏幕的過程被稱為屏幕滑動,在安裝向導、幻燈片中應用廣泛。下面介紹如何利用Android Support庫的ViewPager來實現屏幕滑動。
創(chuàng)建View
創(chuàng)建一個在之后作為fragment的內容的布局文件,下面的例子中包含一個Textview,用來展示一些文字。
<!-- fragment_screen_slide_page.xml --><ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView style="?android:textAppearanceMedium" android:padding="16dp" android:lineSpacingMultiplier="1.2" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/lorem_ipsum" /></ScrollView>
創(chuàng)建Fragment
創(chuàng)建一個Fragment子類,并在onCreateView()方法中加載上一步里創(chuàng)建的布局。
import android.support.v4.app.Fragment;...public class ScreenSlidePageFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { ViewGroup rootView = (ViewGroup) inflater.inflate( R.layout.fragment_screen_slide_page, container, false); return rootView; }}創(chuàng)建完成之后,就可以在父Activity中創(chuàng)建任意個該fragment的實例來向用戶展示內容了。
添加ViewPager
ViewPager內嵌了對滑動手勢的支持,因此它在默認設置下就能夠實現屏幕滑動。
首先,創(chuàng)建一個布局文件,包含一個ViewPager:
<!-- activity_screen_slide.xml --><android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" />
創(chuàng)建一個Activity,包含以下內容:
將其Content View設置為上面創(chuàng)建的布局
創(chuàng)建一個FragmentStatePagerAdapter的子類,并實現其getItem()方法來提供頁面、getCount()方法來確定頁面數量。
將FragmentStatePagerAdapter實例和ViewPager實例綁定。
處理設備的返回鍵,使其能夠從虛擬的Fragment棧中移除Fragment來實現返回上一頁的效果。如果當前已經處于第一頁,那么就從Activity中返回。
import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;...public class ScreenSlidePagerActivity extends FragmentActivity { /** * The number of pages (wizard steps) to show in this demo. */ private static final int NUM_PAGES = 5; /** * The pager widget, which handles animation and allows swiping horizontally to access previous * and next wizard steps. */ private ViewPager mPager; /** * The pager adapter, which provides the pages to the view pager widget. */ private PagerAdapter mPagerAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_screen_slide); // Instantiate a ViewPager and a PagerAdapter. mPager = (ViewPager) findViewById(R.id.pager); mPagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager()); mPager.setAdapter(mPagerAdapter); } @Override public void onBackPressed() { if (mPager.getCurrentItem() == 0) { // If the user is currently looking at the first step, allow the system to handle the // Back button. This calls finish() on this activity and pops the back stack. super.onBackPressed(); } else { // Otherwise, select the previous step. mPager.setCurrentItem(mPager.getCurrentItem() - 1); } } /** * A simple pager adapter that represents 5 ScreenSlidePageFragment objects, in * sequence. */ private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter { public ScreenSlidePagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return new ScreenSlidePageFragment(); } @Override public int getCount() { return NUM_PAGES; } }}使用PageTransformer自定義屏幕滑動效果
可以實現ViewPager.PageTransformer接口來展示一個不同于默認實現的屏幕滑動效果。這個接口中只有一個transformPage()方法。在屏幕滑動過程中它會在那些能夠看到的頁面(當前頁面以及鄰近頁面)上反復調用。例如,假設當前位于第三頁,如果用戶向第四頁滑動,那么transformPage()會在第二、第三、第四頁上被調用。
當實現transformPage()時,你需要根據頁面當前所處的位置(相對于屏幕)來確定它的變化。不同的變化就能帶來不同的屏幕滑動效果。頁面相對于屏幕的位置包含在參數position中。
position指明了一個給定的頁面相對于屏幕中心的位置。這是一個動態(tài)的屬性,會隨著用戶的滑動手勢而變化。當頁面充滿屏幕時,position的值為0;當頁面即將在屏幕左側消失時,它的值趨近于-1;當頁面即將在屏幕右側消失時,它的值趨近于1。根據position的值,你可以使用setTranslationX()、setScaleY()等方法來實現自定義的動畫效果。
當實現了一個PageTransformer之后,使用ViewPager的setPageTransformer()方法將動畫投入使用。示例如下:
ViewPager mPager = (ViewPager) findViewById(R.id.pager);...mPager.setPageTransformer(true, new ZoomOutPageTransformer());
需要注意的是,默認的屏幕滑動效果不會被PageTransformer覆蓋,因此計算屬性值是要考慮是否會導致滑動速度變快或是變慢。
下面是兩個PageTransformer的實現示例:
Zoom-out page transformer
public class ZoomOutPageTransformer implements ViewPager.PageTransformer { private static final float MIN_SCALE = 0.85f; private static final float MIN_ALPHA = 0.5f; public void transformPage(View view, float position) { int pageWidth = view.getWidth(); int pageHeight = view.getHeight(); if (position < -1) { // [-Infinity,-1) // This page is way off-screen to the left. view.setAlpha(0); } else if (position <= 1) { // [-1,1] // Modify the default slide transition to shrink the page as well float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position)); float vertMargin = pageHeight * (1 - scaleFactor) / 2; float horzMargin = pageWidth * (1 - scaleFactor) / 2; if (position < 0) { view.setTranslationX(horzMargin - vertMargin / 2); } else { view.setTranslationX(-horzMargin + vertMargin / 2); } // Scale the page down (between MIN_SCALE and 1) view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); // Fade the page relative to its size. view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA)); } else { // (1,+Infinity] // This page is way off-screen to the right. view.setAlpha(0); } }}Depth page transformer
public class DepthPageTransformer implements ViewPager.PageTransformer { private static final float MIN_SCALE = 0.75f; public void transformPage(View view, float position) { int pageWidth = view.getWidth(); if (position < -1) { // [-Infinity,-1) // This page is way off-screen to the left. view.setAlpha(0); } else if (position <= 0) { // [-1,0] // Use the default slide transition when moving to the left page view.setAlpha(1); view.setTranslationX(0); view.setScaleX(1); view.setScaleY(1); } else if (position <= 1) { // (0,1] // Fade the page out. view.setAlpha(1 - position); // Counteract the default slide transition view.setTranslationX(pageWidth * -position); // Scale the page down (between MIN_SCALE and 1) float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position)); view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); } else { // (1,+Infinity] // This page is way off-screen to the right. view.setAlpha(0); } }}原文:鏈接
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答