Android Studio ViewPager教學




先在Activity_main.xml新增ViewPager



    <android.support.v4.view.ViewPager
        android:id="@+id/viewPage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

在MainActivity.java宣告



    private ViewPager viewPager;
    private List<PageView> pageList;

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

        pageList = new ArrayList<>();
        pageList.add(new PageList1(MainActivity.this));
        pageList.add(new PageList2(MainActivity.this));
        pageList.add(new PageList3(MainActivity.this));

        viewPager = (ViewPager) findViewById(R.id.viewPage);
        viewPager.setAdapter(new PageAdapter());
    }

這時候PageList1、PageList2、PageList3會錯誤是正常的,因為還沒宣告

先定義PagerAdapter


    private class PageAdapter extends android.support.v4.view.PagerAdapter {

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

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

        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {
            container.addView(pageList.get(position));
            return pageList.get(position);
            //return super.instantiateItem(container, position);
        }

        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
            //super.destroyItem(container, position, object);
            container.removeView((View)object);
        }

    }

建立layout,這就是之後每個page會顯示的頁面,這裡用同一個做示範,不然看你pageList裡面有幾個就建立幾個




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/text"
        android:text="TextView"
        android:textSize="30dp"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

回到MainActivity.java建立PageView class方便之後選寫用


    public class PageView extends RelativeLayout {
        public PageView(Context context) {
            super(context);
        }
    }

補上PageList1、PageList2、PageList3
如果你剛剛建立的Layout不只一個,那這裡的R.layout.page_content就分別改成你剛剛建立的Layout


    public class PageList1 extends PageView{

        public PageList1(Context context) {
            super(context);

            View view = LayoutInflater.from(context).inflate(R.layout.page_content, null);
            TextView textView = (TextView) view.findViewById(R.id.text);
            textView.setText("pagelist1");
            addView(view);
        }
    }
    public class PageList2 extends PageView{

        public PageList2(Context context) {
            super(context);
            View view = LayoutInflater.from(context).inflate(R.layout.page_content, null);
            TextView textView = (TextView) view.findViewById(R.id.text);
            textView.setText("pagelist2");
            addView(view);
        }
    }
    public class PageList3 extends PageView{

        public PageList3(Context context) {
            super(context);
            View view = LayoutInflater.from(context).inflate(R.layout.page_content, null);
            TextView textView = (TextView) view.findViewById(R.id.text);
            textView.setText("pagelist3");
            addView(view);
        }
    }

執行結果:






留言