你的位置:首页 > 操作系统

[操作系统]实现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) {

}
}


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