仿微信朋友圈图片浏览器

     最近在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/

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