ViewPager的詳細(xì)介紹
?簡(jiǎn)介
Viewpager，視圖翻頁(yè)工具，提供了多頁(yè)面切換的效果。Android 3.0后引入的一個(gè)UI控件，位于v4包中。低版本使用需要導(dǎo)入v4包，但是現(xiàn)在我們開(kāi)發(fā)的APP一般不再兼容3.0及以下的系統(tǒng)版本，另外現(xiàn)在大多數(shù)使用Android studio進(jìn)行開(kāi)發(fā)，默認(rèn)導(dǎo)入v7包，v7包含了v4，所以不用導(dǎo)包，越來(lái)越方便了。
Viewpager使用起來(lái)就是我們通過(guò)創(chuàng)建adapter給它填充多個(gè)view，左右滑動(dòng)時(shí)，切換不同的view。Google官方是建議我們使用Fragment來(lái)填充ViewPager的，這樣 可以更加方便的生成每個(gè)Page，以及管理每個(gè)Page的生命周期。
簡(jiǎn)單使用
1.xml的引用
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
2.使用?
//找到控件
? ? ? ?ViewPager ? ?vp ?= (ViewPager) findViewById(R.id.vp);
//創(chuàng)建view集合
? ? ? ?Arraylist<View> mView = new ArrayList<>();
? ? ? ? //找到需要往view中添加的布局
? ? ? ? View viewone = LinearLayout.inflate(this, R.layout.vpone, null);
? ? ? ? View viewtwo = LinearLayout.inflate(this, R.layout.vptwo, null);
? ? ? ? View viewthree = LinearLayout.inflate(this, R.layout.vpthree, null);
? ? ? ? //添加
? ? ? ? mView.add(viewone);
? ? ? ? mView.add(viewtwo);
? ? ? ? mView.add(viewthree);
//viewpager的適配器(設(shè)配器單獨(dú)創(chuàng)建一個(gè)類去寫(xiě))
vp.setAdapter(new PagerAdapter() {
? ? ? ? ? ? @Override
? ? ? ? ? ? public int getCount() {
? ? ? ? ? ? ? ? return mView.size();
? ? ? ? ? ? }
? ? ? ? ? ? @Override
? ? ? ? ? ? public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
? ? ? ? ? ? ? ? return view==object;
? ? ? ? ? ? }
? ? ? ? ? ? @Override
? ? ? ? ? ? public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
? ? ? ? ? ? ? ? container.removeView(mView.get(position));
? ? ? ? ? ? }
? ? ? ? ? ? @NonNull
? ? ? ? ? ? @Override
? ? ? ? ? ? public Object instantiateItem(@NonNull ViewGroup container, int position) {
? ? ? ? ? ? ? ? ? ? ? ?View view = mView.get(position);
? ? ? ? ? ? ? ? ? ? ?container.addView(view);
? ? ? ? ? ? ? ? ? ? ? return view;
? ? ? ? ? ? }
? ? ? ? })；
實(shí)現(xiàn)效果
翻頁(yè)動(dòng)畫(huà)
ViewPager有個(gè)方法叫做：
setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer) 用于設(shè)置ViewPager切換時(shí)的動(dòng)畫(huà)效果，并且google官方還給出了兩個(gè)示例（因?yàn)槭褂玫氖菍傩詣?dòng)畫(huà)，所以不兼容3.0以下）。
1. DepthPageTransformer
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);
? ? ? ? }
? ? }
}
調(diào)用
vp.setPageTransformer(false,new DepthPageTransformer());
實(shí)現(xiàn)效果
2. ZoomOutPageTransformer
public class ZoomOutPageTransformer implements ViewPager.PageTransformer
{
? ? private static final float MIN_SCALE = 0.85f;
? ? private static final float MIN_ALPHA = 0.5f;
? ? @SuppressLint("NewApi")
? ? public void transformPage(View view, float position)
? ? {
? ? ? ? int pageWidth = view.getWidth();
? ? ? ? int pageHeight = view.getHeight();
? ? ? ? Log.e("TAG", view + " , " + position + "");
? ? ? ? if (position < -1)
? ? ? ? { // [-Infinity,-1)
? ? ? ? ? ? // This page is way off-screen to the left.
? ? ? ? ? ? view.setAlpha(0);
? ? ? ? } else if (position <= 1) //a頁(yè)滑動(dòng)至b頁(yè) ； a頁(yè)從 0.0 -1 ；b頁(yè)從1 ~ 0.0
? ? ? ? { // [-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);
? ? ? ? }
? ? }
}
調(diào)用
vp.setPageTransformer(false,new ZoomOutPageTransformer());
實(shí)現(xiàn)效果
3. 自定義動(dòng)畫(huà)
public class RotateDownPageTransformer implements ViewPager.PageTransformer {
? ? private static final float ROT_MAX = 20.0f;
? ? private float mRot;
? ? public void transformPage(View view, float position)
? ? {
? ? ? ? Log.e("TAG", view + " , " + position + "");
? ? ? ? if (position < -1)
? ? ? ? { // [-Infinity,-1)
? ? ? ? ? ? // This page is way off-screen to the left.
? ? ? ? ? ? view.setRotation(0);
? ? ? ? } else if (position <= 1) // a頁(yè)滑動(dòng)至b頁(yè) ； a頁(yè)從 0.0 ~ -1 ；b頁(yè)從1 ~ 0.0
? ? ? ? { // [-1,1]
? ? ? ? ? ? // Modify the default slide transition to shrink the page as well
? ? ? ? ? ? if (position < 0)
? ? ? ? ? ? {
? ? ? ? ? ? ? ? mRot = (ROT_MAX * position);
? ? ? ? ? ? ? ? view.setPivotX(view.getMeasuredWidth() * 0.5f);
? ? ? ? ? ? ? ? view.setPivotY(view.getMeasuredHeight());
? ? ? ? ? ? ? ? view.setRotation( mRot);
? ? ? ? ? ? } else
? ? ? ? ? ? {
? ? ? ? ? ? ? ? mRot = (ROT_MAX * position);
? ? ? ? ? ? ? ? view.setPivotX(view.getMeasuredWidth() * 0.5f);
? ? ? ? ? ? ? ? view.setPivotY(view.getMeasuredHeight());
? ? ? ? ? ? ? ? view.setRotation( mRot);
? ? ? ? ? ? }
? ? ? ? ? ? // Scale the page down (between MIN_SCALE and 1)
? ? ? ? ? ? // Fade the page relative to its size.
? ? ? ? } else
? ? ? ? { // (1,+Infinity]
? ? ? ? ? ? // This page is way off-screen to the right.
? ? ? ? ? ? view.setRotation( 0);
? ? ? ? }
? ? }
}
實(shí)現(xiàn)效果
position說(shuō)明：
當(dāng)前顯示頁(yè)為0，前一頁(yè)為-1，后一頁(yè)為1，滑動(dòng)過(guò)程中數(shù)值不斷變大或變小，所以為float類型
翻頁(yè)監(jiān)聽(tīng)
vp.addOnPageChangeListener(newViewPager.OnPageChangeListener() {
@Override
publicvoidonPageScrolled(intposition,floatpositionOffset,intpositionOffsetPixels) {
Log.e("vp","滑動(dòng)中=====position:"+position+" ? positionOffset:"+positionOffset+" ? positionOffsetPixels:"+positionOffsetPixels);
}
@Override
publicvoidonPageSelected(intposition) {
Log.e("vp","顯示頁(yè)改變=====postion:"+position);
?? }
@Override
publicvoidonPageScrollStateChanged(intstate) {
switch(state) {
caseViewPager.SCROLL_STATE_IDLE:
Log.e("vp","狀態(tài)改變=====SCROLL_STATE_IDLE====靜止?fàn)顟B(tài)");
break;
caseViewPager.SCROLL_STATE_DRAGGING:
Log.e("vp","狀態(tài)改變=====SCROLL_STATE_DRAGGING==滑動(dòng)狀態(tài)");
break;
caseViewPager.SCROLL_STATE_SETTLING:
Log.e("vp","狀態(tài)改變=====SCROLL_STATE_SETTLING==滑翔狀態(tài)");
break;
? ? ?? }
?? }
});
1.onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
頁(yè)面滑動(dòng)狀態(tài)停止前一直調(diào)用
position：當(dāng)前點(diǎn)擊滑動(dòng)頁(yè)面的位置?
positionOffset：當(dāng)前頁(yè)面偏移的百分比?
positionOffsetPixels：當(dāng)前頁(yè)面偏移的像素位置
2.onPageSelected(int position)
滑動(dòng)后顯示的頁(yè)面和滑動(dòng)前不同，調(diào)用
position：選中顯示頁(yè)面的位置
3.onPageScrollStateChanged(int state)
頁(yè)面狀態(tài)改變時(shí)調(diào)用
state：當(dāng)前頁(yè)面的狀態(tài)
SCROLL_STATE_IDLE：空閑狀態(tài)?
SCROLL_STATE_DRAGGING：滑動(dòng)狀態(tài)?
SCROLL_STATE_SETTLING：滑動(dòng)后滑翔的狀態(tài)
