zoukankan      html  css  js  c++  java
  • 仿微信朋友圈图片查看-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>

    项目源码:点我

  • 相关阅读:
    ios学习笔记——UIScrollView
    ios设计模式——单例模式
    ios设计模式——生成器模式
    ios学习笔记——UITableView
    ios 第3天
    ios 第2天
    ios入门第一天
    ios 运行时特征,动态改变控件字体大小
    ios 修改导航栏返回按钮的图片
    ios 在工程中使用字体
  • 原文地址:https://www.cnblogs.com/csonezp/p/5083286.html
Copyright © 2011-2022 走看看