38、实现图片ViewPager和点击事件

xml布局：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:layout_marginBottom="10dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:background="@color/white">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/viewpager_bg"
        />
    <!--用来填充圆点指示器的容器-->
    <LinearLayout
        android:id="@+id/point_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="2dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal" />
</RelativeLayout>

代码：

成员变量：
@BindView(R.id.viewpager)
ViewPager viewPager;
@BindView(R.id.point_container)
LinearLayout mPointsLayout;

private int[] imageResIds;
private List<ImageView> imageViewList;
private int previousSelectedItem;
// 在values文件假下创建了pager_image_ids.xml文件，并定义了4张轮播图对应的id，用于点击事件
private int[] imgae_ids = new int[]{R.id.pager_image1,R.id.pager_image2,R.id.pager_image3};

函数方法：

@Override
protected void initData() {
    //初始化适配器
    initAdapter();
}

private void initAdapter() {
    //图片资源id数组
    imageResIds = new int[]{R.color.blue, R.color.brown, R.color.text_confirm};
    imageViewList = new ArrayList<>();
    LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
    mParams.leftMargin = 15;
    mParams.topMargin = 2;

    ImageView imageView;
    ImageView pointView;
    //初始化要展示的ImageView,并添加圆点指示器
    for (int i = 0; i < imageResIds.length; i++) {
        // 初始化图片
        imageView = new ImageView(getActivity());
        imageView.setBackgroundResource(imageResIds[i]);
        imageView.setId(imgae_ids[i]);//顺便给图片设置id
        imageView.setOnClickListener(new pagerImageOnClick());//设置图片点击事件
        imageViewList.add(imageView);

        // 初始化指示器
        pointView = new ImageView(getActivity());
        pointView.setBackgroundResource(R.drawable.point_bg);
        pointView.setLayoutParams(mParams);
        if (i == 0) {
            pointView.setEnabled(true);
        } else {
            pointView.setEnabled(false);
        }
        mPointsLayout.addView(pointView);
    }


    viewPager.setAdapter(new MyAdapter());
    viewPager.setCurrentItem(0);
    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            int newPosition = position % imageViewList.size();
            mPointsLayout.getChildAt(previousSelectedItem).setEnabled(false);
            mPointsLayout.getChildAt(newPosition).setEnabled(true);
            previousSelectedItem = newPosition;
        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }
    });
}

//图片点击事件
private class pagerImageOnClick implements View.OnClickListener{

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.pager_image1:
                toast( "图片1被点击");
                break;
            case R.id.pager_image2:
                toast( "图片2被点击");
                break;
            case R.id.pager_image3:
                toast( "图片3被点击");
                break;
        }
    }
}

class MyAdapter extends PagerAdapter {

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

    // 2.返回要显示的条目，并创建条目
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        //container:容器，其实也就是ViewPager
        //position:当前要显示的条目的位置

        int newPosition = position % imageViewList.size();
        ImageView imageView = imageViewList.get(newPosition);
        //a.将View对象添加到container容器中
        container.addView(imageView);
        //b.把View对象返回给框架，适配器
        return imageView;
    }

    // 3.销毁条目，其实就是将要销毁的对象object从container中移除出去就好了
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }

    // 4.指定复用的判断逻辑（一般为固定写法）
    @Override
    public boolean isViewFromObject(View view, Object object) {
        // 当滑动到新的条目之后，又返回回来，view是否可以被复用
        return view == object;
    }
}

资源文件：

创建一个图片ID资源文件，用于图片点击事件：存放在values文件夹内

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item name="pager_image1" type="id" />
    <item name="pager_image2" type="id" />
    <item name="pager_image3" type="id" />
    <item name="pager_image4" type="id" />
</resources>

a.正常状态下，灰色圆点，point_normal.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size
        android:width="5dp"
        android:height="5dp" />
    <solid android:color="#44000000" />

</shape>

b.点击状态下，白色圆点 point_pressed.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size android:width="5dp" android:height="5dp"/>
    <solid android:color="#FFFFFFFF"/>
</shape>

c.设置背景时的xml文件， point_bg.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="true" android:drawable="@drawable/point_pressed"/>
    <item android:state_enabled="false" android:drawable="@drawable/point_normal"/>
</selector>