Android學習之------ViewPager的介紹和使用

ViewPager的介紹和使用

viewPager的用法

ViewPager是什麼呢？其實它就是個ViewGroup，用法跟ListView類似
xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ViewPagerActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_id"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>

</LinearLayout>

在layout文件文件夾中,創建一個viewPager的佈局文件
命名隨意,這裏叫vp_layout.xml
如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">
    
    <TextView
        android:id="@+id/vp_tv_id"
        android:hint="我是提示文字.."
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    
</LinearLayout>

就像使用listview一樣,現在創建適配器
創建適配器,繼承PagerAdapter即可

private class ViewPagerAdapter extends PagerAdapter {
		//ViewPager總共有幾個頁面
        @Override
        public int getCount() {
            return 0; 
        }

		//判斷一個頁面(View)是否與instantiateItem方法返回的Object一致
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return false; 
        }
        
        //創建一個頁面
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            return super.instantiateItem(container, position); 
        }
        
         //銷燬一個頁面
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            super.destroyItem(container, position, object);
        }
    }

getCount( ):獲得viewpager中有多少個view

destroyItem( ):移除一個給定位置的頁面。適配器有責任從容器中刪除這個視圖。這是爲了確保 在finishUpdate(viewGroup)返回時視圖能夠被移除。

instantiateItem( ):①將給定位置的view添加到ViewGroup(容器)中,創建並顯示出來 ②返回一個代表新增頁面的Object(key),通常都是直接返回view本身就可以了, 當然你也可以自定義自己的key,但是key和每個view要一一對應的關係

isViewFromObject( ):判斷instantiateItem(ViewGroup, int)函數所返回來的Key與一個頁面視圖是否是 代表的同一個視圖(即它倆是否是對應的，對應的表示同一個View),通常我們直接寫 return view == object；就可以了,至於爲什麼要這樣講起來比較複雜,後面有機會進行了解吧 貌似是ViewPager中有個存儲view狀態信息的ArrayList,根據View取出對應信息的吧!

按照業務需求完善適配中的方法

package com.example.day006.adapter;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.example.day006.R;

import java.util.List;

/**
 * ${FENG}
 * 2019-07-10
 */
public class ViewPagerAdapter extends PagerAdapter {

    private Context context;
    private List<String> mData;

    public ViewPagerAdapter(Context context, List<String> mData) {
        this.context = context;
        this.mData = mData;
    }

    @Override
    public int getCount() {
        return mData.size();
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
        return view == o;
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        //加載vp的佈局
        View inflate = View.inflate(context, R.layout.vp_layout, null);
        //給佈局中的控件賦值
        TextView textView = inflate.findViewById(R.id.vp_tv_id);
        textView.setText(mData.get(position));
        //添加一個佈局
        container.addView(inflate);
        //返回佈局
        return inflate;
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
//        super.destroyItem(container, position, object);這一句要刪除，否則報錯
         container.removeView((View) object);
    }
}

在activity中初始化viewPager和adapter

package com.example.day006;

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.example.day006.adapter.ViewPagerAdapter;

import java.util.ArrayList;
import java.util.List;

public class ViewPagerActivity extends AppCompatActivity {
    private ViewPager vpId;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //去掉自帶的bar
        //supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_veiw_pager);

        //找到vp
        vpId = findViewById(R.id.vp_id);

        //初始化數據
        List<String> list = new ArrayList<>();
        for (int i = 0; i < 4; i++) {
            list.add("第"+i+"個View");
        }

        //設置adapter
        vpId.setAdapter(new ViewPagerAdapter(this,list));
    }
}

---

viewPage的翻頁動畫

ViewPager有個方法叫做：

setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer) 用於設置ViewPager切換時的動畫效果，並且google官方還給出了兩個示例（因爲使用的是屬性動畫，所以不兼容3.0以下）。
第一個參數是boolean 代表正序還是反序,第二個是自定義翻頁效果.

自定義翻頁效果代碼

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);
        }
    }
}

調用：

//直接設置即可

 vpId.setPageTransformer(false,new DepthPageTransformer());

自動翻頁

package com.example.day006;

import android.os.CountDownTimer;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Window;

import com.example.day006.adapter.ViewPagerAdapter;

import java.util.ArrayList;
import java.util.List;

public class ViewPagerActivity extends AppCompatActivity {
    private ViewPager vpId;
    private CountDownTimer timer;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //去掉自帶的bar
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_veiw_pager);

        //找到vp
        vpId = findViewById(R.id.vp_id);

        //初始化數據
        final List<String> list = new ArrayList<>();
        for (int i = 0; i < 4; i++) {
            list.add("第"+i+"個View");
        }

        //設置adapter
        vpId.setPageTransformer(false,new DepthPageTransformer());
        vpId.setAdapter(new ViewPagerAdapter(this,list));

		//安卓自帶的定時器方法
        timer =  new CountDownTimer(100000, 2000) {
            int index = 0;
            @Override
            public void onTick(long millisUntilFinished) {
               //設置當前viewpager顯示那個頁面
                vpId.setCurrentItem(index);
                ++index;
                if (index == list.size()){
                    index = 0;
                }
            }

            @Override
            public void onFinish() {

            }
        };
        timer.start();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        //防止內存溢出
        timer.cancel();
    }
}

翻頁監聽

1. 設置方法
   addOnPageChangeListener()
2. 翻頁監聽接口
   ViewPager.OnPageChangeListener
3. 重寫方法
   1 ,onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
   頁面滑動狀態停止前一直調用
   position：當前點擊滑動頁面的位置
   positionOffset：當前頁面偏移的百分比
   positionOffsetPixels：當前頁面偏移的像素位置

2, onPageSelected(int position)
滑動後顯示的頁面和滑動前不同，調用
position：選中顯示頁面的位置

3 ,onPageScrollStateChanged(int state)
頁面狀態改變時調用

state：當前頁面的狀態
SCROLL_STATE_IDLE：空閒狀態
SCROLL_STATE_DRAGGING：滑動狀態
SCROLL_STATE_SETTLING：滑動後滑翔的狀態

4. 使用

//直接設置即可

vpId.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        Log.e("vp","滑動中=====position:"+ position + "   positionOffset:"+ positionOffset + "   positionOffsetPixels:"+positionOffsetPixels);
    }

    @Override
    public void onPageSelected(int position) {
        Log.e("vp","顯示頁改變=====postion:"+ position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        switch (state) {
            case ViewPager.SCROLL_STATE_IDLE:
                Log.e("vp","狀態改變=====SCROLL_STATE_IDLE====靜止狀態");
                break;
            case ViewPager.SCROLL_STATE_DRAGGING:
                Log.e("vp","狀態改變=====SCROLL_STATE_DRAGGING==滑動狀態");
                break;
            case ViewPager.SCROLL_STATE_SETTLING:
                Log.e("vp","狀態改變=====SCROLL_STATE_SETTLING==滑翔狀態");
                break;
        }
    }
});

ViewPager與Fragment結合使用 ( 重 點 )
與Fragment結合使用其實也一樣，只是用Fragment代替原先的View，填充ViewPager；然後就是Adapter不一樣，配合Fragment使用的有兩個Adapter：FragmentPagerAdapter和FragmentStatePagerAdapter。

相同點：
FragmentPagerAdapter和FragmentStatePagerAdapter都繼承自PagerAdapter

不同點：
卸載不再需fragment時，各自採用的處理方法有所不同

ViewPager兩個Adapter方法的區別
在destroyItem()方法中，FragmentStatePagerAdapter調用的是remove()方法，適用於頁面較多的情況；FragmentPagerAdapter調用的是detach()方法，適用於頁面較少的情況。但是有頁面數據需要刷新的情況，不管是頁面少還是多，還是要用FragmentStatePagerAdapter，否則頁面會因爲沒有重建得不到刷新
創建Fragment及相應的xml佈局

public class PagerFragment extends Fragment {
    String mContent;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        mContent = (String) getArguments().get("content");
        View view = inflater.inflate(R.layout.fragment_pager, container, false) ;
        TextView textView = (TextView) view.findViewById(R.id.tv);
        textView.setText(mContent);
        return view;
    }

}

xml文件

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.strivestay.viewpagerdemo.PagerFragment">

    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="18sp"
        android:text="@string/hello_blank_fragment"/>

</FrameLayout>

給Viewpager設置數據和適配器

final List<PagerFragment> list = new ArrayList<>();
    for (int i = 0; i < 5; i++) {
        PagerFragment fragment = new PagerFragment();
        Bundle bundle = new Bundle();
        bundle.putString("content","第"+i+"個Fragment");
        fragment.setArguments(bundle);

        list.add(fragment);
    }

    ViewPager vp = (ViewPager) findViewById(R.id.vp);
//        vp.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
//            @Override
//            public Fragment getItem(int position) {
//                return list.get(position);
//            }
//
//            @Override
//            public int getCount() {
//                return list.size();
//            }
//        });

    vp.setAdapter(new FragmentStatePagerAdapter(getSupportFragmentManager()) {
        @Override
        public Fragment getItem(int position) {
            return list.get(position);
        }

        @Override
        public int getCount() {
            return list.size();
        }
    });

FragmentStatePagerAdapter
fragment的生命週期會執行
onDestoryView
onDestory
onCreate
onCreateView
fragment會被銷燬
適用用 圖片預覽等多個fragment的情況

FragmentPagerAdapter
onDestoryView
onCreateView
fragment不會被銷燬
適用於引導頁等少個fragment的情況