实现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的   不知道多张图片 会怎么样  (不喜勿喷)!

巴特西

实现QQ空间图片预览效果

最新文章

热门文章