实现图片浏览器

75 阅读 0 评论 50 点赞

我是靠谱客的博主含蓄小兔子，这篇文章主要介绍实现图片浏览器，现在分享给大家，希望可以做个参考。

图片浏览器在App中很常见，如新闻类app中，其具有可滑动，双指缩放，图片标识等特点。其中用到控件主要是viewpager，下面我就试着实现自己一个自己的图片浏览器，废话不说先看效果图，这个图片浏览器是在上一篇自动轮播的基础上实现的。

其实点击轮播器后是跳转到一个铺满viewpager的activity中了，只不过这个activity的背景色为黑色而已，就是这么简单。那些先看这个activity的布局文件吧

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff000000">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/news_picture_vp"
android:persistentDrawingCache="animation"
/>
<ImageView
android:id="@+id/back"
android:layout_width="35dp"
android:layout_height="30dp"
android:layout_marginLeft="15dp"
android:layout_marginTop="20dp"
android:scaleType="fitCenter"
android:src="@drawable/car_picture_ic_back"
/>
<TextView
android:id="@+id/new_picture_index"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:layout_marginBottom="20dp"
android:text="1/4"
android:textColor="@android:color/white"
android:textSize="18sp"/>
</FrameLayout>

viewpager铺满整个屏幕，textview显示图片索引，imageview显示返回按键。

图片浏览器中的图片是支持手势缩放的，这里的item布局用到的是github上的一个开源控件photoView而不是imageview，布局如下：

复制代码

1
2
3
4
5
6
7
8
9
10
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/black"
android:gravity="center">
<jim.com.photoview.PhotoView
android:id="@+id/picture_iv_item"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>

然后是一大段非常简单的代码，初始化控件，设置adapter加载图片，监听滑动事件

复制代码

public class NewsPictureActivity extends Activity implements ViewPager.OnPageChangeListener, View.OnClickListener {
private ViewPager viewPager;
private ImageView back;
private TextView index;
private String url[];
public static void startNewsPictureActivity(Context context) {
Intent intent = new Intent(context, NewsPictureActivity.class);
context.startActivity(intent);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.news_picture_main);
url = Images.imageArray;
initView();
}
private void initView() {
viewPager = (ViewPager) findViewById(R.id.news_picture_vp);
back = (ImageView) findViewById(R.id.back);
index = (TextView) findViewById(R.id.new_picture_index);
back.setOnClickListener(this);
index.setText("1/" + url.length);
viewPager.setAdapter(new VpAdapter());
viewPager.setOnPageChangeListener(this);
viewPager.setCurrentItem(0);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.back:
finish();
break;
}
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//动态改变图片的索引
index.setText(position + 1 + "/" + url.length);
}
@Override
public void onPageScrollStateChanged(int state) {
}
private class VpAdapter extends PagerAdapter {
boolean isShow = true;
@Override
public int getCount() {
return url.length;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = getLayoutInflater().inflate(R.layout.news_picture_item, null);
//viewpager中的item，这里用到了github上的一个支持手势的开源控件
PhotoView imageView = (PhotoView) view.findViewById(R.id.picture_iv_item);
//触摸屏幕的时候可以动态隐藏和显示索引和返回键
imageView.setOnPhotoTapListener(new PhotoViewAttacher.OnPhotoTapListener() {
@Override
public void onPhotoTap(View view, float x, float y) {
if (!isShow) {
back.setVisibility(View.VISIBLE);
index.setVisibility(View.VISIBLE);
isShow = true;
} else {
back.setVisibility(View.GONE);
index.setVisibility(View.GONE);
isShow = false;
}
}
});
//图片都是从网上下载的
ImageLoader.getInstance().displayImage(url[position], imageView, MyApplication.getOptions());
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
public class NewsPictureActivity extends Activity implements ViewPager.OnPageChangeListener, View.OnClickListener {
private ViewPager viewPager;
private ImageView back;
private TextView index;
private String url[];
public static void startNewsPictureActivity(Context context) {
Intent intent = new Intent(context, NewsPictureActivity.class);
context.startActivity(intent);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.news_picture_main);
url = Images.imageArray;
initView();
}
private void initView() {
viewPager = (ViewPager) findViewById(R.id.news_picture_vp);
back = (ImageView) findViewById(R.id.back);
index = (TextView) findViewById(R.id.new_picture_index);
back.setOnClickListener(this);
index.setText("1/" + url.length);
viewPager.setAdapter(new VpAdapter());
viewPager.setOnPageChangeListener(this);
viewPager.setCurrentItem(0);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.back:
finish();
break;
}
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//动态改变图片的索引
index.setText(position + 1 + "/" + url.length);
}
@Override
public void onPageScrollStateChanged(int state) {
}
private class VpAdapter extends PagerAdapter {
boolean isShow = true;
@Override
public int getCount() {
return url.length;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = getLayoutInflater().inflate(R.layout.news_picture_item, null);
//viewpager中的item，这里用到了github上的一个支持手势的开源控件
PhotoView imageView = (PhotoView) view.findViewById(R.id.picture_iv_item);
//触摸屏幕的时候可以动态隐藏和显示索引和返回键
imageView.setOnPhotoTapListener(new PhotoViewAttacher.OnPhotoTapListener() {
@Override
public void onPhotoTap(View view, float x, float y) {
if (!isShow) {
back.setVisibility(View.VISIBLE);
index.setVisibility(View.VISIBLE);
isShow = true;
} else {
back.setVisibility(View.GONE);
index.setVisibility(View.GONE);
isShow = false;
}
}
});
//图片都是从网上下载的
ImageLoader.getInstance().displayImage(url[position], imageView, MyApplication.getOptions());
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}