仿微信朋友圈图片查看-glide加载网络图片，photoview 实现缩放

http://www.cnblogs.com/csonezp/p/5083286.html

这里实现的效果就和微信朋友圈点击图片后查看大图一样，如果你不清楚是什么效果，可以拿出手机，打开朋友圈，找到一条有很多图片的动态，点击图片进去。最终实现的效果就是这样的，多张图片滑动切换，并可缩放，拖动。

 

项目用到的第三方空间有：

glide，用来加载网络图片，google在自己应用里有用过这个东西。个人感觉十分好用，引入也简单。大公司出品，质量也有保证。

photoview：一个google工程师的个人项目，5k+的star，应该还算靠谱。其实我是无奈才用这个的，挑了很多个图片缩放的lib，其他和ViewPager都有滑动冲突问题，这个可以完美兼容。

 

本文开发环境是基于AS，Eclipse的朋友就需要自己调整了。整体构架是ViewPager+Fragment，一个图片一个Fragment显示，用Glide在Fragment里加载图片，图片的显示载体是PhotoView。下面上代码：

自定义ViewPager，用来解决PhotoView和ViewPager的滑动冲突，代码是作者提供的。

package com.example.csonezp.imagezoomdemo;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;

/**
 * Found at http://stackoverflow.com/questions/7814017/is-it-possible-to-disable-scrolling-on-a-viewpager.
 * Convenient way to temporarily disable ViewPager navigation while interacting with ImageView.
 * 
 * Julia Zudikova
 */

/**
 * Hacky fix for Issue #4 and
 * http://code.google.com/p/android/issues/detail?id=18990
 * <p/>
 * ScaleGestureDetector seems to mess up the touch events, which means that
 * ViewGroups which make use of onInterceptTouchEvent throw a lot of
 * IllegalArgumentException: pointerIndex out of range.
 * <p/>
 * There's not much I can do in my code for now, but we can mask the result by
 * just catching the problem and ignoring it.
 *
 * @author Chris Banes
 */
public class HackyViewPager extends ViewPager {

    private boolean isLocked;
    
    public HackyViewPager(Context context) {
        super(context);
        isLocked = false;
    }

    public HackyViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        isLocked = false;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        if (!isLocked) {
            try {
                return super.onInterceptTouchEvent(ev);
            } catch (IllegalArgumentException e) {
                e.printStackTrace();
                return false;
            }
        }
        return false;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return !isLocked && super.onTouchEvent(event);
    }
    
    public void toggleLock() {
        isLocked = !isLocked;
    }

    public void setLocked(boolean isLocked) {
        this.isLocked = isLocked;
    }

    public boolean isLocked() {
        return isLocked;
    }
    
}

 

MainActivity：

package com.example.csonezp.imagezoomdemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Window;
import android.view.WindowManager;

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


public class MainActivity extends AppCompatActivity {

    public static String url1 = "http://img.shu163.com/uploadfiles/wallpaper/2010/6/2010063006111517.jpg";
    public static String url2 = "http://pic.pp3.cn/uploads//allimg/111116/11021321R-4.jpg";
    public static String url3 = "http://pic.yesky.com/imagelist/07/03/1769316_2073.jpg";

    ImageViewPagerAdapter adapter;


    HackyViewPager pager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);//去掉信息栏
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        pager = (HackyViewPager) findViewById(R.id.pager);
        List<String> list = new ArrayList<>();
        list.add(url1);
        list.add(url2);
        list.add(url3);
        adapter = new ImageViewPagerAdapter(getSupportFragmentManager(), list);
        pager.setAdapter(adapter);
    }

}

MainActivity 布局文件：

<?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"
    android:background="@android:color/black"
    tools:context="com.example.csonezp.imagezoomdemo.MainActivity">

    <com.example.csonezp.imagezoomdemo.HackyViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></com.example.csonezp.imagezoomdemo.HackyViewPager>

</RelativeLayout>

ViewPager的适配器，用来生成Fragment供ViewPager显示：

package com.example.csonezp.imagezoomdemo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

import java.util.List;

/**
 * Created by csonezp on 15-12-28.
 */
public class ImageViewPagerAdapter extends FragmentStatePagerAdapter {
    private static final String IMAGE_URL = "image";

    List<String> mDatas;

    public ImageViewPagerAdapter(FragmentManager fm, List data) {
        super(fm);
        mDatas = data;
    }

    @Override
    public Fragment getItem(int position) {
        String url = mDatas.get(position);
        Fragment fragment = ImageFragment.newInstance(url);
        return fragment;
    }

    @Override
    public int getCount() {
        return mDatas.size();
    }
}

 

 

用来展示图片的ImageFragment，逻辑很简单，就是从Bundle中提取图片Url，Glide加载到PhotoView上。

package com.example.csonezp.imagezoomdemo;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.bumptech.glide.Glide;

import uk.co.senab.photoview.PhotoView;

public class ImageFragment extends Fragment {


    private static final String IMAGE_URL = "image";
    PhotoView image;
    private String imageUrl;

    public ImageFragment() {
        // Required empty public constructor
    }

    public static ImageFragment newInstance(String param1) {
        ImageFragment fragment = new ImageFragment();
        Bundle args = new Bundle();
        args.putString(IMAGE_URL, param1);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            imageUrl = getArguments().getString(IMAGE_URL);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_image, container, false);
        image = (PhotoView) view.findViewById(R.id.image);
        Glide.with(getContext()).load(imageUrl).into(image);
        return view;
    }


    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
    }

    @Override
    public void onDetach() {
        super.onDetach();
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
    }

//    public interface OnFragmentInteractionListener {
//        // TODO: Update argument type and name
//        void onFragmentInteraction(Uri uri);
//    }
}

Fragment的布局文件：

<FrameLayout 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="com.example.csonezp.imagezoomdemo.ImageFragment">

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

</FrameLayout>

 

项目源码：点我