之前已经学过了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);
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();
}
}
});
}看一下按钮的效果吧：
