使用ViewPager实现广告轮播图
使用的是DialogFragment， 布局文件：fragment_ads_dialog
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/ads_view_pager"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_centerInParent="true"
/>
<ImageView
android:id="@+id/dismiss"
android:layout_below="@id/ads_view_pager"
android:src="@mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
继承 DialogFragment
public class AdFragment extends DialogFragment {
@BindView(R.id.ads_view_pager)
ViewPager viewPager;
@BindView(R.id.dismiss)
ImageView dismiss;
Unbinder unbinder;
private int[] drawableIds = new int[]{R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d};
private List<View> views = new ArrayList<>();
private List<Integer> drawableList;
private Handler handler = new Handler();
private boolean stopAutoScroll = false;
private Runnable autoScrollRunnable = new Runnable() {
@Override
public void run() {
if (!stopAutoScroll) {
int currentItem = viewPager.getCurrentItem();
viewPager.setCurrentItem(currentItem + 1, true);
handler.postDelayed(autoScrollRunnable, 3000);
}
}
};
@Nullable
@Override
public View onCreateView(LayoutInflater inflater,
@Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_ads_dialog, container, false);
unbinder = ButterKnife.bind(this, view);
WindowManager.LayoutParams params = getDialog().getWindow().getAttributes();
params.windowAnimations = R.style.main_menu_animstyle;
getDialog().getWindow().setAttributes(params);
getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);
getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
getDialog().setCanceledOnTouchOutside(false);
initView();
return view;
}
private void initView() {
initData();
createPageItems();
ViewPagerScroller pagerScroller = new ViewPagerScroller(getActivity());
pagerScroller.setScrollDuration(1500);//设置时间，时间越长，速度越慢
pagerScroller.initViewPagerScroll(viewPager);
viewPager.setAdapter(new MyPagerAdapter());
viewPager.addOnPageChangeListener(new CycleScrollOnPageChangeListener());
// 当滑到第0页时，position 会设置到 views.size() - 2
// 先对其初始化，防止 setCurrentItem 因为时间延迟而出现闪动
viewPager.setCurrentItem(1, false);
viewPager.setPageTransformer(false, new CubeOutTransformer());
}
private void createPageItems() {
for (int i = 0; i < drawableList.size(); i++) {
ImageView imageView = new ImageView(getContext());
imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams
.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setImageResource(drawableList.get(i));
views.add(imageView);
}
}
private void initData() {
drawableList = new ArrayList<Integer>();
drawableList.add(drawableIds[drawableIds.length - 1]);
for (int id : drawableIds) {
drawableList.add(id);
}
drawableList.add(drawableIds[0]);
}
@Override
public void onStart() {
super.onStart();
Dialog dialog = getDialog();
if (dialog != null) {
DisplayMetrics dm = new DisplayMetrics();
getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
dialog.getWindow()
.setLayout((int) (dm.widthPixels * 0.8), ViewGroup.LayoutParams.WRAP_CONTENT);
}
}
@Override
public void onResume() {
super.onResume();
handler.postDelayed(autoScrollRunnable, 3000);
}
@Override
public void onPause() {
super.onPause();
handler.removeCallbacksAndMessages(null);
}
@Override
public void onDestroyView() {
super.onDestroyView();
unbinder.unbind();
}
@OnClick(R.id.dismiss)
public void onViewClicked() {
dismiss();
}
class CycleScrollOnPageChangeListener implements ViewPager.OnPageChangeListener {
@Override
public void onPageSelected(int arg0) {
}
@Override
public void onPageScrolled(int position, float offset, int offsetPixels) {
if (offset == 0) {
if (position == 0) {
viewPager.setCurrentItem(views.size() - 2, false);
} else if (position == (views.size() - 1)) {
viewPager.setCurrentItem(1, false);
}
}
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
}
class MyPagerAdapter extends PagerAdapter {
@Override
public int getCount() {
return views.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = views.get(position);
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(views.get(position));
}
}
@OnTouch(R.id.ads_view_pager)
public boolean onViewTouch(View view, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
stopAutoScroll = true;
handler.removeCallbacks(autoScrollRunnable);
handler.removeCallbacksAndMessages(null);
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
stopAutoScroll = false;
handler.postDelayed(autoScrollRunnable, 3000);
break;
}
return false;
}
}
过程解析
WindowManager.LayoutParams params = getDialog().getWindow().getAttributes();
params.windowAnimations = R.style.main_menu_animstyle;
getDialog().getWindow().setAttributes(params);
getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);
getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
getDialog().setCanceledOnTouchOutside(false);
该段代码主要用来设置dialog的样式，透明及无标题
ViewPagerScroller pagerScroller = new ViewPagerScroller(getActivity());
pagerScroller.setScrollDuration(1500);//设置时间，时间越长，速度越慢
pagerScroller.initViewPagerScroll(viewPager);
用于设置ViewPager每一页的切换速度，其中ViewPagerScroller类如下
public class ViewPagerScroller extends Scroller {
private int mScrollDuration = 2000; // 滑动速度
/**
* 设置速度速度
*
* @param duration
*/
public void setScrollDuration(int duration) {
this.mScrollDuration = duration;
}
public ViewPagerScroller(Context context) {
super(context);
}
public ViewPagerScroller(Context context, Interpolator interpolator) {
super(context, interpolator);
}
public ViewPagerScroller(Context context, Interpolator interpolator,
boolean flywheel) {
super(context, interpolator, flywheel);
}
@Override
public void startScroll(int startX, int startY, int dx, int dy, int duration) {
super.startScroll(startX, startY, dx, dy, mScrollDuration);
}
@Override
public void startScroll(int startX, int startY, int dx, int dy) {
super.startScroll(startX, startY, dx, dy, mScrollDuration);
}
public void initViewPagerScroll(ViewPager viewPager) {
try {
Field mScroller = ViewPager.class.getDeclaredField("mScroller");
mScroller.setAccessible(true);
mScroller.set(viewPager, this);
} catch (Exception e) {
e.printStackTrace();
}
}
}
在onStart 生命周期中，设置dialog的宽高
@Override
public void onStart() {
super.onStart();
Dialog dialog = getDialog();
if (dialog != null) {
DisplayMetrics dm = new DisplayMetrics();
getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
dialog.getWindow()
.setLayout((int) (dm.widthPixels * 0.8), ViewGroup.LayoutParams.WRAP_CONTENT);
}
}
重点部分是实现Viewpager的无限制滑动,默认在数据源列表的收尾，再添加两个item，如下；
private void initData() {
drawableList = new ArrayList<Integer>();
drawableList.add(drawableIds[drawableIds.length - 1]);
for (int id : drawableIds) {
drawableList.add(id);
}
drawableList.add(drawableIds[0]);
}
然后在滑动的时候，作如下处理
@Override
public void onPageScrolled(int position, float offset, int offsetPixels) {
if (offset == 0) {
if (position == 0) {
viewPager.setCurrentItem(views.size() - 2, false);
} else if (position == (views.size() - 1)) {
viewPager.setCurrentItem(1, false);
}
}
}
具体可以参看循环 ViewPager 的两种实现方法
至于，自动轮播则是使用了Handler消息机制
private Runnable autoScrollRunnable = new Runnable() {
@Override
public void run() {
if (!stopAutoScroll) {
int currentItem = viewPager.getCurrentItem();
viewPager.setCurrentItem(currentItem + 1, true);
handler.postDelayed(autoScrollRunnable, 3000);
}
}
};
另外附上ViewPager相关转场动画
基类
public abstract class ABaseTransformer implements PageTransformer {
/**
* Called each {@link #transformPage(View, float)}.
*
* @param view
* @param position
*/
protected abstract void onTransform(View view, float position);
@Override
public void transformPage(View view, float position) {
onPreTransform(view, position);
onTransform(view, position);
onPostTransform(view, position);
}
/**
* If the position offset of a fragment is less than negative one or greater than one, returning true will set the
* visibility of the fragment to {@link View#GONE}. Returning false will force the fragment to {@link View#VISIBLE}.
*
* @return
*/
protected boolean hideOffscreenPages() {
return true;
}
/**
* Indicates if the default animations of the view pager should be used.
*
* @return
*/
protected boolean isPagingEnabled() {
return false;
}
/**
* Called each {@link #transformPage(View, float)} before {{@link #onTransform(View, float)} is called.
*
* @param view
* @param position
*/
protected void onPreTransform(View view, float position) {
final float width = view.getWidth();
view.setRotationX(0);
view.setRotationY(0);
view.setRotation(0);
view.setScaleX(1);
view.setScaleY(1);
view.setPivotX(0);
view.setPivotY(0);
view.setTranslationY(0);
view.setTranslationX(isPagingEnabled() ? 0f : -width * position);
if (hideOffscreenPages()) {
view.setAlpha(position <= -1f || position >= 1f ? 0f : 1f);
} else {
view.setAlpha(1f);
}
}
/**
* Called each {@link #transformPage(View, float)} call after {@link #onTransform(View, float)} is finished.
*
* @param view
* @param position
*/
protected void onPostTransform(View view, float position) {
}
}
public class AccordionTransformer extends ABaseTransformer {
@Override
protected void onTransform(View view, float position) {
view.setPivotX(position < 0 ? 0 : view.getWidth());
view.setScaleX(position < 0 ? 1f + position : 1f - position);
}
}
public class BackgroundToForegroundTransformer extends ABaseTransformer {
@Override
protected void onTransform(View view, float position) {
final float height = view.getHeight();
final float width = view.getWidth();
final float scale = min(position < 0 ? 1f : Math.abs(1f - position), 0.5f);
view.setScaleX(scale);
view.setScaleY(scale);
view.setPivotX(width * 0.5f);
view.setPivotY(height * 0.5f);
view.setTranslationX(position < 0 ? width * position : -width * position * 0.25f);
}
private static final float min(float val, float min) {
return val < min ? min : val;
}
}
public class CubeInTransformer extends ABaseTransformer {
@Override
protected void onTransform(View view, float position) {
// Rotate the fragment on the left or right edge
view.setPivotX(position > 0 ? 0 : view.getWidth());
view.setPivotY(0);
view.setRotationY(-90f * position);
}
@Override
public boolean isPagingEnabled() {
return true;
}
}
public class CubeOutTransformer extends ABaseTransformer {
@Override
protected void onTransform(View view, float position) {
view.setPivotX(position < 0f ? view.getWidth() : 0f);
view.setPivotY(view.getHeight() * 0.5f);
view.setRotationY(90f * position);
}
@Override
public boolean isPagingEnabled() {
return true;
}
}
public class DepthPageTransformer extends ABaseTransformer {
private static final float MIN_SCALE = 0.75f;
@Override
protected void onTransform(View view, float position) {
if (position <= 0f) {
view.setTranslationX(0f);
view.setScaleX(1f);
view.setScaleY(1f);
} else if (position <= 1f) {
final float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setAlpha(1 - position);
view.setPivotY(0.5f * view.getHeight());
view.setTranslationX(view.getWidth() * -position);
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
}
}
@Override
protected boolean isPagingEnabled() {
return true;
}
}
public class FlipHorizontalTransformer extends ABaseTransformer {
@Override
protected void onTransform(View view, float position) {
final float rotation = 180f * position;
view.setAlpha(rotation > 90f || rotation < -90f ? 0 : 1);
view.setPivotX(view.getWidth() * 0.5f);
view.setPivotY(view.getHeight() * 0.5f);
view.setRotationY(rotation);
}
}
public class FlipVerticalTransformer extends ABaseTransformer {
@Override
protected void onTransform(View view, float position) {
final float rotation = -180f * position;
view.setAlpha(rotation > 90f || rotation < -90f ? 0f : 1f);
view.setPivotX(view.getWidth() * 0.5f);
view.setPivotY(view.getHeight() * 0.5f);
view.setRotationX(rotation);
}
}
public class ForegroundToBackgroundTransformer extends ABaseTransformer {
@Override
protected void onTransform(View view, float position) {
final float height = view.getHeight();
final float width = view.getWidth();
final float scale = min(position > 0 ? 1f : Math.abs(1f + position), 0.5f);
view.setScaleX(scale);
view.setScaleY(scale);
view.setPivotX(width * 0.5f);
view.setPivotY(height * 0.5f);
view.setTranslationX(position > 0 ? width * position : -width * position * 0.25f);
}
private static final float min(float val, float min) {
return val < min ? min : val;
}
}
public class RotateDownTransformer extends ABaseTransformer {
private static final float ROT_MOD = -15f;
@Override
protected void onTransform(View view, float position) {
final float width = view.getWidth();
final float height = view.getHeight();
final float rotation = ROT_MOD * position * -1.25f;
view.setPivotX(width * 0.5f);
view.setPivotY(height);
view.setRotation(rotation);
}
@Override
protected boolean isPagingEnabled() {
return true;
}
}
public class RotatePageTransformer implements ViewPager.PageTransformer {
private float maxRotate = 90f; // 最大旋转角度
@Override
public void transformPage(View page, float position) {
if (position < -1){
page.setPivotX(page.getWidth());
page.setPivotY(page.getHeight()/2 );
page.setRotationY(-maxRotate);
}else if(position < 0){
page.setPivotX(page.getWidth() * (0.5f + 0.5f * (- position))); // X轴支点坐标变化范围[page
// .getWidth()/2, page.getWidth()]
page.setPivotY(page.getHeight()/2 );
page.setRotationY(maxRotate * position);
}else if(position <= 1){
page.setPivotX(page.getWidth() * 0.5f * (1 - position)); // // X轴支点坐标变化范围[0, page
// .getWidth()/2]
page.setPivotY(page.getHeight()/2 );
page.setRotationY(maxRotate * position);
}else{
page.setPivotX(0);
page.setPivotY(page.getHeight()/2 );
page.setRotationY(maxRotate);
}
}
}
public class RotateUpTransformer extends ABaseTransformer {
private static final float ROT_MOD = -15f;
@Override
protected void onTransform(View view, float position) {
final float width = view.getWidth();
final float rotation = ROT_MOD * position;
view.setPivotX(width * 0.5f);
view.setPivotY(0f);
view.setTranslationX(0f);
view.setRotation(rotation);
}
@Override
protected boolean isPagingEnabled() {
return true;
}
}
public class StackTransformer extends ABaseTransformer {
@Override
protected void onTransform(View view, float position) {
view.setTranslationX(position < 0 ? 0f : -view.getWidth() * position);
}
}
public class TabletTransformer extends ABaseTransformer {
private static final Matrix OFFSET_MATRIX = new Matrix();
private static final Camera OFFSET_CAMERA = new Camera();
private static final float[] OFFSET_TEMP_FLOAT = new float[2];
@Override
protected void onTransform(View view, float position) {
final float rotation = (position < 0 ? 30f : -30f) * Math.abs(position);
view.setTranslationX(getOffsetXForRotation(rotation, view.getWidth(), view.getHeight()));
view.setPivotX(view.getWidth() * 0.5f);
view.setPivotY(0);
view.setRotationY(rotation);
}
protected static final float getOffsetXForRotation(float degrees, int width, int height) {
OFFSET_MATRIX.reset();
OFFSET_CAMERA.save();
OFFSET_CAMERA.rotateY(Math.abs(degrees));
OFFSET_CAMERA.getMatrix(OFFSET_MATRIX);
OFFSET_CAMERA.restore();
OFFSET_MATRIX.preTranslate(-width * 0.5f, -height * 0.5f);
OFFSET_MATRIX.postTranslate(width * 0.5f, height * 0.5f);
OFFSET_TEMP_FLOAT[0] = width;
OFFSET_TEMP_FLOAT[1] = height;
OFFSET_MATRIX.mapPoints(OFFSET_TEMP_FLOAT);
return (width - OFFSET_TEMP_FLOAT[0]) * (degrees > 0.0f ? 1.0f : -1.0f);
}
}
public class ZoomInTransformer extends ABaseTransformer {
@Override
protected void onTransform(View view, float position) {
final float scale = position < 0 ? position + 1f : Math.abs(1f - position);
view.setScaleX(scale);
view.setScaleY(scale);
view.setPivotX(view.getWidth() * 0.5f);
view.setPivotY(view.getHeight() * 0.5f);
view.setAlpha(position < -1f || position > 1f ? 0f : 1f - (scale - 1f));
}
}
public class ZoomOutSlideTransformer extends ABaseTransformer {
private static final float MIN_SCALE = 0.85f;
private static final float MIN_ALPHA = 0.5f;
@Override
protected void onTransform(View view, float position) {
if (position >= -1 || position <= 1) {
// Modify the default slide transition to shrink the page as well
final float height = view.getHeight();
final float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
final float vertMargin = height * (1 - scaleFactor) / 2;
final float horzMargin = view.getWidth() * (1 - scaleFactor) / 2;
// Center vertically
view.setPivotY(0.5f * height);
if (position < 0) {
view.setTranslationX(horzMargin - vertMargin / 2);
} else {
view.setTranslationX(-horzMargin + vertMargin / 2);
}
// Scale the page down (between MIN_SCALE and 1)
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
// Fade the page relative to its size.
view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA));
}
}
}
public class ZoomOutTranformer extends ABaseTransformer {
@Override
protected void onTransform(View view, float position) {
final float scale = 1f + Math.abs(position);
view.setScaleX(scale);
view.setScaleY(scale);
view.setPivotX(view.getWidth() * 0.5f);
view.setPivotY(view.getHeight() * 0.5f);
view.setAlpha(position < -1f || position > 1f ? 0f : 1f - (scale - 1f));
if(position == -1){
view.setTranslationX(view.getWidth() * -1);
}
}
}
具体效果，暂不上图了，更多效果 原
ViewPager切换动画
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
