PhotoView结合ViewPager的简单使用

来源：互联网发布：淘宝买东西上传身份证编辑：程序博客网时间：2024/06/02 05:31

之前已经学过了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();                }            }        });    }

看一下按钮的效果吧：

这里写图片描述

阅读全文

0 0