一. 前言

使用photoView實現圖片的放大縮小，再使用viewPager實現圖片的左右滑動

二. 新增依賴

• build.gradle (app)

    //photoView
    implementation 'com.github.chrisbanes:PhotoView:2.0.0'
    //glide
    implementation 'com.github.bumptech.glide:glide:4.7.1'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.7.1'

• build.gradle (project)

allprojects {
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" }
    }
}

• manifests 新增網路許可權

    <uses-permission android:name="android.permission.INTERNET"/>

三. XML檔案

• activity_main

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:background
 
="#000"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>

        <LinearLayout
            android:id="@+id/points"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center"
            android:layout_alignBottom="@+id/viewpager"
            android:layout_marginBottom="30dp"
            android:padding="5dp"></LinearLayout>
</RelativeLayout>

四. 使用Glide

這裡使用Glide來載入網路圖片,Gilde自從4.0.0版本開始要通過生成GlideApp類來使用各種Api,那麼就開始動手實踐吧

1.生成GlideApp

• 首先建立MyAppGlideModule類

@GlideModule
public final class MyAppGlideModule extends AppGlideModule {
}

• build ->Rebuild Project

2. 封裝ImageLoading類

因為我這裡只是一個測試Demo,所以這是封裝了一種方法,Glide的 功能很強大，如載入gif圖, 實現模糊 等等操作

public class ImageLoader {
    public static void display(Context context, ImageView imageView,String url){
        GlideApp
                .with(context)
                .load(url)
                .placeholder(R.drawable.timg)
                .into(imageView);
    }

}

五. Activity層操作

在這一層需要初始化Viewpager和設定白點指示器, 並和介面卡繫結資料

public class MainActivity extends AppCompatActivity {
    private ViewPager viewPager;
    private MyViewPagerAdapter myViewPagerAdapter;
    private String[] imglist = {
            "https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=82f1640b19ce36d3bd0485300af23a24/fcfaaf51f3deb48f5510390ffc1f3a292cf578e2.jpg",
            "https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=ff6ed7cfa718972bbc3a06cad6cc7b9d/267f9e2f07082838304837cfb499a9014d08f1a0.jpg",
            "https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=a537b312164c510fb1c4e41a50582528/b8389b504fc2d562a746bd37eb1190ef77c66c99.jpg",
            "https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=56577be956afa40f23c6c8dd9b66038c/562c11dfa9ec8a1346809b3bfb03918fa1ecc057.jpg",
            "https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=a537b312164c510fb1c4e41a50582528/b8389b504fc2d562a746bd37eb1190ef77c66c99.jpg",
            "https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=4a51c9cd7e8b4710d12ffbccf3ccc3b2/b64543a98226cffceee78e5eb5014a90f703ea09.jpg"
    };
    private LinearLayout points;
    private int prePosition;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
        initData();
    }

    private void initData() {
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float v, int i1) {
                position = position % imglist.length;
                //把前一個白變為黑
                points.getChildAt(prePosition).setBackgroundResource(R.drawable.point_back);
                //把當前白點變為黑點
                points.getChildAt(position).setBackgroundResource(R.drawable.point_white);
                //記錄下當前位置(當前位置變白後，賦值給前一個點)
                prePosition = position;
            }

            @Override
            public void onPageSelected(int i) {

            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
    }
    private void initView() {
        viewPager = findViewById(R.id.viewpager);
        myViewPagerAdapter = new MyViewPagerAdapter(this,imglist);
        viewPager.setAdapter(myViewPagerAdapter);
        points = findViewById(R.id.points);
        for(int i = 0;i<imglist.length;i++) {
            //白點
            //根據viewPager的數量，新增白點指示器
            ImageView view = new ImageView(this);
            view.setBackgroundResource(R.drawable.point_back);
            //給點設定寬高
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20, 20);
            //給控制元件設定邊距
            params.leftMargin = 10;
            //給view設定引數
            view.setLayoutParams(params);
            //將圖片新增到線性佈局中
            points.addView(view);
        }

        points.getChildAt(0).setBackgroundResource(R.drawable.point_white);
        viewPager.setCurrentItem(0);
    }
}

六. 介面卡配置

這裡把需要瀏覽的圖片地址陣列傳遞過去，然後通過Gilde載入網路圖片, 並以PhotoView代替ImageView實現放大縮小功能

public class MyViewPagerAdapter extends PagerAdapter{
    private String[] imgList;
    private Context context;
    public MyViewPagerAdapter(Context context,String[] imgList){
        this.imgList = imgList;
        this.context = context;
    }


    @Override
    public int getCount() {
        return imgList.length;
    }

    //指定複用的判斷邏輯，固定寫法：view == object
    @Override
    public boolean isViewFromObject(View view, Object object) {
        //當建立新的條目，又反回來，判斷view是否可以被複用(即是否存在)
        return view == object;
    }

    //返回要顯示的條目內容
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        //container  容器  相當於用來存放imageView

        PhotoView photoView = new PhotoView(context);

        photoView.setScaleType(ImageView.ScaleType.FIT_CENTER);

        ImageLoader.display(context,photoView,imgList[position]);

        //把圖片新增到container中
        container.addView(photoView);
        //把圖片返回給框架，用來快取
        return photoView;
    }

    //銷燬條目
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        //object:剛才建立的物件，即要銷燬的物件
        container.removeView((View) object);
    }
}

Demo地址