实现QQ空间图片预览效果

今天项目遇到需求 要求 实现图片预览效果 。  类似于扣扣空间那种，本人也到网上找过 代码量太大了   ，类多到处是注释看的有点恶心 。然后自己写了一个图片预览的效果，其实很简单的 。

首先我们来分析一下 实现原理 ：点击 图片 显示 新的窗口  滑动显示下一张  并且页码也跟随的变化, 轻触退出(本文代码没有) ;首先点击图片实现跳转时应该 携带当前图片页码 呵呵 gridview 里所有图片 地址信息 ,然后另一个显示图片页面实现可以用viewpager  事先加载好 然后 设置显示当前页  至于页面显示 viewpager有个监听事件 用它跟换就行;不说废话了 上代码!

import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.TextView;

import com.nostra13.universalimageloader.core.ImageLoader;import com.yusong.ycos.R;import com.yusong.ycos.wei_er.BaseActivity;import com.yusong.ycos.wei_er.config.AppConfig;import com.yusong.ycos.wei_er.view.DoubleScaleImageView;

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

/** * Created by pcg on 2016/8/3. */public class ImagePreviewActivity extends BaseActivity implements ViewPager.OnPageChangeListener {

    private ViewPager viewPager;    private TextView textView;    private View view;    private List<View> viewList = new ArrayList<View>();    private int position;

    @Override    protected void onActivityCreate(Bundle savedInstanceState) {        setContentView(R.layout.picture_view_pager);        ((ImageView) findViewById(R.id.picture_back)).setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                finish();//这是做的返回键退出            }        });        position = getIntent().getIntExtra("position", 0);        viewPager = (ViewPager) findViewById(R.id.view_pager);        textView = (TextView) findViewById(R.id.text_);       //添加view 也就是        for (int i = 0; i < ExceptionDetailActivity.list.size(); i++) {            view = LayoutInflater.from(this).inflate(R.layout.item_picture, null);            DoubleScaleImageView imageView = (DoubleScaleImageView) view.findViewById(R.id.picture_);//这个是自定义的image 实现双击放大缩小的  网上一大堆 没这需求直接 imageview            String url = AppConfig.getInstance().getIpAddress() + ExceptionDetailActivity.list.get(i).get(ExceptionDetailActivity.IMAGE);            ImageLoader.getInstance().displayImage(url, imageView);//用的是图片缓存框架  要的私信我 576975755 扣扣  网上也一大堆            viewList.add(view);        }        viewPager.setAdapter(new MyAdapter());        viewPager.setCurrentItem(position);//设置显示第几个 也就点击的图片        viewPager.setOnPageChangeListener(this);//页面滑动监听  用来改变页码的

//ExceptionDetailActivity.list.size() 这里是存储图片的 url 集合 list<Map<String,String>>

        textView.setText((position + 1) + "/" + ExceptionDetailActivity.list.size());    }

    class MyAdapter extends PagerAdapter {        @Override        public int getCount() {            return viewList.size();        }

        @Override        public boolean isViewFromObject(View view, Object object) {            return view == object;        }

        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView(viewList.get(position));        }

        @Override        public Object instantiateItem(ViewGroup container, int position) {            container.addView(viewList.get(position), 0);            return viewList.get(position);        }    }

    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override    public void onPageSelected(int position) {        //换页码        textView.setText((position + 1) + "/" + ExceptionDetailActivity.list.size());    }

    @Override    public void onPageScrollStateChanged(int state) {

    }}

//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:background="@color/part_transparent">

    <android.support.v4.view.ViewPager        android:id="@+id/view_pager"        android:layout_width="match_parent"        android:layout_height="match_parent" />

    <TextView        android:id="@+id/text_"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:text="1/4"        android:textColor="@color/white"        android:textSize="16sp" />

    <RelativeLayout        android:layout_width="fill_parent"        android:layout_height="40dp">

        <ImageView            android:id="@+id/picture_back"            android:layout_width="50dp"            android:layout_height="match_parent"            android:padding="15px"            android:src="@drawable/back_click" />

        <TextView            android:id="@+id/tv_top"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:text="异常图片"            android:textColor="#FFFFFF"            android:textSize="18sp" />    </RelativeLayout></RelativeLayout>

// item xml 代码

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">

    <RelativeLayout        android:id="@+id/relative"        android:layout_width="match_parent"        android:layout_height="match_parent">

        <com.yusong.ycos.wei_er.view.DoubleScaleImageView            android:id="@+id/picture_"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_centerVertical="true" />    </RelativeLayout>

</LinearLayout>

这只是少量数图片用起来挺66的   不知道多张图片 会怎么样  (不喜勿喷)!