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;@Overrideprotected 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;}@Overridepublic int getCount() {return picturesBean.getList().size();}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}@Overridepublic 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;}@Overridepublic 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方法：

    @Overridepublic 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() {@Overridepublic 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() {@Overridepublic 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;@Overrideprotected void onCreate(Bundle savedInstanceState) {...setClick();}private void setClick(){rightButton.setOnClickListener(new View.OnClickListener() {@Overridepublic 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() {@Overridepublic 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();}}});}

看一下按钮的效果吧：

PhotoView结合ViewPager的简单使用相关推荐

ViewPager的简单使用说明
ViewPager的简单使用说明 2013-12-14 00:55 by ...平..淡..., 7 阅读, 0 评论, 收藏, 编辑前提:工程中使用ViewPager,需要导入google提供的j ...
Android之ViewPager的简单使用
Android ViewPager的简单使用 Android 3.0后引入的一个UI控件--ViewPager(视图滑动切换工具) 功能:通过手势滑动可以完成View的切换,一般是用来做APP 的引导 ...
Android中使用PhotoView和ViewPager查看图片，并保存到本地
如下图:可以滑动查看,可以放大缩小,点击长按保存图片 build.gradle中添加依赖 compile 'com.github.chrisbanes.photoview:library:+' ...
ViewPagerIndicator+viewpager的简单使用，不需要导入Library包
2019独角兽企业重金招聘Python工程师标准>>> ViewPagerIndicator作为一款分页指标小部件兼容ViewPager,封装上做得非常不错,目前已为众多知名应用所使 ...
ViewPager简单介绍(一)
一.ViewPager是什么官方介绍是: Layout manager that allows the user to flip left and right through pages of da ...
【ViewPager的学习】一、简单使用
ViewPager就不多介绍,主要用于手机引导页面.软件导航.轮播图片等情况. 使用它需要引用一个库:android-support-v4.jar,add to build path. 同ListVi ...
用开源项目PhotoView实现图片的双指缩放和双击放大缩小
项目地址:https://github.com/chrisbanes/PhotoView 用开源项目有个好处,一是实现简单,二是bug少.那么我们就来说下这个项目能够实现的效果: 1.单个图片的双指缩 ...
如何通过在ViewPager中用手指轻扫来禁用分页，但是仍然能够以编程方式轻扫？
本文翻译自:How do disable paging by swiping with finger in ViewPager but still be able to swipe programma ...
ViewPager (下)-- 利用 Fragment 实现美丽的页面切换
之前用的ViewPager适用于简单的广告切换,但实现页面间的切换最好是用官方推荐的Fragment来处理. 本人力争做到最简单.最有用,是想以后用到的时候能够方便的拿过来复制就能够了. 效果图: ...

PhotoView结合ViewPager的简单使用

PhotoView结合ViewPager的简单使用相关推荐

最新文章

热门文章