【移动应用开发技术】怎么在Android中实现一个轮播图点击图片放大效果

【移动应用开发技术】怎么在Android中实现一个轮播图点击图片放大效果

本篇文章为大家展示了怎么在Android中实现一个轮播图点击图片放大效果，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。Android是一种基于Linux内核的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板电脑，由美国Google公司和开放手机联盟领导及开发。项目中添加相关的依赖implementation

'com.youth.banner:banner:1.4.9'

implementation

'com.github.bumptech.glide:glide:4.5.0'

implementation

'mit451: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("/article/201908/2a919def19fc47e3aa0d75d8c227ab1b.jpg");

list_path.add("/article/201908/d027d1efc0564c44bb979ba0bd21f560.jpg");

list_path.add("/article/201908/bbb930d66e5a48baa8d3c143544d7631.jpg");

list_path.add("/article/201908/fb1721b8c9be4da9949fcdd26fc902a2.jpg");

list_path.add("/article/201908/08b58dde9b284638b44e2d03c4cb9acf.jpg");

list_path.add("/article/201908/d3caeb6129ee43df87f5c1e1058d96fc.jpg");

list_path.add("/article/201908/9fd01c4add07473db31ba850f20a7232.jpg");

list_path.add("/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需要展示图片的urlpublic

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和onInterceptTouchEventpublic

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(MotionEven