使用ViewPager实现一页显示多个ImageView的滑动切换视图

普遍的ViewPager都是实现像轮播图一样的功能，最近在做一个自定义项目，需要实现ViewPager的一页内容里面承载多个ImageView，其实他的实现方法没什么变化，只是我这个小白想要做个记录，任性一把。

难得这次录了个效果图，先放上来吧

接着上代码，先看布局文件

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:gravity="center"
    android:orientation="vertical"
    android:background="#8290AF"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="demo.yang.com.pageradapter.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:background="#ffffff"
        android:layout_width="match_parent"
        android:layout_height="200dp">
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/viewpager_point"
        android:orientation="horizontal"
        android:layout_gravity="bottom"
        android:gravity="center_horizontal"
        android:paddingBottom="15dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </LinearLayout>

</LinearLayout>

其中的LinearLayout是用来放置那个小圆点的

pager1.xml

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

    <LinearLayout
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:id="@+id/linear_shentie"
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="wrap_content">
            <ImageView

                android:src="@drawable/photo"
                android:layout_width="60dp"
                android:layout_height="60dp" />
            <TextView
                android:layout_gravity="center"
                android:text="小白"
                android:layout_marginTop="5dp"
                android:textColor="#000000"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="wrap_content">
            <ImageView
                android:src="@drawable/photo"
                android:layout_width="60dp"
                android:layout_height="60dp" />
            <TextView
                android:layout_gravity="center"
                android:text="小白"
                android:layout_marginTop="5dp"
                android:textColor="#000000"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="wrap_content">
            <ImageView
                android:src="@drawable/photo"
                android:layout_width="60dp"
                android:layout_height="60dp" />
            <TextView
                android:layout_gravity="center"
                android:text="小白"
                android:layout_marginTop="5dp"
                android:textColor="#000000"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="wrap_content">
            <ImageView
                android:src="@drawable/photo"
                android:layout_width="60dp"
                android:layout_height="60dp" />
            <TextView
                android:layout_gravity="center"
                android:text="小白"
                android:layout_marginTop="5dp"
                android:textColor="#000000"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="wrap_content">
            <ImageView
                android:src="@drawable/photo"
                android:layout_width="60dp"
                android:layout_height="60dp" />
            <TextView
                android:layout_gravity="center"
                android:text="小白"
                android:layout_marginTop="5dp"
                android:textColor="#000000"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="wrap_content">
            <ImageView
                android:src="@drawable/photo"
                android:layout_width="60dp"
                android:layout_height="60dp" />
            <TextView
                android:layout_gravity="center"
                android:text="小白"
                android:layout_marginTop="5dp"
                android:textColor="#000000"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="wrap_content">
            <ImageView
                android:src="@drawable/photo"
                android:layout_width="60dp"
                android:layout_height="60dp" />
            <TextView
                android:layout_gravity="center"
                android:text="小白"
                android:layout_marginTop="5dp"
                android:textColor="#000000"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="wrap_content">
            <ImageView
                android:src="@drawable/photo"
                android:layout_width="60dp"
                android:layout_height="60dp" />
            <TextView
                android:layout_gravity="center"
                android:text="小白"
                android:layout_marginTop="5dp"
                android:textColor="#000000"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="wrap_content">
            <ImageView
                android:src="@drawable/photo"
                android:layout_width="60dp"
                android:layout_height="60dp" />
            <TextView
                android:layout_gravity="center"
                android:text="小白"
                android:layout_marginTop="5dp"
                android:textColor="#000000"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="wrap_content">
            <ImageView
                android:src="@drawable/photo"
                android:layout_width="60dp"
                android:layout_height="60dp" />
            <TextView
                android:layout_gravity="center"
                android:text="小白"
                android:layout_marginTop="5dp"
                android:textColor="#000000"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </LinearLayout>



</LinearLayout>

我是直接复制粘贴重复添加的，所以代码有点冗杂，这里就是通过LinearLayout的布局对应的放置ImageView和TextView。另外还有4个pager2、pager3、pager4、pager5，代码内容是一样的，这里就不放上去了。

最后当然是主代码了

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

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

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private MyPagerAdapter myPagerAdapter;
    private TextView mPageNum;
    private EditText mEditText;
    private Button mButton;
    private ImageView imageView;//小圆点的视图
    private ImageView[] imagePoints;//viewpager的小圆点
    private LinearLayout mViewPoints;//包裹小圆点的linearlayout

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();//初始化
    }

    private void initView(){
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        mViewPoints = (LinearLayout)findViewById(R.id.viewpager_point);
        List<View> list = new ArrayList<>();
        LayoutInflater layoutInflater = getLayoutInflater();
        View view1 = layoutInflater.inflate(R.layout.page1,null);//添加视图
        View view2 = layoutInflater.inflate(R.layout.page2,null);
        View view3 = layoutInflater.inflate(R.layout.page3,null);
        View view4 = layoutInflater.inflate(R.layout.page4,null);
        View view5 = layoutInflater.inflate(R.layout.page5,null);
        view1.findViewById(R.id.linear_shentie).setOnClickListener(new View.OnClickListener() {//第一页第一个ImageView的点击事件
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this,"点击",Toast.LENGTH_SHORT).show();
            }
        });
        list.add(view1);
        list.add(view2);
        list.add(view3);
        list.add(view4);
        list.add(view5);
        imagePoints = new ImageView[list.size()];
        for (int i = 0;i<list.size();i++){//加载小圆点，默认第一页被选中
            imageView = new ImageView(MainActivity.this);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(20,20);//设置宽高
            layoutParams.setMargins(5,0,5,0);//设置margin
            imageView.setLayoutParams(layoutParams);
            imagePoints[i] = imageView;
            if (i == 0){
                imagePoints[i].setBackgroundResource(R.drawable.point_select);
            }else{
                imagePoints[i].setBackgroundResource(R.drawable.point_noselect);
            }
            mViewPoints.addView(imagePoints[i]);
        }
        myPagerAdapter = new MyPagerAdapter(list);
        viewPager.setAdapter(myPagerAdapter);
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {//当页面改变时，实时更新小圆点
                for (int i = 0;i<imagePoints.length;i++){
                    imagePoints[position].setBackgroundResource(R.drawable.point_select);
                    if (i != position){
                        imagePoints[i].setBackgroundResource(R.drawable.point_noselect);
                    }
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        viewPager.setOffscreenPageLimit(1);
        myPagerAdapter.notifyDataSetChanged();
    }

    private class MyPagerAdapter extends PagerAdapter{//ViewPager的适配器

        private List<View> list;

        public MyPagerAdapter(List<View> list) {
            this.list = list;
        }

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

        @Override
        public int getItemPosition(Object object) {
            return super.getItemPosition(object);
        }

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

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = list.get(position);
            container.addView(view);
            return view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(list.get(position));
        }
    }

}

这段代码我直接在上面附上了很多注释，这里就不在解释了，写到这里，我们的功能就已经实现了，如果大家有更简单的代码，欢迎指教