Android ViewPapger实现滑动图片浏览器

来源：互联网发布：个人做淘宝达人赚钱吗编辑：程序博客网时间：2024/05/18 01:13

ViewPager的简介和作用

ViewPager是android扩展包v4包中的类，这个类可以让用户左右切换当前的view

ViewPager类直接继承了ViewGroup类，所有它是一个容器类，可以在其中添加其他的view类。
ViewPager类需要一个PagerAdapter适配器类给它提供数据。
ViewPager经常和Fragment一起使用，并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。

ViewPager的适配器

PagerAdapter，和ListView等控件使用一样,需要ViewPager设置PagerAdapter来完成页面和数据的绑定，这个PagerAdapter是一个基类适配器，我们经常用它来实现app引导图，它的子类有FragmentPagerAdapter和FragmentStatePagerAdapter,这两个子类适配器用于和Fragment一起使用，在安卓应用中它们就像listview一样出现的频繁。

图片浏览器

先用一个GridView显示所有的图片。
点击GridView，显示当前图片。
滑动显示上一张或者下一张图片，并显示当前图片的位置。

效果图

主界面效果

MainActivity.class主界面

public class MainActivity extends AppCompatActivity {    @BindView(R.id.grid)    GridView grid;    private GirdAdapter girdAdapter;    int[] imageIds = new int[]            {                    R.drawable.bomb5, R.drawable.bomb6, R.drawable.bomb7                    , R.drawable.bomb8, R.drawable.bomb9, R.drawable.bomb10                    , R.drawable.bomb11, R.drawable.bomb12, R.drawable.bomb13                    , R.drawable.bomb14, R.drawable.bomb15, R.drawable.bomb16            };    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        ButterKnife.bind(this);        girdAdapter = new GirdAdapter(this, imageIds);        grid.setAdapter(girdAdapter);        grid.setOnItemClickListener(new AdapterView.OnItemClickListener() {            @Override            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {                Intent intent = new Intent(MainActivity.this, BrowserActivity.class);                intent.putExtra("imgs", imageIds);                intent.putExtra("pos", position);                startActivity(intent);//选中图片            }        });    }}

实现GridView加载图片，代码及布局比较简单，后面会附moudle代码。

BrowserActivity.class图片浏览器界面

public class BrowserActivity extends Activity {    @BindView(R.id.pager)    ViewPager pager;    @BindView(R.id.num)    TextView num;    int[] imgs;    int pos;    private ImgAdapter imgAdapter;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.image_papager);        ButterKnife.bind(this);        imgs = getIntent().getIntArrayExtra("imgs");        pos = getIntent().getIntExtra("pos", 0);        imgAdapter = new ImgAdapter(this, imgs);        pager.setAdapter(imgAdapter);        pager.setCurrentItem(pos);//设置起始位置        pager.setPageTransformer(true, new DepthPageTransformer());//修改动画效果        pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {                num.setText((position + 1) + "/" + imgs.length);//显示当前图片的位置            }            @Override            public void onPageSelected(int position) {            }            @Override            public void onPageScrollStateChanged(int state) {            }        });    }}

ImgAdapter.class ViewPager适配器

public class ImgAdapter extends PagerAdapter {    private int[] imgs;    private Context context;    public ImgAdapter(Context context, int[] imgs) {        this.context = context;        this.imgs = imgs;    }    @Override    public int getCount() {        return imgs.length;    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {//及时销毁界面，防止内存溢出        container.removeView((View) object);    }    @Override    public boolean isViewFromObject(View view, Object object) {        return view == object;    }    @Override    public Object instantiateItem(ViewGroup container, int position) {//必须实现        View view = LayoutInflater.from(context).inflate(R.layout.imageview,container,false);        ImageView imageView = (ImageView) view.findViewById(R.id.img);        imageView.setImageResource(imgs[position]);        container.addView(view);        return view;    }}

以上四个方法是ViewPager适配器必须实现的四个方法。

设置滑动效果

ViewPager有个方法叫做：setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer) 用于设置ViewPager切换时的动画效果，并且google官方还给出了两个示例。
只需要在上述代码中调用setPageTransformer即可添加切换动画效果。

public class DepthPageTransformer implements ViewPager.PageTransformer {      private static final float MIN_SCALE = 0.75f;      public void transformPage(View view, float position) {          int pageWidth = view.getWidth();          if (position < -1) { // [-Infinity,-1)              // This page is way off-screen to the left.              view.setAlpha(0);          } else if (position <= 0) { // [-1,0]              // Use the default slide transition when moving to the left page              view.setAlpha(1);              view.setTranslationX(0);              view.setScaleX(1);              view.setScaleY(1);          } else if (position <= 1) { // (0,1]              // Fade the page out.              view.setAlpha(1 - position);              // Counteract the default slide transition              view.setTranslationX(pageWidth * -position);              // Scale the page down (between MIN_SCALE and 1)              float scaleFactor = MIN_SCALE                      + (1 - MIN_SCALE) * (1 - Math.abs(position));              view.setScaleX(scaleFactor);              view.setScaleY(scaleFactor);          } else { // (1,+Infinity]              // This page is way off-screen to the right.              view.setAlpha(0);          }      }  }

补充

更多动画效果，请查看：
http://blog.csdn.net/lmj623565791/article/details/40411921
http://blog.csdn.net/lmj623565791/article/details/38026503

代码地址：
http://download.csdn.net/detail/demonliuhui/9824384

0 0