前言

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

实现步骤:

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;

@Override
protected 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();
}

//轮播图的监听方法
@Override
public 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 {
@Override
public 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;

@Override
protected 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() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
tvNum.setText(String.valueOf(position   1)   "/"   imgData.size());
}

@Override
public void onPageSelected(int position) {
}

@Override
public 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;
}

@Override
public Fragment getItem(int position) {
return PhotoFragment.newInstance(urlList.get(position));
}

@Override
public 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;
}

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
url = getArguments().getString("url");
}

@Nullable
@Override
public 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() {
@Override
public boolean onLongClick(View view) {
//Toast.makeText(getActivity(), "长按事件", Toast.LENGTH_SHORT).show();
return true;
}
});

//点击事件
mPhotoView.setOnPhotoTapListener(new PhotoViewAttacher.OnPhotoTapListener() {
@Override
public 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);
}

@Override
public boolean onTouchEvent(MotionEvent ev) {
try {
return super.onTouchEvent(ev);
} catch (IllegalArgumentException ex) {
ex.printStackTrace();
}
return false;
}

@Override
public 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.ViewPagerFixed
android:id="@ id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />

<TextView
android: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源码:点击这里。

总结

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

Android轮播图点击图片放大效果的实现方法的更多相关文章

  1. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  2. html5 canvas合成海报所遇问题及解决方案总结

    这篇文章主要介绍了html5 canvas合成海报所遇问题及解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. Html5 video标签视频的最佳实践

    这篇文章主要介绍了Html5 video标签视频的最佳实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  4. HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题

    HTML5在微信内置浏览器下,在右上角菜单的调整字体导致页面显示错乱的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

  5. ios – containerURLForSecurityApplicationGroupIdentifier:在iPhone和Watch模拟器上给出不同的结果

    我使用默认的XCode模板创建了一个WatchKit应用程序.我向iOSTarget,WatchkitAppTarget和WatchkitAppExtensionTarget添加了应用程序组权利.(这是应用程序组名称:group.com.lombax.fiveminutes)然后,我尝试使用iOSApp和WatchKitExtension访问共享文件夹URL:延期:iOS应用:但是,测试NSURL

  6. Ionic – Splash Screen适用于iOS,但不适用于Android

    我有一个离子应用程序,其中使用CLI命令离子资源生成的启动画面和图标iOS版本与正在渲染的启动画面完美配合,但在Android版本中,只有在加载应用程序时才会显示白屏.我检查了config.xml文件,所有路径看起来都是正确的,生成的图像出现在相应的文件夹中.(我使用了splash.psd模板来生成它们.我错过了什么?这是config.xml文件供参考,我觉得我在这里做错了–解决方法在config.xml中添加以下键:它对我有用!

  7. ios – 无法启动iPhone模拟器

    /Library/Developer/CoreSimulator/Devices/530A44CB-5978-4926-9E91-E9DBD5BFB105/data/Containers/Bundle/Application/07612A5C-659D-4C04-ACD3-D211D2830E17/ProductName.app/ProductName然后,如果您在Xcode构建设置中选择标准体系结构并再次构建和运行,则会产生以下结果:dyld:lazysymbolbindingFailed:Symbol

  8. Xamarin iOS图像在Grid内部重叠

    heyo,所以在Xamarin我有一个使用并在其中包含一对,所有这些都包含在内.这在Xamarin.Android中看起来完全没问题,但是在Xamarin.iOS中,图像与标签重叠.我不确定它的区别是什么–为什么它在Xamarin.Android中看起来不错但在iOS中它的全部都不稳定?

  9. 在iOS上向后播放HTML5视频

    我试图在iPad上反向播放HTML5视频.HTML5元素包括一个名为playbackRate的属性,它允许以更快或更慢的速率或相反的方式播放视频.根据Apple’sdocumentation,iOS不支持此属性.通过每秒多次设置currentTime属性,可以反复播放,而无需使用playbackRate.这种方法适用于桌面Safari,但似乎在iOS设备上的搜索限制为每秒1次更新–在我的情况下太慢了.有没有办法在iOS设备上向后播放HTML5视频?解决方法iOS6Safari现在支持playbackRat

  10. 使用 Swift 语言编写 Android 应用入门

    Swift标准库可以编译安卓armv7的内核,这使得可以在安卓移动设备上执行Swift语句代码。做梦,虽然Swift编译器可以胜任在安卓设备上编译Swift代码并运行。这需要的不仅仅是用Swift标准库编写一个APP,更多的是你需要一些框架来搭建你的应用用户界面,以上这些Swift标准库不能提供。简单来说,构建在安卓设备上使用的Swiftstdlib需要libiconv和libicu。通过命令行执行以下命令:gitclonegit@github.com:SwiftAndroid/libiconv-libi

随机推荐

  1. Flutter 网络请求框架封装详解

    这篇文章主要介绍了Flutter 网络请求框架封装详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. Android单选按钮RadioButton的使用详解

    今天小编就为大家分享一篇关于Android单选按钮RadioButton的使用详解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

  3. 解决android studio 打包发现generate signed apk 消失不见问题

    这篇文章主要介绍了解决android studio 打包发现generate signed apk 消失不见问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  4. Android 实现自定义圆形listview功能的实例代码

    这篇文章主要介绍了Android 实现自定义圆形listview功能的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. 详解Android studio 动态fragment的用法

    这篇文章主要介绍了Android studio 动态fragment的用法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. Android用RecyclerView实现图标拖拽排序以及增删管理

    这篇文章主要介绍了Android用RecyclerView实现图标拖拽排序以及增删管理的方法,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下

  7. Android notifyDataSetChanged() 动态更新ListView案例详解

    这篇文章主要介绍了Android notifyDataSetChanged() 动态更新ListView案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下

  8. Android自定义View实现弹幕效果

    这篇文章主要为大家详细介绍了Android自定义View实现弹幕效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. Android自定义View实现跟随手指移动

    这篇文章主要为大家详细介绍了Android自定义View实现跟随手指移动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. Android实现多点触摸操作

    这篇文章主要介绍了Android实现多点触摸操作,实现图片的放大、缩小和旋转等处理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

返回
顶部