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

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