ViewPager

应用到的知识点为

ViewPager控件
ViewPager的适配器：PagerAdapter（可新建一个class继承或者直接用）

ViewPager监听接口：OnPageChangeListener
（一般重写onPageSelected(int position) 方法，该方法为切换ViewPager时的回调。）

简单版

先创建3个Layout

activity_main

<?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"
    android:orientation="vertical"
    >

    </LinearLayout>
        <android.support.v4.view.ViewPager
            android:id="@+id/viewpage"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_weight="1.0"
            android:flipInterval="30"
            android:persistentDrawingCache="animation" />

</LinearLayout>

---

接下来的两个layout则是将要切换的两个布局文件（将通过PagerAdapter放入PagerView）

colorView

<?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"
    android:background="#000000">

</LinearLayout>

---

Layout2

<?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"
    android:background="#ffff00"
    >

</LinearLayout>

---

接下来是MainActivity

public class MainActivity extends AppCompatActivity {
    private View view1, view2;
    private ViewPager viewPager;
    private TextView textView1, textView2;
    private PagerAdapter pagerAdapter;

    private List<View> viewList = new ArrayList<>();
   //创建一个ArrayList用来保存要切换的View

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.viewpage);
        LayoutInflater inflater = getLayoutInflater();

        view1 = inflater.inflate(R.layout.layout, null);
        view2 = inflater.inflate(R.layout.layout2, null);
        viewList.add(view1);
        viewList.add(view2);
        //将两个布局文件放进ArrayList中

        //创建一个 PagerAdapter 并将其与viewList绑定（也可以创建一个类并继承PagerAdapter）
        pagerAdapter = new PagerAdapter() {
            @Override
            public int getCount() {
                return viewList.size();
            }

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


            //移除当前容器上的布局文件（切换为其他页面）
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(viewList.get(position));
            }

            //为当前容器添加布局文件（即想要显示的布局文件）
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(viewList.get(position));
                return viewList.get(position);
            }
        };

        //将 pagerAdapter与 viewPager绑定
        viewPager.setAdapter(pagerAdapter);
    }
}

以上实现了通过滑屏切换View的功能。图片大致如下：

---

进阶

1.应用ViewPager监听接口：OnPageChangeListener
2.用按钮控制ViewPager
3.将其中一个View设为ListView

---

还是创建三个Layout
main_activity

<?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"
    android:orientation="vertical"
    >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        >

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/offlinearrow_tab1_pressed"
            android:paddingBottom="10dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:paddingTop="10dp"
            android:text="可下载" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/offlinearrow_tab2_normal"
            android:paddingBottom="10dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:paddingTop="10dp"
            android:text="已下载" />

    </LinearLayout>
        <android.support.v4.view.ViewPager
            android:id="@+id/viewpage"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_weight="1.0"
            android:flipInterval="30"
            android:persistentDrawingCache="animation" />

</LinearLayout>

添加了两个TextView用于两个View切换时的标志

---

两个切换的View

color_view

<?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"
    android:background="#000000">

</LinearLayout>

---

list_view

<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/download"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/offline_common_bar_bg"
    >

</ListView>

---

以及ListView的Item_布局文件：
Item

<?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:id="@+id/show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</LinearLayout>

---

MyMyPageAdapter继承 PagerAdapter

public class MyPageAdapter extends PagerAdapter{

    View listView,colorView;
    //两个View：一个ListView，另一个则是和上文一样的纯颜色布局文件

    ViewPager viewPager;
    //声明一个ViewPager

    public MyPageAdapter(View listView, View colorView, ViewPager viewPager) {
        this.listView = listView;
        this.colorView = colorView;
        this.viewPager = viewPager;
    }

    @Override
    public int getCount() {
        return 2;
    }

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

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        if (position == 0){
            viewPager.removeView(listView);
        }else{
            viewPager.removeView(colorView);
        }
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        if (position ==0){
            viewPager.addView(listView);
            return listView;
        }else {
            viewPager.addView(colorView);
            return colorView;
        }
    }

    @Override
    public void restoreState(Parcelable arg0, ClassLoader arg1) {
    }

    @Override
    public Parcelable saveState() {
        return null;
    }

    @Override
    public void startUpdate(View arg0) {
    }
}

MainActivity

public class MainActivity extends AppCompatActivity implements View.OnClickListener,ViewPager.OnPageChangeListener{
    private View colorView;
    private ListView listView;

    private ViewPager viewPager;
    private MyPageAdapter pagerAdapter;

    private TextView textView1, textView2;

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

        initViewAndMyPageAdapter();
        /*
         *初始化将要显示View，并将其通过适配器与ViewPager绑定
         */
        initListViewAndAdapter();
        /*
         *初始化ListV并为其绑定适配器及数据源
         */
        initTextView();
        /*
         *初始化TextView并为其添加点击监听事件
         */
    }

    private void initTextView() {
        textView1 = (TextView) findViewById(R.id.textView);
        textView2 = (TextView) findViewById(R.id.textView2);
        textView1.setOnClickListener(this);
        textView2.setOnClickListener(this);
    }

    private void initListViewAndAdapter() {
        ArrayList<String> list = new ArrayList<>();
        list.add("java");
        list.add("C++");
        list.add("JavaScript");
        ArrayAdapter<String> adapter = new ArrayAdapter<>(MainActivity.this, android.R.layout.simple_list_item_1, list);
        // 给ListView设置数据适配器
        listView.setAdapter(adapter);
    }

    private void initViewAndMyPageAdapter() {
        LayoutInflater inflater = getLayoutInflater();

        colorView = inflater.inflate(R.layout.color_view, null);
        listView =(ListView) LayoutInflater.from(
                MainActivity.this).inflate(
                R.layout.list_view, null);
        /*
        初始化两个布局文件
         */

        viewPager = (ViewPager) findViewById(R.id.viewpage);
        viewPager.setOnPageChangeListener(this);

        pagerAdapter = new MyPageAdapter(listView,colorView,viewPager);
        viewPager.setAdapter(pagerAdapter);
        /*
        * 初始话viewPager并为其添加监听事件；
        * 初始化pagerAdapter，并将其与viewPager绑定。
        */

    }


    @Override
    public void onClick(View v) {

        if (v.equals(textView1)) {
            changeTextViewStatus(0);
            viewPager.setCurrentItem(0);

        } else if(v.equals(textView2)){
            changeTextViewStatus(1);
            viewPager.setCurrentItem(1);

        }
        pagerAdapter.notifyDataSetChanged();
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

    @Override
    public void onPageSelected(int position) {
       changeTextViewStatus(position);
    }


    @Override
    public void onPageScrollStateChanged(int state) {
    }

    /*
    *根据当前Pager显示的界面，修改TextView的背景图片
    */
    public void changeTextViewStatus(int positionOfPager){
        int paddingHorizontal = textView1.getPaddingLeft();
        int paddingVertical = textView2.getPaddingTop();
        switch (positionOfPager) {
            case 0:
                textView1
                        .setBackgroundResource(R.drawable.offlinearrow_tab1_pressed);
                textView2
                        .setBackgroundResource(R.drawable.offlinearrow_tab2_normal);
                break;
            case 1:
                textView1
                        .setBackgroundResource(R.drawable.offlinearrow_tab1_normal);

                textView2
                        .setBackgroundResource(R.drawable.offlinearrow_tab2_pressed);
                break;
        }

        /*
        *让textView的内容保持原来的间距
        */
        textView1.setPadding(paddingHorizontal, paddingVertical,
                paddingHorizontal, paddingVertical);
        textView2.setPadding(paddingHorizontal, paddingVertical,
                paddingHorizontal, paddingVertical);
    }
}

效果大致如图：