Android 使用ViewPager实现图片左右滑动和PhotoView浏览大图

最新推荐文章于 2025-05-14 16:42:18 发布

原创最新推荐文章于 2025-05-14 16:42:18 发布 · 5.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#android #viewpager #photoview

Android 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何使用PhotoView和ViewPager实现在点击图片时放大浏览并支持左右滑动切换的功能。主要内容包括PhotoView特性介绍、ViewPager布局配置、适配器代码实现等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.PhotoView的介绍：

PhotoView的github地址：
https://github.com/chrisbanes/PhotoView

PhotoView特性：

 支持单点/多点触摸，即时缩放图片；
 支持平滑滚动；
 在滑动父控件下能够运行良好；（例如：ViewPager）
 当用户的触点改变时可以触发通知。

PhotoView的详解，请参考PhotoView源码剖析

2.上Demo源码：

ViewPager的布局：

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

    <include layout="@layout/toolbar_title"
        android:id="@+id/toolbar_title"/>

    <com.dgaotech.dgfw.widget.ImageViewPager
        android:id="@+id/img_viewpager"
        android:layout_below="@+id/toolbar_title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/black"/>

    <TextView
        android:id="@+id/text_num"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="@dimen/public_margin20dp"
        android:textSize="@dimen/public_textsize20sp"
        android:textColor="@color/white"
        android:text="1/3"
        android:visibility="visible"/>

</RelativeLayout>

adapter的布局：

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

    <uk.co.senab.photoview.PhotoView
        android:id="@+id/photoview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

主要核心代码：

 List<View> listViews = new ArrayList<View>();
        for (int i = 0; i < data.size(); i++) {
            View view = LayoutInflater.from(getApplicationContext()).inflate(
                    R.layout.adapter_viewpager, null);
            final PhotoView photoview = (PhotoView) view.findViewById(R.id.photoview);
            photoview.setAdjustViewBounds(true);
            photoview.setScaleType(ImageView.ScaleType.FIT_CENTER);

            String url = data.get(i).getImg_url();
            Glide.with(this)
                    .load(url)
                    .skipMemoryCache(true)//不缓存到内存
                    .priority(Priority.HIGH)
                    .diskCacheStrategy(DiskCacheStrategy.SOURCE)
                    .placeholder(R.drawable.gugong_details)
                    .error(R.drawable.gugong_details)
                    .into(photoview);
            listViews.add(view);

            PhotoPagerAdapter photoPagerAdapter = new PhotoPagerAdapter(listViews);
            img_viewpager.setAdapter(photoPagerAdapter);
            //通过viewPager.setCurrentItem来定义当前显示哪一个图片，position由上一个页面传过来
            img_viewpager.setCurrentItem(position);
            photoPagerAdapter.notifyDataSetChanged();

PhotoPagerAdapter的代码：

public class PhotoPagerAdapter extends PagerAdapter {
    private List<View> list;
    public PhotoPagerAdapter(List<View> list) {
        this.list = list;
    }

    @Override
    public int getCount() {
        if (list != null && list.size() > 0) {
            return list.size();
        } else {
            return 0;
        }
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == arg1;
    }

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

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

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

}