Android菜鸡的提升之路---ViewPager艺术（实现简单的图片展示器）

通过上一篇文章，关于ViewPager基础的实现应该已经没有问题了，那么看到淘宝等APP在首页介绍里面有一个图片滑动查看的效果，这里简单的实现一下，先上图片：

三张图片滑动，下面的红白点是显示当前的图片（不要care点的位置，这个可以自己调一下）：

先说一下思路：首先在ViewPager中加载三张图片，这里用的是动态添加控件的方法，然后就是放小点点，点其实是图，用ps自己画的，在布局里面把点放在对应的位置，小红点的转换思路：利用ViewPager中OnPagerChangeListener（页面变化监听时间），当滑动到第二个页面的时候把中间的点变红，其它的变灰。

下面附上布局文件：

xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.admin.viewpage.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpage"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintVertical_bias="0.0">

    android.support.v4.view.ViewPager>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello"
        android:id="@+id/but_2"
        android:visibility="gone"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="311dp" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@drawable/hong"
        android:layout_marginLeft="131dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="403dp" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@drawable/hui"
        app:layout_constraintLeft_toRightOf="@+id/imageView1"
        android:layout_marginLeft="24dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="403dp" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="25dp"
        android:layout_height="26dp"
        android:background="@drawable/hui"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="403dp"
        app:layout_constraintLeft_toRightOf="@+id/imageView2"
        android:layout_marginLeft="24dp" />

android.support.constraint.ConstraintLayout>

这里用的是ConstraintsLayout，不太会的同学可以去百度一下，挺好用的一个布局方式。

下面附上java代码：

package com.example.admin.viewpage;

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
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.ImageView;
import android.widget.Toast;

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

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{
    ViewPager viewPager;
 //   View view1,view2;
  //  List viewList;
    Button but_2;
    List imageViewList;
    ImageView []img;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ActionBar actionbar = getSupportActionBar();
        if(actionbar!=null){
            actionbar.hide();
        }//隐藏标题
         viewPager = (ViewPager)findViewById(R.id.viewpage);//绑定视图
        imageViewList = new ArrayList<>();//new list对象 ，放的是底图
        but_2 = (Button)findViewById(R.id.but_2);//绑定视图
        /*
        LayoutInflater layoutInflater = getLayoutInflater();
        view1 = layoutInflater.inflate(R.layout.layout1,null);
        view2 = layoutInflater.inflate(R.layout.layout2,null);
        viewList = new ArrayList<>();
        viewList.add(view1);
        viewList.add(view2);

*/
        img = new ImageView[3];//小点点的ImageView控件数组，这里三张
        img[0] = (ImageView)findViewById(R.id.imageView1);
        img[1] = (ImageView)findViewById(R.id.imageView2);
        img[2] = (ImageView)findViewById(R.id.imageView3);
        
        initData();//初始化底部图片
        
        //ViewPager的适配器，至少写一下四个函数
        PagerAdapter pagerAdapter = new PagerAdapter() {
            @Override
            public int getCount() {//统计数量
                return imageViewList.size();
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;//是否是当前的View
            }

            @Override
            public void destroyItem(ViewGroup container , int position, Object object){
                container.removeView(imageViewList.get(position));
                //删除view

            }

            @Override
            public Object instantiateItem(ViewGroup container , int pisition){
                container.addView(imageViewList.get(pisition));
                return imageViewList.get(pisition);
                //添加View
            }





        };

        viewPager.setAdapter(pagerAdapter);//绑定适配器
        viewPager.setOnPageChangeListener(this);//添加 PageChangeListener监听事件
    }

    public void initData(){
        ImageView imageView = new ImageView(this);
        imageView.setImageResource(R.drawable.ka_1);
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);
        imageViewList.add(imageView);//把底图一张张添加到list中

        ImageView imageView1 = new ImageView(this);
        imageView1.setImageResource(R.drawable.ka_2);
        imageView1.setScaleType(ImageView.ScaleType.FIT_XY);
        imageViewList.add(imageView1);

        ImageView imageView2 = new ImageView(this);
        imageView2.setImageResource(R.drawable.ka_3);
        imageView2.setScaleType(ImageView.ScaleType.FIT_XY);
        imageViewList.add(imageView2);

    }
    
    /*
    PageChangListener需要重写的方法
     */
    @Override
    public void onPageSelected(int position) {
        //当前选中的位置
        if(position == imageViewList.size()-1){
            but_2.setVisibility(View.VISIBLE);//当显示到最后一张的时候出现button
        }
        else
            but_2.setVisibility(View.GONE);

        for(int i = 0; i<imageViewList.size(); i++){
            if(i == position){
                img[i].setImageResource(R.drawable.hong);//当前位置的小点点变红
            }
            else
                img[i].setImageResource(R.drawable.hui);//不是当前位置小点点变灰
        }


    }

    /**
     * 当页面正在滚动时 position 当前选中的是哪个页面 positionOffset 比例 positionOffsetPixels 偏移像素
     */
    @Override
    public void onPageScrolled(int position, float positionOffset,
                               int positionOffsetPixels) {
    }


    /**
     * 当页面滚动状态改变
     */
    @Override
    public void onPageScrollStateChanged(int state) {

    }

}

代码很简单，有注释，需要源码的可以留言。