1. 程式人生 > >【android】ViewPager的使用——實現左右滑動(下方帶圓點)

【android】ViewPager的使用——實現左右滑動(下方帶圓點)

官方解釋:
ViewPager is most often used in conjunction with Fragment, which is a convenient way to supply and manage the lifecycle of each page. There are standard adapters implemented for using fragments with the ViewPager, which cover the most common use cases. These are FragmentPagerAdapter and FragmentStatePagerAdapter; each of these classes have simple code showing how to build a full user interface with them.

不官方翻譯:
ViewPager是最常用的連線碎片,這是一個用來提供每個view生命週期的比較方便的方式。有標準的介面卡使用ViewPager實現fragment,涵蓋了最常見的使用案例。分別是FragmentPagerAdapter 和FragmentStatePagerAdapter。

這兩個介面卡還沒有看,只用了ViewPager的標配——PagerAdaper,簡單介紹一下:
效果如下:


步驟如下:

1、匯入android-support-v4.jar(沒有必要)

寫第一個步驟就是說明一下,在使用android studio開發時,android-support-appcompat-v7包預設包含android-support-v4,所以沒有必要再去匯入配置什麼的。

2、寫佈局檔案

首先需要在佈局中加入ViewPager:

我的activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.viewpagerdemo.MainActivity">

    <!--ViewPager,這個空間上面可以放其他空間,ViewPager的範圍在這個控制元件以下-->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/addview1">

    </android.support.v4.view.ViewPager>


    <!--這裡是下方的圓點-->
    <LinearLayout
        android:id="@+id/viewGroup"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="30dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >
    </LinearLayout>
</RelativeLayout>

程式碼中ViewPager控制元件,藍線框是ViewPager的範圍,上面可以放置其他控制元件:
藍線框是ViewPager的範圍

寫了三個view,供切換,佈局裡內容隨意,這裡只有一個TextView.

view1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一頁"/>

</LinearLayout>

view2.xml

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二個"/>
</LinearLayout>

view3.xml

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第三個"/>
</LinearLayout>

3、ViewPager的載入介面卡PagerAdapter

首先解釋一下ViewPager的載入機制:
假設有三個view:當第0個被選中,會自動載入第1個view——>從第0個view滑到第1個view時,載入第2個view——>從第1個view滑到第2個view,銷燬第0個view,因為沒有下一個view所有不做載入——>從第2個view滑回第1個view,載入第0個view——>從第1個頁面view第0個view,銷燬第2個view。
所以,滑到一個view時,會自動載入這個view的左右兩個view,並銷燬其他的。

定義一個類繼承PagerAdapter(可以寫到定義的Activity中,也可以重新建個java檔案),重寫了四個方法:
public int getCount()
用來得到ViewPager中view的數量。

public boolean isViewFromObject(View view, Object object)
用來判斷傳來的view是否是正確的。

public Object instantiateItem(ViewGroup container, int position)
用來初始化view。ps:這個方法的第一個引數是ViewGroup,而不是View,之前的方法被這個替代了

public void destroyItem(ViewGroup container, int position, Object object)
用來銷燬view。ps:這個方法的第一個引數是ViewGroup,而不是View,之前的方法被這個替代了

class mypagerAdapter extends PagerAdapter{
        private ArrayList<View> pageview1;
        public mypagerAdapter(ArrayList<View> pageview1){
            this.pageview1 = pageview1;
        }
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            Log.d("MainActivityDestroy",position+"");
            if (pageview1.get(position)!=null) {
                container.removeView(pageview1.get(position));
            }
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(pageview1.get(position));
            Log.d("MainActivityInstanti",position+"");
            return pageview1.get(position);
        }

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

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

4、定義OnPageChangeListener

主要是用來實現OnPageChangeListener中的一些方法來改變下方的圓點,如果,不需要的就不用這個類了。可以寫到定義的Activity中,也可以重新建個java檔案。

class GuidePageChangeListener implements ViewPager.OnPageChangeListener{
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }


        @Override
        //切換view時,下方圓點的變化。
        public void onPageSelected(int position) {
            tips[position].setBackgroundResource(R.mipmap.page_indicator_focused);
            //這個圖片就是選中的view的圓點
            for(int i=0;i<pageview.size();i++){
                if (position != i) {
                    tips[i].setBackgroundResource(R.mipmap.page_indicator_unfocused);
                    //這個圖片是未選中view的圓點
                }
            }
        }
    }

放出我的小點點,哈哈:

5、最後一步,實現。

MainActivity.java方法

public class MainActivity extends AppCompatActivity /*implements View.OnClickListener*/{

    private ViewPager viewPager;

    //三個view
    private View view1;
    private View view2;
    private View view3;

    //用來存放view並傳遞給viewPager的介面卡。
    private ArrayList<View> pageview;


    //用來存放圓點,沒有寫第四步的話,就不要定義一下三個變量了。
    private ImageView[] tips = new ImageView[3];

    private ImageView imageView;

    //圓點組的物件
    private ViewGroup group;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //將view加進pageview中
        viewPager = (ViewPager)findViewById(R.id.viewPager);
        view1 = getLayoutInflater().inflate(R.layout.view1,null);
        view2 = getLayoutInflater().inflate(R.layout.view2,null);
        view3 = getLayoutInflater().inflate(R.layout.view3,null);
        pageview = new ArrayList<View>();
        pageview.add(view1);
        pageview.add(view2);
        pageview.add(view3);

        //viewPager下面的圓點,ViewGroup
        group = (ViewGroup)findViewById(R.id.viewGroup);
        tips = new ImageView[pageview.size()];
        for(int i =0;i<pageview.size();i++){
            imageView = new ImageView(MainActivity.this);
            imageView.setLayoutParams(new ViewGroup.LayoutParams(20,20));
            imageView.setPadding(20, 0, 20, 0);
            tips[i] = imageView;

            //預設第一張圖顯示為選中狀態
            if (i == 0) {
                tips[i].setBackgroundResource(R.mipmap.page_indicator_focused);
            } else {
                tips[i].setBackgroundResource(R.mipmap.page_indicator_unfocused);
            }

            group.addView(tips[i]);
        }
        //這裡的mypagerAdapter是第三步定義好的。
        viewPager.setAdapter(new mypagerAdapter(pageview));
        //這裡的GuiPageChangeListener是第四步定義好的。
        viewPager.addOnPageChangeListener(new GuidePageChangeListener());
    }
}

心得:太粗心了,要細心啊小夥子,還有就是最近被刺激了,要好好學習好好學習好好學習啊啊啊啊啊啊啊啊啊!!!!!!