PhotoView结合ViewPager的简单使用

之前已经学过了ExpandableListView的基本用法，这次就在上面的基础上来结合PhotoView实现真正的浏览图片的做法。

使用PhotoView前需要添加依赖：

compile 'com.github.chrisbanes.photoview:library:1.2.4'

然后创建WatchPicturesActivity活动，它的布局是：

<?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.support.v4.view.ViewPager
android:id="@+id/vp_all_pictures"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

</RelativeLayout>

然后WatchPicturesActivity的具体代码是：

public class WatchPicturesActivity extends AppCompatActivity {

private AllPictureBean.ShowapiResBodyBean.PagebeanBean.ContentlistBean picturesBean;
private ViewPager vp_all_pictures;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_watch_pictures);

picturesBean = (AllPictureBean.ShowapiResBodyBean.PagebeanBean.ContentlistBean) getIntent().getSerializableExtra("picturesBean");

initView();
}

private void initView(){
vp_all_pictures = (ViewPager) findViewById(R.id.vp_all_pictures);
vp_all_pictures.setAdapter(new MyPagerAdapter(WatchPicturesActivity.this, picturesBean));
}
}

其中ViewPager的适配器为：

public class MyPagerAdapter extends PagerAdapter {

private Context context;
private AllPictureBean.ShowapiResBodyBean.PagebeanBean.ContentlistBean picturesBean;

public MyPagerAdapter(Context context, AllPictureBean.ShowapiResBodyBean.PagebeanBean.ContentlistBean picturesBean) {
this.context = context;
this.picturesBean = picturesBean;
}

@Override
public int getCount() {
return picturesBean.getList().size();
}

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

@Override
public Object instantiateItem(ViewGroup container, int position) {

AllPictureBean.ShowapiResBodyBean.PagebeanBean.ContentlistBean.ListBean pictureBean = picturesBean.getList().get(position);
PhotoView imageView = new PhotoView(context);

d601
Glide.with(context)
.load(pictureBean.getMiddle()) //加载网络图片的地址
.diskCacheStrategy(DiskCacheStrategy.ALL)
.skipMemoryCache(false)
.error(R.drawable.default_pic)  //没网时候加载这个
.into(imageView);
container.addView(imageView);

return imageView;
}

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

看一下具体的效果：



不过总觉得这样太过简陋了，接下来创建一个布局picture_detail.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="@android:color/black"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:orientation="horizontal"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<TextView
android:id="@+id/tv_left_number"
android:text="1/"
android:textSize="20sp"
android:textColor="@android:color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<TextView
android:id="@+id/tv_right_number"
android:text="25"
android:textSize="20sp"
android:textColor="@android:color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

</LinearLayout>

<uk.co.senab.photoview.PhotoView
android:id="@+id/phothview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

<Button
android:id="@+id/change_pager_button"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@android:color/transparent"
android:text="下一页"
android:textColor="@android:color/white"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

</RelativeLayout>

然后修改MyPagerAdapter中的instantiateItem方法：

@Override
public Object instantiateItem(ViewGroup container, int position) {

AllPictureBean.ShowapiResBodyBean.PagebeanBean.ContentlistBean.ListBean pictureBean = picturesBean.getList().get(position);
View view = View.inflate(context, R.layout.picture_detail, null);
PhotoView photoView = (PhotoView) view.findViewById(R.id.phothview);
TextView tv_left_number = (TextView) view.findViewById(R.id.tv_left_number);
TextView tv_right_number = (TextView) view.findViewById(R.id.tv_right_number);
Button button = (Button) view.findViewById(R.id.change_pager_button);

if (picturesBean.getList().size() > 1){
if (position == picturesBean.getList().size() - 1 ){
button.setText("下一组");
button.setVisibility(View.VISIBLE);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(context, "切换到下一组", Toast.LENGTH_SHORT).show();
}
});
}
else if (position == 0){
button.setText("上一组");
button.setVisibility(View.VISIBLE);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(context, "切换到上一组", Toast.LENGTH_SHORT).show();
}
});
} else {
button.setVisibility(View.GONE);
}
}

int picPosition = position + 1;
tv_left_number.setText("" + picPosition);
tv_right_number.setText("/" + picturesBean.getList().size());
Glide.with(context)
.load(pictureBean.getMiddle()) //加载网络图片的地址
.diskCacheStrategy(DiskCacheStrategy.ALL)
.skipMemoryCache(false)
.error(R.drawable.default_pic)  //没网时候加载这个
.into(photoView);
container.addView(view);

return view;
}

看一下运行效果吧：



但是上面的按钮是一个很呆的设计，接下来把picture_detail.xml中按钮的布局放到activity_watch_pictures.xml中去，同时把上面instantiateItem方法中所有按钮的代码去掉，在WatchPicturesActivity.class中实例化按钮控件，然后添加如下代码：

private Button leftButton;//在initView中去实例化
private Button rightButton;

@Override
protected void onCreate(Bundle savedInstanceState) {

...
setClick();

}

private void setClick(){
rightButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (beanPosition < dataList.size() - 1){
Toast.makeText(WatchPicturesActivity.this, "切换到下一组", Toast.LENGTH_SHORT).show();
AllPictureBean.ShowapiResBodyBean.PagebeanBean.ContentlistBean bean = dataList.get(beanPosition + 1);
Intent intent = new Intent(WatchPicturesActivity.this, WatchPicturesActivity.class);
Bundle bundle = new Bundle();
bundle.putSerializable("picturesBean", bean);
bundle.putSerializable("dataList", (Serializable) dataList);
intent.putExtras(bundle);
intent.putExtra("beanPosition", beanPosition + 1);
startActivity(intent);
finish();
} else {
Toast.makeText(WatchPicturesActivity.this, "最后一组咯", Toast.LENGTH_SHORT).show();
}
}
});

leftButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (beanPosition > 0){
Toast.makeText(WatchPicturesActivity.this, "切换到上一组", Toast.LENGTH_SHORT).show();
AllPictureBean.ShowapiResBodyBean.PagebeanBean.ContentlistBean bean = dataList.get(beanPosition - 1);
Intent intent = new Intent(WatchPicturesActivity.this, WatchPicturesActivity.class);
Bundle bundle = new Bundle();
bundle.putSerializable("picturesBean", bean);
bundle.putSerializable("dataList", (Serializable) dataList);
intent.putExtras(bundle);
intent.putExtra("beanPosition", beanPosition - 1);
WatchPicturesActivity activity = (WatchPicturesActivity) WatchPicturesActivity.this;
activity.startActivity(intent);
activity.finish();
} else {
Toast.makeText(WatchPicturesActivity.this, "第一组啦", Toast.LENGTH_SHORT).show();
}
}
});
}

看一下按钮的效果吧：