Glide网络图片滑动查看，可缩放（PhotoView example）

来源：互联网发布：阿里云空间怎么买编辑：程序博客网时间：2024/05/16 18:55

需求是，接口中拿到的图片地址List进行滑动查看，并且可对图进行缩放查看，单张图片加载使用Glide

实现：

使用 ViewPager滑动加载Fragment，Fragment布局是一个PhotoView（extends ImageView）进行图片加载和加载后的缩放

首先，引入PhotoView

    compile 'com.github.chrisbanes:PhotoView:2.1.3'

接着，我们的用于加载并实现图片缩放的Fragment及其布局

import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import com.bumptech.glide.Glide;import com.bumptech.glide.load.resource.drawable.GlideDrawable;import com.bumptech.glide.request.animation.GlideAnimation;import com.bumptech.glide.request.target.GlideDrawableImageViewTarget;import com.github.chrisbanes.photoview.PhotoView;import com.github.chrisbanes.photoview.PhotoViewAttacher;import cn.reschool.parent.R;/** * Created by kLin 11509 on 9/14/2017. * email 1150954859@qq.com */public class PictureSlideFragment extends Fragment{    private String url;    private PhotoViewAttacher mAttacher;    private PhotoView imageView;    public static PictureSlideFragment newInstance(String url) {        PictureSlideFragment f = new PictureSlideFragment();        Bundle args = new Bundle();        args.putString("url", url);        f.setArguments(args);        return f;    }    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        url = getArguments() != null ? getArguments().getString("url") : "http://www.zhagame.com/wp-content/uploads/2016/01/JarvanIV_6.jpg";    }    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View v=inflater.inflate(R.layout.fragment_picture_slide,container,false);        imageView= (PhotoView) v.findViewById(R.id.iv_main_pic);        mAttacher = new PhotoViewAttacher(imageView);        Glide.with(getActivity()).load(url).crossFade().into(new GlideDrawableImageViewTarget(imageView) {            @Override            public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> animation) {                super.onResourceReady(resource, animation);                mAttacher.update();            }        });        return v;    }}

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="match_parent">    <com.github.chrisbanes.photoview.PhotoView        android:id="@+id/iv_main_pic"        android:layout_width="match_parent"        android:layout_height="match_parent"        /></LinearLayout>

下面是Activity当中的PagerAdapter，其中newInstance（）方法加载的是接口加载出来的图片URL

    private  class PictureSlidePagerAdapter extends FragmentStatePagerAdapter {        public PictureSlidePagerAdapter(FragmentManager fm) {            super(fm);        }        @Override        public Fragment getItem(int position) {            return PictureSlideFragment.newInstance(mValues.get(position).getDomain()+mValues.get(position).getImagePath());        }        @Override        public int getCount() {            return mValues.size();        }    }

        viewPager.setAdapter(new PictureSlidePagerAdapter(getSupportFragmentManager()));        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {                tvIndicator.setText(String.valueOf(position+1)+"/"+mValues.size());            }            @Override            public void onPageSelected(int position) {            }            @Override            public void onPageScrollStateChanged(int state) {            }        });

给我们的ViewPager设置Adapter就可以实现图片的滑动加载，缩放

可以在页面上写一个TextView，通过ViewPager的OnPageChangeListener来标识加载的图片页码。

阅读全文

0 0