Android轮播图点击图片放大效果的实现方法

概述Android轮播图点击图片放大效果的实现方法 前言 最近项目中需要实现轮播图显示商品图片,当用户点击商品图片的时候,需要图片放大显示,当然用户还能进行多张图片的滑动切换,放大,缩小图片等 *** 作,实现起来相对还是比较简单的,话不多说,咱们是用代码说话的,直接上代码. 实现步骤: 1.效果图的展示 2.项目中添加相关的依赖 3.主界面实现轮播图的效果 4.点击轮播图进入图片放大展示页面 5.图片放大展示页面所需的适配器 6.获取fragment需要展示图片的url 7.图片缩放时遇到Bug解决 实现过程: 1.效果图的展示 2.项目中添加相关的依

前言

最近项目中需要实现轮播图显示商品图片，当用户点击商品图片的时候，需要图片放大显示，当然用户还能进行多张图片的滑动切换，放大，缩小图片等 *** 作，实现起来相对还是比较简单的，话不多说，咱们是用代码说话的，直接上代码。

实现步骤：

1.效果图的展示

2.项目中添加相关的依赖

3.主界面实现轮播图的效果

4.点击轮播图进入图片放大展示页面

5.图片放大展示页面所需的适配器

6.获取fragment需要展示图片的url

7.图片缩放时遇到BUG解决

实现过程：

1.效果图的展示

2.项目中添加相关的依赖

implementation 'com.youth.banner:banner:1.4.9'implementation 'com.github.bumptech.glIDe:glIDe:4.5.0'implementation 'com.commit451:PhotoVIEw:1.2.4'

3.主界面实现轮播图的效果

public class MainActivity extends AppCompatActivity implements OnBannerListener {private Banner banner;private ArrayList<String> List_path;@OverrIDeprotected voID onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentVIEw(R.layout.activity_main);initVIEw();initData();initListener();}private voID initVIEw() {banner = findVIEwByID(R.ID.banner);}private voID initData() {setBanner();//设置轮播图}private voID initListener() {}/*** 设置轮播图*/private voID setBanner() {//放图片地址的集合List_path = new ArrayList<>();//设置图片数据List_path.add("https://sami-1256315447.picgz.myqcloud.com/article/201908/2a919def19fc47e3aa0d75d8c227ab1b.jpg");List_path.add("https://sami-1256315447.picgz.myqcloud.com/article/201908/d027d1efc0564c44bb979ba0bd21f560.jpg");List_path.add("https://sami-1256315447.picgz.myqcloud.com/article/201908/bbb930d66e5a48baa8d3c143544d7631.jpg");List_path.add("https://sami-1256315447.picgz.myqcloud.com/article/201908/fb1721b8c9be4da9949fcdd26fc902a2.jpg");List_path.add("https://sami-1256315447.picgz.myqcloud.com/article/201908/08b58dde9b284638b44e2d03c4cb9acf.jpg");List_path.add("https://sami-1256315447.picgz.myqcloud.com/article/201908/d3caeb6129ee43df87f5c1e1058d96fc.jpg");List_path.add("https://sami-1256315447.picgz.myqcloud.com/article/201908/9fd01c4add07473db31ba850f20a7232.jpg");List_path.add("http://a.hiphotos.baIDu.com/image/pic/item/00e93901213fb80e3b0a611d3fd12f2eb8389424.jpg");//设置内置样式，共有六种可以点入方法内逐一体验使用。banner.setBannerStyle(BannerConfig.NUM_INDICATOR);//设置图片加载器，图片加载器在下方banner.setimageLoader(new imgLoader());//设置图片网址或地址的集合banner.setimages(List_path);//设置轮播的动画效果，内含多种特效，可点入方法内查找后内逐一体验banner.setBannerAnimation(transformer.Default);//设置轮播间隔时间banner.setDelayTime(3000);//设置是否为自动轮播，默认是“是”banner.isAutoplay(true);//设置指示器的位置，小点点，左中右。banner.setIndicatorGravity(BannerConfig.CENTER)//以上内容都可写成链式布局，这是轮播图的监听。比较重要。方法在下面。.setonBannerListener(this)//必须最后调用的方法，启动轮播图。.start();}//轮播图的监听方法@OverrIDepublic voID OnBannerClick(int position) {Intent intent = new Intent(this,BigimgActivity.class);intent.putStringArrayListExtra("imgData",List_path);intent.putExtra("clickposition",position);startActivity(intent);}//自定义的图片加载器private class imgLoader extends ImageLoader {@OverrIDepublic voID displayImage(Context context,Object path,ImageVIEw imageVIEw) {GlIDe.with(context).load((String) path).into(imageVIEw);}}}

4.点击轮播图进入图片放大展示页面

public class BigimgActivity extends AppCompatActivity {private VIEwPagerFixed vIEwPager;private TextVIEw tvNum;@OverrIDeprotected voID onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentVIEw(R.layout.activity_big_img);initVIEw();}private voID initVIEw() {vIEwPager = findVIEwByID(R.ID.vIEwpager);tvNum = findVIEwByID(R.ID.tv_num);//接收图片数据及位置final ArrayList<String> imgData = getIntent().getStringArrayListExtra("imgData");int clickposition = getIntent().getIntExtra("clickposition",0);//添加适配器PhotopagerAdapter vIEwPagerAdapter = new PhotopagerAdapter(getSupportFragmentManager(),imgData);vIEwPager.setAdapter(vIEwPagerAdapter);vIEwPager.setCurrentItem(clickposition);//设置选中图片位置vIEwPager.addOnPagechangelistener(new VIEwPager.OnPagechangelistener() {@OverrIDepublic voID onPageScrolled(int position,float positionOffset,int positionOffsetPixels) {tvNum.setText(String.valueOf(position + 1) + "/" + imgData.size());}@OverrIDepublic voID onPageSelected(int position) {}@OverrIDepublic voID onPageScrollStateChanged(int state) {}});}}

5.图片放大展示页面所需的适配器

/*** 滑动图片VIEwPager适配器*/public class PhotopagerAdapter extends FragmentPagerAdapter {private final ArrayList<String> urlList;public PhotopagerAdapter(FragmentManager fm,ArrayList<String> urlList) {super(fm);this.urlList=urlList;}@OverrIDepublic Fragment getItem(int position) {return PhotoFragment.newInstance(urlList.get(position));}@OverrIDepublic int getCount() {return urlList.size();}}

6.获取fragment需要展示图片的url

public class PhotoFragment extends Fragment {private String url;private PhotoVIEw mPhotoVIEw;/*** 获取这个fragment需要展示图片的url** @param url* @return*/public static PhotoFragment newInstance(String url) {PhotoFragment fragment = new PhotoFragment();Bundle args = new Bundle();args.putString("url",url);fragment.setArguments(args);return fragment;}@OverrIDepublic voID onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);url = getArguments().getString("url");}@Nullable@OverrIDepublic VIEw onCreateVIEw(LayoutInflater inflater,final VIEwGroup container,Bundle savedInstanceState) {VIEw vIEw = inflater.inflate(R.layout.fragment_img,container,false);mPhotoVIEw = vIEw.findVIEwByID(R.ID.photovIEw);//设置缩放类型，默认ScaleType.CENTER（可以不设置）// mPhotoVIEw.setScaleType(ImageVIEw.ScaleType.CENTER);//长按事件mPhotoVIEw.setonLongClickListener(new VIEw.OnLongClickListener() {@OverrIDepublic boolean onLongClick(VIEw vIEw) {//Toast.makeText(getActivity(),"长按事件",Toast.LENGTH_SHORT).show();return true;}});//点击事件mPhotoVIEw.setonPhotoTapListener(new PhotoVIEwAttacher.OnPhotoTapListener() {@OverrIDepublic voID onPhotoTap(VIEw vIEw,float x,float y) {//Toast.makeText(getActivity(),"点击事件，真实项目中可关闭activity",Toast.LENGTH_SHORT).show();getActivity().finish();}});GlIDe.with(getContext()).load(url)// .placeholder(R.mipmap.ic_launcher)//加载过程中图片未显示时显示的本地图片// .error(R.mipmap.ic_launcher)//加载异常时显示的图片//.centerCrop()//图片图填充ImageVIEw设置的大小// .fitCenter()//缩放图像测量出来等于或小于ImageVIEw的边界范围,该图像将会完全显示.into(mPhotoVIEw);return vIEw;}}

7.图片缩放时遇到BUG解决

在测试的过程中，对放大的图片进行缩放的时候，遇到下面的BUG:

java.lang.IllegalArgumentException: pointerIndex out of range

在做多点触控放大缩小， *** 作自己所绘制的图形时发生这个异常，如果是 *** 作图片的放大缩小多点触控不会出现这个错误
这个BUG是AndroID系统原因 。

问题解决方案：

自定义viewPager，重写ontouchEvent 和onIntercepttouchEvent

public class VIEwPagerFixed extends androID.support.v4.vIEw.VIEwPager {public VIEwPagerFixed(Context context) {super(context);}public VIEwPagerFixed(Context context,AttributeSet attrs) {super(context,attrs);}@OverrIDepublic boolean ontouchEvent(MotionEvent ev) {try {return super.ontouchEvent(ev);} catch (IllegalArgumentException ex) {ex.printstacktrace();}return false;}@OverrIDepublic boolean onIntercepttouchEvent(MotionEvent ev) {try {return super.onIntercepttouchEvent(ev);} catch (IllegalArgumentException ex) {ex.printstacktrace();}return false;}}

布局文件：

<?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:background="#fff"><com.showly.testimagedemo.vIEw.VIEwPagerFixedandroID:ID="@+ID/vIEwpager"androID:layout_wIDth="match_parent"androID:layout_height="match_parent" /><TextVIEwandroID:ID="@+ID/tv_num"androID:layout_wIDth="wrap_content"androID:layout_height="wrap_content"androID:layout_centerHorizontal="true"androID:textcolor="#ffffff"androID:textSize="30sp" /></relativeLayout>

实现过程就这样完成了。

需要Demo源码：点击这里。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

总结

以上是内存溢出为你收集整理的Android轮播图点击图片放大效果的实现方法全部内容，希望文章能够帮你解决Android轮播图点击图片放大效果的实现方法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。