屏幕幻燈片是整個屏幕到另一個屏幕之間的過渡，並且與設置嚮導或幻燈片等UI一樣常見。本課程向您介紹如何使用支持庫ViewPager提供的屏幕幻燈片。 s可以自動爲屏幕幻燈片設置動畫。以下是從一個內容屏幕轉換到下一個屏幕的屏幕幻燈片： ViewPager
屏幕幻燈片動畫
如果您想跳過並查看完整的工作示例，請 在GitHub上查看此示例應用程序
創建視圖
創建一個稍後用於片段內容的佈局文件。您還需要爲片段的內容定義一個字符串。以下示例包含顯示某些文本的文本視圖：
<!-- 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>創建片段
創建一個Fragment類，該類返回您剛剛在onCreateView() 方法中創建的佈局。然後，只要需要向用戶顯示新頁面，就可以在父活動中創建此片段的實例：
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;
}
}添加ViewPager
ViewPagers具有內置的滑動手勢以在頁面中轉換，並且默認情況下它們顯示屏幕幻燈片動畫，因此您無需創建自己的動畫。ViewPager使用 PagerAdapters作爲要顯示的新頁面的供應，因此PagerAdapter將使用您之前創建的fragment類。
首先，創建一個包含以下內容的佈局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" />創建一個執行以下操作的活動：
將內容視圖設置爲具有的佈局ViewPager。
創建一個擴展FragmentStatePagerAdapter抽象類的類，並實現該getItem()方法以提供ScreenSlidePageFragment新頁面的實例。尋呼機適配器還要求您實現該 getCount()方法，該方法返回適配器將創建的頁面數量（示例中爲五個）。
把它PagerAdapter連接起來ViewPager。
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()。在屏幕轉換的每個點，對於每個可見頁面（通常只有一個可見頁面）調用此方法一次，對於屏幕外的相鄰頁面調用此方法。例如，如果第3頁可見並且用戶拖向第4頁， transformPage()則在手勢的每個步驟調用第2,3和4頁。
在您的實現中transformPage()，您可以通過根據屏幕上頁面的位置確定需要轉換哪些頁面來創建自定義幻燈片動畫，該位置是從方法的position參數獲得的transformPage()。
該position參數指示給定頁面相對於屏幕中心的位置。它是一個動態屬性，隨着用戶滾動頁面而變化。當頁面填滿屏幕時，其位置值爲0。當頁面剛剛從屏幕右側繪製時，其位置值爲1。如果用戶在第一頁和第二頁之間滾動，第一頁的位置爲-0.5，第二頁的位置爲0.5。根據屏幕上的頁面的位置，你可以通過與方法，如設置頁面屬性創建自定義幻燈片動畫setAlpha()，setTranslationX()或 setScaleY()。
當您實現a時PageTransformer，請setPageTransformer()使用您的實現調用以應用自定義動畫。例如，如果您有 PageTransformer命名 ZoomOutPageTransformer，則可以設置自定義動畫，如下所示：
ViewPager mPager = (ViewPager) findViewById(R.id.pager);
...
mPager.setPageTransformer(true, new ZoomOutPageTransformer());有關 a的示例和視頻，請參閱縮小頁面變換器和深度頁面變換器部分PageTransformer。
縮小頁面變換器
當在相鄰頁面之間滾動時，此頁面變換器會縮小和淡化頁面。隨着頁面越來越接近中心，它會逐漸恢復到正常大小並逐漸消失。
ZoomOutPageTransformer 例
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);
}
}
}深度頁面變換器
此頁面轉換器使用默認幻燈片動畫向左滑動頁面，而使用“深度”動畫向右滑動頁面。此深度動畫將頁面淡出，並將其線性縮小。
DepthPageTransformer 例
在深度動畫期間，仍會發生默認動畫（屏幕幻燈片），因此您必須使用負X平移來抵消屏幕幻燈片。例如：
view.setTranslationX(-1 * view.getWidth() * position);以下示例顯示如何在工作頁面轉換器中抵消默認屏幕幻燈片動畫：
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);
}
}
}
聯繫我
QQ:94297366
微信打賞：https://pan.baidu.com/s/1dSBXk3eFZu3mAMkw3xu9KQ
公衆號推薦：
