先来看一下效果图(由于是gif看着有点卡顿,实际效果相当流畅):
实现思路:图片以Recyclerview瀑布流的形式展示,单击Item后传递图片url跳转到展示图片的Activity,该Activity中是一个ViewPager,ViewPager设置适配器加载布局引用一个photoview布局。
首先引入依赖,我采用的是glide加载图片:
implementation 'com.github.chrisbanes:PhotoView:2.1.3'
implementation 'com.github.bumptech.glide:glide:3.7.0'
单击Item事件就不展示代码了,非常简单。
这是单击后跳转到的Activity代码,给ViewPager设置适配器我直接写成在了setAdapter中,没有独立用个类去写。
java代码:
public class BigImageActivity extends BaseActivity {
@BindView(R.id.vp_image)
ViewPager vpImage;
@BindView(R.id.pv_image)
PhotoView icon;
//接受Intent传递的参数
private int position;
private ArrayList<String> paths;//存放图片url的数组
private ArrayList<String> title;
@Override
public int initLayout() {
return R.layout.activity_big_image;
}
@Override
public void initView() {
ButterKnife.bind(this);
getSupportActionBar().hide();
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);// 设置全屏
//先接受传递的参数
Intent intent = getIntent();
position = intent.getIntExtra("position", 0);
paths = intent.getStringArrayListExtra("paths");
title = intent.getStringArrayListExtra("title");
vpImage.setAdapter(new PagerAdapter() {
@Override
public int getCount() {
return paths == null ? 0 : paths.size();
}
@Override
public boolean isViewFromObject(View view, Object o) {
return view == o;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = LayoutInflater.from(BigImageActivity.this).inflate(R.layout.vp_style_big, null);
icon = (PhotoView) view.findViewById(R.id.pv_image);
TextView tvTitle = view.findViewById(R.id.tv_title);
TextView tvIndex = view.findViewById(R.id.tv_index);
icon.setBackgroundColor(getResources().getColor(R.color.Black));
tvTitle.setText(title.get(position));
tvIndex.setText((position+1)+"/"+paths.size());
final String url = paths.get(position);//图片的url
Glide.with(BigImageActivity.this)
.load(paths.get(position))
.placeholder(R.mipmap.img_load)//加载等待图
.diskCacheStrategy(DiskCacheStrategy.ALL)//缓存模式
.into(icon);
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
});
vpImage.setCurrentItem(position, true);
}
@Override
public void initData() {
}
xml布局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000">
<android.support.v4.view.ViewPager
android:id="@+id/vp_image"
android:background="#000"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
ViewPager设置适配器时的加载的布局文件:
vp_style_big.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="wrap_content"
android:orientation="vertical"
android:gravity="center">
<com.github.chrisbanes.photoview.PhotoView
android:id="@+id/pv_image"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:id="@+id/tv_index"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_30"
android:layout_below="@id/pv_image"
android:layout_alignTop="@id/pv_image"
android:background="#8000"
android:gravity="center"
android:textSize="@dimen/dp_15"
android:textColor="#fff"
android:padding="@dimen/dp_5"
/>
<TextView
android:id="@+id/tv_title"
android:layout_above="@id/pv_image"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_30"
android:layout_alignBottom="@id/pv_image"
android:background="#8000"
android:textSize="@dimen/dp_15"
android:textColor="#fff"
android:padding="@dimen/dp_5"
/>
</RelativeLayout>
加入了显示文本说明和图片索引,这部分逻辑可以适当修改。