仿微信朋友圈图片浏览器

     最近在APP中实现了“仿微信朋友圈图片浏览”的效果，因为是第一次做，所以也查找了一些资料，最后使用自定义ViewPager （HackyViewPager）,这里写篇博客记录一下，记录一下，也希望帮你解决一些难题。好了不多少，直接上代码。

  首先自定义ViewPager (HackyViewPager):

/** * Created by 李金伟 on 2017/4/5. * 仿微信朋友圈图片浏览；自定义viewpager */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;    }}

用ShowPictureActivity展示图片

/** * Created by 李金伟 on 2017/4/5. * 仿微信朋友圈图片浏览 */public class ShowPictureActivity extends FragmentActivity {    private HackyViewPager pager;    private ImageViewPagerAdapter adapter;    private ArrayList<String> imagelist;    private LinearLayout ll_point_group;    private int lastPosition;    private int position;    private static final String STATE_POSITION = "STATE_POSITION";    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_showbigpicture);        initView();        initData();        initListener();        if (savedInstanceState != null) {            position = savedInstanceState.getInt(STATE_POSITION);        }        pager.setCurrentItem(position);    }    @Override    public void onSaveInstanceState(Bundle outState) {        outState.putInt(STATE_POSITION, pager.getCurrentItem());    }    private void initView() {      // 接收传过来的图片集合，position为第几个，默认为0，也可以认为点击的第几张图片       imagelist = getIntent().getStringArrayListExtra("imagelist");        position = getIntent().getIntExtra("position", 0);        pager = (HackyViewPager) findViewById(R.id.pager);        ll_point_group = (LinearLayout) findViewById(R.id.ll_point_group);    }    private void initData() {        if (imagelist.size() > 1){            for (int i = 0; i < imagelist.size(); i++) {                // 动态添加指示点                ImageView point = new ImageView(this);                point.setBackgroundResource(R.drawable.point_bg);                // 让第一个是黄点，其他的是白点                if (i == position) {                    point.setEnabled(true);                } else {                    point.setEnabled(false);                }                // 布局是一个类，子View也是一个类，布局参数也是一个独立的类                // 任何一个布局，都有一个对应的静态类：布局参数                // 当布局添加子view时，布局参数一定要和布局的类型保持一致                LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, -2);                layoutParams.leftMargin = 15; // 左边，15个象素的边距                ll_point_group.addView(point, layoutParams);            }        }        adapter = new ImageViewPagerAdapter(getSupportFragmentManager(), imagelist, position);        pager.setAdapter(adapter);    }    private void initListener() {        pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageSelected(int position) {                position = position % imagelist.size();                ll_point_group.getChildAt(lastPosition).setEnabled(false);                ll_point_group.getChildAt(position).setEnabled(true);                lastPosition = position;            }            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageScrollStateChanged(int state) {            }        });    }}

展示布局文件代码activity_showbigpicture.xml

<?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:backgroundTint="@color/black"    android:background="@color/colorWhite">    <包名.view.browser9img.HackyViewPager        android:id="@+id/pager"        android:layout_width="match_parent"        android:layout_height="match_parent"/>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignBottom="@id/pager"        android:layout_marginBottom="25dp"        android:gravity="center_horizontal"        android:orientation="vertical"        android:padding="5dp">        <TextView            android:layout_width="wrap_content"            android:text=""            android:layout_height="wrap_content" />        <LinearLayout            android:id="@+id/ll_point_group"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:orientation="horizontal">        </LinearLayout>    </LinearLayout></RelativeLayout>

ImageViewPagerAdapter类：

/** * Created by 李金伟 on 2017/4/5. */public class ImageViewPagerAdapter extends FragmentPagerAdapter {    private static final String IMAGE_URL = "image";    List<String> mDatas;    int mposition;    public ImageViewPagerAdapter(FragmentManager fm, List data, int position) {        super(fm);        this.mDatas = data;        this.mposition = position;    }    @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();    }//    @Override//    public Object instantiateItem(ViewGroup container, int position) {//        return super.instantiateItem(container, position);//    }}

ImageFragment类：

/** * Created by 李金伟 on 2017/4/5. */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);        image.setOnPhotoTapListener(new PhotoTapListener());        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();    }    private class PhotoTapListener implements PhotoViewAttacher.OnPhotoTapListener {        @Override        public void onPhotoTap(View view, float v, float v1) {            getActivity().finish();        }        @Override        public void onOutsidePhotoTap() {            getActivity().finish();        }    }}

最后我们来看一下效果：

这里我只传入了三张图片，如果你需要还可以再多加几张。

参考文献：http://blog.csdn.net/allen315410/article/details/40264551/

好了！仿微信朋友圈图片浏览器就这样实现了，是不是对你有帮助！！不要忘了“顶”一下哦!！!