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>
项目源码:点我
csonezp@gmail.com